github-featured/triggerdotdev--trigger.dev
2
0
Fork 0
Code Issues Pull Requests Deployments Models Agent Notes Packages Projects Releases Wiki Activity

Cancel run confirmation modal (#949)

Browse Source 
* 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>
This commit is contained in:
Matt Aitken
2024-03-18 12:22:06 +00:00
committed by GitHub
parent 1f190fe680
commit cae3298564
1 changed files with 48 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx
+48 -22
View File
@@ -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>