feat: Add course completion slot for Progress Tab

src/course-home/progress-tab/ProgressTab.jsx

@@ -1,23 +1,22 @@
 import React, { useMemo } from 'react';
 import { useWindowSize } from '@openedx/paragon';
+import { useModel } from '@src/generic/model-store';
 import { useParams } from 'react-router-dom';
 
-import ProgressTabCertificateStatusSidePanelSlot from '../../plugin-slots/ProgressTabCertificateStatusSidePanelSlot';
-
-import CourseCompletion from './course-completion/CourseCompletion';
+import ProgressTabCertificateStatusMainBodySlot from '@src/plugin-slots/ProgressTabCertificateStatusMainBodySlot';
+import ProgressTabCertificateStatusSidePanelSlot from '@src/plugin-slots/ProgressTabCertificateStatusSidePanelSlot';
+import ProgressTabCourseCompletionSlot from '@src/plugin-slots/ProgressTabCourseCompletionSlot';
+import ProgressTabCourseGradeSlot from '@src/plugin-slots/ProgressTabCourseGradeSlot';
+import ProgressTabGradeBreakdownSlot from '@src/plugin-slots/ProgressTabGradeBreakdownSlot';
+import ProgressTabRelatedLinksSlot from '@src/plugin-slots/ProgressTabRelatedLinksSlot';
 import ProgressHeader from './ProgressHeader';
-
-import ProgressTabCertificateStatusMainBodySlot from '../../plugin-slots/ProgressTabCertificateStatusMainBodySlot';
-import ProgressTabCourseGradeSlot from '../../plugin-slots/ProgressTabCourseGradeSlot';
-import ProgressTabGradeBreakdownSlot from '../../plugin-slots/ProgressTabGradeBreakdownSlot';
-import ProgressTabRelatedLinksSlot from '../../plugin-slots/ProgressTabRelatedLinksSlot';
 import { useGetExamsData, useProgressData } from './hooks';
 import { useCourseHomeMeta, useProgressTabData } from '../data/apiHooks';
 import { TabWithTimer } from '../../tab-page';
 
 const ProgressTabContent = () => {
   const { courseId } = useParams();
-  const { disableProgressGraph, sectionScores } = useProgressData();
+  const { sectionScores, disableProgressGraph } = useProgressData();
 
   const sequenceIds = useMemo(() => (
     sectionScores.flatMap((section) => (section.subsections)).map((subsection) => subsection.blockKey)
@@ -39,7 +38,7 @@
       <div className="row w-100 m-0">
         {/* Main body */}
         <div className="col-12 col-md-8 p-0">
-          {!disableProgressGraph && <CourseCompletion />}
+          <ProgressTabCourseCompletionSlot enableProgressGraph={!disableProgressGraph} />
           <ProgressTabCertificateStatusMainBodySlot />
           <ProgressTabCourseGradeSlot />
           <ProgressTabGradeBreakdownSlot />

src/plugin-slots/ProgressTabCourseCompletionSlot/README.md

@@ -0,0 +1,42 @@
+# Progress Tab Course Completion Slot
+
+### Slot ID: `org.openedx.frontend.learning.progress_tab_course_completion.v1`
+
+### Props:
+* `enableProgressGraph` — Boolean flag that indicated whether the progress graph is enabled for the coruse.
+
+## Description
+
+This slot is used to replace or modify the Course Completion chart view in the Progress Tab.
+
+## Example
+
+The following `env.config.jsx` will render a dashed border around the course completion chart component.
+
+![Progress Page Course Completion Chart](./images/progress_tab_course_completion.png)
+![Wrapper Around Course Completion Chart](./images/progress_tab_course_completion_wrapped.png)
+
+```jsx
+import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.learning.progress_tab_course_completion.v1': {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Wrap,
+          widgetId: 'default_contents',
+          wrapper: ({ component }) => (
+            <div style={{ border: '3px dashed red' }}>
+              {component}
+            </div>
+          ),
+        },
+      ],
+    },
+  },
+}
+
+export default config;
+```

src/plugin-slots/ProgressTabCourseCompletionSlot/index.tsx

@@ -0,0 +1,16 @@
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import React from 'react';
+import CourseCompletion from '@src/course-home/progress-tab/course-completion/CourseCompletion';
+
+const ProgressTabCourseCompletionSlot = ({
+  enableProgressGraph,
+}: { enableProgressGraph: boolean }) => (
+  <PluginSlot
+    id="org.openedx.frontend.learning.progress_tab_course_completion.v1"
+    pluginProps={{ enableProgressGraph }}
+  >
+    {enableProgressGraph && <CourseCompletion />}
+  </PluginSlot>
+);
+
+export default ProgressTabCourseCompletionSlot;

src/plugin-slots/README.md

@@ -21,6 +21,7 @@
 * [`org.openedx.frontend.learning.progress_certificate_status.v1`](./ProgressCertificateStatusSlot/)
 * [`org.openedx.frontend.learning.progress_tab_certificate_status_main_body.v1`](./ProgressTabCertificateStatusMainBodySlot/)
 * [`org.openedx.frontend.learning.progress_tab_certificate_status_side_panel.v1`](./ProgressTabCertificateStatusSidePanelSlot/)
+* [`org.openedx.frontend.learning.progress_tab_course_completion.v1`](./ProgressTabCourseCompletionSlot/)
 * [`org.openedx.frontend.learning.progress_tab_course_grade.v1`](./ProgressTabCourseGradeSlot/)
 * [`org.openedx.frontend.learning.progress_tab_grade_breakdown.v1`](./ProgressTabGradeBreakdownSlot/)
 * [`org.openedx.frontend.learning.progress_tab_related_links.v1`](./ProgressTabRelatedLinksSlot/)