fixup!: combine the grades slots into a single one

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

@@ -7,8 +7,7 @@ import ProgressHeader from './ProgressHeader';
 
 import ProgressTabCertificateStatusSlot from '../../plugin-slots/ProgressTabCertificateStatusSlot';
 import ProgressTabCourseGradeSlot from '../../plugin-slots/ProgressTabCourseGradeSlot';
-import ProgressTabDetailedGradesSlot from '../../plugin-slots/ProgressTabDetailedGradesSlot';
-import ProgressTabGradeSummarySlot from '../../plugin-slots/ProgressTabGradeSummarySlot';
+import ProgressTabGradeBreakdownSlot from '../../plugin-slots/ProgressTabGradeBreakdownSlot';
 import ProgressTabRelatedLinksSlot from '../../plugin-slots/ProgressTabRelatedLinksSlot';
 import { useModel } from '../../generic/model-store';
 
@@ -17,11 +16,7 @@ const ProgressTab = () => {
     courseId,
   } = useSelector(state => state.courseHome);
 
-  const {
-    gradesFeatureIsFullyLocked, disableProgressGraph,
-  } = useModel('progress', courseId);
-
-  const applyLockedOverlay = gradesFeatureIsFullyLocked ? 'locked-overlay' : '';
+  const { disableProgressGraph } = useModel('progress', courseId);
 
   const windowWidth = useWindowSize().width;
   if (windowWidth === undefined) {
@@ -41,10 +36,7 @@ const ProgressTab = () => {
           {!disableProgressGraph && <CourseCompletion />}
           {!wideScreen && <ProgressTabCertificateStatusSlot courseId={courseId} />}
           <ProgressTabCourseGradeSlot courseId={courseId} />
-          <div className={`grades my-4 p-4 rounded raised-card ${applyLockedOverlay}`} aria-hidden={gradesFeatureIsFullyLocked}>
-            <ProgressTabGradeSummarySlot courseId={courseId} />
-            <ProgressTabDetailedGradesSlot courseId={courseId} />
-          </div>
+          <ProgressTabGradeBreakdownSlot courseId={courseId} />
         </div>
 
         {/* Side panel */}

src/plugin-slots/ProgressTabGradeBreakdownSlot/index.jsx

@@ -0,0 +1,33 @@
+import { useModel } from '@src/generic/model-store';
+import PropTypes from 'prop-types';
+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';
+
+const ProgressTabGradeBreakdownSlot = ({ courseId }) => {
+  const { gradesFeatureIsFullyLocked } = useModel('progress', courseId);
+  const applyLockedOverlay = gradesFeatureIsFullyLocked ? 'locked-overlay' : '';
+  return (
+    <PluginSlot
+      id="progress_tab_grade_breakdown_slot"
+      pluginProps={{
+        courseId,
+      }}
+    >
+      <div
+        className={`grades my-4 p-4 rounded raised-card ${applyLockedOverlay}`}
+        aria-hidden={gradesFeatureIsFullyLocked}
+      >
+        <GradeSummary />
+        <DetailedGrades />
+      </div>
+    </PluginSlot>
+  );
+};
+
+ProgressTabGradeBreakdownSlot.propTypes = {
+  courseId: PropTypes.string.isRequired,
+};
+
+export default ProgressTabGradeBreakdownSlot;