feat(archive): Add undo button to task archived toast (#2665)

Author: charlesvien

packages/ui/src/features/archive/undoArchive.test.ts

@@ -0,0 +1,111 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { UseUnarchiveTask } from "./useUnarchiveTask";
+
+const toastSuccess = vi.hoisted(() => vi.fn());
+const toastError = vi.hoisted(() => vi.fn());
+
+vi.mock("@posthog/ui/primitives/toast", () => ({
+  toast: { success: toastSuccess, error: toastError },
+}));
+vi.mock("@posthog/ui/shell/logger", () => ({
+  logger: { scope: () => ({ error: vi.fn(), info: vi.fn(), warn: vi.fn() }) },
+}));
+
+import { undoArchive } from "./undoArchive";
+
+type Restore = UseUnarchiveTask["restore"];
+
+describe("undoArchive", () => {
+  beforeEach(() => {
+    toastSuccess.mockClear();
+    toastError.mockClear();
+  });
+
+  it("restores on the first attempt and confirms with a toast", async () => {
+    const restore = vi
+      .fn()
+      .mockResolvedValue({ kind: "restored", navigateToTaskId: "task-1" });
+
+    await undoArchive("task-1", restore as unknown as Restore);
+
+    expect(restore).toHaveBeenCalledTimes(1);
+    expect(restore).toHaveBeenCalledWith("task-1", true);
+    expect(toastSuccess).toHaveBeenCalledWith("Task archive undone");
+    expect(toastError).not.toHaveBeenCalled();
+  });
+
+  it("retries with branch recreation when the branch is missing", async () => {
+    const restore = vi
+      .fn()
+      .mockResolvedValueOnce({
+        kind: "branch-not-found",
+        taskId: "task-1",
+        branchName: "feat/x",
+      })
+      .mockResolvedValueOnce({ kind: "restored", navigateToTaskId: "task-1" });
+
+    await undoArchive("task-1", restore as unknown as Restore);
+
+    expect(restore).toHaveBeenNthCalledWith(1, "task-1", true);
+    expect(restore).toHaveBeenNthCalledWith(2, "task-1", true, {
+      recreateBranch: true,
+    });
+    expect(toastSuccess).toHaveBeenCalledWith("Task archive undone");
+    expect(toastError).not.toHaveBeenCalled();
+  });
+
+  it("shows an error toast when the branch is still missing after retry", async () => {
+    const restore = vi.fn().mockResolvedValue({
+      kind: "branch-not-found",
+      taskId: "task-1",
+      branchName: "feat/x",
+    });
+
+    await undoArchive("task-1", restore as unknown as Restore);
+
+    expect(restore).toHaveBeenCalledTimes(2);
+    expect(toastError).toHaveBeenCalledWith(
+      "Failed to restore task: branch 'feat/x' not found",
+    );
+    expect(toastSuccess).not.toHaveBeenCalled();
+  });
+
+  it("surfaces the error message when restore reports an error", async () => {
+    const restore = vi
+      .fn()
+      .mockResolvedValue({ kind: "error", message: "server boom" });
+
+    await undoArchive("task-1", restore as unknown as Restore);
+
+    expect(toastError).toHaveBeenCalledWith(
+      "Failed to restore task: server boom",
+    );
+  });
+
+  it("shows a generic error toast when restore throws", async () => {
+    const restore = vi.fn().mockRejectedValue(new Error("network down"));
+
+    await undoArchive("task-1", restore as unknown as Restore);
+
+    expect(toastError).toHaveBeenCalledWith("Failed to restore task");
+    expect(toastSuccess).not.toHaveBeenCalled();
+  });
+
+  it("ignores a repeated undo while the first is still in flight", async () => {
+    let resolveRestore: (value: unknown) => void = () => {};
+    const restore = vi.fn().mockImplementation(
+      () =>
+        new Promise((resolve) => {
+          resolveRestore = resolve;
+        }),
+    );
+
+    const first = undoArchive("task-1", restore as unknown as Restore);
+    const second = undoArchive("task-1", restore as unknown as Restore);
+    resolveRestore({ kind: "restored", navigateToTaskId: "task-1" });
+    await Promise.all([first, second]);
+
+    expect(restore).toHaveBeenCalledTimes(1);
+    expect(toastSuccess).toHaveBeenCalledTimes(1);
+  });
+});

packages/ui/src/features/archive/undoArchive.ts

@@ -0,0 +1,38 @@
+import { toast } from "@posthog/ui/primitives/toast";
+import { logger } from "@posthog/ui/shell/logger";
+import type { UseUnarchiveTask } from "./useUnarchiveTask";
+
+const log = logger.scope("undo-archive");
+
+const inFlight = new Set<string>();
+
+export async function undoArchive(
+  taskId: string,
+  restore: UseUnarchiveTask["restore"],
+): Promise<void> {
+  if (inFlight.has(taskId)) return;
+  inFlight.add(taskId);
+  try {
+    let outcome = await restore(taskId, true);
+    // Undo is a transient toast action: silently recreate a missing branch
+    // rather than interrupting with the Archived tasks page's confirm dialog.
+    if (outcome.kind === "branch-not-found") {
+      outcome = await restore(taskId, true, { recreateBranch: true });
+    }
+    if (outcome.kind === "restored") {
+      toast.success("Task archive undone");
+      return;
+    }
+    const reason =
+      outcome.kind === "branch-not-found"
+        ? `branch '${outcome.branchName}' not found`
+        : outcome.message;
+    log.error("Failed to restore archived task", { taskId, reason });
+    toast.error(`Failed to restore task: ${reason}`);
+  } catch (error) {
+    log.error("Failed to restore archived task", error);
+    toast.error("Failed to restore task");
+  } finally {
+    inFlight.delete(taskId);
+  }
+}

packages/ui/src/features/archive/useArchiveTask.ts

@@ -29,9 +29,13 @@ import { openTaskInput } from "@posthog/ui/router/useOpenTask";
 import { logger } from "@posthog/ui/shell/logger";
 import { type QueryClient, useQueryClient } from "@tanstack/react-query";
 import { useMemo } from "react";
+import { undoArchive } from "./undoArchive";
+import { useUnarchiveTask } from "./useUnarchiveTask";
 
 const log = logger.scope("archive-task");
 
+const UNDO_TOAST_DURATION_MS = 8000;
+
 export interface ArchiveCacheKeys {
   archivedTaskIdsQueryKey: readonly unknown[];
   archiveListQueryKey: readonly unknown[];
@@ -172,14 +176,26 @@ export async function archiveTasksImperative(
 export function useArchiveTask() {
   const queryClient = useQueryClient();
   const keys = useArchiveCacheKeys();
+  const { restore } = useUnarchiveTask();
 
   const archiveTask = async ({ taskId }: { taskId: string }) => {
     // Non-optimistic: keep the row in place (with a spinner) until the archive
     // is confirmed, rather than removing it instantly and rolling back on error.
     await archiveTaskImperative(taskId, queryClient, keys, {
       optimistic: false,
     });
-    toast.success("Task archived");
+    const toastId = `archive-undo-${taskId}`;
+    toast.success("Task archived", {
+      id: toastId,
+      duration: UNDO_TOAST_DURATION_MS,
+      action: {
+        label: "Undo",
+        onClick: () => {
+          toast.dismiss(toastId);
+          void undoArchive(taskId, restore);
+        },
+      },
+    });
   };
 
   return { archiveTask };

packages/ui/src/primitives/toast.tsx

@@ -86,6 +86,8 @@ function ToastComponent(props: ToastProps) {
 }
 
 export const toast = {
+  dismiss: (id?: string | number) => sonnerToast.dismiss(id),
+
   loading: (title: ReactNode, description?: string) => {
     return sonnerToast.custom((id) => (
       <ToastComponent
@@ -103,6 +105,7 @@ export const toast = {
       description?: string;
       id?: string | number;
       action?: ToastAction;
+      duration?: number;
     },
   ) => {
     return sonnerToast.custom(
@@ -115,7 +118,7 @@ export const toast = {
           action={options?.action}
         />
       ),
-      { id: options?.id },
+      { id: options?.id, duration: options?.duration },
     );
   },