@@ -226,15 +346,23 @@ const UploadContainer = () => {
+ {(totalIssueCount.errors > 0 || totalIssueCount.warnings > 0) && (
+
+
+
+ )}
{
/>
{adminUser && (
-
+
)}
@@ -263,4 +391,5 @@ const UploadContainer = () => {
);
};
+
export default withRouter(UploadContainer);
diff --git a/frontend/src/uploads/components/UploadIssues.js b/frontend/src/uploads/components/UploadIssues.js
new file mode 100644
index 00000000..edcdc007
--- /dev/null
+++ b/frontend/src/uploads/components/UploadIssues.js
@@ -0,0 +1,122 @@
+import React, { useState } from "react";
+import {
+ Box,
+ Typography,
+ AccordionSummary,
+ AccordionDetails,
+ Accordion,
+ Button,
+} from "@mui/material";
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+import UploadIssuesDetail from "./UploadIssuesDetail";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+
+const UploadIssues = ({
+ confirmUpload,
+ groupedErrors,
+ groupedWarnings,
+ totalIssueCount,
+}) => {
+ const [showAllIssues, setShowAllIssues] = useState(false);
+
+ const toggleShowAllIssues = () => {
+ setShowAllIssues(!showAllIssues);
+ };
+
+ const errorMsg = "Must fix before uploading";
+ const warningMsg = "Can upload without fixing";
+
+ return (
+ <>
+
+
+
+ Your file upload results
+
+
+ Your file has been processed and contains the following errors and
+ warnings. Please review them below:
+
+ {totalIssueCount.errors >= 1 && (
+
+
+ {totalIssueCount.errors} Errors
+
+ - {errorMsg}
+
+ )}
+ {totalIssueCount.warnings >= 1 && (
+
+
+ {totalIssueCount.warnings} Warnings
+
+ - {warningMsg}
+
+ )}
+
+
+
+ {totalIssueCount.errors >= 1 && (
+
+ )}
+ {totalIssueCount.warnings >= 1 && (
+
+ )}
+
+
+ {totalIssueCount.warnings >= 1 && totalIssueCount.errors === 0 && (
+
+ Do you want to upload the file regardless of the warnings?
+
+
+
+
+
+ )}
+
+
+ );
+};
+
+export default UploadIssues;
diff --git a/frontend/src/uploads/components/UploadIssuesDetail.js b/frontend/src/uploads/components/UploadIssuesDetail.js
new file mode 100644
index 00000000..2a447862
--- /dev/null
+++ b/frontend/src/uploads/components/UploadIssuesDetail.js
@@ -0,0 +1,85 @@
+import PropTypes from "prop-types";
+import React, { useState } from "react";
+import { Box, Button } from "@mui/material";
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+
+const UploadIssuesDetail = ({ type, issues, totalIssueCount, msg }) => {
+ const [showAllRowsMap, setShowAllRowsMap] = useState({}); // State to toggle showing all rows for each issue
+ const classname = type === "error" ? "error" : "warning";
+ const toggleShowAllRows = (column, errorType) => {
+ const key = `${column}_${errorType}`;
+ setShowAllRowsMap((prevState) => ({
+ ...prevState,
+ [key]: !prevState[key],
+ }));
+ };
+
+ return (
+
+
+
+
+ {totalIssueCount} {type}
+
+
+ ({msg})
+ {Object.keys(issues).map((column) => (
+
+ Column: {column}
+ {Object.keys(issues[column]).map((errorType, index) => (
+
+
{type.charAt(0).toUpperCase() + type.slice(1)} Name: {errorType}
+
+ Expected value:{" "}
+ {issues[column][errorType].ExpectedType ||
+ issues[column][errorType].ExpectedFormat}
+
+
+ Rows with {type}:{" "}
+
+ {issues[column][errorType].Rows.slice(
+ 0,
+ showAllRowsMap[`${column}_${errorType}`] ? undefined : 15,
+ ).join(", ")}
+ {issues[column][errorType].Rows.length > 15 &&
+ !showAllRowsMap[`${column}_${errorType}`] &&
+ "..."}
+
+
+ {issues[column][errorType].Rows.length > 15 && (
+
+ )}
+
+ );
+};
+
+UploadIssuesDetail.propTypes = {
+ type: PropTypes.string.isRequired,
+ issues: PropTypes.object.isRequired,
+ totalIssueCount: PropTypes.number.isRequired,
+ msg: PropTypes.string.isRequired,
+};
+
+export default UploadIssuesDetail;