🪟 🔧 Improve delete workspace button UX (#5990)

airbyte-webapp/src/packages/cloud/cloudRoutes.tsx

@@ -11,13 +11,13 @@ import { useBuildUpdateCheck } from "hooks/services/useBuildUpdateCheck";
 import { useQuery } from "hooks/useQuery";
 import { useAuthService } from "packages/cloud/services/auth/AuthService";
 import ConnectorBuilderRoutes from "pages/connectorBuilder/ConnectorBuilderRoutes";
+import { RoutePaths, DestinationPaths, SourcePaths } from "pages/routePaths";
 import { useCurrentWorkspace, WorkspaceServiceProvider } from "services/workspaces/WorkspacesService";
 import { CompleteOauthRequest } from "views/CompleteOauthRequest";
 
 import { CloudRoutes } from "./cloudRoutePaths";
 import { LDExperimentServiceProvider } from "./services/thirdParty/launchdarkly";
 import { VerifyEmailAction } from "./views/FirebaseActionRoute";
-import { RoutePaths, DestinationPaths, SourcePaths } from "../../pages/routePaths";
 
 const CloudMainView = React.lazy(() => import("packages/cloud/views/layout/CloudMainView"));
 const WorkspacesPage = React.lazy(() => import("packages/cloud/views/workspaces"));

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.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.",
   "settings.integrationSettings": "Integration settings",
   "settings.integrationSettings.dbtCloudSettings": "dbt Cloud Integration",
   "settings.integrationSettings.dbtCloudSettings.actions.cancel": "Cancel",

airbyte-webapp/src/packages/cloud/views/workspaces/WorkspaceSettingsView/WorkspaceSettingsView.tsx

@@ -1,18 +1,21 @@
 import classNames from "classnames";
 import { Field, FieldProps, Form, Formik } from "formik";
-import React from "react";
+import React, { useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
+import { useNavigate } from "react-router-dom";
 import * as yup from "yup";
 
 import { LabeledInput } from "components";
 import { Button } from "components/ui/Button";
 
 import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics";
+import { useNotificationService } from "hooks/services/Notification";
 import { useCurrentWorkspace } from "hooks/services/useWorkspace";
 import {
   useRemoveCloudWorkspace,
   useUpdateCloudWorkspace,
 } from "packages/cloud/services/workspaces/CloudWorkspacesService";
+import { RoutePaths } from "pages/routePaths";
 import { Content, SettingsCard } from "pages/SettingsPage/pages/SettingsComponents";
 import { useInvalidateWorkspace, useWorkspaceService } from "services/workspaces/WorkspacesService";
 
@@ -30,6 +33,28 @@ export const WorkspaceSettingsView: React.FC = () => {
   const { mutateAsync: removeCloudWorkspace, isLoading: isRemovingCloudWorkspace } = useRemoveCloudWorkspace();
   const { mutateAsync: updateCloudWorkspace } = useUpdateCloudWorkspace();
   const invalidateWorkspace = useInvalidateWorkspace(workspace.workspaceId);
+  const { registerNotification } = useNotificationService();
+  const [workspaceWasDeleted, setWorkspaceWasDeleted] = useState(false);
+  const navigate = useNavigate();
+
+  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",
+        });
+      });
 
   return (
     <>
@@ -96,7 +121,8 @@ export const WorkspaceSettingsView: React.FC = () => {
             <Button
               isLoading={isRemovingCloudWorkspace}
               variant="danger"
-              onClick={() => removeCloudWorkspace(workspace.workspaceId)}
+              onClick={deleteCurrentWorkspace}
+              disabled={workspaceWasDeleted}
             >
               <FormattedMessage id="settings.generalSettings.deleteText" />
             </Button>