From a84b43d3f272830be1ee2150764e61962504d0c8 Mon Sep 17 00:00:00 2001
From: Ivy <ivy.jeong@gmail.com>
Date: Mon, 6 Jan 2025 15:49:31 -0500
Subject: [PATCH] useConfirmationDialog hook

---
 .../DeleteWorkflowTrigger.tsx                 | 65 +++++++++++--------
 .../WorkflowTriggerActions.tsx                | 13 ++--
 2 files changed, 43 insertions(+), 35 deletions(-)

diff --git a/ui/admin/app/components/workflow-triggers/DeleteWorkflowTrigger.tsx b/ui/admin/app/components/workflow-triggers/DeleteWorkflowTrigger.tsx
index 62cf0bc8..d33f00e8 100644
--- a/ui/admin/app/components/workflow-triggers/DeleteWorkflowTrigger.tsx
+++ b/ui/admin/app/components/workflow-triggers/DeleteWorkflowTrigger.tsx
@@ -1,29 +1,28 @@
-import { useState } from "react";
 import { toast } from "sonner";
 import { mutate } from "swr";
 
 import { CronJobApiService } from "~/lib/service/api/cronjobApiService";
 import { WebhookApiService } from "~/lib/service/api/webhookApiService";
 
+import { TypographyP } from "~/components/Typography";
 import { ConfirmationDialog } from "~/components/composed/ConfirmationDialog";
+import { DropdownMenuItem } from "~/components/ui/dropdown-menu";
+import { useConfirmationDialog } from "~/hooks/component-helpers/useConfirmationDialog";
 import { useAsync } from "~/hooks/useAsync";
 
 export function DeleteWorkflowTrigger({
     id,
+    name,
     type,
-    children,
 }: {
     id: string;
+    name?: string;
     type: "webhook" | "schedule";
-    children?: React.ReactNode;
 }) {
-    const [open, setOpen] = useState(false);
-
     const deleteWebhook = useAsync(WebhookApiService.deleteWebhook, {
         onSuccess: () => {
             mutate(WebhookApiService.getWebhooks.key());
             toast.success("Webhook workflow trigger has been deleted.");
-            setOpen(false);
         },
     });
 
@@ -31,36 +30,48 @@ export function DeleteWorkflowTrigger({
         onSuccess: () => {
             mutate(CronJobApiService.getCronJobs.key());
             toast.success("Schedule workflow trigger has been deleted.");
-            setOpen(false);
         },
     });
 
-    const handleConfirmDelete = () => {
+    const handleConfirmDelete = async () => {
         if (type === "webhook") {
-            deleteWebhook.execute(id);
+            await deleteWebhook.executeAsync(id);
         } else {
-            deleteCronjob.execute(id);
+            await deleteCronjob.executeAsync(id);
         }
     };
 
-    const loading = deleteWebhook.isLoading || deleteCronjob.isLoading;
+    const { interceptAsync, dialogProps } = useConfirmationDialog();
 
     return (
-        <ConfirmationDialog
-            open={open}
-            onOpenChange={setOpen}
-            title="Delete Trigger?"
-            description="This action cannot be undone."
-            onConfirm={handleConfirmDelete}
-            closeOnConfirm={false}
-            confirmProps={{
-                loading: loading,
-                disabled: loading,
-                variant: "destructive",
-                children: "Delete",
-            }}
-        >
-            {children}
-        </ConfirmationDialog>
+        <>
+            <DropdownMenuItem
+                variant="destructive"
+                onClick={(e) => {
+                    e.preventDefault();
+                    interceptAsync(handleConfirmDelete);
+                }}
+            >
+                Delete
+            </DropdownMenuItem>
+
+            <ConfirmationDialog
+                {...dialogProps}
+                title="Delete Workflow Trigger?"
+                description={
+                    <div className="flex flex-col">
+                        <TypographyP>
+                            Are you sure you want to delete workflow trigger:{" "}
+                            <b>{name || id}</b>?
+                        </TypographyP>
+                        <TypographyP>The action cannot be undone.</TypographyP>
+                    </div>
+                }
+                confirmProps={{
+                    children: "Delete",
+                    variant: "destructive",
+                }}
+            />
+        </>
     );
 }
diff --git a/ui/admin/app/components/workflow-triggers/WorkflowTriggerActions.tsx b/ui/admin/app/components/workflow-triggers/WorkflowTriggerActions.tsx
index 3768fc32..f6c3f03a 100644
--- a/ui/admin/app/components/workflow-triggers/WorkflowTriggerActions.tsx
+++ b/ui/admin/app/components/workflow-triggers/WorkflowTriggerActions.tsx
@@ -46,14 +46,11 @@ export function WorkflowTriggerActions({ item }: { item: WorkflowTrigger }) {
                         <DropdownMenuItem>Edit</DropdownMenuItem>
                     </Link>
 
-                    <DeleteWorkflowTrigger id={item.id} type={item.type}>
-                        <DropdownMenuItem
-                            className="text-destructive"
-                            onSelect={(e) => e.preventDefault()}
-                        >
-                            Delete
-                        </DropdownMenuItem>
-                    </DeleteWorkflowTrigger>
+                    <DeleteWorkflowTrigger
+                        id={item.id}
+                        name={item.name}
+                        type={item.type}
+                    />
                 </DropdownMenuGroup>
             </DropdownMenuContent>
         </DropdownMenu>