mirror of
https://github.com/multica-ai/multica.git
synced 2026-07-05 13:29:44 +02:00
fix(autopilots): align trash icon with action buttons in webhook trigger row (#2805)
The TriggerRow's outer flex uses `items-start`, which made sense back when every trigger only had one row of content (label + maybe a cron expression). Once #2774 added the URL action row to webhook triggers (Copy + Rotate buttons sitting on a second line inside the inner column), the trash button stayed pinned to the top-right of the outer flex — it visibly floats above the URL action buttons instead of lining up with them, which reads as a layout glitch. Move the trash button into the URL action row for webhook triggers so all three action buttons (Copy, Rotate, Delete) share one flex container and align by construction. Schedule and API triggers — which have no URL row — keep the trash button pinned top-right (their bodies are short enough that the top corner reads as "the row's right end"). Extract a `deleteButton` const so the JSX isn't duplicated, and add the existing `delete_dialog.confirm` i18n string as the title attribute for consistency with the other action buttons (Copy / Rotate already have hover titles). No behavioural change — same click handler, same confirm dialog.
This commit is contained in:
@@ -314,6 +314,25 @@ function TriggerRow({ trigger, autopilotId }: { trigger: AutopilotTrigger; autop
|
||||
};
|
||||
|
||||
const Icon = isWebhook ? Webhook : isApi ? Zap : Clock;
|
||||
const showWebhookUrlRow = isWebhook && webhookUrl;
|
||||
|
||||
// Delete control extracted so a webhook trigger can render it inline
|
||||
// with Copy / Rotate on the URL action row (where the other action
|
||||
// buttons live), while schedule / api triggers — which have no URL row
|
||||
// — keep it pinned to the row's top-right corner. Without this the
|
||||
// trash icon visually floats above the URL action buttons because the
|
||||
// outer flex uses `items-start`.
|
||||
const deleteButton = (
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-7 w-7 shrink-0"
|
||||
onClick={() => setConfirmOpen(true)}
|
||||
title={t(($) => $.trigger_row.delete_dialog.confirm)}
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
</Button>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex items-start gap-3 rounded-md border px-3 py-2">
|
||||
@@ -346,7 +365,7 @@ function TriggerRow({ trigger, autopilotId }: { trigger: AutopilotTrigger; autop
|
||||
{t(($) => $.trigger_row.next_label, { date: formatDate(trigger.next_run_at) })}
|
||||
</div>
|
||||
)}
|
||||
{isWebhook && webhookUrl && (
|
||||
{showWebhookUrlRow && (
|
||||
<div className="mt-1.5 flex items-center gap-1.5">
|
||||
<code className="flex-1 min-w-0 truncate rounded bg-muted px-2 py-1 text-xs font-mono text-foreground">
|
||||
{webhookUrl}
|
||||
@@ -370,17 +389,11 @@ function TriggerRow({ trigger, autopilotId }: { trigger: AutopilotTrigger; autop
|
||||
>
|
||||
<RotateCw className={cn("h-3.5 w-3.5 text-muted-foreground", rotateToken.isPending && "animate-spin")} />
|
||||
</Button>
|
||||
{deleteButton}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-7 w-7 shrink-0"
|
||||
onClick={() => setConfirmOpen(true)}
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
</Button>
|
||||
{!showWebhookUrlRow && deleteButton}
|
||||
<AlertDialog open={confirmOpen} onOpenChange={(v) => { if (!v && !deleting) setConfirmOpen(false); }}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
|
||||
Reference in New Issue
Block a user