Add tooltip for assessments that are not fully attempted (#3028)

* Add tooltip for assessments that are not fully attempted * Update test snaphots --------- Co-authored-by: Richard Dominick <[email protected]>
source-academy · Sep 1, 2024 · b203ae8 · b203ae8
1 parent 19bb06d
commit b203ae8
Show file tree

Hide file tree

Showing 2 changed files with 265 additions and 197 deletions.
diff --git a/src/commons/assessment/Assessment.tsx b/src/commons/assessment/Assessment.tsx
@@ -74,18 +74,24 @@ const Assessment: React.FC = () => {
   const sortAssessments = (assessments: AssessmentOverview[]) => sortBy(assessments, [a => -a.id]);
 
   const makeSubmissionButton = (overview: AssessmentOverview, index: number) => (
-    <Button
-      disabled={overview.status !== AssessmentStatuses.attempted}
-      icon={IconNames.CONFIRM}
-      intent={overview.status === AssessmentStatuses.attempted ? Intent.DANGER : Intent.NONE}
-      minimal={true}
-      // intentional: each listing renders its own version of onClick
-      // tslint:disable-next-line:jsx-no-lambda
-      onClick={() => setBetchaAssessment(overview)}
+    <Tooltip
+      disabled={overview.status === AssessmentStatuses.attempted}
+      content={'You can finalize after saving an answer for each question!'}
+      position={Position.RIGHT}
     >
-      <span>Finalize</span>
-      <span className="custom-hidden-xxs"> Submission</span>
-    </Button>
+      <Button
+        disabled={overview.status !== AssessmentStatuses.attempted}
+        icon={IconNames.CONFIRM}
+        intent={overview.status === AssessmentStatuses.attempted ? Intent.DANGER : Intent.NONE}
+        minimal={true}
+        // intentional: each listing renders its own version of onClick
+        // tslint:disable-next-line:jsx-no-lambda
+        onClick={() => setBetchaAssessment(overview)}
+      >
+        <span>Finalize</span>
+        <span className="custom-hidden-xxs"> Submission</span>
+      </Button>
+    </Tooltip>
   );
 
   const makeAssessmentInteractButton = (overview: AssessmentOverview) => {