chore(webapp): bulk action cancel as default (#2437)

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

* Fixed incorrect cancel icon being used

* Fixes the alignment of the radiobuttons

Author: samejr

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>
       );

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",

apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.bulkaction.tsx

@@ -324,25 +324,25 @@ export function CreateBulkActionInspector({
                 }}
               >
                 <RadioGroupItem
-                  id="action-replay"
+                  id="action-cancel"
                   label={
                     <span className="inline-flex items-center gap-1">
-                      <ArrowPathIcon className="mb-0.5 size-4 text-blue-400" /> Replay runs
+                      <XCircleIcon className="size-4 text-error" /> Cancel runs
                     </span>
                   }
-                  description="Replays all selected runs, regardless of current status."
-                  value={"replay"}
+                  description="Cancels all runs still in progress. Any finished runs won’t be canceled."
+                  value={"cancel"}
                   variant="description"
                 />
                 <RadioGroupItem
-                  id="action-cancel"
+                  id="action-replay"
                   label={
                     <span className="inline-flex items-center gap-1">
-                      <XCircleIcon className="mb-0.5 size-4 text-error" /> Cancel runs
+                      <ArrowPathIcon className="size-4 text-blue-400" /> Replay runs
                     </span>
                   }
-                  description="Cancels all runs still in progress. Any finished runs won’t be canceled."
-                  value={"cancel"}
+                  description="Replays all selected runs, regardless of current status."
+                  value={"replay"}
                   variant="description"
                 />
               </RadioGroup>
@@ -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;
 }