[UI v2] feat: Moves delete deployment confirmation dialog logic to a …

…re-usable hook (#17001)

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,
 		}),

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;
+};