feat: Add plugin slots for progress page components

Adds a slot for different components in the progress tab to allow them to be
overridden with custom components.

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
 
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Button } from '@openedx/paragon';
+import { useSelector } from 'react-redux';
 
 import { useModel } from '../../generic/model-store';
 

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

@@ -1,27 +1,20 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
-import { breakpoints, useWindowSize } from '@openedx/paragon';
+import { useWindowSize } from '@openedx/paragon';
+import { useContextId } from '../../data/hooks';
+import ProgressTabCertificateStatusSidePanelSlot from '../../plugin-slots/ProgressTabCertificateStatusSidePanelSlot';
 
-import CertificateStatus from './certificate-status/CertificateStatus';
 import CourseCompletion from './course-completion/CourseCompletion';
-import CourseGrade from './grades/course-grade/CourseGrade';
-import DetailedGrades from './grades/detailed-grades/DetailedGrades';
-import GradeSummary from './grades/grade-summary/GradeSummary';
 import ProgressHeader from './ProgressHeader';
-import RelatedLinks from './related-links/RelatedLinks';
 
+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 { useModel } from '../../generic/model-store';
 
 const ProgressTab = () => {
-  const {
-    courseId,
-  } = useSelector(state => state.courseHome);
-
-  const {
-    gradesFeatureIsFullyLocked, disableProgressGraph,
-  } = useModel('progress', courseId);
-
-  const applyLockedOverlay = gradesFeatureIsFullyLocked ? 'locked-overlay' : '';
+  const courseId = useContextId();
+  const { disableProgressGraph } = useModel('progress', courseId);
 
   const windowWidth = useWindowSize().width;
   if (windowWidth === undefined) {
@@ -31,26 +24,22 @@ const ProgressTab = () => {
     return null;
   }
 
-  const wideScreen = windowWidth >= breakpoints.large.minWidth;
   return (
     <>
       <ProgressHeader />
       <div className="row w-100 m-0">
         {/* Main body */}
         <div className="col-12 col-md-8 p-0">
           {!disableProgressGraph && <CourseCompletion />}
-          {!wideScreen && <CertificateStatus />}
-          <CourseGrade />
-          <div className={`grades my-4 p-4 rounded raised-card ${applyLockedOverlay}`} aria-hidden={gradesFeatureIsFullyLocked}>
-            <GradeSummary />
-            <DetailedGrades />
-          </div>
+          <ProgressTabCertificateStatusMainBodySlot />
+          <ProgressTabCourseGradeSlot />
+          <ProgressTabGradeBreakdownSlot />
         </div>
 
         {/* Side panel */}
         <div className="col-12 col-md-4 p-0 px-md-4">
-          {wideScreen && <CertificateStatus />}
-          <RelatedLinks />
+          <ProgressTabCertificateStatusSidePanelSlot />
+          <ProgressTabRelatedLinksSlot />
         </div>
       </div>
     </>

src/course-home/progress-tab/certificate-status/CertificateStatus.jsx

@@ -1,23 +1,23 @@
 import React, { useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import {
-  FormattedDate, FormattedMessage, injectIntl, intlShape,
+  FormattedDate, FormattedMessage, useIntl,
 } from '@edx/frontend-platform/i18n';
 
 import { Button, Card } from '@openedx/paragon';
 import { getConfig } from '@edx/frontend-platform';
+import { useContextId } from '../../../data/hooks';
 import { useModel } from '../../../generic/model-store';
 import { COURSE_EXIT_MODES, getCourseExitMode } from '../../../courseware/course/course-exit/utils';
 import { DashboardLink, IdVerificationSupportLink, ProfileLink } from '../../../shared/links';
 import { requestCert } from '../../data/thunks';
 import messages from './messages';
 
-const CertificateStatus = ({ intl }) => {
-  const {
-    courseId,
-  } = useSelector(state => state.courseHome);
+const CertificateStatus = () => {
+  const intl = useIntl();
+  const courseId = useContextId();
 
   const {
     entranceExamData,
@@ -267,8 +267,6 @@ const CertificateStatus = ({ intl }) => {
   );
 };
 
-CertificateStatus.propTypes = {
-  intl: intlShape.isRequired,
-};
+CertificateStatus.propTypes = {};
 
-export default injectIntl(CertificateStatus);
+export default CertificateStatus;

src/course-home/progress-tab/course-completion/CompletionDonutChart.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
 import {
   getLocale, injectIntl, intlShape, isRtl,
 } from '@edx/frontend-platform/i18n';
+import { useContextId } from '../../../data/hooks';
 import { useModel } from '../../../generic/model-store';
 
 import CompleteDonutSegment from './CompleteDonutSegment';
@@ -11,9 +11,7 @@ import LockedDonutSegment from './LockedDonutSegment';
 import messages from './messages';
 
 const CompletionDonutChart = ({ intl }) => {
-  const {
-    courseId,
-  } = useSelector(state => state.courseHome);
+  const courseId = useContextId();
 
   const {
     completionSummary: {

src/course-home/progress-tab/credit-information/CreditInformation.jsx

@@ -1,19 +1,17 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
 import { getConfig } from '@edx/frontend-platform';
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { CheckCircle, WarningFilled, WatchFilled } from '@openedx/paragon/icons';
 import { Hyperlink, Icon } from '@openedx/paragon';
+import { useContextId } from '../../../data/hooks';
 
 import { useModel } from '../../../generic/model-store';
 import { DashboardLink } from '../../../shared/links';
 
 import messages from './messages';
 
 const CreditInformation = ({ intl }) => {
-  const {
-    courseId,
-  } = useSelector(state => state.courseHome);
+  const courseId = useContextId();
 
   const {
     creditCourseRequirements,

src/course-home/progress-tab/grades/course-grade/CourseGrade.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useContextId } from '../../../../data/hooks';
 
 import { useModel } from '../../../../generic/model-store';
 
@@ -12,9 +12,7 @@ import CreditInformation from '../../credit-information/CreditInformation';
 import messages from '../messages';
 
 const CourseGrade = ({ intl }) => {
-  const {
-    courseId,
-  } = useSelector(state => state.courseHome);
+  const courseId = useContextId();
 
   const {
     creditCourseRequirements,

src/course-home/progress-tab/grades/course-grade/CourseGradeFooter.jsx

@@ -1,19 +1,17 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { CheckCircle, WarningFilled } from '@openedx/paragon/icons';
 import { breakpoints, Icon, useWindowSize } from '@openedx/paragon';
+import { useContextId } from '../../../../data/hooks';
 import { useModel } from '../../../../generic/model-store';
 
 import GradeRangeTooltip from './GradeRangeTooltip';
 import messages from '../messages';
 
 const CourseGradeFooter = ({ intl, passingGrade }) => {
-  const {
-    courseId,
-  } = useSelector(state => state.courseHome);
+  const courseId = useContextId();
 
   const {
     courseGrade: {

src/course-home/progress-tab/grades/course-grade/CourseGradeHeader.jsx

@@ -1,19 +1,17 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
 
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Locked } from '@openedx/paragon/icons';
 import { Button, Icon } from '@openedx/paragon';
+import { useContextId } from '../../../../data/hooks';
 
 import { useModel } from '../../../../generic/model-store';
 import messages from '../messages';
 
 const CourseGradeHeader = ({ intl }) => {
-  const {
-    courseId,
-  } = useSelector(state => state.courseHome);
+  const courseId = useContextId();
   const {
     org,
   } = useModel('courseHomeMeta', courseId);

src/course-home/progress-tab/grades/course-grade/CurrentGradeTooltip.jsx

@@ -1,20 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
 
 import {
   getLocale, injectIntl, intlShape, isRtl,
 } from '@edx/frontend-platform/i18n';
 import { OverlayTrigger, Popover } from '@openedx/paragon';
+import { useContextId } from '../../../../data/hooks';
 
 import { useModel } from '../../../../generic/model-store';
 
 import messages from '../messages';
 
 const CurrentGradeTooltip = ({ intl, tooltipClassName }) => {
-  const {
-    courseId,
-  } = useSelector(state => state.courseHome);
+  const courseId = useContextId();
 
   const {
     courseGrade: {

src/course-home/progress-tab/grades/course-grade/GradeBar.jsx

@@ -1,20 +1,18 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 
 import {
   getLocale, injectIntl, intlShape, isRtl,
 } from '@edx/frontend-platform/i18n';
+import { useContextId } from '../../../../data/hooks';
 import { useModel } from '../../../../generic/model-store';
 import CurrentGradeTooltip from './CurrentGradeTooltip';
 import PassingGradeTooltip from './PassingGradeTooltip';
 
 import messages from '../messages';
 
 const GradeBar = ({ intl, passingGrade }) => {
-  const {
-    courseId,
-  } = useSelector(state => state.courseHome);
+  const courseId = useContextId();
 
   const {
     courseGrade: {

src/course-home/progress-tab/grades/course-grade/GradeRangeTooltip.jsx

@@ -1,20 +1,18 @@
 import React, { useState } from 'react';
-import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { InfoOutline } from '@openedx/paragon/icons';
 import {
   Icon, IconButton, OverlayTrigger, Popover,
 } from '@openedx/paragon';
+import { useContextId } from '../../../../data/hooks';
 import { useModel } from '../../../../generic/model-store';
 
 import messages from '../messages';
 
 const GradeRangeTooltip = ({ intl, iconButtonClassName, passingGrade }) => {
-  const {
-    courseId,
-  } = useSelector(state => state.courseHome);
+  const courseId = useContextId();
 
   const {
     gradesFeatureIsFullyLocked,

src/course-home/progress-tab/grades/detailed-grades/DetailedGrades.jsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
 
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Blocked } from '@openedx/paragon/icons';
 import { Icon, Hyperlink } from '@openedx/paragon';
+import { useContextId } from '../../../../data/hooks';
 import { useModel } from '../../../../generic/model-store';
 import { showUngradedAssignments } from '../../utils';
 
@@ -15,9 +15,7 @@ import messages from '../messages';
 
 const DetailedGrades = ({ intl }) => {
   const { administrator } = getAuthenticatedUser();
-  const {
-    courseId,
-  } = useSelector(state => state.courseHome);
+  const courseId = useContextId();
   const {
     org,
     tabs,

src/course-home/progress-tab/grades/detailed-grades/DetailedGradesTable.jsx

@@ -1,20 +1,18 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
 
 import {
   getLocale, injectIntl, intlShape, isRtl,
 } from '@edx/frontend-platform/i18n';
 import { DataTable } from '@openedx/paragon';
+import { useContextId } from '../../../../data/hooks';
 
 import { useModel } from '../../../../generic/model-store';
 import messages from '../messages';
 import SubsectionTitleCell from './SubsectionTitleCell';
 import { showUngradedAssignments } from '../../utils';
 
 const DetailedGradesTable = ({ intl }) => {
-  const {
-    courseId,
-  } = useSelector(state => state.courseHome);
+  const courseId = useContextId();
 
   const {
     sectionScores,

src/course-home/progress-tab/grades/detailed-grades/SubsectionTitleCell.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
@@ -9,15 +8,14 @@ import { Collapsible, Icon, Row } from '@openedx/paragon';
 import {
   ArrowDropDown, ArrowDropUp, Blocked, Info,
 } from '@openedx/paragon/icons';
+import { useContextId } from '../../../../data/hooks';
 
 import messages from '../messages';
 import { useModel } from '../../../../generic/model-store';
 import ProblemScoreDrawer from './ProblemScoreDrawer';
 
 const SubsectionTitleCell = ({ intl, subsection }) => {
-  const {
-    courseId,
-  } = useSelector(state => state.courseHome);
+  const courseId = useContextId();
   const {
     org,
   } = useModel('courseHomeMeta', courseId);

src/course-home/progress-tab/grades/grade-summary/AssignmentTypeCell.jsx

@@ -1,18 +1,16 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Blocked } from '@openedx/paragon/icons';
 import { Icon } from '@openedx/paragon';
+import { useContextId } from '../../../../data/hooks';
 import { useModel } from '../../../../generic/model-store';
 import messages from '../messages';
 
 const AssignmentTypeCell = ({
   intl, assignmentType, footnoteMarker, footnoteId, locked,
 }) => {
-  const {
-    courseId,
-  } = useSelector(state => state.courseHome);
+  const courseId = useContextId();
 
   const {
     gradesFeatureIsFullyLocked,