PLT-7591: Improved Auditor Report Upload

src/app/App.tsx

@@ -7,7 +7,7 @@ const Landing = lazy(() => import("../pages/landing"));
 const Home = lazy(() => import("../pages/home"));
 const Certification = lazy(() => import("../pages/certification/Certification"));
 const TestingHistory = lazy(() => import("../pages/testingHistory"));
-const ReportUpload = lazy(() => import("../pages/auditing/reportUpload/ReportUpload"))
+const ReportUpload = lazy(() => import("../pages/reportUpload"))
 const CertificationResult = lazy(() => import("../pages/certification/certification-result/CertificationResult"));
 
 const ComingSoon = () => (

src/components/CertificationMetadataForm/components/AuditReportForm.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+
+import { Box, Typography, Button, IconButton } from "@mui/material";
+import AddIcon from "@mui/icons-material/Add";
+import DeleteIcon from "@mui/icons-material/Delete";
+
+import Input from "compositions/InputGroup/components/Input";
+import Container from "compositions/InputGroup/components/Container";
+import { getReportField } from "../utils";
+
+import type { FormState, UseFormRegister, UseFormGetFieldState, FieldArrayWithId, UseFieldArrayAppend, UseFieldArrayRemove } from "react-hook-form";
+import type { ReportForm } from "../interface";
+
+import "../index.css";
+
+interface Props {
+  formState: FormState<ReportForm>;
+  register: UseFormRegister<ReportForm>;
+  getFieldState: UseFormGetFieldState<ReportForm>;
+  reportFields: FieldArrayWithId<ReportForm, "report", "id">[];
+  appendReport: UseFieldArrayAppend<ReportForm, "report">;
+  removeReport: UseFieldArrayRemove;
+  standalone?: boolean;
+}
+
+const AuditReportForm = (props: Props) => {
+  return (
+    <Container standalone={props.standalone}>
+      <Box className="flex flex-row pt-4">
+        <Typography variant="subtitle1" className="text-main flex-1">
+          Audit Report
+        </Typography>
+        <Button
+          variant="outlined" size="small" className="button-outlined-main"
+          startIcon={<AddIcon />} onClick={() => props.appendReport({ value: '' })}
+        >
+          Add URL
+        </Button>
+      </Box>
+      {props.reportFields.map((field, index) => (
+        <Box key={field.id} className="flex flex-row mt-4">
+          <Input
+            noGutter={true}
+            field={getReportField(index)}
+            formState={props.formState}
+            register={props.register}
+            getFieldState={props.getFieldState}
+          />
+          <Box className="ml-4 flex-0 pt-2">
+            <IconButton
+              color="error" className="border-solid border"
+              onClick={() => props.removeReport(index)}
+              disabled={index === 0}
+            >
+              <DeleteIcon />
+            </IconButton>
+          </Box>
+        </Box>
+      ))}
+    </Container>
+  );
+}
+
+export default AuditReportForm;

src/components/CertificationMetadataForm/components/FeedbackModal.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+
+import { Dialog, DialogTitle, DialogContent, DialogActions, Typography, CircularProgress, Button } from "@mui/material";
+
+import "../index.css";
+
+interface Props {
+  show: boolean;
+  loading: boolean;
+  success: boolean;
+  errorMessage: string|null;
+  onClose: () => void;
+}
+
+const FeedbackModal = (props: Props) => {
+  return (
+    <Dialog open={props.show} onClose={props.onClose}>
+      <DialogTitle>
+        {props.loading ? 'Submitting Auditor Report...' : null}
+        {props.success ? 'Successfully submitted Auditor Report' : null}
+        {props.errorMessage !== null ? 'Error submitting Auditor Report' : null}
+      </DialogTitle>
+      <DialogContent className="flex flex-col items-center">
+        {!props.loading ? (
+          <Typography>
+            {props.success ? 'Both off-chain and on-chain certificates will be downloaded at once now.' : null}
+            {props.errorMessage}
+          </Typography>
+        ) : (
+          <CircularProgress color="secondary" size={50} />
+        )}
+      </DialogContent>
+      {!props.loading && (
+        <DialogActions>
+          <Button variant="contained" className="button-contained-main" onClick={props.onClose}>
+            Close
+          </Button>
+        </DialogActions>
+      )}
+    </Dialog>
+  );
+}
+
+export default FeedbackModal;