From b203ae81f938915b5ac5686b68a8f9715016dade Mon Sep 17 00:00:00 2001
From: Josh Thoo Jen Sen <110712708+josh1248@users.noreply.github.com>
Date: Sun, 1 Sep 2024 12:25:14 +0800
Subject: [PATCH] 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 <34370238+RichDom2185@users.noreply.github.com>
---
 src/commons/assessment/Assessment.tsx         |  28 +-
 .../__snapshots__/Assessment.tsx.snap         | 434 ++++++++++--------
 2 files changed, 265 insertions(+), 197 deletions(-)

diff --git a/src/commons/assessment/Assessment.tsx b/src/commons/assessment/Assessment.tsx
index 634e49f486..d458dbf602 100644
--- 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) => {
diff --git a/src/commons/assessment/__tests__/__snapshots__/Assessment.tsx.snap b/src/commons/assessment/__tests__/__snapshots__/Assessment.tsx.snap
index 5e51062ea6..293640ccb3 100644
--- a/src/commons/assessment/__tests__/__snapshots__/Assessment.tsx.snap
+++ b/src/commons/assessment/__tests__/__snapshots__/Assessment.tsx.snap
@@ -165,45 +165,55 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
                     <div
                       className="listing-button"
                     >
-                      <button
-                        className="bp5-button bp5-disabled bp5-minimal"
-                        disabled={true}
+                      <span
+                        className="bp5-popover-target"
                         onBlur={[Function]}
-                        onKeyDown={[Function]}
-                        onKeyUp={[Function]}
-                        tabIndex={-1}
-                        type="button"
+                        onContextMenu={[Function]}
+                        onFocus={[Function]}
+                        onMouseEnter={[Function]}
+                        onMouseLeave={[Function]}
                       >
-                        <span
-                          aria-hidden={true}
-                          className="bp5-icon bp5-icon-confirm"
+                        <button
+                          aria-expanded={false}
+                          className="bp5-button bp5-disabled bp5-minimal"
+                          disabled={true}
+                          onBlur={[Function]}
+                          onKeyDown={[Function]}
+                          onKeyUp={[Function]}
+                          tabIndex={-1}
+                          type="button"
                         >
-                          <svg
-                            data-icon="confirm"
-                            height={16}
-                            role="img"
-                            viewBox="0 0 16 16"
-                            width={16}
+                          <span
+                            aria-hidden={true}
+                            className="bp5-icon bp5-icon-confirm"
                           >
-                            <path
-                              d="M8.7 4.29a.965.965 0 00-.71-.3 1.003 1.003 0 00-.71 1.71l2 2c.18.18.43.29.71.29s.53-.11.71-.29l5-5a1.003 1.003 0 00-1.42-1.42l-4.29 4.3L8.7 4.29zm5.22 3.01c.03.23.07.45.07.69 0 3.31-2.69 6-6 6s-6-2.69-6-6 2.69-6 6-6c.81 0 1.59.17 2.3.46l1.5-1.5A7.998 7.998 0 00-.01 7.99c0 4.42 3.58 8 8 8s8-3.58 8-8c0-.83-.13-1.64-.36-2.39l-1.71 1.7z"
-                              fillRule="evenodd"
-                            />
-                          </svg>
-                        </span>
-                        <span
-                          className="bp5-button-text"
-                        >
-                          <span>
-                            Finalize
+                            <svg
+                              data-icon="confirm"
+                              height={16}
+                              role="img"
+                              viewBox="0 0 16 16"
+                              width={16}
+                            >
+                              <path
+                                d="M8.7 4.29a.965.965 0 00-.71-.3 1.003 1.003 0 00-.71 1.71l2 2c.18.18.43.29.71.29s.53-.11.71-.29l5-5a1.003 1.003 0 00-1.42-1.42l-4.29 4.3L8.7 4.29zm5.22 3.01c.03.23.07.45.07.69 0 3.31-2.69 6-6 6s-6-2.69-6-6 2.69-6 6-6c.81 0 1.59.17 2.3.46l1.5-1.5A7.998 7.998 0 00-.01 7.99c0 4.42 3.58 8 8 8s8-3.58 8-8c0-.83-.13-1.64-.36-2.39l-1.71 1.7z"
+                                fillRule="evenodd"
+                              />
+                            </svg>
                           </span>
                           <span
-                            className="custom-hidden-xxs"
+                            className="bp5-button-text"
                           >
-                             Submission
+                            <span>
+                              Finalize
+                            </span>
+                            <span
+                              className="custom-hidden-xxs"
+                            >
+                               Submission
+                            </span>
                           </span>
-                        </span>
-                      </button>
+                        </button>
+                      </span>
                     </div>
                   </div>
                   <div
@@ -352,45 +362,55 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
                     <div
                       className="listing-button"
                     >
-                      <button
-                        className="bp5-button bp5-disabled bp5-minimal"
-                        disabled={true}
+                      <span
+                        className="bp5-popover-target"
                         onBlur={[Function]}
-                        onKeyDown={[Function]}
-                        onKeyUp={[Function]}
-                        tabIndex={-1}
-                        type="button"
+                        onContextMenu={[Function]}
+                        onFocus={[Function]}
+                        onMouseEnter={[Function]}
+                        onMouseLeave={[Function]}
                       >
-                        <span
-                          aria-hidden={true}
-                          className="bp5-icon bp5-icon-confirm"
+                        <button
+                          aria-expanded={false}
+                          className="bp5-button bp5-disabled bp5-minimal"
+                          disabled={true}
+                          onBlur={[Function]}
+                          onKeyDown={[Function]}
+                          onKeyUp={[Function]}
+                          tabIndex={-1}
+                          type="button"
                         >
-                          <svg
-                            data-icon="confirm"
-                            height={16}
-                            role="img"
-                            viewBox="0 0 16 16"
-                            width={16}
+                          <span
+                            aria-hidden={true}
+                            className="bp5-icon bp5-icon-confirm"
                           >
-                            <path
-                              d="M8.7 4.29a.965.965 0 00-.71-.3 1.003 1.003 0 00-.71 1.71l2 2c.18.18.43.29.71.29s.53-.11.71-.29l5-5a1.003 1.003 0 00-1.42-1.42l-4.29 4.3L8.7 4.29zm5.22 3.01c.03.23.07.45.07.69 0 3.31-2.69 6-6 6s-6-2.69-6-6 2.69-6 6-6c.81 0 1.59.17 2.3.46l1.5-1.5A7.998 7.998 0 00-.01 7.99c0 4.42 3.58 8 8 8s8-3.58 8-8c0-.83-.13-1.64-.36-2.39l-1.71 1.7z"
-                              fillRule="evenodd"
-                            />
-                          </svg>
-                        </span>
-                        <span
-                          className="bp5-button-text"
-                        >
-                          <span>
-                            Finalize
+                            <svg
+                              data-icon="confirm"
+                              height={16}
+                              role="img"
+                              viewBox="0 0 16 16"
+                              width={16}
+                            >
+                              <path
+                                d="M8.7 4.29a.965.965 0 00-.71-.3 1.003 1.003 0 00-.71 1.71l2 2c.18.18.43.29.71.29s.53-.11.71-.29l5-5a1.003 1.003 0 00-1.42-1.42l-4.29 4.3L8.7 4.29zm5.22 3.01c.03.23.07.45.07.69 0 3.31-2.69 6-6 6s-6-2.69-6-6 2.69-6 6-6c.81 0 1.59.17 2.3.46l1.5-1.5A7.998 7.998 0 00-.01 7.99c0 4.42 3.58 8 8 8s8-3.58 8-8c0-.83-.13-1.64-.36-2.39l-1.71 1.7z"
+                                fillRule="evenodd"
+                              />
+                            </svg>
                           </span>
                           <span
-                            className="custom-hidden-xxs"
+                            className="bp5-button-text"
                           >
-                             Submission
+                            <span>
+                              Finalize
+                            </span>
+                            <span
+                              className="custom-hidden-xxs"
+                            >
+                               Submission
+                            </span>
                           </span>
-                        </span>
-                      </button>
+                        </button>
+                      </span>
                     </div>
                   </div>
                   <div
@@ -556,45 +576,56 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
                     <div
                       className="listing-button"
                     >
-                      <button
-                        className="bp5-button bp5-minimal bp5-intent-danger"
-                        disabled={false}
+                      <span
+                        className="bp5-popover-target"
                         onBlur={[Function]}
-                        onClick={[Function]}
-                        onKeyDown={[Function]}
-                        onKeyUp={[Function]}
-                        type="button"
+                        onContextMenu={[Function]}
+                        onFocus={[Function]}
+                        onMouseEnter={[Function]}
+                        onMouseLeave={[Function]}
                       >
-                        <span
-                          aria-hidden={true}
-                          className="bp5-icon bp5-icon-confirm"
+                        <button
+                          aria-expanded={false}
+                          className="bp5-button bp5-minimal bp5-intent-danger"
+                          disabled={false}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onKeyDown={[Function]}
+                          onKeyUp={[Function]}
+                          tabIndex={0}
+                          type="button"
                         >
-                          <svg
-                            data-icon="confirm"
-                            height={16}
-                            role="img"
-                            viewBox="0 0 16 16"
-                            width={16}
+                          <span
+                            aria-hidden={true}
+                            className="bp5-icon bp5-icon-confirm"
                           >
-                            <path
-                              d="M8.7 4.29a.965.965 0 00-.71-.3 1.003 1.003 0 00-.71 1.71l2 2c.18.18.43.29.71.29s.53-.11.71-.29l5-5a1.003 1.003 0 00-1.42-1.42l-4.29 4.3L8.7 4.29zm5.22 3.01c.03.23.07.45.07.69 0 3.31-2.69 6-6 6s-6-2.69-6-6 2.69-6 6-6c.81 0 1.59.17 2.3.46l1.5-1.5A7.998 7.998 0 00-.01 7.99c0 4.42 3.58 8 8 8s8-3.58 8-8c0-.83-.13-1.64-.36-2.39l-1.71 1.7z"
-                              fillRule="evenodd"
-                            />
-                          </svg>
-                        </span>
-                        <span
-                          className="bp5-button-text"
-                        >
-                          <span>
-                            Finalize
+                            <svg
+                              data-icon="confirm"
+                              height={16}
+                              role="img"
+                              viewBox="0 0 16 16"
+                              width={16}
+                            >
+                              <path
+                                d="M8.7 4.29a.965.965 0 00-.71-.3 1.003 1.003 0 00-.71 1.71l2 2c.18.18.43.29.71.29s.53-.11.71-.29l5-5a1.003 1.003 0 00-1.42-1.42l-4.29 4.3L8.7 4.29zm5.22 3.01c.03.23.07.45.07.69 0 3.31-2.69 6-6 6s-6-2.69-6-6 2.69-6 6-6c.81 0 1.59.17 2.3.46l1.5-1.5A7.998 7.998 0 00-.01 7.99c0 4.42 3.58 8 8 8s8-3.58 8-8c0-.83-.13-1.64-.36-2.39l-1.71 1.7z"
+                                fillRule="evenodd"
+                              />
+                            </svg>
                           </span>
                           <span
-                            className="custom-hidden-xxs"
+                            className="bp5-button-text"
                           >
-                             Submission
+                            <span>
+                              Finalize
+                            </span>
+                            <span
+                              className="custom-hidden-xxs"
+                            >
+                               Submission
+                            </span>
                           </span>
-                        </span>
-                      </button>
+                        </button>
+                      </span>
                     </div>
                   </div>
                   <div
@@ -953,45 +984,55 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
                     <div
                       className="listing-button"
                     >
-                      <button
-                        className="bp5-button bp5-disabled bp5-minimal"
-                        disabled={true}
+                      <span
+                        className="bp5-popover-target"
                         onBlur={[Function]}
-                        onKeyDown={[Function]}
-                        onKeyUp={[Function]}
-                        tabIndex={-1}
-                        type="button"
+                        onContextMenu={[Function]}
+                        onFocus={[Function]}
+                        onMouseEnter={[Function]}
+                        onMouseLeave={[Function]}
                       >
-                        <span
-                          aria-hidden={true}
-                          className="bp5-icon bp5-icon-confirm"
+                        <button
+                          aria-expanded={false}
+                          className="bp5-button bp5-disabled bp5-minimal"
+                          disabled={true}
+                          onBlur={[Function]}
+                          onKeyDown={[Function]}
+                          onKeyUp={[Function]}
+                          tabIndex={-1}
+                          type="button"
                         >
-                          <svg
-                            data-icon="confirm"
-                            height={16}
-                            role="img"
-                            viewBox="0 0 16 16"
-                            width={16}
+                          <span
+                            aria-hidden={true}
+                            className="bp5-icon bp5-icon-confirm"
                           >
-                            <path
-                              d="M8.7 4.29a.965.965 0 00-.71-.3 1.003 1.003 0 00-.71 1.71l2 2c.18.18.43.29.71.29s.53-.11.71-.29l5-5a1.003 1.003 0 00-1.42-1.42l-4.29 4.3L8.7 4.29zm5.22 3.01c.03.23.07.45.07.69 0 3.31-2.69 6-6 6s-6-2.69-6-6 2.69-6 6-6c.81 0 1.59.17 2.3.46l1.5-1.5A7.998 7.998 0 00-.01 7.99c0 4.42 3.58 8 8 8s8-3.58 8-8c0-.83-.13-1.64-.36-2.39l-1.71 1.7z"
-                              fillRule="evenodd"
-                            />
-                          </svg>
-                        </span>
-                        <span
-                          className="bp5-button-text"
-                        >
-                          <span>
-                            Finalize
+                            <svg
+                              data-icon="confirm"
+                              height={16}
+                              role="img"
+                              viewBox="0 0 16 16"
+                              width={16}
+                            >
+                              <path
+                                d="M8.7 4.29a.965.965 0 00-.71-.3 1.003 1.003 0 00-.71 1.71l2 2c.18.18.43.29.71.29s.53-.11.71-.29l5-5a1.003 1.003 0 00-1.42-1.42l-4.29 4.3L8.7 4.29zm5.22 3.01c.03.23.07.45.07.69 0 3.31-2.69 6-6 6s-6-2.69-6-6 2.69-6 6-6c.81 0 1.59.17 2.3.46l1.5-1.5A7.998 7.998 0 00-.01 7.99c0 4.42 3.58 8 8 8s8-3.58 8-8c0-.83-.13-1.64-.36-2.39l-1.71 1.7z"
+                                fillRule="evenodd"
+                              />
+                            </svg>
                           </span>
                           <span
-                            className="custom-hidden-xxs"
+                            className="bp5-button-text"
                           >
-                             Submission
+                            <span>
+                              Finalize
+                            </span>
+                            <span
+                              className="custom-hidden-xxs"
+                            >
+                               Submission
+                            </span>
                           </span>
-                        </span>
-                      </button>
+                        </button>
+                      </span>
                     </div>
                   </div>
                   <div
@@ -1186,45 +1227,55 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
                     <div
                       className="listing-button"
                     >
-                      <button
-                        className="bp5-button bp5-disabled bp5-minimal"
-                        disabled={true}
+                      <span
+                        className="bp5-popover-target"
                         onBlur={[Function]}
-                        onKeyDown={[Function]}
-                        onKeyUp={[Function]}
-                        tabIndex={-1}
-                        type="button"
+                        onContextMenu={[Function]}
+                        onFocus={[Function]}
+                        onMouseEnter={[Function]}
+                        onMouseLeave={[Function]}
                       >
-                        <span
-                          aria-hidden={true}
-                          className="bp5-icon bp5-icon-confirm"
+                        <button
+                          aria-expanded={false}
+                          className="bp5-button bp5-disabled bp5-minimal"
+                          disabled={true}
+                          onBlur={[Function]}
+                          onKeyDown={[Function]}
+                          onKeyUp={[Function]}
+                          tabIndex={-1}
+                          type="button"
                         >
-                          <svg
-                            data-icon="confirm"
-                            height={16}
-                            role="img"
-                            viewBox="0 0 16 16"
-                            width={16}
+                          <span
+                            aria-hidden={true}
+                            className="bp5-icon bp5-icon-confirm"
                           >
-                            <path
-                              d="M8.7 4.29a.965.965 0 00-.71-.3 1.003 1.003 0 00-.71 1.71l2 2c.18.18.43.29.71.29s.53-.11.71-.29l5-5a1.003 1.003 0 00-1.42-1.42l-4.29 4.3L8.7 4.29zm5.22 3.01c.03.23.07.45.07.69 0 3.31-2.69 6-6 6s-6-2.69-6-6 2.69-6 6-6c.81 0 1.59.17 2.3.46l1.5-1.5A7.998 7.998 0 00-.01 7.99c0 4.42 3.58 8 8 8s8-3.58 8-8c0-.83-.13-1.64-.36-2.39l-1.71 1.7z"
-                              fillRule="evenodd"
-                            />
-                          </svg>
-                        </span>
-                        <span
-                          className="bp5-button-text"
-                        >
-                          <span>
-                            Finalize
+                            <svg
+                              data-icon="confirm"
+                              height={16}
+                              role="img"
+                              viewBox="0 0 16 16"
+                              width={16}
+                            >
+                              <path
+                                d="M8.7 4.29a.965.965 0 00-.71-.3 1.003 1.003 0 00-.71 1.71l2 2c.18.18.43.29.71.29s.53-.11.71-.29l5-5a1.003 1.003 0 00-1.42-1.42l-4.29 4.3L8.7 4.29zm5.22 3.01c.03.23.07.45.07.69 0 3.31-2.69 6-6 6s-6-2.69-6-6 2.69-6 6-6c.81 0 1.59.17 2.3.46l1.5-1.5A7.998 7.998 0 00-.01 7.99c0 4.42 3.58 8 8 8s8-3.58 8-8c0-.83-.13-1.64-.36-2.39l-1.71 1.7z"
+                                fillRule="evenodd"
+                              />
+                            </svg>
                           </span>
                           <span
-                            className="custom-hidden-xxs"
+                            className="bp5-button-text"
                           >
-                             Submission
+                            <span>
+                              Finalize
+                            </span>
+                            <span
+                              className="custom-hidden-xxs"
+                            >
+                               Submission
+                            </span>
                           </span>
-                        </span>
-                      </button>
+                        </button>
+                      </span>
                     </div>
                   </div>
                   <div
@@ -1390,45 +1441,56 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
                     <div
                       className="listing-button"
                     >
-                      <button
-                        className="bp5-button bp5-minimal bp5-intent-danger"
-                        disabled={false}
+                      <span
+                        className="bp5-popover-target"
                         onBlur={[Function]}
-                        onClick={[Function]}
-                        onKeyDown={[Function]}
-                        onKeyUp={[Function]}
-                        type="button"
+                        onContextMenu={[Function]}
+                        onFocus={[Function]}
+                        onMouseEnter={[Function]}
+                        onMouseLeave={[Function]}
                       >
-                        <span
-                          aria-hidden={true}
-                          className="bp5-icon bp5-icon-confirm"
+                        <button
+                          aria-expanded={false}
+                          className="bp5-button bp5-minimal bp5-intent-danger"
+                          disabled={false}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onKeyDown={[Function]}
+                          onKeyUp={[Function]}
+                          tabIndex={0}
+                          type="button"
                         >
-                          <svg
-                            data-icon="confirm"
-                            height={16}
-                            role="img"
-                            viewBox="0 0 16 16"
-                            width={16}
+                          <span
+                            aria-hidden={true}
+                            className="bp5-icon bp5-icon-confirm"
                           >
-                            <path
-                              d="M8.7 4.29a.965.965 0 00-.71-.3 1.003 1.003 0 00-.71 1.71l2 2c.18.18.43.29.71.29s.53-.11.71-.29l5-5a1.003 1.003 0 00-1.42-1.42l-4.29 4.3L8.7 4.29zm5.22 3.01c.03.23.07.45.07.69 0 3.31-2.69 6-6 6s-6-2.69-6-6 2.69-6 6-6c.81 0 1.59.17 2.3.46l1.5-1.5A7.998 7.998 0 00-.01 7.99c0 4.42 3.58 8 8 8s8-3.58 8-8c0-.83-.13-1.64-.36-2.39l-1.71 1.7z"
-                              fillRule="evenodd"
-                            />
-                          </svg>
-                        </span>
-                        <span
-                          className="bp5-button-text"
-                        >
-                          <span>
-                            Finalize
+                            <svg
+                              data-icon="confirm"
+                              height={16}
+                              role="img"
+                              viewBox="0 0 16 16"
+                              width={16}
+                            >
+                              <path
+                                d="M8.7 4.29a.965.965 0 00-.71-.3 1.003 1.003 0 00-.71 1.71l2 2c.18.18.43.29.71.29s.53-.11.71-.29l5-5a1.003 1.003 0 00-1.42-1.42l-4.29 4.3L8.7 4.29zm5.22 3.01c.03.23.07.45.07.69 0 3.31-2.69 6-6 6s-6-2.69-6-6 2.69-6 6-6c.81 0 1.59.17 2.3.46l1.5-1.5A7.998 7.998 0 00-.01 7.99c0 4.42 3.58 8 8 8s8-3.58 8-8c0-.83-.13-1.64-.36-2.39l-1.71 1.7z"
+                                fillRule="evenodd"
+                              />
+                            </svg>
                           </span>
                           <span
-                            className="custom-hidden-xxs"
+                            className="bp5-button-text"
                           >
-                             Submission
+                            <span>
+                              Finalize
+                            </span>
+                            <span
+                              className="custom-hidden-xxs"
+                            >
+                               Submission
+                            </span>
                           </span>
-                        </span>
-                      </button>
+                        </button>
+                      </span>
                     </div>
                   </div>
                   <div