feat(webapp): confirm before aborting a bulk action

Aborting a bulk action from the list row button or the inspector now opens
a confirmation dialog (matching the "Cancel this run?" flow) instead of
firing immediately, so it's harder to abort by accident.

Both entry points share a new AbortBulkActionDialog that posts to the
existing abort action.

Author: carderne

apps/webapp/app/components/runs/v3/AbortBulkActionDialog.tsx

@@ -0,0 +1,56 @@
+import { NoSymbolIcon } from "@heroicons/react/24/solid";
+import { DialogClose } from "@radix-ui/react-dialog";
+import { Form, useNavigation } from "@remix-run/react";
+import { Button } from "~/components/primitives/Buttons";
+import { DialogContent, DialogHeader } from "~/components/primitives/Dialog";
+import { FormButtons } from "~/components/primitives/FormButtons";
+import { Paragraph } from "~/components/primitives/Paragraph";
+import { SpinnerWhite } from "~/components/primitives/Spinner";
+
+type AbortBulkActionDialogProps = {
+  // The abort action route to POST to (the bulk action detail path).
+  formAction: string;
+  // Fired on submit so a parent controlling the Radix Dialog can close it
+  // without wrapping the submit button in `DialogClose` — that wrapper races
+  // submit (close fires first, unmounts the form, and the abort POST never
+  // lands). Optional so uncontrolled call sites still type-check.
+  onAbortSubmitted?: () => void;
+};
+
+export function AbortBulkActionDialog({ formAction, onAbortSubmitted }: AbortBulkActionDialogProps) {
+  const navigation = useNavigation();
+
+  const isLoading = navigation.formAction === formAction && navigation.formMethod === "POST";
+
+  return (
+    <DialogContent key="abort">
+      <DialogHeader>Abort this bulk action?</DialogHeader>
+      <div className="flex flex-col gap-3 pt-3">
+        <Paragraph>
+          Aborting stops this bulk action from processing any remaining runs. Runs it has already
+          processed won't be affected.
+        </Paragraph>
+        <FormButtons
+          confirmButton={
+            <Form action={formAction} method="post" onSubmit={() => onAbortSubmitted?.()}>
+              <Button
+                type="submit"
+                variant="danger/medium"
+                LeadingIcon={isLoading ? SpinnerWhite : NoSymbolIcon}
+                disabled={isLoading}
+                shortcut={{ modifiers: ["mod"], key: "enter" }}
+              >
+                {isLoading ? "Aborting..." : "Abort bulk action"}
+              </Button>
+            </Form>
+          }
+          cancelButton={
+            <DialogClose asChild>
+              <Button variant={"tertiary/medium"}>Close</Button>
+            </DialogClose>
+          }
+        />
+      </div>
+    </DialogContent>
+  );
+}

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.bulk-actions.$bulkActionParam/route.tsx

@@ -1,20 +1,22 @@
 import { ArrowPathIcon } from "@heroicons/react/20/solid";
-import { Form } from "@remix-run/react";
+import { NoSymbolIcon } from "@heroicons/react/24/solid";
 import { tryCatch } from "@trigger.dev/core";
 import type { BulkActionType } from "@trigger.dev/database";
 import { motion } from "framer-motion";
+import { useState } from "react";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
 import { ExitIcon } from "~/assets/icons/ExitIcon";
 import { RunsIcon } from "~/assets/icons/RunsIcon";
 import { BulkActionFilterSummary } from "~/components/BulkActionFilterSummary";
-import { LinkButton } from "~/components/primitives/Buttons";
+import { Button, LinkButton } from "~/components/primitives/Buttons";
 import { CopyableText } from "~/components/primitives/CopyableText";
 import { DateTime } from "~/components/primitives/DateTime";
+import { Dialog, DialogTrigger } from "~/components/primitives/Dialog";
 import { Header2 } from "~/components/primitives/Headers";
 import { Paragraph } from "~/components/primitives/Paragraph";
-import { PermissionButton } from "~/components/primitives/PermissionButton";
 import * as Property from "~/components/primitives/PropertyTable";
+import { AbortBulkActionDialog } from "~/components/runs/v3/AbortBulkActionDialog";
 import { BulkActionStatusCombo, BulkActionTypeCombo } from "~/components/runs/v3/BulkAction";
 import { UserAvatar } from "~/components/UserProfilePhoto";
 import { env } from "~/env.server";
@@ -183,16 +185,10 @@ export default function Page() {
       <div className="flex items-center justify-between gap-2 border-b border-grid-dimmed px-3 text-sm">
         <BulkActionStatusCombo status={bulkAction.status} />
         {bulkAction.status === "PENDING" ? (
-          <Form method="post">
-            <PermissionButton
-              type="submit"
-              variant="danger/small"
-              hasPermission={canAbort}
-              noPermissionTooltip="You don't have permission to abort bulk actions"
-            >
-              Abort bulk action
-            </PermissionButton>
-          </Form>
+          <ControlledAbortBulkActionDialog
+            canAbort={canAbort}
+            formAction={v3BulkActionPath(organization, project, environment, bulkAction)}
+          />
         ) : null}
       </div>
       <div className="overflow-y-scroll scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
@@ -358,3 +354,28 @@ function typeText(type: BulkActionType) {
       return "replayed";
   }
 }
+
+function ControlledAbortBulkActionDialog({
+  canAbort,
+  formAction,
+}: {
+  canAbort: boolean;
+  formAction: string;
+}) {
+  const [open, setOpen] = useState(false);
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button
+          variant="danger/small"
+          LeadingIcon={NoSymbolIcon}
+          disabled={!canAbort}
+          tooltip={canAbort ? undefined : "You don't have permission to abort bulk actions"}
+        >
+          Abort bulk action
+        </Button>
+      </DialogTrigger>
+      <AbortBulkActionDialog formAction={formAction} onAbortSubmitted={() => setOpen(false)} />
+    </Dialog>
+  );
+}

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.bulk-actions/route.tsx

@@ -1,5 +1,6 @@
-import { BookOpenIcon, NoSymbolIcon, PlusIcon } from "@heroicons/react/20/solid";
-import { Form, Outlet, useParams, type MetaFunction } from "@remix-run/react";
+import { BookOpenIcon, PlusIcon } from "@heroicons/react/20/solid";
+import { NoSymbolIcon } from "@heroicons/react/24/solid";
+import { Outlet, useParams, type MetaFunction } from "@remix-run/react";
 import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { tryCatch } from "@trigger.dev/core";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
@@ -9,6 +10,7 @@ import { BulkActionsNone } from "~/components/BlankStatePanels";
 import { MainCenteredContainer, PageBody, PageContainer } from "~/components/layout/AppLayout";
 import { Button, LinkButton } from "~/components/primitives/Buttons";
 import { DateTime } from "~/components/primitives/DateTime";
+import { Dialog, DialogTrigger } from "~/components/primitives/Dialog";
 import { NavBar, PageAccessories, PageTitle } from "~/components/primitives/PageHeader";
 import { PaginationControls } from "~/components/primitives/Pagination";
 import { Paragraph } from "~/components/primitives/Paragraph";
@@ -30,6 +32,7 @@ import {
   TableRow,
 } from "~/components/primitives/Table";
 import { TruncatedCopyableValue } from "~/components/primitives/TruncatedCopyableValue";
+import { AbortBulkActionDialog } from "~/components/runs/v3/AbortBulkActionDialog";
 import { BulkActionStatusCombo, BulkActionTypeCombo } from "~/components/runs/v3/BulkAction";
 import { UserAvatar } from "~/components/UserProfilePhoto";
 import { useEnvironment } from "~/hooks/useEnvironment";
@@ -360,16 +363,18 @@ function BulkActionActionsCell({
       isSticky
       hiddenButtons={
         canAbort ? (
-          <Form method="post" action={path}>
-            <Button
-              type="submit"
-              variant="minimal/small"
-              LeadingIcon={NoSymbolIcon}
-              leadingIconClassName="text-error"
-            >
-              <span className="text-text-bright">Abort</span>
-            </Button>
-          </Form>
+          <Dialog>
+            <DialogTrigger asChild>
+              <Button
+                variant="minimal/small"
+                LeadingIcon={NoSymbolIcon}
+                leadingIconClassName="text-error"
+              >
+                <span className="text-text-bright">Abort</span>
+              </Button>
+            </DialogTrigger>
+            <AbortBulkActionDialog formAction={path} />
+          </Dialog>
         ) : (
           <Button
             variant="minimal/small"