Merge pull request #226 from CBIIT/CRDCDH-552

CRDCDH-552 QC Error Dialog

src/components/DataSubmissions/GenericTable.tsx

@@ -3,6 +3,7 @@ import {
   Table,
   TableBody,
   TableCell,
+  TableCellProps,
   TableContainer,
   TableHead,
   TablePagination,
@@ -118,7 +119,8 @@ export type Column<T> = {
   renderValue: (a: T, user: User) => string | boolean | number | React.ReactNode;
   field?: keyof T;
   default?: true;
-  minWidth?: string;
+  sortDisabled?: boolean;
+  sx?: TableCellProps["sx"];
 };
 
 export type FetchListing<T> = {
@@ -138,6 +140,7 @@ type Props<T> = {
   total: number;
   loading?: boolean;
   noContentText?: string;
+  defaultRowsPerPage?: number;
   setItemKey?: (item: T, index: number) => string;
   onFetchData?: (params: FetchListing<T>, force: boolean) => void;
   onOrderChange?: (order: Order) => void;
@@ -151,6 +154,7 @@ const DataSubmissionBatchTable = <T,>({
   total = 0,
   loading,
   noContentText,
+  defaultRowsPerPage = 10,
   setItemKey,
   onFetchData,
   onOrderChange,
@@ -163,7 +167,7 @@ const DataSubmissionBatchTable = <T,>({
     columns.find((c) => c.default) || columns.find((c) => c.field)
   );
   const [page, setPage] = useState<number>(0);
-  const [perPage, setPerPage] = useState<number>(10);
+  const [perPage, setPerPage] = useState<number>(defaultRowsPerPage);
 
   useEffect(() => {
     fetchData();
@@ -221,8 +225,8 @@ const DataSubmissionBatchTable = <T,>({
         <StyledTableHead>
           <TableRow>
             {columns.map((col: Column<T>) => (
-              <StyledHeaderCell key={col.label.toString()} sx={{ minWidth: col.minWidth ?? "fit-content" }}>
-                {col.field ? (
+              <StyledHeaderCell key={col.label.toString()} sx={col.sx}>
+                {col.field && !col.sortDisabled ? (
                   <TableSortLabel
                     active={orderBy === col}
                     direction={orderBy === col ? order : "asc"}

src/content/dataSubmissions/Contexts/QCResultsContext.tsx

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

src/content/dataSubmissions/DataSubmission.tsx

@@ -229,7 +229,9 @@ const columns: Column<Batch>[] = [
     renderValue: (data) => (data?.createdAt ? `${FormatDate(data.createdAt, "MM-DD-YYYY [at] hh:mm A")}` : ""),
     field: "createdAt",
     default: true,
-    minWidth: "240px"
+    sx: {
+      minWidth: "240px"
+    }
   },
   /* TODO: Error Count removed for MVP2-M2. Will be re-added in the future */
 ];

src/content/dataSubmissions/ErrorDialog.tsx

@@ -0,0 +1,155 @@
+import { Button, Dialog, DialogProps, IconButton, Stack, Typography, styled } from "@mui/material";
+import { ReactComponent as CloseIconSvg } from "../../assets/icons/close_icon.svg";
+import { FormatDate } from "../../utils";
+
+const StyledDialog = styled(Dialog)({
+  "& .MuiDialog-paper": {
+    maxWidth: "none",
+    width: "731px !important",
+    padding: "38px 42px 68px",
+    borderRadius: "8px",
+    border: "2px solid #E25C22",
+    background: "linear-gradient(0deg, #F2F6FA 0%, #F2F6FA 100%), #2E4D7B",
+    boxShadow: "0px 4px 45px 0px rgba(0, 0, 0, 0.40)",
+  },
+});
+
+const StyledCloseDialogButton = styled(IconButton)(() => ({
+  position: 'absolute',
+  right: "21px",
+  top: "11px",
+  padding: "10px",
+  "& svg": {
+    color: "#44627C"
+  }
+}));
+
+const StyledCloseButton = styled(Button)({
+  display: "flex",
+  width: "128px",
+  height: "42px",
+  padding: "12px 60px",
+  justifyContent: "center",
+  alignItems: "center",
+  borderRadius: "8px",
+  border: "1px solid #000",
+  color: "#000",
+  textAlign: "center",
+  fontFamily: "'Nunito', 'Rubik', sans-serif",
+  fontSize: "16px",
+  fontStyle: "normal",
+  fontWeight: "700",
+  lineHeight: "24px",
+  letterSpacing: "0.32px",
+  textTransform: "none",
+  alignSelf: "center",
+  marginTop: "45px",
+  "&:hover": {
+    background: "transparent",
+    border: "1px solid #000",
+  }
+});
+
+const StyledHeader = styled(Typography)({
+  color: "#929292",
+  fontFamily: "'Nunito Sans', 'Rubik', sans-serif",
+  fontSize: "13px",
+  fontStyle: "normal",
+  fontWeight: "400",
+  lineHeight: "27px",
+  letterSpacing: "0.5px",
+  textTransform: "uppercase",
+  marginBottom: "2px"
+});
+
+const StyledTitle = styled(Typography)({
+  color: "#E25C22",
+  fontFamily: "'Nunito Sans', 'Rubik', sans-serif",
+  fontSize: "35px",
+  fontStyle: "normal",
+  fontWeight: "900",
+  lineHeight: "30px",
+  marginBottom: "60px"
+});
+
+const StyledSubtitle = styled(Typography)({
+  color: "#453D3D",
+  fontFamily: "'Public Sans', sans-serif",
+  fontSize: "14px",
+  fontStyle: "normal",
+  fontWeight: 700,
+  lineHeight: "20px",
+  letterSpacing: "0.14px",
+  textTransform: "uppercase",
+});
+
+const StyledErrorItem = styled(Typography)({
+  color: "#131313",
+  fontFamily: "'Public Sans', sans-serif",
+  fontSize: "16px",
+  fontStyle: "normal",
+  fontWeight: 400,
+  lineHeight: "22px",
+});
+
+const StyledErrorDetails = styled(Stack)({
+  padding: "10px",
+});
+
+type Props = {
+  header?: string;
+  title?: string;
+  closeText?: string;
+  errors: ErrorMessage[];
+  uploadedDate: string;
+  onClose?: () => void;
+} & Omit<DialogProps, "onClose">;
+
+const ErrorDialog = ({
+  header,
+  title,
+  closeText = "Close",
+  errors,
+  uploadedDate,
+  onClose,
+  open,
+  ...rest
+}: Props) => {
+  const handleCloseDialog = () => {
+    if (typeof onClose === "function") {
+      onClose();
+    }
+  };
+
+  return (
+    <StyledDialog open={open} onClose={handleCloseDialog} title="" {...rest}>
+      <StyledCloseDialogButton aria-label="close" onClick={handleCloseDialog}>
+        <CloseIconSvg />
+      </StyledCloseDialogButton>
+      <StyledHeader variant="h3">
+        {header}
+      </StyledHeader>
+      <StyledTitle variant="h6">
+        {title}
+      </StyledTitle>
+      <StyledErrorDetails direction="column" spacing={2.5}>
+        <StyledSubtitle variant="body2">
+          {`${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) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <StyledErrorItem key={`${idx}_${error.title}_${error.description}`}>
+              {`${idx + 1}. ${error.description}`}
+            </StyledErrorItem>
+          ))}
+        </Stack>
+      </StyledErrorDetails>
+      <StyledCloseButton id="error-dialog-close-button" variant="outlined" onClick={handleCloseDialog}>
+        {closeText}
+      </StyledCloseButton>
+    </StyledDialog>
+  );
+};
+
+export default ErrorDialog;