CRDCDH-861/CRDCDH-865 DMN 508 Audit Issues

src/components/Organizations/StudyTooltip.tsx

@@ -0,0 +1,51 @@
+import React, { ElementType, FC } from 'react';
+import { Typography, styled } from '@mui/material';
+import Tooltip from '../Tooltip';
+import { formatFullStudyName } from '../../utils';
+
+type Props = {
+  _id: Organization["_id"];
+  studies: Organization["studies"];
+};
+
+const StyledStudyCount = styled(Typography)<{ component: ElementType }>(({ theme }) => ({
+  textDecoration: "underline",
+  cursor: "pointer",
+  color: theme.palette.primary.main,
+}));
+
+const TooltipBody: FC<Props> = ({ _id, studies }) => (
+  <Typography variant="body1">
+    {studies?.map(({ studyName, studyAbbreviation }) => (
+      <React.Fragment key={`${_id}_study_${studyName}`}>
+        {formatFullStudyName(studyName, studyAbbreviation)}
+        <br />
+      </React.Fragment>
+    ))}
+  </Typography>
+);
+
+/**
+ * Organization list view tooltip for studies
+ *
+ * @param Props
+ * @returns {React.FC}
+ */
+const StudyTooltip: FC<Props> = ({ _id, studies }) => (
+  <Tooltip
+    title={<TooltipBody _id={_id} studies={studies} />}
+    placement="top"
+    open={undefined}
+    onBlur={undefined}
+    disableHoverListener={false}
+    arrow
+  >
+    <StyledStudyCount variant="body2" component="span">
+      other
+      {" "}
+      {studies.length - 1}
+    </StyledStudyCount>
+  </Tooltip>
+);
+
+export default StudyTooltip;

src/content/organizations/ListView.tsx

@@ -9,10 +9,10 @@ import {
 import { Link, LinkProps, useLocation } from "react-router-dom";
 import { Controller, useForm } from 'react-hook-form';
 import PageBanner from "../../components/PageBanner";
-import Tooltip from '../../components/Tooltip';
 import { useOrganizationListContext, Status } from '../../components/Contexts/OrganizationListContext';
 import SuspenseLoader from '../../components/SuspenseLoader';
 import usePageTitle from '../../hooks/usePageTitle';
+import StudyTooltip from '../../components/Organizations/StudyTooltip';
 
 type T = Partial<Organization>;
 
@@ -162,12 +162,6 @@ const StyledTablePagination = styled(TablePagination)<{ component: React.Element
   background: "#F5F7F8",
 });
 
-const StyledStudyCount = styled(Typography)<{ component: ElementType }>(({ theme }) => ({
-  textDecoration: "underline",
-  cursor: "pointer",
-  color: theme.palette.primary.main,
-}));
-
 const columns: Column[] = [
   {
     label: "Name",
@@ -188,24 +182,9 @@ const columns: Column[] = [
 
       return (
         <>
-          {studies[0].studyAbbreviation}
+          {studies[0].studyAbbreviation || studies[0].studyName}
           {studies.length > 1 && " and "}
-          {studies.length > 1 && (
-            <Tooltip
-              title={<StudyContent _id={_id} studies={studies} />}
-              placement="top"
-              open={undefined}
-              onBlur={undefined}
-              disableHoverListener={false}
-              arrow
-            >
-              <StyledStudyCount variant="body2" component="span">
-                other
-                {" "}
-                {studies.length - 1}
-              </StyledStudyCount>
-            </Tooltip>
-          )}
+          {studies.length > 1 && (<StudyTooltip _id={_id} studies={studies} />)}
         </>
       );
     },
@@ -227,20 +206,6 @@ const columns: Column[] = [
   },
 ];
 
-const StudyContent: FC<{ _id: Organization["_id"], studies: Organization["studies"] }> = ({ _id, studies }) => (
-  <Typography variant="body1">
-    {studies?.map(({ studyName, studyAbbreviation }) => (
-      <React.Fragment key={`${_id}_study_${studyName}`}>
-        {studyName}
-        {" ("}
-        {studyAbbreviation}
-        {") "}
-        <br />
-      </React.Fragment>
-    ))}
-  </Typography>
-);
-
 /**
  * View for List of Organizations
  *

src/utils/formUtils.test.ts

@@ -189,3 +189,37 @@ describe("programToSelectOption cases", () => {
     expect(selectOption.value).toEqual("");
   });
 });
+
+describe('formatFullStudyName cases', () => {
+  it('should return the study name with abbreviation if abbreviation is provided', () => {
+    const studyName = 'Study Name';
+    const studyAbbreviation = 'SN';
+    const result = utils.formatFullStudyName(studyName, studyAbbreviation);
+    expect(result).toBe('Study Name (SN)');
+  });
+
+  it('should return the study name without abbreviation if abbreviation is not provided', () => {
+    const studyName = 'Study Name';
+    const result = utils.formatFullStudyName(studyName, '');
+    expect(result).toBe('Study Name');
+  });
+
+  it('should return the study name without abbreviation if abbreviation is undefined', () => {
+    const studyName = 'Study Name';
+    const result = utils.formatFullStudyName(studyName, undefined);
+    expect(result).toBe('Study Name');
+  });
+
+  it('should remove extra spaces from the study name', () => {
+    const studyName = '   Study Name   ';
+    const result = utils.formatFullStudyName(studyName, '');
+    expect(result).toBe('Study Name');
+  });
+
+  it('should remove extra spaces from the study abbreviation', () => {
+    const studyName = 'Study Name';
+    const studyAbbreviation = '   SN   ';
+    const result = utils.formatFullStudyName(studyName, studyAbbreviation);
+    expect(result).toBe('Study Name (SN)');
+  });
+});

src/utils/formUtils.ts

@@ -110,3 +110,21 @@ export const programToSelectOption = (program: ProgramOption): SelectOption => (
   label: `${program.name || ""}${program.abbreviation ? ` (${program.abbreviation})` : ""}`?.trim(),
   value: program.name || ""
 });
+
+/**
+ * Formats an Approved Study Name and Abbreviation into a single string.
+ * If the abbreviation is provided, it will be enclosed in parentheses.
+ *
+ * @example Alphabetic Study (AS)
+ * @example Alphabetic Study
+ * @param studyName The full name of the study
+ * @param studyAbbreviation The abbreviation of the study
+ * @returns The formatted study name
+ */
+export const formatFullStudyName = (studyName: string, studyAbbreviation: string): string => {
+  if (studyAbbreviation && studyAbbreviation.length > 0) {
+    return `${studyName.trim()} (${studyAbbreviation.trim()})`;
+  }
+
+  return studyName.trim();
+};