fix(webapp): control cancel-run Dialog state so submit isn't raced by Radix DialogClose

Previous attempt wrapped the form's submit button in <DialogClose
asChild> so the dialog closed on click. That race-condition'd with
Remix's <Form>: Radix's Slot-attached onClick triggered
onOpenChange(false), the Dialog and its child Form unmounted mid-cycle,
and the button's name=value pair (carrying `redirectUrl`) was dropped
from the submitted FormData. The action then read
`submission.value.redirectUrl` as undefined and the resulting redirect
landed on `/env/dev` instead of the run-detail page.

Switch to a ControlledCancelRunDialog at the call site that owns the
Radix `open` state. The inner CancelRunDialog watches the navigation
state transitions and signals the parent to close the dialog once the
submission has captured its submitter cleanly. Submit-button name=value
is preserved; redirect resolves to the run-detail page; modal still
dismisses after submit.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: d-cs

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

@@ -1,6 +1,7 @@
 import { NoSymbolIcon } from "@heroicons/react/24/solid";
 import { DialogClose } from "@radix-ui/react-dialog";
 import { Form, useNavigation } from "@remix-run/react";
+import { useEffect, useRef } from "react";
 import { Button } from "~/components/primitives/Buttons";
 import { DialogContent, DialogHeader } from "~/components/primitives/Dialog";
 import { FormButtons } from "~/components/primitives/FormButtons";
@@ -10,14 +11,35 @@ import { SpinnerWhite } from "~/components/primitives/Spinner";
 type CancelRunDialogProps = {
   runFriendlyId: string;
   redirectPath: string;
+  // Optional: when provided, close the dialog as soon as the cancel
+  // action transitions to "loading" (the redirect is in flight). Lets
+  // the caller control the open state without interfering with the
+  // form's submit name=value pair the way `<DialogClose asChild>`
+  // around the submit button does.
+  onCancelSubmitted?: () => void;
 };
 
-export function CancelRunDialog({ runFriendlyId, redirectPath }: CancelRunDialogProps) {
+export function CancelRunDialog({
+  runFriendlyId,
+  redirectPath,
+  onCancelSubmitted,
+}: CancelRunDialogProps) {
   const navigation = useNavigation();
 
   const formAction = `/resources/taskruns/${runFriendlyId}/cancel`;
   const isLoading = navigation.formAction === formAction;
 
+  const wasSubmitting = useRef(false);
+  useEffect(() => {
+    if (!onCancelSubmitted) return;
+    if (navigation.state === "submitting" && navigation.formAction === formAction) {
+      wasSubmitting.current = true;
+    } else if (wasSubmitting.current && navigation.state !== "submitting") {
+      wasSubmitting.current = false;
+      onCancelSubmitted();
+    }
+  }, [navigation.state, navigation.formAction, formAction, onCancelSubmitted]);
+
   return (
     <DialogContent key="cancel">
       <DialogHeader>Cancel this run?</DialogHeader>
@@ -28,19 +50,17 @@ export function CancelRunDialog({ runFriendlyId, redirectPath }: CancelRunDialog
         <FormButtons
           confirmButton={
             <Form action={`/resources/taskruns/${runFriendlyId}/cancel`} method="post">
-              <DialogClose asChild>
-                <Button
-                  type="submit"
-                  name="redirectUrl"
-                  value={redirectPath}
-                  variant="danger/medium"
-                  LeadingIcon={isLoading ? SpinnerWhite : NoSymbolIcon}
-                  disabled={isLoading}
-                  shortcut={{ modifiers: ["mod"], key: "enter" }}
-                >
-                  {isLoading ? "Canceling..." : "Cancel run"}
-                </Button>
-              </DialogClose>
+              <Button
+                type="submit"
+                name="redirectUrl"
+                value={redirectPath}
+                variant="danger/medium"
+                LeadingIcon={isLoading ? SpinnerWhite : NoSymbolIcon}
+                disabled={isLoading}
+                shortcut={{ modifiers: ["mod"], key: "enter" }}
+              >
+                {isLoading ? "Canceling..." : "Cancel run"}
+              </Button>
             </Form>
           }
           cancelButton={

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx

@@ -480,23 +480,17 @@ export default function Page() {
             />
           </Dialog>
           {run.isFinished ? null : (
-            <Dialog key={`cancel-${run.friendlyId}`}>
-              <DialogTrigger asChild>
-                <Button variant="danger/small" LeadingIcon={StopCircleIcon} shortcut={{ key: "C" }}>
-                  Cancel run…
-                </Button>
-              </DialogTrigger>
-              <CancelRunDialog
-                runFriendlyId={run.friendlyId}
-                redirectPath={v3RunSpanPath(
-                  organization,
-                  project,
-                  environment,
-                  { friendlyId: run.friendlyId },
-                  { spanId: run.spanId }
-                )}
-              />
-            </Dialog>
+            <ControlledCancelRunDialog
+              key={`cancel-${run.friendlyId}`}
+              runFriendlyId={run.friendlyId}
+              redirectPath={v3RunSpanPath(
+                organization,
+                project,
+                environment,
+                { friendlyId: run.friendlyId },
+                { spanId: run.spanId }
+              )}
+            />
           )}
         </PageAccessories>
       </NavBar>
@@ -660,6 +654,35 @@ function TraceView({
   );
 }
 
+// Controlled wrapper around the cancel dialog. Owns the Radix open state
+// so the dialog closes itself once the cancel action transitions through
+// submission. We can't `<DialogClose asChild>`-wrap the submit button
+// because Radix's onClick handler swallows the button's name=value pair
+// that the form action depends on for `redirectUrl`.
+function ControlledCancelRunDialog({
+  runFriendlyId,
+  redirectPath,
+}: {
+  runFriendlyId: string;
+  redirectPath: string;
+}) {
+  const [open, setOpen] = useState(false);
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button variant="danger/small" LeadingIcon={StopCircleIcon} shortcut={{ key: "C" }}>
+          Cancel run…
+        </Button>
+      </DialogTrigger>
+      <CancelRunDialog
+        runFriendlyId={runFriendlyId}
+        redirectPath={redirectPath}
+        onCancelSubmitted={() => setOpen(false)}
+      />
+    </Dialog>
+  );
+}
+
 function NoLogsView({ run, resizable }: Pick<LoaderData, "run" | "resizable">) {
   const plan = useCurrentPlan();
   const organization = useOrganization();