feat: updae grade summary to show floating point grades

openedx · Dec 18, 2024 · ae99478 · ae99478
1 parent 4a80532
commit ae99478
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 43 deletions.
diff --git a/src/course-home/progress-tab/grades/grade-summary/GradeSummaryHeader.jsx b/src/course-home/progress-tab/grades/grade-summary/GradeSummaryHeader.jsx
@@ -1,49 +1,39 @@
-import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import {
-  Icon, IconButton, OverlayTrigger, Popover,
-} from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Icon, OverlayTrigger, Tooltip } from '@openedx/paragon';
 import { Blocked, InfoOutline } from '@openedx/paragon/icons';
 
 import messages from '../messages';
 import { useModel } from '../../../../generic/model-store';
 
-const GradeSummaryHeader = ({ intl, allOfSomeAssignmentTypeIsLocked }) => {
+const GradeSummaryHeader = ({ allOfSomeAssignmentTypeIsLocked }) => {
+  const intl = useIntl();
   const {
     courseId,
   } = useSelector(state => state.courseHome);
   const {
     gradesFeatureIsFullyLocked,
   } = useModel('progress', courseId);
-  const [showTooltip, setShowTooltip] = useState(false);
 
   return (
     <div className="row w-100 m-0 align-items-center">
       <h3 className="h4 mb-3 mr-1">{intl.formatMessage(messages.gradeSummary)}</h3>
       <OverlayTrigger
-        trigger="click"
+        trigger="hover"
         placement="top"
-        show={showTooltip}
         overlay={(
-          <Popover>
-            <Popover.Content className="small text-dark-700">
-              {intl.formatMessage(messages.gradeSummaryTooltipBody)}
-            </Popover.Content>
-          </Popover>
+          <Tooltip>
+            {intl.formatMessage(messages.gradeSummaryTooltipBody)}
+          </Tooltip>
         )}
       >
-        <IconButton
-          onClick={() => { setShowTooltip(!showTooltip); }}
-          onBlur={() => { setShowTooltip(false); }}
+        <Icon
           alt={intl.formatMessage(messages.gradeSummaryTooltipAlt)}
           src={InfoOutline}
-          iconAs={Icon}
           className="mb-3"
           size="sm"
-          disabled={gradesFeatureIsFullyLocked}
         />
       </OverlayTrigger>
       {!gradesFeatureIsFullyLocked && allOfSomeAssignmentTypeIsLocked && (
@@ -57,8 +47,7 @@ const GradeSummaryHeader = ({ intl, allOfSomeAssignmentTypeIsLocked }) => {
 };
 
 GradeSummaryHeader.propTypes = {
-  intl: intlShape.isRequired,
   allOfSomeAssignmentTypeIsLocked: PropTypes.bool.isRequired,
 };
 
-export default injectIntl(GradeSummaryHeader);
+export default GradeSummaryHeader;
diff --git a/src/course-home/progress-tab/grades/grade-summary/GradeSummaryTable.jsx b/src/course-home/progress-tab/grades/grade-summary/GradeSummaryTable.jsx
@@ -1,10 +1,7 @@
-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 { getLocale, isRtl, useIntl } from '@edx/frontend-platform/i18n';
 import { DataTable } from '@openedx/paragon';
 import { useModel } from '../../../../generic/model-store';
 
@@ -14,7 +11,8 @@ import GradeSummaryTableFooter from './GradeSummaryTableFooter';
 
 import messages from '../messages';
 
-const GradeSummaryTable = ({ intl, setAllOfSomeAssignmentTypeIsLocked }) => {
+const GradeSummaryTable = ({ setAllOfSomeAssignmentTypeIsLocked }) => {
+  const intl = useIntl();
   const {
     courseId,
   } = useSelector(state => state.courseHome);
@@ -75,8 +73,8 @@ const GradeSummaryTable = ({ intl, setAllOfSomeAssignmentTypeIsLocked }) => {
         footnoteId, footnoteMarker, type: assignment.type, locked,
       },
       weight: { weight: `${(assignment.weight * 100).toFixed(0)}${isLocaleRtl ? '\u200f' : ''}%`, locked },
-      grade: { grade: `${(assignment.averageGrade * 100).toFixed(0)}${isLocaleRtl ? '\u200f' : ''}%`, locked },
-      weightedGrade: { weightedGrade: `${(assignment.weightedGrade * 100).toFixed(0)}${isLocaleRtl ? '\u200f' : ''}%`, locked },
+      grade: { grade: `${(assignment.averageGrade * 100).toFixed(2)}${isLocaleRtl ? '\u200f' : ''}%`, locked },
+      weightedGrade: { weightedGrade: `${(assignment.weightedGrade * 100).toFixed(2)}${isLocaleRtl ? '\u200f' : ''}%`, locked },
     };
   });
   const getAssignmentTypeCell = (value) => (
@@ -137,8 +135,7 @@ const GradeSummaryTable = ({ intl, setAllOfSomeAssignmentTypeIsLocked }) => {
 };
 
 GradeSummaryTable.propTypes = {
-  intl: intlShape.isRequired,
   setAllOfSomeAssignmentTypeIsLocked: PropTypes.func.isRequired,
 };
 
-export default injectIntl(GradeSummaryTable);
+export default GradeSummaryTable;
diff --git a/src/course-home/progress-tab/grades/grade-summary/GradeSummaryTableFooter.jsx b/src/course-home/progress-tab/grades/grade-summary/GradeSummaryTableFooter.jsx
@@ -1,15 +1,20 @@
-import React from 'react';
 import { useSelector } from 'react-redux';
 
+import { getLocale, isRtl, useIntl } from '@edx/frontend-platform/i18n';
 import {
-  getLocale, injectIntl, intlShape, isRtl,
-} from '@edx/frontend-platform/i18n';
-import { DataTable } from '@openedx/paragon';
-import { useModel } from '../../../../generic/model-store';
+  DataTable,
+  Icon,
+  OverlayTrigger,
+  Stack,
+  Tooltip,
+} from '@openedx/paragon';
+import { InfoOutline } from '@openedx/paragon/icons';
 
+import { useModel } from '../../../../generic/model-store';
 import messages from '../messages';
 
-const GradeSummaryTableFooter = ({ intl }) => {
+const GradeSummaryTableFooter = () => {
+  const intl = useIntl();
   const {
     courseId,
   } = useSelector(state => state.courseHome);
@@ -29,15 +34,30 @@ const GradeSummaryTableFooter = ({ intl }) => {
   return (
     <DataTable.TableFooter className={`border-top border-primary ${bgColor}`}>
       <div className="row w-100 m-0">
-        <div id="weighted-grade-summary" className="col-8 p-0 small">{intl.formatMessage(messages.weightedGradeSummary)}</div>
+        <div id="weighted-grade-summary" className="col-8 p-0 small">
+          <Stack gap={2} direction="horizontal">
+            {intl.formatMessage(messages.weightedGradeSummary)}
+            <OverlayTrigger
+              trigger="hover"
+              placement="bottom"
+              overlay={(
+                <Tooltip>
+                  {intl.formatMessage(messages.weightedGradeSummaryTooltip)}
+                </Tooltip>
+              )}
+            >
+              <Icon
+                src={InfoOutline}
+                size="sm"
+                alt={intl.formatMessage(messages.gradeSummaryTooltipAlt)}
+              />
+            </OverlayTrigger>
+          </Stack>
+        </div>
         <div data-testid="gradeSummaryFooterTotalWeightedGrade" aria-labelledby="weighted-grade-summary" className="col-4 p-0 text-right font-weight-bold small">{totalGrade}{isLocaleRtl && '\u200f'}%</div>
       </div>
     </DataTable.TableFooter>
   );
 };
 
-GradeSummaryTableFooter.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(GradeSummaryTableFooter);
+export default GradeSummaryTableFooter;
diff --git a/src/course-home/progress-tab/grades/messages.ts b/src/course-home/progress-tab/grades/messages.ts
@@ -203,7 +203,11 @@ const messages = defineMessages({
     defaultMessage: 'Your current weighted grade summary',
     description: 'It the text precede the sum of weighted grades of all the assignment',
   },
-
+  weightedGradeSummaryTooltip: {
+    id: 'progress.weightedGradeSummary',
+    defaultMessage: 'The weighted grade for individual assignment types is raw and the weighted grade summary is rounded.',
+    description: 'Tooltip content that explains the rounding of the summary versus individual assignments',
+  },
 });
 
 export default messages;