Merge pull request #461 from CBIIT/CRDCDH-1582

CRDCDH-1582 UX QA for Data Submissions

src/components/DataSubmissions/CopyAdornment.test.tsx

@@ -0,0 +1,65 @@
+import { render } from "@testing-library/react";
+import { axe } from "jest-axe";
+import userEvent from "@testing-library/user-event";
+import CopyAdornment from "./CopyAdornment";
+
+const mockWriteText = jest.fn();
+Object.assign(navigator, {
+  clipboard: {
+    writeText: mockWriteText,
+  },
+});
+
+describe("Accessibility", () => {
+  it("should not have any violations", async () => {
+    const { container } = render(<CopyAdornment _id="abc-123-this-is-a-id" />);
+
+    expect(await axe(container)).toHaveNoViolations();
+  });
+
+  it("should not have any violations (no _ID)", async () => {
+    const { container } = render(<CopyAdornment _id={null} />);
+
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe("Implementation Requirements", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should render the Submission ID and copy button", () => {
+    const { getByTestId } = render(<CopyAdornment _id="abc-123-this-is-a-id" />);
+
+    expect(getByTestId("data-submission-id-value")).toBeInTheDocument();
+    expect(getByTestId("data-submission-id-value")).toHaveTextContent("abc-123-this-is-a-id");
+
+    expect(getByTestId("data-submission-copy-id-button")).toBeInTheDocument();
+    expect(getByTestId("data-submission-copy-id-button")).toBeEnabled();
+  });
+
+  it("should copy the ID to the clipboard when clicking the copy button", () => {
+    const { getByTestId } = render(<CopyAdornment _id="abc-123-this-is-a-id" />);
+
+    userEvent.click(getByTestId("data-submission-copy-id-button"));
+
+    expect(mockWriteText).toHaveBeenCalledWith("abc-123-this-is-a-id");
+  });
+
+  it("should not copy the ID to the clipboard when no _ID is provided", () => {
+    const { getByTestId } = render(<CopyAdornment _id={null} />);
+
+    userEvent.click(getByTestId("data-submission-copy-id-button"), null, {
+      skipPointerEventsCheck: true,
+    });
+
+    expect(mockWriteText).not.toHaveBeenCalled();
+  });
+
+  it("should disable the copy button when no _ID is provided", () => {
+    const { getByTestId } = render(<CopyAdornment _id={null} />);
+
+    expect(getByTestId("data-submission-copy-id-button")).toBeDisabled();
+  });
+});

src/components/DataSubmissions/CopyAdornment.tsx

@@ -0,0 +1,90 @@
+import { FC, memo } from "react";
+import { IconButton, Stack, styled, Typography } from "@mui/material";
+import { isEqual } from "lodash";
+import { ReactComponent as CopyIconSvg } from "../../assets/icons/copy_icon_2.svg";
+
+const StyledCopyWrapper = styled(Stack)({
+  height: "42px",
+  width: "fit-content",
+  minWidth: "508px",
+  padding: "11px 20px",
+  borderRadius: "8px 8px 0px 0px",
+  border: "1.25px solid #6DADDB",
+  borderBottom: 0,
+  background: "#fff",
+  color: "#125868",
+});
+
+const StyledCopyLabel = styled(Typography)({
+  fontFamily: "'Nunito', 'Rubik', sans-serif",
+  fontSize: "12px",
+  fontStyle: "normal",
+  fontWeight: 800,
+  lineHeight: "19.6px",
+  letterSpacing: "0.24px",
+  textTransform: "uppercase",
+  userSelect: "none",
+});
+
+const StyledCopyValue = styled(Typography)({
+  fontFamily: "'Nunito', 'Rubik', sans-serif",
+  fontSize: "16px",
+  fontStyle: "normal",
+  fontWeight: 400,
+  lineHeight: "19.6px",
+  letterSpacing: "0.32px",
+  userSelect: "all",
+});
+
+const StyledCopyIDButton = styled(IconButton)({
+  padding: 0,
+  "&.MuiIconButton-root.Mui-disabled": {
+    color: "#B0B0B0",
+  },
+  marginLeft: "auto !important",
+});
+
+type Props = {
+  /**
+   * The Data Submission ID
+   *
+   * @note This is passed as a prop instead of using the SubmissionContext to prevent a delay in displaying the ID
+   */
+  _id: string;
+};
+
+/**
+ * Provides Data Submission ID display and copy functionality
+ *
+ * @returns {React.FC}
+ */
+const CopyAdornment: FC<Props> = ({ _id }) => {
+  const handleCopyID = () => {
+    if (!_id) {
+      return;
+    }
+
+    navigator.clipboard.writeText(_id);
+  };
+
+  return (
+    <StyledCopyWrapper direction="row" spacing={1.625} alignItems="center">
+      <StyledCopyLabel data-testid="data-submission-id-label" variant="body1">
+        SUBMISSION ID:
+      </StyledCopyLabel>
+      <StyledCopyValue data-testid="data-submission-id-value" variant="body1">
+        {_id}
+      </StyledCopyValue>
+      <StyledCopyIDButton
+        data-testid="data-submission-copy-id-button"
+        aria-label="Copy ID"
+        onClick={handleCopyID}
+        disabled={!_id}
+      >
+        <CopyIconSvg />
+      </StyledCopyIDButton>
+    </StyledCopyWrapper>
+  );
+};
+
+export default memo(CopyAdornment, isEqual);

src/components/DataSubmissions/DataSubmissionIconMap.tsx

@@ -7,7 +7,7 @@ import Rejected from "../../assets/history/dataSubmission/rejected.svg";
 import Completed from "../../assets/history/dataSubmission/completed.svg";
 import Archived from "../../assets/history/dataSubmission/archived.svg";
 import Canceled from "../../assets/history/dataSubmission/canceled.svg";
-import { IconType } from "../Shared/HistoryDialog";
+import { IconType } from "../HistoryDialog";
 
 /**
  * Map of ApplicationStatus to Icon for History Modal

src/components/DataSubmissions/DataSubmissionSummary.test.tsx

@@ -197,15 +197,16 @@ describe("DataSubmissionSummary History Dialog Tests", () => {
 
     fireEvent.click(getByText("Full History"));
 
-    const elements = getAllByTestId("history-item");
-    expect(elements[0]).toHaveTextContent(/ARCHIVED/i);
-    expect(elements[0]).toHaveTextContent("1/9/2023");
-    expect(elements[1]).toHaveTextContent(/COMPLETED/i);
-    expect(elements[1]).toHaveTextContent("1/8/2023");
-    expect(elements[2]).toHaveTextContent(/RELEASED/i);
-    expect(elements[2]).toHaveTextContent("1/7/2023");
-    expect(elements[8]).toHaveTextContent(/NEW/i);
-    expect(elements[8]).toHaveTextContent("1/1/2023");
+    const dates = getAllByTestId(/history-item-\d-date/i);
+    const statuses = getAllByTestId(/history-item-\d-status/i);
+    expect(statuses[0]).toHaveTextContent(/ARCHIVED/i);
+    expect(dates[0]).toHaveTextContent("1/9/2023");
+    expect(statuses[1]).toHaveTextContent(/COMPLETED/i);
+    expect(dates[1]).toHaveTextContent("1/8/2023");
+    expect(statuses[2]).toHaveTextContent(/RELEASED/i);
+    expect(dates[2]).toHaveTextContent("1/7/2023");
+    expect(statuses[8]).toHaveTextContent(/NEW/i);
+    expect(dates[8]).toHaveTextContent("1/1/2023");
   });
 
   it("closes the History dialog with the close button", async () => {
@@ -238,7 +239,7 @@ describe("DataSubmissionSummary History Dialog Tests", () => {
     fireEvent.click(getByText("Full History"));
 
     await waitFor(() => {
-      const items = getAllByTestId("history-item-date");
+      const items = getAllByTestId(/history-item-\d-date/);
       expect(new Date(items[0].textContent).getTime()).toBeGreaterThan(
         new Date(items[1].textContent).getTime()
       );

src/components/DataSubmissions/DataSubmissionSummary.tsx

@@ -4,7 +4,7 @@ import { isEqual } from "lodash";
 import SubmissionHeaderProperty, { StyledValue } from "./SubmissionHeaderProperty";
 import Tooltip from "./Tooltip";
 import { ReactComponent as EmailIconSvg } from "../../assets/icons/email_icon.svg";
-import HistoryDialog from "../Shared/HistoryDialog";
+import HistoryDialog from "../HistoryDialog";
 import DataSubmissionIconMap from "./DataSubmissionIconMap";
 import ReviewCommentsDialog from "../Shared/ReviewCommentsDialog";
 import { SortHistory } from "../../utils";