refactor: plugin slot implementation (openedx#465)

src/containers/CoursesPanel/CourseList/index.jsx

@@ -9,9 +9,10 @@ import CourseCard from 'containers/CourseCard';
 
 import { useIsCollapsed } from './hooks';
 
-export const CourseList = ({
-  filterOptions, setPageNumber, numPages, showFilters, visibleList,
-}) => {
+export const CourseList = ({ courseListData }) => {
+  const {
+    filterOptions, setPageNumber, numPages, showFilters, visibleList,
+  } = courseListData;
   const isCollapsed = useIsCollapsed();
   return (
     <>
@@ -38,14 +39,16 @@ export const CourseList = ({
   );
 };
 
-CourseList.propTypes = {
+export const courseListDataShape = PropTypes.shape({
   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,
+  visibleList: PropTypes.arrayOf(PropTypes.shape()).isRequired,
+  filterOptions: PropTypes.shape().isRequired,
   numPages: PropTypes.number.isRequired,
   setPageNumber: PropTypes.func.isRequired,
+});
+
+CourseList.propTypes = {
+  courseListData: courseListDataShape,
 };
 
 export default CourseList;

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

@@ -23,7 +23,7 @@ describe('CourseList', () => {
   useIsCollapsed.mockReturnValue(false);
 
   const createWrapper = (courseListData = defaultCourseListData) => (
-    shallow(<CourseList {...courseListData} />)
+    shallow(<CourseList courseListData={courseListData} />)
   );
 
   describe('no courses or filters', () => {

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,16 @@ 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
+    courseListData={
+      {
+        "filterOptions": {},
+        "numPages": 1,
+        "setPageNumber": [MockFunction setPageNumber],
+        "showFilters": false,
+        "visibleList": [],
+      }
+    }
+  />
 </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';
 
@@ -34,19 +32,7 @@ export const CoursesPanel = () => {
           <CourseFilterControls {...courseListData.filterOptions} />
         </div>
       </div>
-      {hasCourses ? (
-        <PluginSlot
-          id="course_list"
-        >
-          <CourseList {...courseListData} />
-        </PluginSlot>
-      ) : (
-        <PluginSlot
-          id="no_courses_view"
-        >
-          <NoCoursesView />
-        </PluginSlot>
-      )}
+      {hasCourses ? <CourseListSlot courseListData={courseListData} /> : <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/containers/Dashboard/DashboardLayout.test.jsx

@@ -36,9 +36,9 @@ describe('DashboardLayout', () => {
       const columns = el.instance.findByType(Row)[0].findByType(Col);
       expect(columns[0].children).not.toHaveLength(0);
     });
-    it('displays WidgetSidebar in second column', () => {
+    it('displays WidgetSidebarSlot in second column', () => {
       const columns = el.instance.findByType(Row)[0].findByType(Col);
-      expect(columns[1].findByType('WidgetSidebar')).toHaveLength(1);
+      expect(columns[1].findByType('WidgetSidebarSlot')).toHaveLength(1);
     });
   };
   const testSidebarLayout = () => {

src/containers/Dashboard/__snapshots__/DashboardLayout.test.jsx.snap

@@ -38,7 +38,7 @@ exports[`DashboardLayout collapsed sidebar not showing snapshot 1`] = `
         }
       }
     >
-      <WidgetSidebar />
+      <WidgetSidebarSlot />
     </Col>
   </Row>
 </Container>
@@ -82,7 +82,7 @@ exports[`DashboardLayout collapsed sidebar showing snapshot 1`] = `
         }
       }
     >
-      <WidgetSidebar />
+      <WidgetSidebarSlot />
     </Col>
   </Row>
 </Container>
@@ -131,7 +131,7 @@ exports[`DashboardLayout not collapsed sidebar not showing snapshot 1`] = `
       >
          
       </h2>
-      <WidgetSidebar />
+      <WidgetSidebarSlot />
     </Col>
   </Row>
 </Container>
@@ -180,7 +180,7 @@ exports[`DashboardLayout not collapsed sidebar showing snapshot 1`] = `
       >
          
       </h2>
-      <WidgetSidebar />
+      <WidgetSidebarSlot />
     </Col>
   </Row>
 </Container>

src/plugin-slots/CourseListSlot/README.md

@@ -0,0 +1,60 @@
+# Course List Slot
+
+### Slot ID: `course_list_slot`
+
+## Plugin Props
+
+* courseListData
+
+## 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 list of course titles.
+
+![Screenshot of a custom course list](./images/readme_custom_course_list.png)
+
+```js
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    course_list_slot: {
+      // Hide the default CourseList component
+      keepDefault: false,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_course_list',
+            type: DIRECT_PLUGIN,
+            priority: 60,
+            RenderWidget: ({ courseListData }) => {
+              // Extract the "visibleList"
+              const courses = courseListData.visibleList;
+              // Render a list of course names
+              return (
+                <div>
+                  {courses.map(courseData => (
+                    <p>
+                      {courseData.course.courseName}
+                    </p>
+                  ))}
+                </div>
+              )
+            },
+          },
+        },
+      ],
+    },
+  },
+}
+
+export default config;
+```

src/plugin-slots/CourseListSlot/index.jsx

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

src/plugin-slots/NoCoursesViewSlot/README.md

@@ -0,0 +1,47 @@
+# 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 custom call-to-action component.
+
+![Screenshot of a custom no courses view](./images/readme_custom_no_courses_view.png)
+
+```js
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    no_courses_view_slot: {
+      // Hide the default NoCoursesView component
+      keepDefault: false,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_no_courses_CTA',
+            type: DIRECT_PLUGIN,
+            priority: 60,
+            RenderWidget: () => (
+              <h3>
+                Check out our catalog of courses and start learning today!
+              </h3>
+            ),
+          },
+        },
+      ],
+    },
+  },
+}
+
+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/)