POR-1706 show loading state when deleting app (#3567)

porter-dev · Sep 13, 2023 · dd6d0e1 · dd6d0e1
1 parent f67f40c
commit dd6d0e1
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 44 deletions.
diff --git a/dashboard/src/main/home/app-dashboard/app-view/tabs/Settings.tsx b/dashboard/src/main/home/app-dashboard/app-view/tabs/Settings.tsx
@@ -18,6 +18,7 @@ const Settings: React.FC = () => {
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const { porterApp, clusterId, projectId } = useLatestRevision();
   const { updateAppStep } = useAppAnalytics(porterApp.name);
+  const [isDeleting, setIsDeleting] = useState(false);
 
   const githubWorkflowFilename = `porter_stack_${porterApp.name}.yml`;
 
@@ -55,6 +56,7 @@ const Settings: React.FC = () => {
   const onDelete = useCallback(
     async (deleteWorkflow?: boolean) => {
       try {
+        setIsDeleting(true);
         await api.deletePorterApp(
           "<token>",
           {},
@@ -103,7 +105,10 @@ const Settings: React.FC = () => {
 
         updateAppStep({ step: "stack-deletion", deleteWorkflow: false });
         history.push("/apps");
-      } catch (err) {}
+      } catch (err) {
+      } finally {
+        setIsDeleting(false);
+      }
     },
     [githubWorkflowFilename, porterApp.name, clusterId, projectId]
   );
@@ -130,6 +135,7 @@ const Settings: React.FC = () => {
           closeModal={() => setIsDeleteModalOpen(false)}
           githubWorkflowFilename={githubWorkflowFilename}
           deleteApplication={onDelete}
+          loading={isDeleting}
         />
       )}
     </StyledSettingsTab>

diff --git a/dashboard/src/main/home/app-dashboard/expanded-app/DeleteApplicationModal.tsx b/dashboard/src/main/home/app-dashboard/expanded-app/DeleteApplicationModal.tsx
@@ -8,60 +8,69 @@ import React, { useState } from "react";
 import styled from "styled-components";
 
 type Props = {
-    closeModal: () => void;
-    githubWorkflowFilename: string;
-    deleteApplication: (deleteWorkflowFile?: boolean) => void;
+  closeModal: () => void;
+  githubWorkflowFilename: string;
+  deleteApplication: (deleteWorkflowFile?: boolean) => void;
+  loading?: boolean;
 };
 
 const GithubActionModal: React.FC<Props> = ({
-    closeModal,
-    githubWorkflowFilename,
-    deleteApplication,
+  closeModal,
+  githubWorkflowFilename,
+  deleteApplication,
+  loading = false,
 }) => {
-    const [deleteGithubWorkflow, setDeleteGithubWorkflow] = useState(true);
+  const [deleteGithubWorkflow, setDeleteGithubWorkflow] = useState(true);
 
-    const renderDeleteGithubWorkflowText = () => {
-        if (githubWorkflowFilename === "") {
-            return null;
-        }
-        return (
-            <>
-                <Text color="helper">You may also want to remove this application's associated CI file from your repository.</Text>
-                <Spacer y={0.5} />
-                <Checkbox
-                    checked={deleteGithubWorkflow}
-                    toggleChecked={() => setDeleteGithubWorkflow(!deleteGithubWorkflow)}
-                >
-                    <Text color="helper">
-                        Upon deletion, open a PR to remove this application's associated CI file (<Code>{githubWorkflowFilename}</Code>) from my repository.
-                    </Text>
-                </Checkbox>
-                <Spacer y={1} />
-            </>
-        )
+  const renderDeleteGithubWorkflowText = () => {
+    if (githubWorkflowFilename === "") {
+      return null;
     }
-
     return (
-        <Modal closeModal={closeModal}>
-            <Text size={16}>
-                Confirm deletion
-            </Text>
-            <Spacer y={0.5} />
-            <Text color="helper">Click the button below to confirm deletion. This action is irreversible.</Text>
-            <Spacer y={0.5} />
-            {renderDeleteGithubWorkflowText()}
-            <Button
-                onClick={() => deleteApplication(deleteGithubWorkflow)}
-                color="#b91133"
-            >
-                Delete
-            </Button>
-        </Modal>
+      <>
+        <Text color="helper">
+          You may also want to remove this application's associated CI file from
+          your repository.
+        </Text>
+        <Spacer y={0.5} />
+        <Checkbox
+          checked={deleteGithubWorkflow}
+          toggleChecked={() => setDeleteGithubWorkflow(!deleteGithubWorkflow)}
+        >
+          <Text color="helper">
+            Upon deletion, open a PR to remove this application's associated CI
+            file (<Code>{githubWorkflowFilename}</Code>) from my repository.
+          </Text>
+        </Checkbox>
+        <Spacer y={1} />
+      </>
     );
+  };
+
+  return (
+    <Modal closeModal={closeModal}>
+      <Text size={16}>Confirm deletion</Text>
+      <Spacer y={0.5} />
+      <Text color="helper">
+        Click the button below to confirm deletion. This action is irreversible.
+      </Text>
+      <Spacer y={0.5} />
+      {renderDeleteGithubWorkflowText()}
+      <Button
+        onClick={() => deleteApplication(deleteGithubWorkflow)}
+        color="#b91133"
+        status={loading ? "loading" : ""}
+        loadingText="Deleting..."
+        disabled={loading}
+      >
+        Delete
+      </Button>
+    </Modal>
+  );
 };
 
 export default GithubActionModal;
 
 const Code = styled.span`
   font-family: monospace;
-`;
+`;