From 84f8f3c5bc35b190e107caea1677ee4b991613a4 Mon Sep 17 00:00:00 2001
From: Trevor Bayless <trevorbayless1@gmail.com>
Date: Thu, 28 Oct 2021 20:48:33 -0500
Subject: [PATCH] Adjust confirmation dialog logic so closed dialogs can reopen
 (#1259)

---
 frontend/src/Editor/Viewer/Confirm.jsx     |  8 ++----
 frontend/src/HomePage/HomePage.jsx         | 32 +++++++++++-----------
 frontend/src/_components/ConfirmDialog.jsx |  8 ++----
 3 files changed, 20 insertions(+), 28 deletions(-)

diff --git a/frontend/src/Editor/Viewer/Confirm.jsx b/frontend/src/Editor/Viewer/Confirm.jsx
index b22aba26f5..0b825897c4 100644
--- a/frontend/src/Editor/Viewer/Confirm.jsx
+++ b/frontend/src/Editor/Viewer/Confirm.jsx
@@ -10,6 +10,7 @@ export function Confirm({ show, message, onConfirm, onCancel, queryConfirmationD
   }, [show]);
 
   const handleClose = () => {
+    onCancel();
     setShow(false);
   };
 
@@ -18,18 +19,13 @@ export function Confirm({ show, message, onConfirm, onCancel, queryConfirmationD
     handleClose();
   };
 
-  const handleCancel = () => {
-    onCancel();
-    handleClose();
-  };
-
   return (
     <>
       <Modal show={showModal} onHide={handleClose} size="sm" centered={true}>
         <div className="modal-status bg-danger"></div>
         <Modal.Body>{message}</Modal.Body>
         <Modal.Footer>
-          <Button variant="secondary" onClick={handleCancel}>
+          <Button variant="secondary" onClick={handleClose}>
             Cancel
           </Button>
           <Button variant="primary" onClick={handleConfirm}>
diff --git a/frontend/src/HomePage/HomePage.jsx b/frontend/src/HomePage/HomePage.jsx
index df2011de68..010a1b28d5 100644
--- a/frontend/src/HomePage/HomePage.jsx
+++ b/frontend/src/HomePage/HomePage.jsx
@@ -256,6 +256,14 @@ class HomePage extends React.Component {
     return this.canUserPerform(this.state.currentUser, 'delete', app);
   };
 
+  cancelDeleteAppDialog = () => {
+    this.setState({
+      isDeletingApp: false,
+      appToBeDeleted: null,
+      showAppDeletionConfirmation: false,
+    });
+  };
+
   executeAppDeletion = () => {
     this.setState({ isDeletingApp: true });
     appService
@@ -266,11 +274,6 @@ class HomePage extends React.Component {
           hideProgressBar: true,
           position: 'top-center',
         });
-        this.setState({
-          isDeletingApp: false,
-          appToBeDeleted: null,
-          showAppDeletionConfirmation: false,
-        });
         this.fetchApps(this.state.currentPage || 1, this.state.currentFolder.id);
         this.fetchFolders();
       })
@@ -279,12 +282,10 @@ class HomePage extends React.Component {
           hideProgressBar: true,
           position: 'top-center',
         });
-        this.setState({
-          isDeletingApp: false,
-          appToBeDeleted: null,
-          showAppDeletionConfirmation: false,
-        });
         console.log(error);
+      })
+      .finally(() => {
+        this.cancelDeleteAppDialog();
       });
   };
 
@@ -310,7 +311,7 @@ class HomePage extends React.Component {
           message={'The app and the associated data will be permanently deleted, do you want to continue?'}
           confirmButtonLoading={isDeletingApp}
           onConfirm={() => this.executeAppDeletion()}
-          onCancel={() => {}}
+          onCancel={() => this.cancelDeleteAppDialog()}
         />
 
         <Header switchDarkMode={this.props.switchDarkMode} darkMode={this.props.darkMode} />
@@ -454,11 +455,10 @@ class HomePage extends React.Component {
                                         >
                                           {
                                             <span
-                                              className={`${
-                                                app?.current_version_id
-                                                  ? 'badge bg-blue-lt mx-2 '
-                                                  : 'badge bg-light-grey mx-2'
-                                              }`}
+                                              className={`${app?.current_version_id
+                                                ? 'badge bg-blue-lt mx-2 '
+                                                : 'badge bg-light-grey mx-2'
+                                                }`}
                                             >
                                               launch{' '}
                                             </span>
diff --git a/frontend/src/_components/ConfirmDialog.jsx b/frontend/src/_components/ConfirmDialog.jsx
index 841db68acb..f705290e4d 100644
--- a/frontend/src/_components/ConfirmDialog.jsx
+++ b/frontend/src/_components/ConfirmDialog.jsx
@@ -10,6 +10,7 @@ export function ConfirmDialog({ show, message, onConfirm, onCancel, confirmButto
   }, [show]);
 
   const handleClose = () => {
+    onCancel();
     setShow(false);
   };
 
@@ -17,18 +18,13 @@ export function ConfirmDialog({ show, message, onConfirm, onCancel, confirmButto
     onConfirm();
   };
 
-  const handleCancel = () => {
-    onCancel();
-    handleClose();
-  };
-
   return (
     <>
       <Modal show={showModal} onHide={handleClose} size="sm" centered={true}>
         <div className="modal-status bg-danger"></div>
         <Modal.Body>{message}</Modal.Body>
         <Modal.Footer>
-          <Button variant="secondary" onClick={handleCancel}>
+          <Button variant="secondary" onClick={handleClose}>
             Cancel
           </Button>
           <Button