Skip to content

Commit 86235e5

Browse files
cardernecarderne
authored
feat(webapp): add Abort button to bulk actions list rows (#4144)
1 parent 2fd896c commit 86235e5

4 files changed

Lines changed: 179 additions & 17 deletions

File tree

‎.server-changes/bulk-action-abort-from-list.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
area: webapp
3+
type: improvement
4+
---
5+
6+
Abort an in-progress bulk action directly from the bulk actions list, with a confirmation step before it runs.

‎apps/webapp/app/components/runs/v3/AbortBulkActionDialog.tsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { NoSymbolIcon } from "@heroicons/react/24/solid";
2+
import { DialogClose } from "@radix-ui/react-dialog";
3+
import { Form, useNavigation } from "@remix-run/react";
4+
import { Button } from "~/components/primitives/Buttons";
5+
import { DialogContent, DialogHeader } from "~/components/primitives/Dialog";
6+
import { FormButtons } from "~/components/primitives/FormButtons";
7+
import { Paragraph } from "~/components/primitives/Paragraph";
8+
import { SpinnerWhite } from "~/components/primitives/Spinner";
9+
10+
type AbortBulkActionDialogProps = {
11+
// The abort action route to POST to (the bulk action detail path).
12+
formAction: string;
13+
// Fired on submit so a parent controlling the Radix Dialog can close it
14+
// without wrapping the submit button in `DialogClose` — that wrapper races
15+
// submit (close fires first, unmounts the form, and the abort POST never
16+
// lands). Optional so uncontrolled call sites still type-check.
17+
onAbortSubmitted?: () => void;
18+
};
19+
20+
export function AbortBulkActionDialog({
21+
formAction,
22+
onAbortSubmitted,
23+
}: AbortBulkActionDialogProps) {
24+
const navigation = useNavigation();
25+
26+
const isLoading = navigation.formAction === formAction && navigation.formMethod === "POST";
27+
28+
return (
29+
<DialogContent key="abort">
30+
<DialogHeader>Abort this bulk action?</DialogHeader>
31+
<div className="flex flex-col gap-3 pt-3">
32+
<Paragraph>
33+
Aborting stops this bulk action from processing any remaining runs. Runs it has already
34+
processed won't be affected.
35+
</Paragraph>
36+
<FormButtons
37+
confirmButton={
38+
<Form action={formAction} method="post" onSubmit={() => onAbortSubmitted?.()}>
39+
<Button
40+
type="submit"
41+
variant="danger/medium"
42+
LeadingIcon={isLoading ? SpinnerWhite : NoSymbolIcon}
43+
disabled={isLoading}
44+
shortcut={{ modifiers: ["mod"], key: "enter" }}
45+
>
46+
{isLoading ? "Aborting..." : "Abort bulk action"}
47+
</Button>
48+
</Form>
49+
}
50+
cancelButton={
51+
<DialogClose asChild>
52+
<Button variant={"tertiary/medium"}>Close</Button>
53+
</DialogClose>
54+
}
55+
/>
56+
</div>
57+
</DialogContent>
58+
);
59+
}

‎apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.bulk-actions.$bulkActionParam/route.tsx‎

Lines changed: 34 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,22 @@
11
import { ArrowPathIcon } from "@heroicons/react/20/solid";
2-
import { Form } from "@remix-run/react";
2+
import { NoSymbolIcon } from "@heroicons/react/24/solid";
33
import { tryCatch } from "@trigger.dev/core";
44
import type { BulkActionType } from "@trigger.dev/database";
55
import { motion } from "framer-motion";
6+
import { useState } from "react";
67
import { typedjson, useTypedLoaderData } from "remix-typedjson";
78
import { z } from "zod";
89
import { ExitIcon } from "~/assets/icons/ExitIcon";
910
import { RunsIcon } from "~/assets/icons/RunsIcon";
1011
import { BulkActionFilterSummary } from "~/components/BulkActionFilterSummary";
11-
import { LinkButton } from "~/components/primitives/Buttons";
12+
import { Button, LinkButton } from "~/components/primitives/Buttons";
1213
import { CopyableText } from "~/components/primitives/CopyableText";
1314
import { DateTime } from "~/components/primitives/DateTime";
15+
import { Dialog, DialogTrigger } from "~/components/primitives/Dialog";
1416
import { Header2 } from "~/components/primitives/Headers";
1517
import { Paragraph } from "~/components/primitives/Paragraph";
16-
import { PermissionButton } from "~/components/primitives/PermissionButton";
1718
import * as Property from "~/components/primitives/PropertyTable";
19+
import { AbortBulkActionDialog } from "~/components/runs/v3/AbortBulkActionDialog";
1820
import { BulkActionStatusCombo, BulkActionTypeCombo } from "~/components/runs/v3/BulkAction";
1921
import { UserAvatar } from "~/components/UserProfilePhoto";
2022
import { env } from "~/env.server";
@@ -183,16 +185,10 @@ export default function Page() {
183185
<div className="flex items-center justify-between gap-2 border-b border-grid-dimmed px-3 text-sm">
184186
<BulkActionStatusCombo status={bulkAction.status} />
185187
{bulkAction.status === "PENDING" ? (
186-
<Form method="post">
187-
<PermissionButton
188-
type="submit"
189-
variant="danger/small"
190-
hasPermission={canAbort}
191-
noPermissionTooltip="You don't have permission to abort bulk actions"
192-
>
193-
Abort bulk action
194-
</PermissionButton>
195-
</Form>
188+
<ControlledAbortBulkActionDialog
189+
canAbort={canAbort}
190+
formAction={v3BulkActionPath(organization, project, environment, bulkAction)}
191+
/>
196192
) : null}
197193
</div>
198194
<div className="overflow-y-scroll scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
@@ -358,3 +354,28 @@ function typeText(type: BulkActionType) {
358354
return "replayed";
359355
}
360356
}
357+
358+
function ControlledAbortBulkActionDialog({
359+
canAbort,
360+
formAction,
361+
}: {
362+
canAbort: boolean;
363+
formAction: string;
364+
}) {
365+
const [open, setOpen] = useState(false);
366+
return (
367+
<Dialog open={open} onOpenChange={setOpen}>
368+
<DialogTrigger asChild>
369+
<Button
370+
variant="danger/small"
371+
LeadingIcon={NoSymbolIcon}
372+
disabled={!canAbort}
373+
tooltip={canAbort ? undefined : "You don't have permission to abort bulk actions"}
374+
>
375+
Abort…
376+
</Button>
377+
</DialogTrigger>
378+
<AbortBulkActionDialog formAction={formAction} onAbortSubmitted={() => setOpen(false)} />
379+
</Dialog>
380+
);
381+
}

‎apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.bulk-actions/route.tsx‎

Lines changed: 80 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { BookOpenIcon, PlusIcon } from "@heroicons/react/20/solid";
2+
import { NoSymbolIcon } from "@heroicons/react/24/solid";
23
import { Outlet, useParams, type MetaFunction } from "@remix-run/react";
34
import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
45
import { tryCatch } from "@trigger.dev/core";
@@ -7,8 +8,9 @@ import { z } from "zod";
78
import { AdminDebugTooltip } from "~/components/admin/debugTooltip";
89
import { BulkActionsNone } from "~/components/BlankStatePanels";
910
import { MainCenteredContainer, PageBody, PageContainer } from "~/components/layout/AppLayout";
10-
import { LinkButton } from "~/components/primitives/Buttons";
11+
import { Button, LinkButton } from "~/components/primitives/Buttons";
1112
import { DateTime } from "~/components/primitives/DateTime";
13+
import { Dialog, DialogTrigger } from "~/components/primitives/Dialog";
1214
import { NavBar, PageAccessories, PageTitle } from "~/components/primitives/PageHeader";
1315
import { PaginationControls } from "~/components/primitives/Pagination";
1416
import { Paragraph } from "~/components/primitives/Paragraph";
@@ -24,11 +26,13 @@ import {
2426
TableBlankRow,
2527
TableBody,
2628
TableCell,
29+
TableCellMenu,
2730
TableHeader,
2831
TableHeaderCell,
2932
TableRow,
3033
} from "~/components/primitives/Table";
3134
import { TruncatedCopyableValue } from "~/components/primitives/TruncatedCopyableValue";
35+
import { AbortBulkActionDialog } from "~/components/runs/v3/AbortBulkActionDialog";
3236
import { BulkActionStatusCombo, BulkActionTypeCombo } from "~/components/runs/v3/BulkAction";
3337
import { UserAvatar } from "~/components/UserProfilePhoto";
3438
import { useEnvironment } from "~/hooks/useEnvironment";
@@ -40,6 +44,8 @@ import {
4044
type BulkActionListItem,
4145
BulkActionListPresenter,
4246
} from "~/presenters/v3/BulkActionListPresenter.server";
47+
import { rbac } from "~/services/rbac.server";
48+
import { checkPermissions } from "~/services/routeBuilders/permissions.server";
4349
import { requireUserId } from "~/services/session.server";
4450
import { cn } from "~/utils/cn";
4551
import {
@@ -92,7 +98,19 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
9298
throw new Error(error.message);
9399
}
94100

95-
return typedjson(data);
101+
// Display flag for the row-menu Abort control. The abort action route
102+
// enforces write:runs independently. Permissive in OSS.
103+
const bulkAuth = await rbac.authenticateSession(request, {
104+
userId,
105+
organizationId: project.organizationId,
106+
});
107+
const { canAbort } = bulkAuth.ok
108+
? checkPermissions(bulkAuth.ability, {
109+
canAbort: { action: "write", resource: { type: "runs" } },
110+
})
111+
: { canAbort: true };
112+
113+
return typedjson({ ...data, canAbort });
96114
} catch (error) {
97115
console.error(error);
98116
throw new Response(undefined, {
@@ -108,6 +126,7 @@ export default function Page() {
108126
currentPage,
109127
totalPages,
110128
totalCount: _totalCount,
129+
canAbort,
111130
} = useTypedLoaderData<typeof loader>();
112131
const organization = useOrganization();
113132
const project = useProject();
@@ -164,7 +183,11 @@ export default function Page() {
164183
</div>
165184
)}
166185

167-
<BulkActionsTable bulkActions={bulkActions} totalPages={totalPages} />
186+
<BulkActionsTable
187+
bulkActions={bulkActions}
188+
totalPages={totalPages}
189+
canAbort={canAbort}
190+
/>
168191
{totalPages > 1 && (
169192
<div
170193
className={cn(
@@ -207,9 +230,11 @@ export default function Page() {
207230
function BulkActionsTable({
208231
bulkActions,
209232
totalPages,
233+
canAbort,
210234
}: {
211235
bulkActions: BulkActionListItem[];
212236
totalPages: number;
237+
canAbort: boolean;
213238
}) {
214239
const organization = useOrganization();
215240
const project = useProject();
@@ -260,11 +285,14 @@ function BulkActionsTable({
260285
<TableHeaderCell>User</TableHeaderCell>
261286
<TableHeaderCell>Created</TableHeaderCell>
262287
<TableHeaderCell>Completed</TableHeaderCell>
288+
<TableHeaderCell>
289+
<span className="sr-only">Actions</span>
290+
</TableHeaderCell>
263291
</TableRow>
264292
</TableHeader>
265293
<TableBody>
266294
{bulkActions.length === 0 ? (
267-
<TableBlankRow colSpan={8}>There are no matching bulk actions</TableBlankRow>
295+
<TableBlankRow colSpan={9}>There are no matching bulk actions</TableBlankRow>
268296
) : (
269297
bulkActions.map((bulkAction) => {
270298
const path = v3BulkActionPath(organization, project, environment, bulkAction);
@@ -306,6 +334,7 @@ function BulkActionsTable({
306334
<TableCell to={path}>
307335
{bulkAction.completedAt ? <DateTime date={bulkAction.completedAt} /> : "–"}
308336
</TableCell>
337+
<BulkActionActionsCell bulkAction={bulkAction} path={path} canAbort={canAbort} />
309338
</TableRow>
310339
);
311340
})
@@ -314,3 +343,50 @@ function BulkActionsTable({
314343
</Table>
315344
);
316345
}
346+
347+
function BulkActionActionsCell({
348+
bulkAction,
349+
path,
350+
canAbort,
351+
}: {
352+
bulkAction: BulkActionListItem;
353+
path: string;
354+
canAbort: boolean;
355+
}) {
356+
// Abort is the only action, and only while the bulk action is still running.
357+
if (bulkAction.status !== "PENDING") {
358+
return <TableCell to={path}>{""}</TableCell>;
359+
}
360+
361+
return (
362+
<TableCellMenu
363+
isSticky
364+
hiddenButtons={
365+
canAbort ? (
366+
<Dialog>
367+
<DialogTrigger asChild>
368+
<Button
369+
variant="minimal/small"
370+
LeadingIcon={NoSymbolIcon}
371+
leadingIconClassName="text-error"
372+
>
373+
<span className="text-text-bright">Abort…</span>
374+
</Button>
375+
</DialogTrigger>
376+
<AbortBulkActionDialog formAction={path} />
377+
</Dialog>
378+
) : (
379+
<Button
380+
variant="minimal/small"
381+
LeadingIcon={NoSymbolIcon}
382+
leadingIconClassName="text-error"
383+
disabled
384+
tooltip="You don't have permission to abort bulk actions"
385+
>
386+
<span className="text-text-bright">Abort…</span>
387+
</Button>
388+
)
389+
}
390+
/>
391+
);
392+
}

0 commit comments

Comments
 (0)