From 26e9860e567f5dc2c3893e216dd64924f6b60183 Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Mon, 10 Jun 2024 18:55:02 +0530
Subject: [PATCH] refactor: update score label text and add tooltip

---
 .../detailed-grades/ProblemScoreDrawer.jsx    | 21 +++++++++++++++++--
 .../progress-tab/grades/messages.js           | 16 +++++++++++---
 2 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/src/course-home/progress-tab/grades/detailed-grades/ProblemScoreDrawer.jsx b/src/course-home/progress-tab/grades/detailed-grades/ProblemScoreDrawer.jsx
index cf29c39c38..1d069c80f7 100644
--- a/src/course-home/progress-tab/grades/detailed-grades/ProblemScoreDrawer.jsx
+++ b/src/course-home/progress-tab/grades/detailed-grades/ProblemScoreDrawer.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { OverlayTrigger, Tooltip } from '@openedx/paragon';
 
 import {
   getLocale, injectIntl, intlShape, isRtl,
@@ -10,10 +11,26 @@ import messages from '../messages';
 
 const ProblemScoreDrawer = ({ intl, problemScores, subsection }) => {
   const isLocaleRtl = isRtl(getLocale());
-  const scoreLabel = subsection.hasGradedAssignment ? messages.problemScoreLabel : messages.ungradedProblemScoreLabel;
+
+  let scoreLabel = messages.practiceScoreLabel;
+  let scoreLabelTooltip = messages.practiceScoreLabelTooltip;
+  if (subsection.hasGradedAssignment) {
+    scoreLabel = messages.problemScoreLabel;
+    scoreLabelTooltip = messages.problemScoreLabelTooltip;
+  }
+
   return (
     <span className="row w-100 m-0 x-small ml-4 pt-2 pl-1 text-gray-700 flex-nowrap">
-      <span id="problem-score-label" className="col-auto p-0">{intl.formatMessage(scoreLabel)}</span>
+      <OverlayTrigger
+        placement="auto"
+        overlay={(
+          <Tooltip variant="light">
+            <small>{intl.formatMessage(scoreLabelTooltip)}</small>
+          </Tooltip>
+        )}
+      >
+        <span id="problem-score-label" className="col-auto p-0">{intl.formatMessage(scoreLabel)}</span>
+      </OverlayTrigger>
       <div className={classNames('col', 'p-0', { 'greyed-out': !subsection.learnerHasAccess })}>
         <ul className="list-unstyled row w-100 m-0" aria-labelledby="problem-score-label">
           {problemScores.map((problemScore, i) => (
diff --git a/src/course-home/progress-tab/grades/messages.js b/src/course-home/progress-tab/grades/messages.js
index ac8076891d..0671351a03 100644
--- a/src/course-home/progress-tab/grades/messages.js
+++ b/src/course-home/progress-tab/grades/messages.js
@@ -168,11 +168,21 @@ const messages = defineMessages({
     defaultMessage: 'Problem Scores:',
     description: 'Label text which precedes detailed view of all scores per assignment',
   },
-  ungradedProblemScoreLabel: {
-    id: 'progress.detailedGrades.ungraded.problemScore.label',
-    defaultMessage: 'Ungraded Problem Scores:',
+  problemScoreLabelTooltip: {
+    id: 'progress.detailedGrades.problemScore.tooltip',
+    defaultMessage: 'Scores from activities that contribute to your final grade.',
+    description: 'Tooltip text for the label which precedes detailed view of all scores per assignment',
+  },
+  practiceScoreLabel: {
+    id: 'progress.detailedGrades.practice.problemScore.label',
+    defaultMessage: 'Practice Scores:',
     description: 'Label text which precedes detailed view of all ungraded problem scores per assignment',
   },
+  practiceScoreLabelTooltip: {
+    id: 'progress.detailedGrades.practice.problemScore.tooltip',
+    defaultMessage: 'Scores from non-graded activities meant for practice and self-assessment.',
+    description: 'Tooltip text for the label which precedes detailed view of all ungraded problem scores per assignment',
+  },
   problemScoreToggleAltText: {
     id: 'progress.detailedGrades.problemScore.toggleButton',
     defaultMessage: 'Toggle individual problem scores for {subsectionTitle}',