Confirm before overwriting file when uploading file with same name

spiffworkflow-frontend/src/routes/ProcessModelShow.tsx

@@ -360,13 +360,12 @@ export default function ProcessModelShow() {
     );
   };
 
-  const handleFileUploadCancel = () => {
+  const [fileUploadEvent, setFileUploadEvent] = useState(null);
-    setShowFileUploadModal(false);
+  const [duplicateFilename, setDuplicateFilename] = useState<String>('');
-    setFilesToUpload(null);
+  const [showOverwriteConfirmationPrompt, setShowOverwriteConfirmationPrompt] =
-  };
+    useState(false);
 
-  const handleFileUpload = (event: any) => {
+  const doFileUpload = (event: any) => {
-    if (processModel) {
     event.preventDefault();
     const url = `/process-models/${modifiedProcessModelId}/files`;
     const formData = new FormData();
@@ -378,10 +377,60 @@ export default function ProcessModelShow() {
       httpMethod: 'POST',
       postBody: formData,
     });
-    }
+    setFilesToUpload(null);
+  };
+
+  const handleFileUploadCancel = () => {
     setShowFileUploadModal(false);
     setFilesToUpload(null);
   };
+  const handleOverwriteFileConfirm = () => {
+    setShowOverwriteConfirmationPrompt(false);
+    doFileUpload(fileUploadEvent);
+  };
+  const handleOverwriteFileCancel = () => {
+    setShowOverwriteConfirmationPrompt(false);
+    setFilesToUpload(null);
+  };
+
+  const confirmOverwriteFileDialog = () => {
+    return (
+      <Modal
+        danger
+        open={showOverwriteConfirmationPrompt}
+        data-qa="file-overwrite-modal-confirmation-dialog"
+        modalHeading={`Overwrite the file: ${duplicateFilename}`}
+        modalLabel="Overwrite file?"
+        primaryButtonText="Yes"
+        secondaryButtonText="Cancel"
+        onSecondarySubmit={handleOverwriteFileCancel}
+        onRequestSubmit={handleOverwriteFileConfirm}
+        onRequestClose={handleOverwriteFileCancel}
+      />
+    );
+  };
+  const displayOverwriteConfirmation = (filename: String) => {
+    setDuplicateFilename(filename);
+    setShowOverwriteConfirmationPrompt(true);
+  };
+
+  const checkDuplicateFile = (event: any) => {
+    if (processModel && processModel.files.length > 0) {
+      for (const file in processModel.files) {
+        if (processModel.files[file].name === filesToUpload[0].name) {
+          displayOverwriteConfirmation(processModel.files[file].name);
+          setFileUploadEvent(event);
+        }
+      }
+    }
+  };
+
+  const handleFileUpload = (event: any) => {
+    if (processModel) {
+      checkDuplicateFile(event);
+    }
+    setShowFileUploadModal(false);
+  };
 
   const fileUploadModal = () => {
     return (
@@ -548,6 +597,7 @@ export default function ProcessModelShow() {
     return (
       <>
         {fileUploadModal()}
+        {confirmOverwriteFileDialog()}
         <ProcessBreadcrumb
           hotCrumbs={[
             ['Process Groups', '/admin'],