CRDCDH-496 Batch Table Error Count

src/content/dataSubmissions/Contexts/BatchTableContext.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const BatchTableContext = React.createContext<{
+  handleOpenErrorDialog?:(data: Batch) => void;
+}>({});
+
+export default BatchTableContext;

src/content/dataSubmissions/Contexts/QCResultsContext.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import React from "react";
 
 const QCResultsContext = React.createContext<{
-    handleOpenErrorDialog?:(data: QCResult) => void;
+  handleOpenErrorDialog?:(data: QCResult) => void;
 }>({});
 
 export default QCResultsContext;

src/content/dataSubmissions/DataSubmission.tsx

@@ -5,6 +5,7 @@ import {
   Alert,
   AlertColor,
   Box,
+  Button,
   Card,
   CardActions,
   CardActionsProps,
@@ -37,6 +38,8 @@ import { FormatDate } from "../../utils";
 import DataSubmissionActions from "./DataSubmissionActions";
 import QualityControl from "./QualityControl";
 import { ReactComponent as CopyIconSvg } from "../../assets/icons/copy_icon_2.svg";
+import ErrorDialog from "./ErrorDialog";
+import BatchTableContext from "./Contexts/BatchTableContext";
 import DataSubmissionStatistics from '../../components/DataSubmissions/ValidationStatistics';
 import ValidationControls from '../../components/DataSubmissions/ValidationControls';
 import { useAuthContext } from "../../components/Contexts/AuthContext";
@@ -203,6 +206,23 @@ const StyledCopyIDButton = styled(IconButton)(() => ({
   }
 }));
 
+const StyledErrorDetailsButton = styled(Button)(() => ({
+  color: "#0D78C5",
+  fontFamily: "Inter",
+  fontSize: "16px",
+  fontStyle: "normal",
+  fontWeight: 600,
+  lineHeight: "19px",
+  textDecorationLine: "underline",
+  textTransform: "none",
+  padding: 0,
+  justifyContent: "flex-start",
+  "&:hover": {
+    background: "transparent",
+    textDecorationLine: "underline",
+  },
+}));
+
 const columns: Column<Batch>[] = [
   {
     label: "Upload Type",
@@ -233,7 +253,31 @@ const columns: Column<Batch>[] = [
       minWidth: "240px"
     }
   },
-  /* TODO: Error Count removed for MVP2-M2. Will be re-added in the future */
+  {
+    label: "Error Count",
+    renderValue: (data) => (
+      <BatchTableContext.Consumer>
+        {({ handleOpenErrorDialog }) => {
+          if (data?.errors?.length === 0) {
+            return null;
+          }
+
+          return (
+            <StyledErrorDetailsButton
+              onClick={() => handleOpenErrorDialog && handleOpenErrorDialog(data)}
+              variant="text"
+              disableRipple
+              disableTouchRipple
+              disableFocusRipple
+            >
+              {data.errors?.length > 0 ? `${data.errors.length} ${data.errors.length === 1 ? "Error" : "Errors"}` : ""}
+            </StyledErrorDetailsButton>
+          );
+        }}
+      </BatchTableContext.Consumer>
+    ),
+    field: "errors",
+  },
 ];
 
 const URLTabs = {
@@ -254,6 +298,8 @@ const DataSubmission = () => {
   const [error, setError] = useState(null);
   const [loading, setLoading] = useState(false);
   const [changesAlert, setChangesAlert] = useState<AlertState>(null);
+  const [openErrorDialog, setOpenErrorDialog] = useState<boolean>(false);
+  const [selectedRow, setSelectedRow] = useState<Batch | null>(null);
   const tableRef = useRef<TableMethods>(null);
   const isValidTab = tab && Object.values(URLTabs).includes(tab);
   const disableSubmit = useMemo(
@@ -385,6 +431,15 @@ const DataSubmission = () => {
     navigator.clipboard.writeText(submissionId);
   };
 
+  const handleOpenErrorDialog = (data: Batch) => {
+    setOpenErrorDialog(true);
+    setSelectedRow(data);
+  };
+
+  const providerValue = useMemo(() => ({
+    handleOpenErrorDialog
+  }), [handleOpenErrorDialog]);
+
   return (
     <StyledWrapper>
       <GenericAlert open={!!changesAlert} severity={changesAlert?.severity} key="data-submission-alert">
@@ -432,21 +487,24 @@ const DataSubmission = () => {
 
             <StyledMainContentArea>
               {tab === URLTabs.DATA_UPLOAD ? (
-                <>
-                  <DataSubmissionUpload
-                    submitterID={dataSubmission?.submitterID}
-                    readOnly={submissionLockedStatuses.includes(dataSubmission?.status)}
-                    onUpload={handleOnUpload}
-                  />
-                  <GenericTable
-                    ref={tableRef}
-                    columns={columns}
-                    data={batchFiles || []}
-                    total={totalBatchFiles || 0}
-                    loading={loading}
-                    onFetchData={handleFetchBatchFiles}
-                  />
-                </>
+                <BatchTableContext.Provider value={providerValue}>
+                  <>
+                    <DataSubmissionUpload
+                      submitterID={dataSubmission?.submitterID}
+                      readOnly={submissionLockedStatuses.includes(dataSubmission?.status)}
+                      onUpload={handleOnUpload}
+                    />
+                    <GenericTable
+                      ref={tableRef}
+                      columns={columns}
+                      data={batchFiles || []}
+                      total={totalBatchFiles || 0}
+                      loading={loading}
+                      defaultRowsPerPage={20}
+                      onFetchData={handleFetchBatchFiles}
+                    />
+                  </>
+                </BatchTableContext.Provider>
               ) : <QualityControl />}
             </StyledMainContentArea>
           </StyledCardContent>
@@ -459,6 +517,14 @@ const DataSubmission = () => {
           </StyledCardActions>
         </StyledCard>
       </StyledBannerContentContainer>
+      <ErrorDialog
+        open={openErrorDialog}
+        onClose={() => setOpenErrorDialog(false)}
+        header="Data Submission"
+        title="Error Count"
+        errors={selectedRow?.errors}
+        uploadedDate={dataSubmission?.createdAt}
+      />
     </StyledWrapper>
   );
 };

src/content/dataSubmissions/ErrorDialog.tsx

@@ -94,13 +94,15 @@ const StyledErrorItem = styled(Typography)({
 
 const StyledErrorDetails = styled(Stack)({
   padding: "10px",
+  overflowY: "auto",
+  maxHeight: "290px"
 });
 
 type Props = {
   header?: string;
   title?: string;
   closeText?: string;
-  errors: ErrorMessage[];
+  errors: string[];
   uploadedDate: string;
   onClose?: () => void;
 } & Omit<DialogProps, "onClose">;
@@ -137,10 +139,10 @@ const ErrorDialog = ({
           {`${errors?.length || 0} ${errors?.length === 1 ? "COUNT" : "COUNTS"} ON ${FormatDate(uploadedDate, "M/D/YYYY", "N/A")}:`}
         </StyledSubtitle>
         <Stack direction="column" spacing={2.75}>
-          {errors?.map((error: ErrorMessage, idx: number) => (
+          {errors?.map((error: string, idx: number) => (
             // eslint-disable-next-line react/no-array-index-key
-            <StyledErrorItem key={`${idx}_${error.title}_${error.description}`}>
-              {`${idx + 1}. ${error.description}`}
+            <StyledErrorItem key={`${idx}_${error}`}>
+              {`${idx + 1}. ${error}`}
             </StyledErrorItem>
           ))}
         </Stack>

src/content/dataSubmissions/QualityControl.tsx

@@ -65,7 +65,7 @@ const columns: Column<QCResult>[] = [
     field: "severity",
   },
   {
-    label: "Uploaded Date",
+    label: "Validated Date",
     renderValue: (data) => (data?.uploadedDate ? `${FormatDate(data.uploadedDate, "MM-DD-YYYY [at] hh:mm A")}` : ""),
     field: "uploadedDate",
     default: true
@@ -184,7 +184,7 @@ const QualityControl = () => {
         onClose={() => setOpenErrorDialog(false)}
         header="Data Submission"
         title="Reasons"
-        errors={selectedRow?.description}
+        errors={selectedRow?.description?.map((error) => error.description)}
         uploadedDate={selectedRow?.uploadedDate}
       />
     </>