feat: Add tooltip to Validation Results Export button

CBIIT · Jun 5, 2024 · c5ea168 · c5ea168
1 parent b1561d5
commit c5ea168
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 8 deletions.
diff --git a/src/components/DataSubmissions/ExportValidationButton.test.tsx b/src/components/DataSubmissions/ExportValidationButton.test.tsx
@@ -82,6 +82,25 @@ describe("ExportValidationButton cases", () => {
     expect(await axe(container)).toHaveNoViolations();
   });
 
+  it("should have a tooltip present on the button", async () => {
+    const { getByTestId, findByRole } = render(
+      <TestParent mocks={[]}>
+        <ExportValidationButton
+          submission={{ ...baseSubmission, _id: "test-tooltip-id" }}
+          fields={{}}
+        />
+      </TestParent>
+    );
+
+    UserEvent.hover(getByTestId("export-validation-button"));
+
+    const tooltip = await findByRole("tooltip");
+    expect(tooltip).toBeInTheDocument();
+    expect(tooltip).toHaveTextContent(
+      "Export all validation issues for this data submission to a CSV file"
+    );
+  });
+
   it("should execute the SUBMISSION_QC_RESULTS query onClick", async () => {
     const submissionID = "example-execute-test-sub-id";
 

diff --git a/src/components/DataSubmissions/ExportValidationButton.tsx b/src/components/DataSubmissions/ExportValidationButton.tsx
@@ -5,6 +5,7 @@ import { CloudDownload } from "@mui/icons-material";
 import { useSnackbar } from "notistack";
 import dayjs from "dayjs";
 import { unparse } from "papaparse";
+import StyledFormTooltip from "../StyledFormComponents/StyledTooltip";
 import { SUBMISSION_QC_RESULTS, SubmissionQCResultsResp } from "../../graphql";
 import { downloadBlob, filterAlphaNumeric, unpackQCResultSeverities } from "../../utils";
 
@@ -27,6 +28,12 @@ const StyledIconButton = styled(IconButton)({
   color: "#606060",
 });
 
+const StyledTooltip = styled(StyledFormTooltip)({
+  "& .MuiTooltip-tooltip": {
+    color: "#000000",
+  },
+});
+
 /**
  * Provides the button and supporting functionality to export the validation results of a submission.
  *
@@ -105,14 +112,27 @@ export const ExportValidationButton: React.FC<Props> = ({
   };
 
   return (
-    <StyledIconButton
-      onClick={handleClick}
-      disabled={loading || disabled}
-      data-testid="export-validation-button"
-      aria-label="Export validation results"
-      {...buttonProps}
+    <StyledTooltip
+      title={
+        <span>
+          Export all validation issues for this data <br />
+          submission to a CSV file
+        </span>
+      }
+      placement="top"
+      data-testid="export-validation-tooltip"
     >
-      <CloudDownload />
-    </StyledIconButton>
+      <span>
+        <StyledIconButton
+          onClick={handleClick}
+          disabled={loading || disabled}
+          data-testid="export-validation-button"
+          aria-label="Export validation results"
+          {...buttonProps}
+        >
+          <CloudDownload />
+        </StyledIconButton>
+      </span>
+    </StyledTooltip>
   );
 };