From cae3298564f2b2527f4aaf30db21bc403553fc4c Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Mon, 18 Mar 2024 12:22:06 +0000
Subject: [PATCH] Cancel run confirmation modal (#949)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Tasks get the SHOW_ACTIONS property

* Override properties with the passed in ones in eventRepository

* Link from deployments to environment variables page, no need to link to docs

* “Show parent items” keeps the selected item selected

* LinkButton can accept onMouseDown, onMouseEnter and onMouseLeave

* “Show parent items” keeps any items focused and has a keyboard shortcut

* Action bar with focus button

* Canceling is working

* Nicer layout and button loading and disabled state

* US english spelling “Cancelling” -> “Canceling”

* Added a confirm modal to canceling

* Copy tweaks

* Fix for bad import

---------

Co-authored-by: Eric Allam <eric@trigger.dev>
---
 .../route.tsx                                 | 70 +++++++++++++------
 1 file changed, 48 insertions(+), 22 deletions(-)

diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx
index 33ff19173..7ababa99e 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx
@@ -1,14 +1,21 @@
 import { QueueListIcon, StopCircleIcon } from "@heroicons/react/20/solid";
-import { Form, useFetcher, useParams } from "@remix-run/react";
+import { useFetcher, useParams } from "@remix-run/react";
 import { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { formatDurationNanoseconds, nanosecondsToMilliseconds } from "@trigger.dev/core/v3";
-import { ReactNode } from "react";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { ExitIcon } from "~/assets/icons/ExitIcon";
 import { CodeBlock } from "~/components/code/CodeBlock";
 import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel";
 import { Button, LinkButton } from "~/components/primitives/Buttons";
 import { DateTimeAccurate } from "~/components/primitives/DateTime";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTrigger,
+} from "~/components/primitives/Dialog";
 import { Header2 } from "~/components/primitives/Headers";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import { Property, PropertyTable } from "~/components/primitives/PropertyTable";
@@ -163,26 +170,45 @@ export default function Page() {
           </div>
           <div className="flex items-center gap-4">
             {event.isPartial && runParam && (
-              <cancelFetcher.Form
-                action={`/resources/taskruns/${event.runId}/cancel`}
-                method="post"
-              >
-                <Button
-                  type="submit"
-                  name="redirectUrl"
-                  value={v3RunSpanPath(
-                    organization,
-                    project,
-                    { friendlyId: runParam },
-                    { spanId: event.spanId }
-                  )}
-                  variant="danger/small"
-                  LeadingIcon={cancelFetcher.state === "idle" ? StopCircleIcon : "spinner-white"}
-                  disabled={cancelFetcher.state !== "idle"}
-                >
-                  {cancelFetcher.state === "idle" ? "Cancel" : "Canceling..."}
-                </Button>
-              </cancelFetcher.Form>
+              <Dialog>
+                <DialogTrigger asChild>
+                  <Button variant="danger/small" LeadingIcon={StopCircleIcon}>
+                    Cancel run
+                  </Button>
+                </DialogTrigger>
+                <DialogContent>
+                  <DialogHeader>Cancel this run?</DialogHeader>
+                  <DialogDescription>
+                    Canceling a run will stop execution. If you want to run this later you will have
+                    to replay the entire run with the original payload.
+                  </DialogDescription>
+                  <DialogFooter>
+                    <cancelFetcher.Form
+                      action={`/resources/taskruns/${event.runId}/cancel`}
+                      method="post"
+                    >
+                      <Button
+                        type="submit"
+                        name="redirectUrl"
+                        value={v3RunSpanPath(
+                          organization,
+                          project,
+                          { friendlyId: runParam },
+                          { spanId: event.spanId }
+                        )}
+                        variant="danger/small"
+                        LeadingIcon={
+                          cancelFetcher.state === "idle" ? StopCircleIcon : "spinner-white"
+                        }
+                        disabled={cancelFetcher.state !== "idle"}
+                        shortcut={{ modifiers: ["meta"], key: "enter" }}
+                      >
+                        {cancelFetcher.state === "idle" ? "Cancel run" : "Canceling..."}
+                      </Button>
+                    </cancelFetcher.Form>
+                  </DialogFooter>
+                </DialogContent>
+              </Dialog>
             )}
           </div>
         </div>