add delete confirmations for jobs

bgentry · bgentry · commit d7b0de56fe61 · 2026-04-10T13:50:58.000-05:00
Deleting jobs is irreversible, but the UI previously dispatched both the single-job and bulk delete actions immediately. That made it too easy to remove the wrong jobs with one stray click, especially from the bulk selection toolbar. Add a shared confirmation dialog built on the existing Headless UI `Dialog` primitives and route only delete actions through it. The job detail page now confirms before deleting one job, and the job list now confirms before deleting the current selection while leaving retry and cancel unchanged. Raise modal z-index so the backdrop and panel consistently layer over the left navigation rail. This uses the app's existing dialog stack instead of adding a new UI library, keeps styling consistent, and adds focused test coverage for the single-job and bulk delete flows. Fixes #545.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Workflow detail: truncate long workflow names in the header to prevent overflow and add a copy button for the full name. [PR #524](https://github.com/riverqueue/riverui/pull/524).
 - JSON viewer: sort keys alphabetically in rendered and copied output for object payloads. [PR #525](https://github.com/riverqueue/riverui/pull/525).
 - Job state sidebar: only highlight `Running` when the selected jobs state is actually running, even with retained search filters in the URL. [Fixes #526](https://github.com/riverqueue/riverui/issues/526). [PR #527](https://github.com/riverqueue/riverui/pull/527).
+- Job delete actions: require confirmation before deleting a single job or selected jobs in bulk. [Fixes #545](https://github.com/riverqueue/riverui/issues/545). [PR #546](https://github.com/riverqueue/riverui/pull/546).
 
 ## [v0.15.0] - 2026-02-26
 
diff --git a/src/components/ConfirmationDialog.tsx b/src/components/ConfirmationDialog.tsx
@@ -0,0 +1,90 @@
+import {
+  Description,
+  Dialog,
+  DialogBackdrop,
+  DialogPanel,
+  DialogTitle,
+} from "@headlessui/react";
+import { type ReactNode } from "react";
+
+export type ConfirmationDialogProps = {
+  cancelText?: string;
+  confirmText: string;
+  description: ReactNode;
+  onClose: () => void;
+  onConfirm: () => void;
+  open: boolean;
+  pending?: boolean;
+  title: string;
+};
+
+export default function ConfirmationDialog({
+  cancelText = "Cancel",
+  confirmText,
+  description,
+  onClose,
+  onConfirm,
+  open,
+  pending = false,
+  title,
+}: ConfirmationDialogProps) {
+  if (!open) return null;
+
+  const handleClose = () => {
+    if (!pending) {
+      onClose();
+    }
+  };
+
+  return (
+    <Dialog className="relative z-[60]" onClose={handleClose} open>
+      <DialogBackdrop
+        className="fixed inset-0 bg-gray-500/75 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in dark:bg-gray-900/50"
+        transition
+      />
+
+      <div className="fixed inset-0 z-10 w-screen overflow-y-auto">
+        <div className="flex min-h-full items-center justify-center p-4 text-center sm:items-center sm:p-0">
+          <DialogPanel
+            className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all data-closed:translate-y-4 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:my-8 sm:w-full sm:max-w-lg data-closed:sm:translate-y-0 data-closed:sm:scale-95 dark:bg-gray-800 dark:outline dark:-outline-offset-1 dark:outline-white/10"
+            transition
+          >
+            <div className="bg-white px-4 pt-5 pb-4 sm:p-6 dark:bg-gray-800">
+              <DialogTitle
+                as="h3"
+                className="text-base font-semibold text-gray-900 dark:text-white"
+              >
+                {title}
+              </DialogTitle>
+              <Description
+                as="div"
+                className="mt-2 text-sm text-gray-600 dark:text-gray-400"
+              >
+                {description}
+              </Description>
+            </div>
+            <div className="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6 dark:bg-gray-700/25">
+              <button
+                className="inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-xs enabled:hover:bg-red-500 disabled:opacity-50 sm:ml-3 sm:w-auto dark:bg-red-500 dark:shadow-none dark:enabled:hover:bg-red-400"
+                disabled={pending}
+                onClick={onConfirm}
+                type="button"
+              >
+                {confirmText}
+              </button>
+              <button
+                className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs inset-ring inset-ring-gray-300 hover:bg-gray-50 disabled:opacity-50 sm:mt-0 sm:w-auto dark:bg-white/10 dark:text-white dark:shadow-none dark:inset-ring-white/5 dark:hover:bg-white/20"
+                data-autofocus
+                disabled={pending}
+                onClick={handleClose}
+                type="button"
+              >
+                {cancelText}
+              </button>
+            </div>
+          </DialogPanel>
+        </div>
+      </div>
+    </Dialog>
+  );
+}
diff --git a/src/components/JobDetail.test.tsx b/src/components/JobDetail.test.tsx
@@ -1,16 +1,75 @@
 import { jobFactory } from "@test/factories/job";
-import { render } from "@testing-library/react";
-import { expect, test } from "vitest";
+import { act, render, screen, waitFor, within } from "@testing-library/react";
+import { userEvent } from "storybook/test";
+import { expect, test, vi } from "vitest";
 
 import JobDetail from "./JobDetail";
 
-test("adds 1 + 2 to equal 3", () => {
-  const job = jobFactory.build();
-  const cancel = () => {};
-  const deleteFn = () => {};
-  const retry = () => {};
-  const { getByTestId: _getTestById } = render(
-    <JobDetail cancel={cancel} deleteFn={deleteFn} job={job} retry={retry} />,
+test("requires confirmation before deleting a job", async () => {
+  const job = jobFactory.completed().build({ id: 123n });
+  const deleteFn = vi.fn();
+  const user = userEvent.setup();
+
+  render(
+    <JobDetail
+      cancel={vi.fn()}
+      deleteFn={deleteFn}
+      job={job}
+      retry={vi.fn()}
+    />,
   );
-  expect(3).toBe(3);
+
+  await act(async () => {
+    await user.click(screen.getByRole("button", { name: /^delete$/i }));
+  });
+
+  expect(deleteFn).not.toHaveBeenCalled();
+  const dialog = await screen.findByRole("dialog", { name: "Delete job?" });
+  expect(
+    within(dialog).getByText(/This permanently deletes job/i),
+  ).toBeInTheDocument();
+  expect(within(dialog).getByText("123")).toBeInTheDocument();
+
+  await act(async () => {
+    await user.click(
+      within(dialog).getByRole("button", { name: /delete job/i }),
+    );
+  });
+
+  await waitFor(() => {
+    expect(deleteFn).toHaveBeenCalledTimes(1);
+    expect(
+      screen.queryByRole("dialog", { name: "Delete job?" }),
+    ).not.toBeInTheDocument();
+  });
+});
+
+test("cancels job delete confirmation", async () => {
+  const job = jobFactory.completed().build();
+  const deleteFn = vi.fn();
+  const user = userEvent.setup();
+
+  render(
+    <JobDetail
+      cancel={vi.fn()}
+      deleteFn={deleteFn}
+      job={job}
+      retry={vi.fn()}
+    />,
+  );
+
+  await act(async () => {
+    await user.click(screen.getByRole("button", { name: /^delete$/i }));
+  });
+  const dialog = await screen.findByRole("dialog", { name: "Delete job?" });
+  await act(async () => {
+    await user.click(within(dialog).getByRole("button", { name: /cancel/i }));
+  });
+
+  await waitFor(() => {
+    expect(deleteFn).not.toHaveBeenCalled();
+    expect(
+      screen.queryByRole("dialog", { name: "Delete job?" }),
+    ).not.toBeInTheDocument();
+  });
 });
diff --git a/src/components/JobDetail.tsx b/src/components/JobDetail.tsx
@@ -1,5 +1,6 @@
 import { Badge } from "@components/Badge";
 import ButtonForGroup from "@components/ButtonForGroup";
+import ConfirmationDialog from "@components/ConfirmationDialog";
 import JobAttempts from "@components/JobAttempts";
 import JobTimeline from "@components/JobTimeline";
 import JSONView from "@components/JSONView";
@@ -15,7 +16,7 @@ import { Job, JobWithKnownMetadata } from "@services/jobs";
 import { JobState } from "@services/types";
 import { Link } from "@tanstack/react-router";
 import { capitalize } from "@utils/string";
-import { FormEvent } from "react";
+import { FormEvent, useState } from "react";
 
 type JobDetailProps = {
   cancel: () => void;
@@ -185,12 +186,19 @@ export default function JobDetail({
 }
 
 function ActionButtons({ cancel, deleteFn, job, retry }: JobDetailProps) {
+  const [deleteConfirmationOpen, setDeleteConfirmationOpen] = useState(false);
+
   // Can only delete jobs that aren't running:
   const deleteDisabled = job.state === JobState.Running;
 
   const deleteJob = (event: FormEvent) => {
     event.preventDefault();
+    setDeleteConfirmationOpen(true);
+  };
+
+  const confirmDelete = () => {
     deleteFn();
+    setDeleteConfirmationOpen(false);
   };
 
   // Can only cancel jobs that aren't already finalized (completed, discarded, cancelled):
@@ -215,26 +223,42 @@ function ActionButtons({ cancel, deleteFn, job, retry }: JobDetailProps) {
   };
 
   return (
-    <span className="isolate inline-flex rounded-md shadow-xs">
-      <ButtonForGroup
-        disabled={retryDisabled}
-        Icon={ArrowUturnLeftIcon}
-        onClick={retryJob}
-        text="Retry"
-      />
-      <ButtonForGroup
-        disabled={cancelDisabled}
-        Icon={XCircleIcon}
-        onClick={cancelJob}
-        text="Cancel"
-      />
-      <ButtonForGroup
-        disabled={deleteDisabled}
-        Icon={TrashIcon}
-        onClick={deleteJob}
-        text="Delete"
+    <>
+      <span className="isolate inline-flex rounded-md shadow-xs">
+        <ButtonForGroup
+          disabled={retryDisabled}
+          Icon={ArrowUturnLeftIcon}
+          onClick={retryJob}
+          text="Retry"
+        />
+        <ButtonForGroup
+          disabled={cancelDisabled}
+          Icon={XCircleIcon}
+          onClick={cancelJob}
+          text="Cancel"
+        />
+        <ButtonForGroup
+          disabled={deleteDisabled}
+          Icon={TrashIcon}
+          onClick={deleteJob}
+          text="Delete"
+        />
+      </span>
+      <ConfirmationDialog
+        confirmText="Delete job"
+        description={
+          <>
+            This permanently deletes job{" "}
+            <span className="font-mono">{job.id.toString()}</span>. This action
+            cannot be undone.
+          </>
+        }
+        onClose={() => setDeleteConfirmationOpen(false)}
+        onConfirm={confirmDelete}
+        open={deleteConfirmationOpen}
+        title="Delete job?"
       />
-    </span>
+    </>
   );
 }
 
diff --git a/src/components/JobList.test.tsx b/src/components/JobList.test.tsx
@@ -2,8 +2,9 @@ import { FeaturesContext } from "@contexts/Features";
 import { JobState } from "@services/types";
 import { jobMinimalFactory } from "@test/factories/job";
 import { createFeatures } from "@test/utils/features";
-import { render, screen } from "@testing-library/react";
+import { act, render, screen, waitFor, within } from "@testing-library/react";
 import { type ReactNode } from "react";
+import { userEvent } from "storybook/test";
 import {
   beforeEach,
   describe,
@@ -184,4 +185,66 @@ describe("JobList", () => {
       screen.queryByText(JSON.stringify(job.args)),
     ).not.toBeInTheDocument();
   });
+
+  it("requires confirmation before deleting selected jobs", async () => {
+    const jobs = [
+      jobMinimalFactory.completed().build({ id: 1n }),
+      jobMinimalFactory.completed().build({ id: 2n }),
+    ];
+    const deleteJobs = vi.fn();
+    const user = userEvent.setup();
+    const features = createFeatures({
+      jobListHideArgsByDefault: false,
+    });
+
+    mockUseSettings.mockReturnValue(settingsMock({}));
+
+    render(
+      <FeaturesContext.Provider value={{ features }}>
+        <JobList
+          cancelJobs={vi.fn()}
+          canShowFewer={false}
+          canShowMore={false}
+          deleteJobs={deleteJobs}
+          jobs={jobs}
+          retryJobs={vi.fn()}
+          setJobRefetchesPaused={vi.fn()}
+          showFewer={vi.fn()}
+          showMore={vi.fn()}
+          state={JobState.Completed}
+          statesAndCounts={undefined}
+        />
+      </FeaturesContext.Provider>,
+    );
+
+    await act(async () => {
+      await user.click(
+        screen.getByRole("checkbox", { name: /select all jobs/i }),
+      );
+    });
+    await act(async () => {
+      await user.click(screen.getByRole("button", { name: /^delete$/i }));
+    });
+
+    expect(deleteJobs).not.toHaveBeenCalled();
+    const dialog = await screen.findByRole("dialog", {
+      name: "Delete selected jobs?",
+    });
+    expect(
+      within(dialog).getByText(/This permanently deletes 2 selected jobs/i),
+    ).toBeInTheDocument();
+
+    await act(async () => {
+      await user.click(
+        within(dialog).getByRole("button", { name: /delete jobs/i }),
+      );
+    });
+
+    await waitFor(() => {
+      expect(deleteJobs).toHaveBeenCalledWith(jobs.map((job) => job.id));
+      expect(
+        screen.queryByRole("dialog", { name: "Delete selected jobs?" }),
+      ).not.toBeInTheDocument();
+    });
+  });
 });
diff --git a/src/components/JobList.tsx b/src/components/JobList.tsx
diff --git a/src/components/RetryWorkflowDialog.tsx b/src/components/RetryWorkflowDialog.tsx
