refactor: plugin slot implementation

src/containers/CoursesPanel/CourseList/index.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import { Pagination } from '@openedx/paragon';
 import {
@@ -8,11 +7,13 @@ import {
 import CourseCard from 'containers/CourseCard';
 
 import { useIsCollapsed } from './hooks';
+import { useCourseListData } from '../hooks';
 
-export const CourseList = ({
-  filterOptions, setPageNumber, numPages, showFilters, visibleList,
-}) => {
+export const CourseList = () => {
   const isCollapsed = useIsCollapsed();
+  const {
+    filterOptions, setPageNumber, numPages, showFilters, visibleList,
+  } = useCourseListData();
   return (
     <>
       {showFilters && (
@@ -38,14 +39,4 @@ export const CourseList = ({
   );
 };
 
-CourseList.propTypes = {
-  showFilters: PropTypes.bool.isRequired,
-  // eslint-disable-next-line react/forbid-prop-types
-  visibleList: PropTypes.arrayOf(PropTypes.object).isRequired,
-  // eslint-disable-next-line react/forbid-prop-types
-  filterOptions: PropTypes.object.isRequired,
-  numPages: PropTypes.number.isRequired,
-  setPageNumber: PropTypes.func.isRequired,
-};
-
 export default CourseList;

src/containers/CoursesPanel/CourseList/index.test.jsx

@@ -2,11 +2,16 @@ import { shallow } from '@edx/react-unit-test-utils';
 
 import { useIsCollapsed } from './hooks';
 import CourseList from '.';
+import { useCourseListData } from '../hooks';
 
 jest.mock('./hooks', () => ({
   useIsCollapsed: jest.fn(),
 }));
 
+jest.mock('../hooks', () => ({
+  useCourseListData: jest.fn(),
+}));
+
 jest.mock('containers/CourseCard', () => 'CourseCard');
 jest.mock('containers/CourseFilterControls', () => ({
   ActiveCourseFilters: 'ActiveCourseFilters',
@@ -22,9 +27,12 @@ describe('CourseList', () => {
   };
   useIsCollapsed.mockReturnValue(false);
 
-  const createWrapper = (courseListData = defaultCourseListData) => (
-    shallow(<CourseList {...courseListData} />)
-  );
+  const createWrapper = (courseListData = defaultCourseListData) => {
+    useCourseListData.mockReturnValue(courseListData);
+    return (
+      shallow(<CourseList />)
+    );
+  };
 
   describe('no courses or filters', () => {
     test('snapshot', () => {

src/containers/CoursesPanel/__snapshots__/index.test.jsx.snap

@@ -18,11 +18,7 @@ exports[`CoursesPanel no courses snapshot 1`] = `
       <CourseFilterControls />
     </div>
   </div>
-  <PluginSlot
-    id="no_courses_view"
-  >
-    <NoCoursesView />
-  </PluginSlot>
+  <NoCoursesViewSlot />
 </div>
 `;
 
@@ -44,16 +40,6 @@ exports[`CoursesPanel with courses snapshot 1`] = `
       <CourseFilterControls />
     </div>
   </div>
-  <PluginSlot
-    id="course_list"
-  >
-    <CourseList
-      filterOptions={{}}
-      numPages={1}
-      setPageNumber={[MockFunction setPageNumber]}
-      showFilters={false}
-      visibleList={[]}
-    />
-  </PluginSlot>
+  <CourseListSlot />
 </div>
 `;

src/containers/CoursesPanel/index.jsx

@@ -1,15 +1,13 @@
 import React from 'react';
 
-import { PluginSlot } from '@openedx/frontend-plugin-framework';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { reduxHooks } from 'hooks';
 import {
   CourseFilterControls,
 } from 'containers/CourseFilterControls';
-import NoCoursesView from './NoCoursesView';
-
-import CourseList from './CourseList';
+import CourseListSlot from 'plugin-slots/CourseListSlot';
+import NoCoursesViewSlot from 'plugin-slots/NoCoursesViewSlot';
 
 import { useCourseListData } from './hooks';
 
@@ -35,17 +33,9 @@ export const CoursesPanel = () => {
         </div>
       </div>
       {hasCourses ? (
-        <PluginSlot
-          id="course_list"
-        >
-          <CourseList {...courseListData} />
-        </PluginSlot>
+        <CourseListSlot />
       ) : (
-        <PluginSlot
-          id="no_courses_view"
-        >
-          <NoCoursesView />
-        </PluginSlot>
+        <NoCoursesViewSlot />
       )}
     </div>
   );

src/containers/Dashboard/DashboardLayout.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import { Container, Col, Row } from '@openedx/paragon';
 
-import WidgetSidebar from '../WidgetContainers/WidgetSidebar';
+import WidgetSidebarSlot from 'plugin-slots/WidgetSidebarSlot';
 
 import hooks from './hooks';
 
@@ -42,7 +42,7 @@ export const DashboardLayout = ({ children }) => {
         </Col>
         <Col {...columnConfig.sidebar} className="sidebar-column">
           {!isCollapsed && (<h2 className="course-list-title">&nbsp;</h2>)}
-          <WidgetSidebar />
+          <WidgetSidebarSlot />
         </Col>
       </Row>
     </Container>

src/plugin-slots/CourseListSlot/README.md

@@ -0,0 +1,43 @@
+# Course List Slot
+
+### Slot ID: `course_list_slot`
+
+## Description
+
+This slot is used for replacing or adding content around the `CourseList` component. The `CourseListSlot` is only rendered if the learner has enrolled in at least one course.
+
+## Example
+
+The space will show the `CourseList` component by default. This can be disabled in the configuration with the `keepDefault` boolean. 
+
+![Screenshot of the CourseListSlot](./images/course_list_slot.png)
+
+Setting the MFE's `env.config.jsx` to the following will replace the default experience with a `CustomCourseList` component.
+
+![Screenshot of a custom course list](./images/custom_course_list.png)
+
+```js
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+import { CustomCourseList } from '<package-that-exports-your-component>'
+
+const config = {
+  pluginSlots: {
+    course_list_slot: {
+      keepDefault: false,
+      plugins: [
+        {
+          op: ops.Insert,
+          widget: {
+            id: 'custom_course_list',
+            type: DIRECT_PLUGIN,
+            priority: 60,
+            RenderWidget: CustomCourseList,
+          },
+        },
+      ],
+    },
+  },
+}
+
+export default config;
+```

src/plugin-slots/CourseListSlot/index.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import CourseList from 'containers/CoursesPanel/CourseList';
+
+export const CourseListSlot = () => (
+  <PluginSlot id="course_list_slot">
+    <CourseList />
+  </PluginSlot>
+);
+export default CourseListSlot;

src/plugin-slots/NoCoursesViewSlot/README.md

@@ -0,0 +1,43 @@
+# No Courses View Slot
+
+### Slot ID: `no_courses_view_slot`
+
+## Description
+
+This slot is used for replacing or adding content around the `NoCoursesView` component. The `NoCoursesViewSlot` only renders if the learner has not yet enrolled in any courses.
+
+## Example
+
+The space will show the `NoCoursesView` by default. This can be disabled in the configuration with the `keepDefault` boolean.
+
+![Screenshot of the no courses view](./images/no_courses_view_slot.png)
+
+Setting the MFE's `env.config.jsx` to the following will replace the default experience with a `CustomNoCoursesCTA` component.
+
+![Screenshot of a custom no courses view](./images/custom_no_courses_view.png)
+
+```js
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+import { CustomSidebarPanel } from 'package-that-exports-your-component';
+
+const config = {
+  pluginSlots: {
+    no_courses_view_slot: {
+      keepDefault: false,
+      plugins: [
+        {
+          op: ops.Insert,
+          widget: {
+            id: 'custom_no_courses_CTA',
+            type: DIRECT_PLUGIN,
+            priority: 60,
+            RenderWidget: CustomSidebarPanel,
+          },
+        },
+      ],
+    },
+  },
+}
+
+export default config;
+```

src/plugin-slots/NoCoursesViewSlot/index.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import NoCoursesView from 'containers/CoursesPanel/NoCoursesView';
+
+export const NoCoursesViewSlot = () => (
+  <PluginSlot id="no_courses_view_slot">
+    <NoCoursesView />
+  </PluginSlot>
+);
+
+export default NoCoursesViewSlot;

src/plugin-slots/README.md

@@ -1,3 +1,6 @@
 # `frontend-app-learner-dashboard` Plugin Slots
 
 * [`footer_slot`](./FooterSlot/)
+* [`widget_sidebar_slot`](./WidgetSidebarSlot/)
+* [`course_list_slot`](./CourseListSlot/)
+* [`no_courses_view_slot`](./NoCoursesViewSlot/)

src/plugin-slots/WidgetSidebarSlot/README.md

@@ -0,0 +1,43 @@
+# Widget Sidebar Slot
+
+### Slot ID: `widget_sidebar_slot`
+
+## Description
+
+This slot is used for adding content to the right-hand sidebar.
+
+## Example
+
+The space will show the `LookingForChallengeWidget` by default. This can be disabled in the configuration with the `keepDefault` boolean.
+
+![Screenshot of the widget sidebar](./images/looking_for_challenge_widget.png)
+
+Setting the MFE's `env.config.jsx` to the following will replace the default experience with a `CustomSidebarPanel` component.
+
+![Screenshot of a custom call-to-action in the sidebar](./images/custom_CTA_sidebar.png)
+
+```js
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+import { CustomSidebarPanel } from 'package-that-exports-your-component';
+
+const config = {
+  pluginSlots: {
+     widget_sidebar_slot: {
+      keepDefault: false,
+      plugins: [
+        {
+          op: ops.Insert,
+          widget: {
+            id: 'custom_sidebar_panel',
+            type: DIRECT_PLUGIN,
+            priority: 60,
+            RenderWidget: CustomSidebarPanel,
+          },
+        },
+      ],
+    },
+  },
+}
+
+export default config;
+```

src/plugin-slots/WidgetSidebarSlot/index.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import LookingForChallengeWidget from 'widgets/LookingForChallengeWidget';
+
+// eslint-disable-next-line arrow-body-style
+export const WidgetSidebar = () => (
+  <PluginSlot id="widget_sidebar_plugin_slot">
+    <LookingForChallengeWidget />
+  </PluginSlot>
+);
+
+export default WidgetSidebar;