CRDCDH-1823 Address Study Tooltip Legibility

src/components/Organizations/ConfirmDialog.tsx → src/components/AdminPortal/Organizations/ConfirmDialog.tsx

@@ -9,7 +9,7 @@ import {
   Typography,
   styled,
 } from "@mui/material";
-import { ReactComponent as CloseIconSvg } from "../../assets/icons/close_icon.svg";
+import { ReactComponent as CloseIconSvg } from "../../../assets/icons/close_icon.svg";
 
 const StyledDialog = styled(Dialog)({
   "& .MuiDialog-paper": {

src/components/AdminPortal/Organizations/StudyTooltip.test.tsx

@@ -0,0 +1,119 @@
+import { render, waitFor } from "@testing-library/react";
+import { axe } from "jest-axe";
+import userEvent from "@testing-library/user-event";
+import StudyTooltip from "./StudyTooltip";
+
+const baseStudy: ApprovedStudy = {
+  _id: "",
+  originalOrg: "",
+  studyName: "",
+  studyAbbreviation: "",
+  dbGaPID: "",
+  controlledAccess: false,
+  openAccess: false,
+  PI: "",
+  ORCID: "",
+  createdAt: "",
+};
+
+describe("Accessibility", () => {
+  it("should not have any violations (no studies)", async () => {
+    const { container, getByTestId, getByRole } = render(
+      <StudyTooltip _id="accessibility-test" studies={[]} />
+    );
+
+    userEvent.hover(getByTestId("studies-content-accessibility-test"));
+
+    await waitFor(() => {
+      expect(getByRole("tooltip")).toBeInTheDocument();
+    });
+
+    expect(await axe(container)).toHaveNoViolations();
+  });
+
+  it("should not have any violations (with studies)", async () => {
+    const { container, getByTestId, getByRole } = render(
+      <StudyTooltip
+        _id="accessibility-test"
+        studies={[
+          { ...baseStudy, studyName: "Study Name", studyAbbreviation: "SN" },
+          { ...baseStudy, studyName: "Study Name 2", studyAbbreviation: "SN2" },
+        ]}
+      />
+    );
+
+    userEvent.hover(getByTestId("studies-content-accessibility-test"));
+
+    await waitFor(() => {
+      expect(getByRole("tooltip")).toBeInTheDocument();
+    });
+
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe("Basic Functionality", () => {
+  it("should render a tooltip on hover", async () => {
+    const { getByTestId, getByRole, queryByRole } = render(
+      <StudyTooltip
+        _id="basic-test"
+        studies={[{ ...baseStudy, studyName: "Study Name", studyAbbreviation: "SN" }]}
+      />
+    );
+
+    userEvent.hover(getByTestId("studies-content-basic-test"));
+
+    await waitFor(() => {
+      expect(getByRole("tooltip")).toBeInTheDocument();
+    });
+
+    userEvent.unhover(getByTestId("studies-content-basic-test"));
+
+    await waitFor(() => {
+      expect(queryByRole("tooltip")).not.toBeInTheDocument();
+    });
+  });
+});
+
+describe("Implementation Requirements", () => {
+  it("should render 'other X' when there are more than one study", () => {
+    const { getByText } = render(
+      <StudyTooltip
+        _id="implementation-test"
+        studies={[
+          { ...baseStudy, studyName: "Study Name", studyAbbreviation: "SN" },
+          { ...baseStudy, studyName: "Study Name 2", studyAbbreviation: "SN2" },
+          { ...baseStudy, studyName: "Study Name 3", studyAbbreviation: "SN3" },
+          { ...baseStudy, studyName: "Study Name 4", studyAbbreviation: "SN4" },
+        ]}
+      />
+    );
+
+    expect(getByText("other 3")).toBeInTheDocument();
+  });
+
+  it("should contain the full list of studies in the tooltip", async () => {
+    const studies = [
+      { ...baseStudy, studyName: "Study Name", studyAbbreviation: "SN" },
+      { ...baseStudy, studyName: "Study Name 2", studyAbbreviation: "SN2" },
+      { ...baseStudy, studyName: "Study Name 3", studyAbbreviation: "SN3" },
+      { ...baseStudy, studyName: "Study Name 4", studyAbbreviation: "SN4" },
+    ];
+
+    const { getByTestId, getByRole } = render(
+      <StudyTooltip _id="implementation-test" studies={studies} />
+    );
+
+    userEvent.hover(getByTestId("studies-content-implementation-test"));
+
+    await waitFor(() => {
+      expect(getByRole("tooltip")).toBeInTheDocument();
+    });
+
+    studies.forEach(({ studyName, studyAbbreviation }) => {
+      // NOTE: This hardcodes the expected format of formatFullStudyName. If that changes,
+      // this test will need to be updated.
+      expect(getByRole("tooltip")).toHaveTextContent(`${studyName} (${studyAbbreviation})`);
+    });
+  });
+});

src/components/AdminPortal/Organizations/StudyTooltip.tsx

@@ -0,0 +1,71 @@
+import React, { ElementType, FC, memo, useMemo } from "react";
+import { Typography, styled } from "@mui/material";
+import Tooltip from "../../Tooltip";
+import { formatFullStudyName } from "../../../utils";
+
+const StyledStudyCount = styled(Typography)<{ component: ElementType }>(({ theme }) => ({
+  textDecoration: "underline",
+  cursor: "pointer",
+  color: theme.palette.primary.main,
+}));
+
+const StyledList = styled("ul")({
+  paddingInlineStart: 16,
+  marginBlockStart: 6,
+  marginBlockEnd: 6,
+});
+
+const StyledListItem = styled("li")({
+  "&:not(:last-child)": {
+    marginBottom: 8,
+  },
+  fontSize: 14,
+});
+
+type Props = {
+  /**
+   * The ID of the organization to which the studies belong
+   */
+  _id: Organization["_id"];
+  /**
+   * The list of studies to display in the tooltip
+   */
+  studies: Organization["studies"];
+};
+
+/**
+ * Organization list view tooltip for studies
+ *
+ * @param Props
+ * @returns {React.FC}
+ */
+const StudyTooltip: FC<Props> = ({ _id, studies }) => {
+  const tooltipContent = useMemo<React.ReactNode>(
+    () => (
+      <StyledList>
+        {studies?.map(({ studyName, studyAbbreviation }) => (
+          <StyledListItem key={`${_id}_study_${studyName}_abbrev_${studyAbbreviation}`}>
+            {formatFullStudyName(studyName, studyAbbreviation)}
+          </StyledListItem>
+        ))}
+      </StyledList>
+    ),
+    [studies]
+  );
+
+  return (
+    <Tooltip
+      title={tooltipContent}
+      placement="top"
+      open={undefined}
+      disableHoverListener={false}
+      arrow
+    >
+      <StyledStudyCount variant="body2" component="span" data-testid={`studies-content-${_id}`}>
+        other {studies.length - 1}
+      </StyledStudyCount>
+    </Tooltip>
+  );
+};
+
+export default memo<Props>(StudyTooltip);

src/content/organizations/ListView.tsx

@@ -21,7 +21,7 @@ import {
   Status as OrgStatus,
 } from "../../components/Contexts/OrganizationListContext";
 import usePageTitle from "../../hooks/usePageTitle";
-import StudyTooltip from "../../components/Organizations/StudyTooltip";
+import StudyTooltip from "../../components/AdminPortal/Organizations/StudyTooltip";
 import GenericTable, { Column } from "../../components/GenericTable";
 import { sortData } from "../../utils";
 import { useSearchParamsContext } from "../../components/Contexts/SearchParamsContext";

src/content/organizations/OrganizationView.tsx

@@ -34,7 +34,7 @@ import {
   CreateOrgInput,
   ListApprovedStudiesInput,
 } from "../../graphql";
-import ConfirmDialog from "../../components/Organizations/ConfirmDialog";
+import ConfirmDialog from "../../components/AdminPortal/Organizations/ConfirmDialog";
 import usePageTitle from "../../hooks/usePageTitle";
 import { formatFullStudyName, mapOrganizationStudyToId } from "../../utils";
 import { useSearchParamsContext } from "../../components/Contexts/SearchParamsContext";