feat: implement hard delete for workspaces & refactor workspaces table to allow multiple actions (#185)

* feat: useKbdShortcuts hook & example implementation

* chore: tidy up remnant

* feat: useToastMutation hook

* chore: remove junk comment

* feat: implement `useToastMutation` for workspaces

* refactor: `useQueries` to fetch workspaces data

* feat: implement "hard delete" from workspaces table

* chore: tidy ups

* feat: add keyboard tooltip to create workspace

* fix(workspaces): add badge to active workspace

* test: test workspace actions & hard delete

* chore: tidy up test

* fix(workspace name): correct message on rename + test

* chore: move code around

* fix(custom instructions): failing test & rename to match API changes

Author: alex-mcgovern

src/context/confirm-context.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogModal,
+  DialogModalOverlay,
+  DialogTitle,
+} from "@stacklok/ui-kit";
+import type { ReactNode } from "react";
+import { createContext, useState } from "react";
+
+type Buttons = {
+  yes: ReactNode;
+  no: ReactNode;
+};
+
+type Config = {
+  buttons: Buttons;
+  title?: ReactNode;
+  isDestructive?: boolean;
+};
+
+type Question = {
+  message: ReactNode;
+  config: Config;
+  resolve: (value: boolean) => void;
+};
+
+type ConfirmContextType = {
+  confirm: (message: ReactNode, config: Config) => Promise<boolean>;
+};
+
+export const ConfirmContext = createContext<ConfirmContextType | null>(null);
+
+export function ConfirmProvider({ children }: { children: ReactNode }) {
+  const [activeQuestion, setActiveQuestion] = useState<Question | null>(null);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  const handleAnswer = (answer: boolean) => {
+    if (activeQuestion === null) return;
+    activeQuestion.resolve(answer);
+    setIsOpen(false);
+  };
+
+  const confirm = (message: ReactNode, config: Config) => {
+    return new Promise<boolean>((resolve) => {
+      setActiveQuestion({ message, config, resolve });
+      setIsOpen(true);
+    });
+  };
+
+  return (
+    <ConfirmContext.Provider value={{ confirm }}>
+      {children}
+
+      <DialogModalOverlay isDismissable={false} isOpen={isOpen}>
+        <DialogModal>
+          <Dialog>
+            <DialogHeader>
+              <DialogTitle>{activeQuestion?.config.title}</DialogTitle>
+            </DialogHeader>
+            <DialogContent>{activeQuestion?.message}</DialogContent>
+            <DialogFooter>
+              <div className="flex grow justify-end gap-2">
+                <Button variant="secondary" onPress={() => handleAnswer(false)}>
+                  {activeQuestion?.config.buttons.no ?? "&nbsp;"}
+                </Button>
+                <Button
+                  isDestructive={activeQuestion?.config.isDestructive}
+                  variant="primary"
+                  onPress={() => handleAnswer(true)}
+                >
+                  {activeQuestion?.config.buttons.yes ?? "&nbsp;"}
+                </Button>
+              </div>
+            </DialogFooter>
+          </Dialog>
+        </DialogModal>
+      </DialogModalOverlay>
+    </ConfirmContext.Provider>
+  );
+}

src/features/workspace-system-prompt/hooks/use-archive-workspace.ts

@@ -1,29 +1,62 @@
 import { render } from "@/lib/test-utils";
 import { ArchiveWorkspace } from "../archive-workspace";
 import userEvent from "@testing-library/user-event";
-import { screen, waitFor } from "@testing-library/react";
-
-const mockNavigate = vi.fn();
-
-vi.mock("react-router-dom", async () => {
-  const original =
-    await vi.importActual<typeof import("react-router-dom")>(
-      "react-router-dom",
-    );
-  return {
-    ...original,
-    useNavigate: () => mockNavigate,
-  };
+import { waitFor } from "@testing-library/react";
+
+test("has correct buttons when not archived", async () => {
+  const { getByRole } = render(
+    <ArchiveWorkspace isArchived={false} workspaceName="foo-bar" />,
+  );
+
+  expect(getByRole("button", { name: /archive/i })).toBeVisible();
+});
+
+test("has correct buttons when archived", async () => {
+  const { getByRole } = render(
+    <ArchiveWorkspace isArchived={true} workspaceName="foo-bar" />,
+  );
+  expect(getByRole("button", { name: /restore/i })).toBeVisible();
+  expect(getByRole("button", { name: /permanently delete/i })).toBeVisible();
+});
+
+test("can archive workspace", async () => {
+  const { getByText, getByRole } = render(
+    <ArchiveWorkspace isArchived={false} workspaceName="foo-bar" />,
+  );
+
+  await userEvent.click(getByRole("button", { name: /archive/i }));
+
+  await waitFor(() => {
+    expect(getByText(/archived "foo-bar" workspace/i)).toBeVisible();
+  });
 });
 
-test("archive workspace", async () => {
-  render(<ArchiveWorkspace isArchived={false} workspaceName="foo" />);
+test("can restore archived workspace", async () => {
+  const { getByText, getByRole } = render(
+    <ArchiveWorkspace isArchived={true} workspaceName="foo-bar" />,
+  );
+
+  await userEvent.click(getByRole("button", { name: /restore/i }));
+
+  await waitFor(() => {
+    expect(getByText(/restored "foo-bar" workspace/i)).toBeVisible();
+  });
+});
+
+test("can permanently delete archived workspace", async () => {
+  const { getByText, getByRole } = render(
+    <ArchiveWorkspace isArchived={true} workspaceName="foo-bar" />,
+  );
+
+  await userEvent.click(getByRole("button", { name: /permanently delete/i }));
+
+  await waitFor(() => {
+    expect(getByRole("dialog", { name: /permanently delete/i })).toBeVisible();
+  });
 
-  await userEvent.click(screen.getByRole("button", { name: /archive/i }));
-  await waitFor(() => expect(mockNavigate).toHaveBeenCalledTimes(1));
-  expect(mockNavigate).toHaveBeenCalledWith("/workspaces");
+  await userEvent.click(getByRole("button", { name: /delete/i }));
 
   await waitFor(() => {
-    expect(screen.getByText(/archived "(.*)" workspace/i)).toBeVisible();
+    expect(getByText(/permanently deleted "foo-bar" workspace/i)).toBeVisible();
   });
 });