feat: Add plugin slots for progress page components (#1496)

src/plugin-slots/ProgressTabCertificateStatusMainBodySlot/README.md

@@ -0,0 +1,47 @@
+# Progress Tab Certificate Status Slot
+
+### Slot ID: `progress_tab_certificate_status_main_body_slot`
+### Props:
+
+## Description
+
+This slot is used to replace or modify the Certificate Status component in the
+main body of the Progress Tab.
+
+## Example
+
+The following `env.config.jsx` will render the `course_id` of the course as a `<p>` element in a `<div>`.
+
+![Screenshot of Content added after the Certificate Status Container](./images/progress_tab_certificate_status_slot.png)
+
+```js
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+import { useContextId } from './src/data/hooks';
+
+const config = {
+  pluginSlots: {
+    progress_tab_certificate_status_main_body_slot: {
+      plugins: [
+        {
+          // Insert custom content after certificate status
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_certificate_status_content',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => {
+              const courseId = useContextId();
+              return (
+                <div>
+                  <p>📚: {courseId}</p>
+                </div>
+              );
+            },
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```

src/plugin-slots/ProgressTabCertificateStatusMainBodySlot/index.jsx

@@ -0,0 +1,19 @@
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import { breakpoints, useWindowSize } from '@openedx/paragon';
+import CertificateStatus from '../../course-home/progress-tab/certificate-status/CertificateStatus';
+
+const ProgressTabCertificateStatusMainBodySlot = () => {
+  const windowWidth = useWindowSize().width;
+  const wideScreen = windowWidth >= breakpoints.large.minWidth;
+  return (
+    <PluginSlot
+      id="progress_tab_certificate_status_main_body_slot"
+    >
+      {windowWidth && !wideScreen && <CertificateStatus />}
+    </PluginSlot>
+  );
+};
+
+ProgressTabCertificateStatusMainBodySlot.propTypes = {};
+
+export default ProgressTabCertificateStatusMainBodySlot;

src/plugin-slots/ProgressTabCertificateStatusSidePanelSlot/README.md

@@ -0,0 +1,47 @@
+# Progress Tab Certificate Status Slot
+
+### Slot ID: `progress_tab_certificate_status_side_panel_slot`
+### Props:
+
+## Description
+
+This slot is used to replace or modify the Certificate Status component in the
+side panel of the Progress Tab.
+
+## Example
+
+The following `env.config.jsx` will render the `course_id` of the course as a `<p>` element in a `<div>`.
+
+![Screenshot of Content added after the Certificate Status Container](./images/progress_tab_certificate_status_slot.png)
+
+```js
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+import { useContextId } from './src/data/hooks';
+
+const config = {
+  pluginSlots: {
+    progress_tab_certificate_status_side_panel_slot: {
+      plugins: [
+        {
+          // Insert custom content after certificate status
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_certificate_status_content',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => {
+              const courseId = useContextId();
+              return (
+                <div>
+                  <p>📚: {courseId}</p>
+                </div>
+              );
+            },
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```

src/plugin-slots/ProgressTabCertificateStatusSidePanelSlot/index.jsx

@@ -0,0 +1,19 @@
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import { breakpoints, useWindowSize } from '@openedx/paragon';
+import CertificateStatus from '../../course-home/progress-tab/certificate-status/CertificateStatus';
+
+const ProgressTabCertificateStatusSidePanelSlot = () => {
+  const windowWidth = useWindowSize().width;
+  const wideScreen = windowWidth >= breakpoints.large.minWidth;
+  return (
+    <PluginSlot
+      id="progress_tab_certificate_status_side_panel_slot"
+    >
+      {windowWidth && wideScreen && <CertificateStatus />}
+    </PluginSlot>
+  );
+};
+
+ProgressTabCertificateStatusSidePanelSlot.propTypes = {};
+
+export default ProgressTabCertificateStatusSidePanelSlot;

src/plugin-slots/ProgressTabCourseGradeSlot/README.md

@@ -0,0 +1,46 @@
+# Progress Tab Course Grade Slot
+
+### Slot ID: `progress_tab_course_grade_slot`
+### Props:
+
+## Description
+
+This slot is used to replace or modify the Course Grades view in the Progress Tab.
+
+## Example
+
+The following `env.config.jsx` will render the `course_id` of the course as a `<p>` element in a `<div>`.
+
+![Screenshot of Content added after the Grades Container](./images/progress_tab_course_grade_slot.png)
+
+```js
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+import { useContextId } from './src/data/hooks';
+
+const config = {
+  pluginSlots: {
+    progress_tab_course_grade_slot: {
+      plugins: [
+        {
+          // Insert custom content after course grade widget
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_course_grade_content',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => {
+              const courseId = useContextId();
+              return (
+                <div>
+                  <p>📚: {courseId}</p>
+                </div>
+              );
+            },
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```

src/plugin-slots/ProgressTabCourseGradeSlot/index.jsx

@@ -0,0 +1,14 @@
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import CourseGrade from '../../course-home/progress-tab/grades/course-grade/CourseGrade';
+
+const ProgressTabCourseGradeSlot = () => (
+  <PluginSlot
+    id="progress_tab_course_grade_slot"
+  >
+    <CourseGrade />
+  </PluginSlot>
+);
+
+ProgressTabCourseGradeSlot.propTypes = {};
+
+export default ProgressTabCourseGradeSlot;

src/plugin-slots/ProgressTabGradeBreakdownSlot/README.md

@@ -0,0 +1,46 @@
+# Progress Tab Grade Breakdown Slot
+
+### Slot ID: `progress_tab_grade_breakdown_slot`
+### Props:
+
+## Description
+
+This slot is used to replace or modify the Grade Summary and Details Breakdown view in the Progress Tab.
+
+## Example
+
+The following `env.config.jsx` will render the `course_id` of the course as a `<p>` element in a `<div>`.
+
+![Screenshot of Content added after the Grade Summary and Details Container](./images/progress_tab_grade_breakdown_slot.png)
+
+```js
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+import { useContextId } from './src/data/hooks';
+
+const config = {
+  pluginSlots: {
+    progress_tab_grade_breakdown_slot: {
+      plugins: [
+        {
+          // Insert custom content after grade summary widget
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_grade_summary_content',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => {
+              const courseId = useContextId();
+              return (
+                <div>
+                  <p>📚: {courseId}</p>
+                </div>
+              );
+            },
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```

src/plugin-slots/ProgressTabGradeBreakdownSlot/index.jsx

@@ -0,0 +1,29 @@
+import { useModel } from '@src/generic/model-store';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import React from 'react';
+import DetailedGrades from '../../course-home/progress-tab/grades/detailed-grades/DetailedGrades';
+import GradeSummary from '../../course-home/progress-tab/grades/grade-summary/GradeSummary';
+import { useContextId } from '../../data/hooks';
+
+const ProgressTabGradeBreakdownSlot = () => {
+  const courseId = useContextId();
+  const { gradesFeatureIsFullyLocked } = useModel('progress', courseId);
+  const applyLockedOverlay = gradesFeatureIsFullyLocked ? 'locked-overlay' : '';
+  return (
+    <PluginSlot
+      id="progress_tab_grade_breakdown_slot"
+    >
+      <div
+        className={`grades my-4 p-4 rounded raised-card ${applyLockedOverlay}`}
+        aria-hidden={gradesFeatureIsFullyLocked}
+      >
+        <GradeSummary />
+        <DetailedGrades />
+      </div>
+    </PluginSlot>
+  );
+};
+
+ProgressTabGradeBreakdownSlot.propTypes = {};
+
+export default ProgressTabGradeBreakdownSlot;

src/plugin-slots/ProgressTabRelatedLinksSlot/README.md

@@ -0,0 +1,46 @@
+# Progress Tab Related Links Slot
+
+### Slot ID: `progress_tab_related_links_slot`
+### Props:
+
+## Description
+
+This slot is used to replace or modify the related links view in the Progress Tab.
+
+## Example
+
+The following `env.config.jsx` will render the `course_id` of the course as a `<p>` element in a `<div>`.
+
+![Screenshot of Content added after the Related Links Container](./images/progress_tab_related_links_slot.png)
+
+```js
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+import { useContextId } from './src/data/hooks';
+
+const config = {
+  pluginSlots: {
+    progress_tab_related_links_slot: {
+      plugins: [
+        {
+          // Insert custom content after related links widget
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_related_links_content',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => {
+              const courseId = useContextId();
+              return (
+                <div>
+                  <p>📚: {courseId}</p>
+                </div>
+              );
+            },
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```

src/plugin-slots/ProgressTabRelatedLinksSlot/index.jsx

@@ -0,0 +1,14 @@
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import RelatedLinks from '../../course-home/progress-tab/related-links/RelatedLinks';
+
+const ProgressTabRelatedLinksSlot = () => (
+  <PluginSlot
+    id="progress_tab_related_links_slot"
+  >
+    <RelatedLinks />
+  </PluginSlot>
+);
+
+ProgressTabRelatedLinksSlot.propTypes = {};
+
+export default ProgressTabRelatedLinksSlot;