Add confirmation modal when deleting a workspace (#6227)

airbytehq · Apr 27, 2023 · 9da47d2 · 9da47d2
1 parent b2dc3fa
commit 9da47d2
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 18 deletions.
diff --git a/airbyte-webapp/src/packages/cloud/locales/en.json b/airbyte-webapp/src/packages/cloud/locales/en.json
@@ -99,6 +99,9 @@
   "settings.accountSettings.updateNameSuccess": "Your name has been updated!",
   "settings.userSettings": "User settings",
   "settings.workspaceSettings": "Workspace settings",
+  "settings.workspaceSettings.delete.confirmation.title": "Delete workspace",
+  "settings.workspaceSettings.delete.confirmation.text": "Deleting this workspace will remove it for all users and cancel all pending syncs. Do you want to proceed?",
+  "settings.workspaceSettings.delete.confirmation.submitButtonText": "Delete workspace",
   "settings.workspaceSettings.delete.success": "Workspace deleted successfully.",
   "settings.workspaceSettings.delete.error": "There was an error deleting this workspace.",
   "settings.workspaceSettings.delete.permissionsError": "You do not have sufficient permissions to delete this workspace. Please consult with the workspace owner.",

diff --git a/...ebapp/src/packages/cloud/views/workspaces/WorkspaceSettingsView/WorkspaceSettingsView.tsx b/...ebapp/src/packages/cloud/views/workspaces/WorkspaceSettingsView/WorkspaceSettingsView.tsx
@@ -9,6 +9,7 @@ import { LabeledInput } from "components";
 import { Button } from "components/ui/Button";
 
 import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics";
+import { useConfirmationModalService } from "hooks/services/ConfirmationModal";
 import { useNotificationService } from "hooks/services/Notification";
 import { useCurrentWorkspace } from "hooks/services/useWorkspace";
 import {
@@ -36,25 +37,35 @@ export const WorkspaceSettingsView: React.FC = () => {
   const { registerNotification } = useNotificationService();
   const [workspaceWasDeleted, setWorkspaceWasDeleted] = useState(false);
   const navigate = useNavigate();
+  const { openConfirmationModal, closeConfirmationModal } = useConfirmationModalService();
 
-  const deleteCurrentWorkspace = () =>
-    removeCloudWorkspace(workspace.workspaceId)
-      .then(() => {
-        registerNotification({
-          id: "settings.workspace.delete.success",
-          text: formatMessage({ id: "settings.workspaceSettings.delete.success" }),
-          type: "success",
-        });
-        setWorkspaceWasDeleted(true);
-        setTimeout(() => navigate(`/${RoutePaths.Workspaces}`), 600);
-      })
-      .catch(() => {
-        registerNotification({
-          id: "settings.workspace.delete.error",
-          text: formatMessage({ id: "settings.workspaceSettings.delete.error" }),
-          type: "error",
-        });
-      });
+  const deleteCurrentWorkspace = () => {
+    openConfirmationModal({
+      title: "settings.workspaceSettings.delete.confirmation.title",
+      text: "settings.workspaceSettings.delete.confirmation.text",
+      submitButtonText: "settings.workspaceSettings.delete.confirmation.submitButtonText",
+      onSubmit() {
+        removeCloudWorkspace(workspace.workspaceId)
+          .then(() => {
+            registerNotification({
+              id: "settings.workspace.delete.success",
+              text: formatMessage({ id: "settings.workspaceSettings.delete.success" }),
+              type: "success",
+            });
+            setWorkspaceWasDeleted(true);
+            setTimeout(() => navigate(`/${RoutePaths.Workspaces}`), 600);
+          })
+          .catch(() => {
+            registerNotification({
+              id: "settings.workspace.delete.error",
+              text: formatMessage({ id: "settings.workspaceSettings.delete.error" }),
+              type: "error",
+            });
+          })
+          .finally(closeConfirmationModal);
+      },
+    });
+  };
 
   return (
     <>