Merge pull request #75 from sartography/bug/replace-file-warning

Confirm before overwriting file when uploading file with same name

spiffworkflow-frontend/src/routes/ProcessModelShow.tsx

@@ -362,13 +362,12 @@ export default function ProcessModelShow() {
     );
   };
 
-  const handleFileUploadCancel = () => {
-    setShowFileUploadModal(false);
-    setFilesToUpload(null);
-  };
+  const [fileUploadEvent, setFileUploadEvent] = useState(null);
+  const [duplicateFilename, setDuplicateFilename] = useState<String>('');
+  const [showOverwriteConfirmationPrompt, setShowOverwriteConfirmationPrompt] =
+    useState(false);
 
-  const handleFileUpload = (event: any) => {
-    if (processModel) {
+  const doFileUpload = (event: any) => {
     event.preventDefault();
     const url = `/process-models/${modifiedProcessModelId}/files`;
     const formData = new FormData();
@@ -380,10 +379,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) {
+      processModel.files.forEach((file) => {
+        if (file.name === filesToUpload[0].name) {
+          displayOverwriteConfirmation(file.name);
+          setFileUploadEvent(event);
+        }
+      });
+    }
+  };
+
+  const handleFileUpload = (event: any) => {
+    if (processModel) {
+      checkDuplicateFile(event);
+    }
+    setShowFileUploadModal(false);
+  };
 
   const fileUploadModal = () => {
     return (
@@ -550,6 +599,7 @@ export default function ProcessModelShow() {
     return (
       <>
         {fileUploadModal()}
+        {confirmOverwriteFileDialog()}
         <ProcessBreadcrumb
           hotCrumbs={[
             ['Process Groups', '/admin'],