Merge pull request #527 from CBIIT/CRDCDH-1863

CRDCDH-1863 Validation Results Compact Table

src/components/HistoryDialog/index.tsx

@@ -356,7 +356,7 @@ const HistoryDialog = <T extends string>({
                   <TruncatedText
                     text={name}
                     maxCharacters={14}
-                    wrapperStyles={{
+                    wrapperSx={{
                       ...BaseItemTypographyStyles,
                       margin: "0 auto",
                       color: nameColor,

src/components/TruncatedText/index.test.tsx

@@ -132,16 +132,27 @@ describe("Basic Functionality", () => {
     });
   });
 
-  it("should forward the wrapperStyles prop to the text wrapper element", () => {
+  it("should forward the wrapperSx prop to the text wrapper element", () => {
     const { getByTestId } = render(
-      <TruncatedText text="Styled text" wrapperStyles={{ color: "red", marginTop: "90px" }} />
+      <TruncatedText text="Styled text" wrapperSx={{ color: "red", marginTop: "90px" }} />
     );
 
     const textWrapper = getByTestId("truncated-text-wrapper");
 
     expect(textWrapper).toHaveStyle("color: red");
     expect(textWrapper).toHaveStyle("margin-top: 90px");
   });
+
+  it("should forward the labelSx prop to the text label element", () => {
+    const { getByTestId } = render(
+      <TruncatedText text="Styled text" labelSx={{ color: "red", marginTop: "90px" }} />
+    );
+
+    const textLabel = getByTestId("truncated-text-label");
+
+    expect(textLabel).toHaveStyle("color: red");
+    expect(textLabel).toHaveStyle("margin-top: 90px");
+  });
 });
 
 describe("Edge Cases", () => {

src/components/TruncatedText/index.tsx

@@ -1,5 +1,5 @@
 import { FC, memo } from "react";
-import { styled } from "@mui/material";
+import { styled, SxProps } from "@mui/material";
 import StyledTooltip from "../StyledFormComponents/StyledTooltip";
 
 const StyledText = styled("span")(() => ({
@@ -11,18 +11,15 @@ const StyledText = styled("span")(() => ({
 }));
 
 const StyledTextWrapper = styled("span", {
-  shouldForwardProp: (p) => p !== "truncated" && p !== "underline" && p !== "styles",
-})<{ truncated: boolean; underline: boolean; styles: React.CSSProperties }>(
-  ({ truncated, underline, styles }) => ({
-    display: "block",
-    textDecoration: truncated && underline ? "underline" : "none",
-    textDecorationStyle: "dashed",
-    textUnderlineOffset: "4px",
-    cursor: truncated ? "pointer" : "inherit",
-    width: "fit-content",
-    ...styles,
-  })
-);
+  shouldForwardProp: (p) => p !== "truncated" && p !== "underline",
+})<{ truncated: boolean; underline: boolean }>(({ truncated, underline }) => ({
+  display: "block",
+  textDecoration: truncated && underline ? "underline" : "none",
+  textDecorationStyle: "dashed",
+  textUnderlineOffset: "4px",
+  cursor: truncated ? "pointer" : "inherit",
+  width: "fit-content",
+}));
 
 type Props = {
   /**
@@ -58,7 +55,11 @@ type Props = {
   /**
    * Optional custom styling to apply on the wrapper element
    */
-  wrapperStyles?: React.CSSProperties;
+  wrapperSx?: SxProps;
+  /**
+   * Optional custom styling to apply on the label element
+   */
+  labelSx?: SxProps;
 };
 
 /**
@@ -75,7 +76,8 @@ const TruncatedText: FC<Props> = ({
   underline = true,
   ellipsis = true,
   disableInteractiveTooltip = true,
-  wrapperStyles = {},
+  wrapperSx,
+  labelSx,
 }: Props) => {
   const isTruncated = text?.length > maxCharacters;
   const displayText = isTruncated
@@ -94,9 +96,11 @@ const TruncatedText: FC<Props> = ({
         truncated={isTruncated}
         underline={underline}
         data-testid="truncated-text-wrapper"
-        styles={wrapperStyles}
+        sx={wrapperSx}
       >
-        <StyledText data-testid="truncated-text-label">{displayText}</StyledText>
+        <StyledText data-testid="truncated-text-label" sx={labelSx}>
+          {displayText}
+        </StyledText>
       </StyledTextWrapper>
     </StyledTooltip>
   );

src/content/dataSubmissions/QualityControl.test.tsx

@@ -657,22 +657,22 @@ describe("Table", () => {
               {
                 ...baseQCResult,
                 displayID: 1,
-                type: "fake-node-01",
-                submittedID: "submitted-id-001",
+                type: "1-fake-long-node-01",
+                submittedID: "1-submitted-id-001",
                 severity: "Error",
                 validatedDate: "2023-05-22T12:52:00Z",
                 warnings: [
                   {
-                    title: "mock-warning-1",
+                    title: "mock-warning-title-1",
                     description: "mock-warning-description-1",
                   },
                 ],
               },
               {
                 ...baseQCResult,
                 displayID: 2,
-                type: "fake-node-02",
-                submittedID: "submitted-id-002",
+                type: "2-fake-long-node-02",
+                submittedID: "2-submitted-id-002",
                 severity: "Warning",
                 validatedDate: "2024-07-31T11:27:00Z",
                 errors: [
@@ -697,15 +697,15 @@ describe("Table", () => {
     });
 
     await waitFor(() => {
-      expect(getByText("submitted-id-001")).toBeInTheDocument(); // Wait for the table to render
+      expect(getByText("1-submitted-id-...")).toBeInTheDocument();
+      expect(getByText("1-fake-long-nod...")).toBeInTheDocument();
     });
 
-    expect(getByText(/mock-warning-1/)).toBeInTheDocument();
+    expect(getByText("mock-warning-ti...")).toBeInTheDocument();
     expect(getByText(/mock-error-1/)).toBeInTheDocument();
-    expect(getByText(/fake-node-01/)).toBeInTheDocument();
-    expect(getByText(/fake-node-02/)).toBeInTheDocument();
-    expect(getByText(/05-22-2023 at 12:52 PM/)).toBeInTheDocument();
-    expect(getByText(/07-31-2024 at 11:27 AM/)).toBeInTheDocument();
+    expect(getByText("2-fake-long-nod...")).toBeInTheDocument();
+    expect(getByText("5/22/2023")).toBeInTheDocument();
+    expect(getByText("7/31/2024")).toBeInTheDocument();
   });
 
   it("should render the placeholder text when no data is available", async () => {

src/content/dataSubmissions/QualityControl.tsx

@@ -21,6 +21,8 @@ import QCResultsContext from "./Contexts/QCResultsContext";
 import { ExportValidationButton } from "../../components/DataSubmissions/ExportValidationButton";
 import StyledSelect from "../../components/StyledFormComponents/StyledSelect";
 import { useSubmissionContext } from "../../components/Contexts/SubmissionContext";
+import StyledTooltip from "../../components/StyledFormComponents/StyledTooltip";
+import TruncatedText from "../../components/TruncatedText";
 
 type FilterForm = {
   /**
@@ -57,7 +59,6 @@ const StyledNodeType = styled(Box)({
 });
 
 const StyledSeverity = styled(Box)({
-  minHeight: 76.5,
   display: "flex",
   alignItems: "center",
 });
@@ -94,6 +95,10 @@ const StyledIssuesTextWrapper = styled(Box)({
   wordBreak: "break-word",
 });
 
+const StyledDateTooltip = styled(StyledTooltip)(() => ({
+  cursor: "pointer",
+}));
+
 type TouchedState = { [K in keyof FilterForm]: boolean };
 
 const initialTouchedFields: TouchedState = {
@@ -108,19 +113,29 @@ const columns: Column<QCResult>[] = [
     renderValue: (data) => <StyledBreakAll>{data?.displayID}</StyledBreakAll>,
     field: "displayID",
     default: true,
+    sx: {
+      width: "122px",
+    },
   },
   {
     label: "Node Type",
-    renderValue: (data) => <StyledNodeType>{data?.type}</StyledNodeType>,
+    renderValue: (data) => (
+      <StyledNodeType>
+        <TruncatedText text={data?.type} maxCharacters={15} disableInteractiveTooltip={false} />
+      </StyledNodeType>
+    ),
     field: "type",
   },
   {
     label: "Submitted Identifier",
-    renderValue: (data) => <StyledBreakAll>{data?.submittedID}</StyledBreakAll>,
+    renderValue: (data) => (
+      <TruncatedText
+        text={data?.submittedID}
+        maxCharacters={15}
+        disableInteractiveTooltip={false}
+      />
+    ),
     field: "submittedID",
-    sx: {
-      width: "20%",
-    },
   },
   {
     label: "Severity",
@@ -130,12 +145,27 @@ const columns: Column<QCResult>[] = [
       </StyledSeverity>
     ),
     field: "severity",
+    sx: {
+      width: "148px",
+    },
   },
   {
     label: "Validated Date",
     renderValue: (data) =>
-      data?.validatedDate ? `${FormatDate(data?.validatedDate, "MM-DD-YYYY [at] hh:mm A")}` : "",
+      data.validatedDate ? (
+        <StyledDateTooltip
+          title={FormatDate(data.validatedDate, "M/D/YYYY h:mm A")}
+          placement="top"
+        >
+          <span>{FormatDate(data.validatedDate, "M/D/YYYY")}</span>
+        </StyledDateTooltip>
+      ) : (
+        ""
+      ),
     field: "validatedDate",
+    sx: {
+      width: "193px",
+    },
   },
   {
     label: "Issues",
@@ -145,9 +175,13 @@ const columns: Column<QCResult>[] = [
           {({ handleOpenErrorDialog }) => (
             <Stack direction="row">
               <StyledIssuesTextWrapper>
-                <span>
-                  {data.errors?.length > 0 ? data.errors[0].title : data.warnings[0]?.title}.
-                </span>{" "}
+                <TruncatedText
+                  text={`${data.errors?.[0]?.title || data.warnings?.[0]?.title}.`}
+                  maxCharacters={15}
+                  wrapperSx={{ display: "inline" }}
+                  labelSx={{ display: "inline" }}
+                  disableInteractiveTooltip={false}
+                />{" "}
                 <StyledErrorDetailsButton
                   onClick={() => handleOpenErrorDialog && handleOpenErrorDialog(data)}
                   variant="text"
@@ -163,9 +197,6 @@ const columns: Column<QCResult>[] = [
         </QCResultsContext.Consumer>
       ),
     sortDisabled: true,
-    sx: {
-      width: "38%",
-    },
   },
 ];