diff --git a/src/plugins/directPlugins/DirectPluginSlot.jsx b/src/plugins/directPlugins/DirectPluginSlot.jsx index fa340a94..b28afd52 100644 --- a/src/plugins/directPlugins/DirectPluginSlot.jsx +++ b/src/plugins/directPlugins/DirectPluginSlot.jsx @@ -7,23 +7,23 @@ import organizePlugins from './utils'; const DirectPluginSlot = ({ defaultContents, slotId, renderWidget }) => { const allPluginChanges = React.useContext(DirectPluginContext); - const contents = React.useMemo(() => { + const preparedWidgets = React.useMemo(() => { const slotChanges = allPluginChanges.getDirectSlotChanges()[slotId] ?? []; return organizePlugins(defaultContents, slotChanges); }, [allPluginChanges, defaultContents, slotId]); return ( <> - {contents.map((c) => { - if (c.hidden) { + {preparedWidgets.map((preppedWidget) => { + if (preppedWidget.hidden) { return null; } - if (c.wrappers) { + if (preppedWidget.wrappers) { // TODO: define how the reduce logic is able to wrap widgets and make it testable // eslint-disable-next-line max-len - return c.wrappers.reduce((widget, wrapper) => React.createElement(wrapper, { widget, key: c.id }), renderWidget(c)); + return preppedWidget.wrappers.reduce((widget, wrapper) => React.createElement(wrapper, { widget, key: preppedWidget.id }), renderWidget(preppedWidget)); } - return renderWidget(c); + return renderWidget(preppedWidget); })} ); diff --git a/src/plugins/directPlugins/mocks/DefaultComponentMock.jsx b/src/plugins/directPlugins/mocks/DefaultComponentMock.jsx deleted file mode 100644 index 32eaca15..00000000 --- a/src/plugins/directPlugins/mocks/DefaultComponentMock.jsx +++ /dev/null @@ -1,33 +0,0 @@ -// eslint-disable-next-line import/no-extraneous-dependencies -import { Icon } from '@edx/paragon'; -import { DirectPluginSlot, DirectPluginContext } from '..'; -import { navLinksPlugin } from './PluginComponentsMock'; - -// TODO: remove DirectPluginsContext and enabledPlugins from here once we have an example app -// these simply demonstrate how the root App would have needed this setup in order to pass in the plugin config -// and make it available to a given DirectPluginSlot - -const enabledPlugins = [ - navLinksPlugin, -]; - -const MyApp = () => ( - -
- ( - - {link.content.label} - - )} - /> -
-
-); - -export default MyApp; diff --git a/src/plugins/directPlugins/mocks/PluginComponentsMock.jsx b/src/plugins/directPlugins/mocks/PluginComponentsMock.jsx deleted file mode 100644 index b85dd580..00000000 --- a/src/plugins/directPlugins/mocks/PluginComponentsMock.jsx +++ /dev/null @@ -1,65 +0,0 @@ -/* eslint-disable react/prop-types */ -// eslint-disable-next-line import/no-extraneous-dependencies -import React from 'react'; -import { - House, Star, InsertDriveFile, Login, -} from '@edx/paragon/icons'; -import { DirectPluginOperations } from '..'; - -/** This is for us to be able to mock in tests */ -const isAdminHelper = () => true; - -/** This is a React widget that wraps its children and makes them visible only to administrators */ -const HideExceptForAdmin = ({ widget }) => { - const isAdmin = isAdminHelper(); - return {isAdmin ? widget : null}; -}; - -const navLinksPlugin = { - id: 'links-demo', // id isn't used anywhere, but can be extended to - defaultComponentProps: [ - { - id: 'home', - priority: 5, - content: { url: '/', icon: House, label: 'Home' }, - }, - { - id: 'lookup', - priority: 25, - content: { url: '/lookup', icon: Star, label: 'Lookup' }, - }, - { - id: 'drafts', - priority: 35, - content: { url: '/drafts', icon: InsertDriveFile, label: 'Drafts' }, - }, - ], - getDirectSlotChanges() { - return { - 'side-bar-nav': [ // slot id that is used by directpluginslot - // Hide the "Drafts" link, except for administrators: - { - op: DirectPluginOperations.Wrap, - widgetId: 'drafts', - wrapper: HideExceptForAdmin, - }, - // Add a new login link after the rest of default plugins: - { - op: DirectPluginOperations.Insert, - widget: { - id: 'login', - priority: 50, - content: { - url: '/login', icon: Login, label: 'Login', - }, - }, - }, - ], - }; - }, -}; - -export { - isAdminHelper, - navLinksPlugin, -}; diff --git a/src/plugins/directPlugins/utils.test.jsx b/src/plugins/directPlugins/utils.test.jsx index 423bf3bb..961d40d4 100644 --- a/src/plugins/directPlugins/utils.test.jsx +++ b/src/plugins/directPlugins/utils.test.jsx @@ -3,9 +3,7 @@ import '@testing-library/jest-dom'; import organizePlugins from './utils'; import { DirectPluginOperations } from './DirectPlugin'; -jest.unmock('./utils'); - -const mockModifyComponent = (widget) => { +const mockModifyWidget = (widget) => { const newContent = { url: '/search', label: 'Search', @@ -15,7 +13,7 @@ const mockModifyComponent = (widget) => { return modifiedWidget; }; -function mockWrapComponent({ widget }) { +function mockWrapWidget({ widget }) { const isAdmin = true; return isAdmin ? widget : null; } @@ -24,7 +22,7 @@ const mockSlotChanges = [ { op: DirectPluginOperations.Wrap, widgetId: 'drafts', - wrapper: mockWrapComponent, + wrapper: mockWrapWidget, }, { op: DirectPluginOperations.Hide, @@ -33,7 +31,7 @@ const mockSlotChanges = [ { op: DirectPluginOperations.Modify, widgetId: 'lookUp', - fn: mockModifyComponent, + fn: mockModifyWidget, }, { op: DirectPluginOperations.Insert, @@ -132,7 +130,7 @@ describe('organizePlugins', () => { const widget = plugins.find((w) => w.id === 'drafts'); expect(plugins.length).toEqual(4); expect(widget.wrappers.length).toEqual(2); - expect(widget.wrappers[0]).toEqual(mockWrapComponent); + expect(widget.wrappers[0]).toEqual(mockWrapWidget); expect(widget.wrappers[1]).toEqual(newMockWrapComponent); });