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 = () => (
-
-
-
-);
-
-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);
});