chore: add popover text to header

openedx · Oct 26, 2023 · af5c7ce · af5c7ce
1 parent c363f75
commit af5c7ce
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 8 deletions.
diff --git a/src/components/InfoPopover/index.jsx b/src/components/InfoPopover/index.jsx
@@ -36,6 +36,7 @@ export const InfoPopover = ({ onClick, children }) => {
         alt={formatMessage(messages.altText)}
         iconAs={Icon}
         onClick={onClick}
+        size="inline"
       />
     </OverlayTrigger>
   );

diff --git a/src/views/GradeView/FinalGrade.jsx b/src/views/GradeView/FinalGrade.jsx
@@ -6,6 +6,7 @@ import CollapsibleFeedback from 'components/CollapsibleFeedback';
 import { useAssessmentsData } from 'data/services/lms/hooks/selectors';
 import messages from './messages';
 import AssessmentCriterion from 'components/CollapsibleFeedback/AssessmentCriterion';
+import InfoPopover from 'components/InfoPopover';
 
 const FinalGrade = () => {
   const { formatMessage } = useIntl();
@@ -20,17 +21,20 @@ const FinalGrade = () => {
       <CollapsibleFeedback
         stepLabel={stepLabel}
         stepScore={assessments.staff.stepScore}
-        key="staff"
+        key='staff'
       >
-        <AssessmentCriterion {...assessments.staff.assessment} stepLabel={stepLabel} />
+        <AssessmentCriterion
+          {...assessments.staff.assessment}
+          stepLabel={stepLabel}
+        />
       </CollapsibleFeedback>
     );
   }
   if (assessments.peer) {
     finalStepScore = finalStepScore || assessments.peer.stepScore;
     const stepLabel = formatMessage(messages.peerStepLabel);
     result.push(
-      <div className='my-2' key="peer">
+      <div className='my-2' key='peer'>
         <CollapsibleFeedback
           stepLabel={stepLabel}
           stepScore={assessments.peer.stepScore}
@@ -51,7 +55,7 @@ const FinalGrade = () => {
   if (assessments.peerUnweighted) {
     const stepLabel = formatMessage(messages.unweightedPeerStepLabel);
     result.push(
-      <div className='my-2' key="peerUnweighted">
+      <div className='my-2' key='peerUnweighted'>
         <CollapsibleFeedback
           stepLabel={stepLabel}
           stepScore={assessments.peerUnweighted.stepScore}
@@ -76,9 +80,12 @@ const FinalGrade = () => {
       <CollapsibleFeedback
         stepLabel={stepLabel}
         stepScore={assessments.self.stepScore}
-        key="self"
+        key='self'
       >
-        <AssessmentCriterion {...assessments.self.assessment} stepLabel={stepLabel} />
+        <AssessmentCriterion
+          {...assessments.self.assessment}
+          stepLabel={stepLabel}
+        />
       </CollapsibleFeedback>
     );
   }
@@ -87,10 +94,20 @@ const FinalGrade = () => {
 
   return (
     <div>
-      <h3>{formatMessage(messages.yourFinalGrade, finalStepScore)}</h3>
+      <h3>
+        {formatMessage(messages.yourFinalGrade, finalStepScore)}
+        <InfoPopover onClick={() => {}}>
+          <p>{formatMessage(messages.finalGradeInfo)}</p>
+        </InfoPopover>
+      </h3>
       {finalGrade}
       <div className='my-2' />
-      <h3>{formatMessage(messages.unweightedGrades)}</h3>
+      <h3>
+        {formatMessage(messages.unweightedGrades)}
+        <InfoPopover onClick={() => {}}>
+          <p>{formatMessage(messages.unweightedGradesInfo)}</p>
+        </InfoPopover>
+      </h3>
       {rest}
     </div>
   );

diff --git a/src/views/GradeView/messages.js b/src/views/GradeView/messages.js
@@ -11,6 +11,16 @@ const messages = defineMessages({
     defaultMessage: 'Your final grade: {earned}/{possible}',
     description: 'Your final grade',
   },
+  finalGradeInfo: {
+    id: 'ora-grade-view.finalGradeInfo',
+    defaultMessage: 'This is your score, your points earned over the total points possible.',
+    description: 'Final grade info',
+  },
+  unweightedGradesInfo: {
+    id: 'ora-grade-view.unweightedGradesInfo',
+    defaultMessage: 'These grades are given to your response. However, these are not used to compute your final grade.',
+    description: 'Unweighted grades info',
+  },
   unweightedGrades: {
     id: 'ora-grade-view.unweightedGrades',
     defaultMessage: 'Unweighted Grades',