Resolved some technical debt

input-output-hk · Oct 3, 2023 · 032c3a8 · 032c3a8
1 parent e622676
commit 032c3a8
Show file tree

Hide file tree

Showing 4 changed files with 149 additions and 86 deletions.
diff --git a/src/components/CertificationMetadataForm/components/ReportScriptForm.tsx b/src/components/CertificationMetadataForm/components/ReportScriptForm.tsx
@@ -1,19 +1,21 @@
-import React from "react";
+import React, { useState } from "react";
 
-import { Box, Grid, Paper, Typography, TextField, Button } from "@mui/material";
+import { Box, Grid, Typography, Button } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
 import RemoveIcon from "@mui/icons-material/Remove";
 
 import InputGroup from "compositions/InputGroup";
 import Container from "compositions/InputGroup/components/Container";
+import ReportScriptFormConfirmModal from "./ReportScriptFormConfirmModal";
 import { getScriptFields, getScriptContractFields } from "../utils";
 
-import type { FormState, UseFormRegister, UseFormGetFieldState, FieldArrayWithId, UseFieldArrayAppend, UseFieldArrayRemove } from "react-hook-form";
-import type { ReportForm } from "../interface";
+import type { FormState, UseFormRegister, UseFormGetFieldState, FieldArrayWithId, UseFieldArrayAppend, UseFieldArrayRemove, UseFormWatch } from "react-hook-form";
+import type { ReportForm, ReportFormScript } from "../interface";
 
 import "../index.css";
 
 interface Props {
+  watch: UseFormWatch<ReportForm>;
   formState: FormState<ReportForm>;
   register: UseFormRegister<ReportForm>;
   getFieldState: UseFormGetFieldState<ReportForm>;
@@ -31,90 +33,120 @@ interface InstanceProps {
   onRemove: () => void;
 }
 
-const ReportScriptFormInstance = (props: InstanceProps) => {
-  return (
-    <Box className="p-4 mt-4 rounded-sm border-solid border-gray-inactive">
-      <Box className="flex flex-row items-center">
-        <Typography variant="subtitle2" className="text-main flex-1">
-          DAPP Script (#{props.index+1})
-        </Typography>
-        {props.index > 0 && (
-          <Button
-            variant="outlined" size="small" color="error" className="normal-case"
-            startIcon={<RemoveIcon />} onClick={props.onRemove}
-          >
-            Remove Script
-          </Button>
-        )}
-      </Box>
-      <Box className="mx-[-1em]">
-        <InputGroup
-          fields={getScriptFields(props.index)}
-          formState={props.formState}
-          register={props.register}
-          getFieldState={props.getFieldState}
-        />
-      </Box>
-      <Typography variant="subtitle2" className="text-main mt-2">
-        SmartContract Information
+const ReportScriptFormInstance = (props: InstanceProps) => (
+  <Box className="p-4 mt-4 rounded-sm border-solid border-gray-inactive">
+    <Box className="flex flex-row items-center">
+      <Typography variant="subtitle2" className="text-main flex-1">
+        DAPP Script (#{props.index+1})
       </Typography>
-      <Grid container spacing={2}>
-        <Grid item xs={6}>
-          <Box className="mx-[-1em]">
-            <InputGroup
-              fields={getScriptContractFields(props.index).slice(0,4)}
-              formState={props.formState}
-              register={props.register}
-              getFieldState={props.getFieldState}
-            />
-          </Box>
-        </Grid>
-        <Grid item xs={6}>
-          <Box className="mx-[-1em]">
-            <InputGroup
-              fields={getScriptContractFields(props.index).slice(4,7)}
-              formState={props.formState}
-              register={props.register}
-              getFieldState={props.getFieldState}
-            />
-          </Box>
-        </Grid>
-      </Grid>
+      {props.index > 0 && (
+        <Button
+          variant="outlined" size="small" color="error" className="normal-case"
+          startIcon={<RemoveIcon />} onClick={props.onRemove}
+        >
+          Remove Script
+        </Button>
+      )}
     </Box>
-  );
-}
-
-const ReportScriptForm = (props: Props) => (
-  <Container standalone={props.standalone}>
-    <Typography variant="subtitle1" className="text-main pt-4">
-      DAPP Scripts
-    </Typography>
-    {props.scriptFields.map((field, index) => (
-      <ReportScriptFormInstance
-        key={field.id}
-        index={index}
+    <Box className="mx-[-1em]">
+      <InputGroup
+        fields={getScriptFields(props.index)}
         formState={props.formState}
         register={props.register}
         getFieldState={props.getFieldState}
-        onRemove={() => props.removeScript(index)}
       />
-    ))}
-    <Box className="pt-4 text-right">
-      <Button
-        variant="outlined"
-        size="small"
-        className="button-outlined-main"
-        startIcon={<AddIcon />}
-        onClick={() => props.appendScript({
-          scriptHash: '',
-          contractAddress: '',
-          smartContractInfo: {}
-        })}
-      >
-        Add Script
-      </Button>
     </Box>
-  </Container>
+    <Typography variant="subtitle2" className="text-main mt-2">
+      SmartContract Information
+    </Typography>
+    <Grid container spacing={2}>
+      <Grid item xs={6}>
+        <Box className="mx-[-1em]">
+          <InputGroup
+            fields={getScriptContractFields(props.index).slice(0,4)}
+            formState={props.formState}
+            register={props.register}
+            getFieldState={props.getFieldState}
+          />
+        </Box>
+      </Grid>
+      <Grid item xs={6}>
+        <Box className="mx-[-1em]">
+          <InputGroup
+            fields={getScriptContractFields(props.index).slice(4,7)}
+            formState={props.formState}
+            register={props.register}
+            getFieldState={props.getFieldState}
+          />
+        </Box>
+      </Grid>
+    </Grid>
+  </Box>
 );
 
+const ReportScriptForm = (props: Props) => {
+  const [currentIndex, setCurrentIndex] = useState<number|null>(null);
+
+  const isDirty = (script: ReportFormScript) => {
+    if (script.scriptHash.length > 0) return true;
+    if (script.contractAddress.length > 0) return true;
+    if (Object.keys(script.smartContractInfo).filter(key => (script as any).smartContractInfo[key]?.length > 0 ).length > 0) return true;
+    return false;
+  }
+
+  const onRemove = (index: number) => {
+    if (isDirty(props.watch(`scripts.${index}`))) {
+      setCurrentIndex(index);
+    } else {
+      props.removeScript(index);
+    }
+  }
+
+  const confirmRemove = () => {
+    props.removeScript(currentIndex!);
+    setCurrentIndex(null);
+  }
+
+  return (
+    <>
+      <Container standalone={props.standalone}>
+        <Typography variant="subtitle1" className="text-main pt-4">
+          DAPP Scripts
+        </Typography>
+        {props.scriptFields.map((field, index) => (
+          <ReportScriptFormInstance
+            key={field.id}
+            index={index}
+            formState={props.formState}
+            register={props.register}
+            getFieldState={props.getFieldState}
+            onRemove={() => onRemove(index)}
+          />
+        ))}
+        <Box className="pt-4 text-right">
+          <Button
+            variant="outlined"
+            size="small"
+            className="button-outlined-main"
+            startIcon={<AddIcon />}
+            onClick={() => props.appendScript({
+              scriptHash: '',
+              contractAddress: '',
+              smartContractInfo: {}
+            })}
+          >
+            Add Script
+          </Button>
+        </Box>
+      </Container>
+
+      <ReportScriptFormConfirmModal
+        show={currentIndex !== null}
+        onClose={() => setCurrentIndex(null)}
+        onConfirm={confirmRemove}
+      />
+    </>
+  );
+};
+
 export default ReportScriptForm;
diff --git a/src/components/CertificationMetadataForm/components/ReportScriptFormConfirmModal.tsx b/src/components/CertificationMetadataForm/components/ReportScriptFormConfirmModal.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+
+import { Dialog, DialogTitle, DialogActions, Button } from "@mui/material";
+
+import "../index.css";
+
+interface Props {
+  show: boolean;
+  onConfirm: () => void;
+  onClose: () => void;
+}
+
+const ReportScriptFormConfirmModal = (props: Props) => {
+  return (
+    <Dialog open={props.show} onClose={props.onClose}>
+      <DialogTitle>
+        Do you want to delete the current script?
+      </DialogTitle>
+      <DialogActions>
+        <Button variant="contained" className="button-contained-main" onClick={props.onClose}>
+          Cancel
+        </Button>
+        <Button variant="contained" color="error" className="normal-case" onClick={props.onConfirm}>
+          Delete script
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
+
+export default ReportScriptFormConfirmModal;
diff --git a/src/components/CertificationMetadataForm/index.tsx b/src/components/CertificationMetadataForm/index.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import { useForm, useFieldArray } from "react-hook-form";
 
 import { Box, Grid, Paper, Button } from "@mui/material";
-import SendIcon from "@mui/icons-material/Send";
+import DownloadIcon from "@mui/icons-material/Download";
 
 import { sendReport } from "store/slices/reportUpload.slice";
 import { getResolver, getDefaultValues, getInformationFields, auditorFields } from "./utils";
@@ -33,7 +33,7 @@ const CertificationMetadataForm = (props: Props) => {
   const { profile } = useAppSelector((state) => state.profile);
   const { loading, success, errorMessage, onchain, offchain, subject, uuid } = useAppSelector((state) => state.reportUpload);
 
-  const { control, register, handleSubmit, getFieldState, formState } = useForm<ReportForm>({
+  const { control, register, handleSubmit, getFieldState, formState, watch } = useForm<ReportForm>({
     defaultValues: getDefaultValues(profile), resolver: getResolver(props.isReviewCertification), mode: 'onBlur'
   });
   const { fields: scriptFields, append: appendScript, remove: removeScript } = useFieldArray({ name: 'scripts', control });
@@ -109,6 +109,7 @@ const CertificationMetadataForm = (props: Props) => {
           </Grid>
           <Grid item md={12} lg={props.standalone ? 6 : 12}>
             <ReportScriptForm
+              watch={watch}
               formState={formState}
               register={register}
               getFieldState={getFieldState}
@@ -123,10 +124,10 @@ const CertificationMetadataForm = (props: Props) => {
                   <Button
                     variant="outlined" size="large"
                     type="submit" className="button-outlined-highlighted"
-                    endIcon={<SendIcon />}
+                    endIcon={<DownloadIcon />}
                     disabled={loading}
                   >
-                    Send Report
+                    Download Metadata Files
                   </Button>
                   {props.isReviewCertification && (
                     <Button

diff --git a/src/components/CertificationMetadataForm/utils.ts b/src/components/CertificationMetadataForm/utils.ts
@@ -3,7 +3,6 @@ import { buildFormResolver } from "compositions/InputGroup/utils";
 
 import type { ReportForm } from "./interface";
 import type { UserProfile } from "store/slices/profile.slice";
-import { Resolver } from "react-hook-form";
 
 const internalInformationFields: Field[] = [
   {