From a02cc8d58ed1e244f90996e7840e7cfdccb54566 Mon Sep 17 00:00:00 2001
From: Devin Villarosa <102188207+devinvillarosa@users.noreply.github.com>
Date: Thu, 6 Feb 2025 12:15:39 -0800
Subject: [PATCH] [UI v2] feat: Moves delete deployment confirmation dialog
 logic to a re-usable hook (#17001)

---
 .../deployments/data-table/index.tsx          | 30 +++----------
 ...e-delete-deployment-confirmation-dialog.ts | 45 +++++++++++++++++++
 2 files changed, 50 insertions(+), 25 deletions(-)
 create mode 100644 ui-v2/src/components/deployments/use-delete-deployment-confirmation-dialog.ts

diff --git a/ui-v2/src/components/deployments/data-table/index.tsx b/ui-v2/src/components/deployments/data-table/index.tsx
index 8e0075ac34df..276bb0339369 100644
--- a/ui-v2/src/components/deployments/data-table/index.tsx
+++ b/ui-v2/src/components/deployments/data-table/index.tsx
@@ -1,13 +1,8 @@
-import {
-	type DeploymentWithFlow,
-	useDeleteDeployment,
-} from "@/api/deployments";
+import { type DeploymentWithFlow } from "@/api/deployments";
 import type { components } from "@/api/prefect";
+import { useDeleteDeploymentConfirmationDialog } from "@/components/deployments/use-delete-deployment-confirmation-dialog";
 import { DataTable } from "@/components/ui/data-table";
-import {
-	DeleteConfirmationDialog,
-	useDeleteConfirmationDialog,
-} from "@/components/ui/delete-confirmation-dialog";
+import { DeleteConfirmationDialog } from "@/components/ui/delete-confirmation-dialog";
 import { FlowRunActivityBarGraphTooltipProvider } from "@/components/ui/flow-run-activity-bar-graph";
 import { Icon } from "@/components/ui/icons";
 import { SearchInput } from "@/components/ui/input";
@@ -22,7 +17,6 @@ import {
 import { StatusBadge } from "@/components/ui/status-badge";
 import { TagBadgeGroup } from "@/components/ui/tag-badge-group";
 import { TagsInput } from "@/components/ui/tags-input";
-import { useToast } from "@/hooks/use-toast";
 import { pluralize } from "@/utils";
 import { Link } from "@tanstack/react-router";
 import type {
@@ -167,9 +161,7 @@ export const DeploymentsDataTable = ({
 	onDuplicate,
 }: DeploymentsDataTableProps) => {
 	const [deleteConfirmationDialogState, confirmDelete] =
-		useDeleteConfirmationDialog();
-	const { deleteDeployment } = useDeleteDeployment();
-	const { toast } = useToast();
+		useDeleteDeploymentConfirmationDialog();
 
 	const nameSearchValue = (columnFilters.find(
 		(filter) => filter.id === "flowOrDeploymentName",
@@ -224,19 +216,7 @@ export const DeploymentsDataTable = ({
 				const name = deployment.flow?.name
 					? `${deployment.flow?.name}/${deployment.name}`
 					: deployment.name;
-				confirmDelete({
-					title: "Delete Deployment",
-					description: `Are you sure you want to delete ${name}? This action cannot be undone.`,
-					onConfirm: () => {
-						deleteDeployment(deployment.id, {
-							onSuccess: () => {
-								toast({
-									title: "Deployment deleted",
-								});
-							},
-						});
-					},
-				});
+				confirmDelete({ ...deployment, name });
 			},
 			onDuplicate,
 		}),
diff --git a/ui-v2/src/components/deployments/use-delete-deployment-confirmation-dialog.ts b/ui-v2/src/components/deployments/use-delete-deployment-confirmation-dialog.ts
new file mode 100644
index 000000000000..ff31d07bcc86
--- /dev/null
+++ b/ui-v2/src/components/deployments/use-delete-deployment-confirmation-dialog.ts
@@ -0,0 +1,45 @@
+import { Deployment, useDeleteDeployment } from "@/api/deployments";
+import { useDeleteConfirmationDialog } from "@/components/ui/delete-confirmation-dialog";
+import { useToast } from "@/hooks/use-toast";
+import { getRouteApi } from "@tanstack/react-router";
+
+const routeApi = getRouteApi("/deployments/");
+
+export const useDeleteDeploymentConfirmationDialog = () => {
+	const navigate = routeApi.useNavigate();
+	const { toast } = useToast();
+	const [dialogState, confirmDelete] = useDeleteConfirmationDialog();
+
+	const { deleteDeployment } = useDeleteDeployment();
+
+	const handleConfirmDelete = (
+		deployment: Deployment,
+		{
+			shouldNavigate = false,
+		}: {
+			/** Should navigate back to /deployments */
+			shouldNavigate?: boolean;
+		} = {},
+	) =>
+		confirmDelete({
+			title: "Delete Deployment",
+			description: `Are you sure you want to delete ${deployment.name}? This action cannot be undone.`,
+			onConfirm: () => {
+				deleteDeployment(deployment.id, {
+					onSuccess: () => {
+						toast({ title: "Deployment deleted" });
+						if (shouldNavigate) {
+							void navigate({ to: "/deployments" });
+						}
+					},
+					onError: (error) => {
+						const message =
+							error.message || "Unknown error while deleting deployment.";
+						console.error(message);
+					},
+				});
+			},
+		});
+
+	return [dialogState, handleConfirmDelete] as const;
+};