fix: broken button in workflow trigger actions dropdown (#1168)

obot-platform · Jan 9, 2025 · 2558b98 · 2558b98
1 parent f68ac68
commit 2558b98
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 13 deletions.
diff --git a/ui/admin/app/components/workflow-triggers/DeleteWorkflowTrigger.tsx b/ui/admin/app/components/workflow-triggers/DeleteWorkflowTrigger.tsx
@@ -8,15 +8,21 @@ import { WebhookApiService } from "~/lib/service/api/webhookApiService";
 
 import { ConfirmationDialog } from "~/components/composed/ConfirmationDialog";
 import { Button } from "~/components/ui/button";
+import { ClickableDiv } from "~/components/ui/clickable-div";
 import { useConfirmationDialog } from "~/hooks/component-helpers/useConfirmationDialog";
 import { useAsync } from "~/hooks/useAsync";
 
 type DeleteTriggerProps = {
     type: WorkflowTriggerType;
     id: string;
+    children?: React.ReactNode;
 };
 
-export function DeleteWorkflowTrigger({ type, id }: DeleteTriggerProps) {
+export function DeleteWorkflowTrigger({
+    type,
+    id,
+    children,
+}: DeleteTriggerProps) {
     const { delete: deleteAction, revalidate, label } = getActions(type);
 
     const deleteTrigger = useAsync(deleteAction, {
@@ -28,19 +34,25 @@ export function DeleteWorkflowTrigger({ type, id }: DeleteTriggerProps) {
 
     const { interceptAsync, dialogProps } = useConfirmationDialog();
 
+    const handleDelete = () =>
+        interceptAsync(() => deleteTrigger.executeAsync(id));
+
     return (
         <>
-            <Button
-                loading={deleteTrigger.isLoading}
-                disabled={deleteTrigger.isLoading}
-                size="icon"
-                variant="ghost"
-                onClick={() =>
-                    interceptAsync(() => deleteTrigger.executeAsync(id))
-                }
-            >
-                <TrashIcon />
-            </Button>
+            {children ? (
+                <ClickableDiv
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        handleDelete();
+                    }}
+                >
+                    {children}
+                </ClickableDiv>
+            ) : (
+                <Button size="icon" variant="ghost" onClick={handleDelete}>
+                    <TrashIcon />
+                </Button>
+            )}
 
             <ConfirmationDialog
                 {...dialogProps}

diff --git a/ui/admin/app/components/workflow-triggers/WorkflowTriggerActions.tsx b/ui/admin/app/components/workflow-triggers/WorkflowTriggerActions.tsx
@@ -54,7 +54,14 @@ export function WorkflowTriggerActions({ item }: { item: WorkflowTrigger }) {
                         <DropdownMenuItem>Edit</DropdownMenuItem>
                     </Link>
 
-                    <DeleteWorkflowTrigger id={item.id} type={item.type} />
+                    <DeleteWorkflowTrigger id={item.id} type={item.type}>
+                        <DropdownMenuItem
+                            variant="destructive"
+                            onClick={(e) => e.preventDefault()}
+                        >
+                            Delete
+                        </DropdownMenuItem>
+                    </DeleteWorkflowTrigger>
                 </DropdownMenuGroup>
             </DropdownMenuContent>
         </DropdownMenu>