From 3a3e863daf0040018c7f4e23fd9d23382c4ba570 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Fri, 29 Aug 2025 11:30:46 +0100
Subject: [PATCH] chore(webapp): bulk action cancel as default (#2437)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Switches “replay” and “cancel” options in the list

* Fixed incorrect cancel icon being used

* Fixes the alignment of the radiobuttons
---
 .../components/BulkActionFilterSummary.tsx    |  3 +-
 .../app/components/primitives/RadioButton.tsx |  2 +-
 ...ectParam.env.$envParam.runs.bulkaction.tsx | 28 +++++++++----------
 3 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/apps/webapp/app/components/BulkActionFilterSummary.tsx b/apps/webapp/app/components/BulkActionFilterSummary.tsx
index c8faef741..073940d7d 100644
--- a/apps/webapp/app/components/BulkActionFilterSummary.tsx
+++ b/apps/webapp/app/components/BulkActionFilterSummary.tsx
@@ -11,6 +11,7 @@ import { appliedSummary, dateFromString, timeFilterRenderValues } from "./runs/v
 import { formatNumber } from "~/utils/numberFormatter";
 import { SpinnerWhite } from "./primitives/Spinner";
 import { ArrowPathIcon, CheckIcon, XCircleIcon } from "@heroicons/react/20/solid";
+import { XCircleIcon as XCircleIconOutline } from "@heroicons/react/24/outline";
 import assertNever from "assert-never";
 import { AppliedFilter } from "./primitives/AppliedFilter";
 import { runStatusTitle } from "./runs/v3/TaskRunStatus";
@@ -244,7 +245,7 @@ function Action({ action }: { action: BulkActionAction }) {
     case "cancel":
       return (
         <span>
-          <XCircleIcon className="mb-0.5 inline-block size-4 text-error" />
+          <XCircleIconOutline className="mb-0.5 inline-block size-4 text-error" />
           <span className="ml-0.5 text-text-bright">Canceled</span>
         </span>
       );
diff --git a/apps/webapp/app/components/primitives/RadioButton.tsx b/apps/webapp/app/components/primitives/RadioButton.tsx
index 6ea04f3b5..87fb7a59f 100644
--- a/apps/webapp/app/components/primitives/RadioButton.tsx
+++ b/apps/webapp/app/components/primitives/RadioButton.tsx
@@ -39,7 +39,7 @@ const variants = {
   description: {
     button:
       "w-full p-2.5 hover:data-[state=checked]:bg-white/[4%] data-[state=checked]:bg-white/[4%] transition data-[disabled]:opacity-70 hover:border-charcoal-600 border-charcoal-650 hover:data-[state=checked]:border-charcoal-600 border rounded-md",
-    label: "text-text-bright font-semibold -mt-1 text-left text-sm",
+    label: "text-text-bright font-semibold -mt-0.5 text-left text-sm",
     description: "text-text-dimmed -mt-0 text-left",
     inputPosition: "mt-0",
     icon: "w-8 h-8 mb-2",
diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.bulkaction.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.bulkaction.tsx
index e3da7c4ba..be9a27637 100644
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.bulkaction.tsx
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.bulkaction.tsx
@@ -323,28 +323,28 @@ export function CreateBulkActionInspector({
                   replace({ action: value });
                 }}
               >
-                <RadioGroupItem
-                  id="action-replay"
-                  label={
-                    <span className="inline-flex items-center gap-1">
-                      <ArrowPathIcon className="mb-0.5 size-4 text-blue-400" /> Replay runs
-                    </span>
-                  }
-                  description="Replays all selected runs, regardless of current status."
-                  value={"replay"}
-                  variant="description"
-                />
                 <RadioGroupItem
                   id="action-cancel"
                   label={
                     <span className="inline-flex items-center gap-1">
-                      <XCircleIcon className="mb-0.5 size-4 text-error" /> Cancel runs
+                      <XCircleIcon className="size-4 text-error" /> Cancel runs
                     </span>
                   }
                   description="Cancels all runs still in progress. Any finished runs won’t be canceled."
                   value={"cancel"}
                   variant="description"
                 />
+                <RadioGroupItem
+                  id="action-replay"
+                  label={
+                    <span className="inline-flex items-center gap-1">
+                      <ArrowPathIcon className="size-4 text-blue-400" /> Replay runs
+                    </span>
+                  }
+                  description="Replays all selected runs, regardless of current status."
+                  value={"replay"}
+                  variant="description"
+                />
               </RadioGroup>
             </InputGroup>
             <InputGroup>
@@ -450,8 +450,8 @@ function bulkActionModeFromString(value: string | undefined): BulkActionMode {
 }
 
 function bulkActionActionFromString(value: string | undefined): BulkActionAction {
-  if (!value) return "replay";
+  if (!value) return "cancel";
   const parsed = BulkActionAction.safeParse(value);
-  if (!parsed.success) return "replay";
+  if (!parsed.success) return "cancel";
   return parsed.data;
 }