feat: implement use toast mutation for workspaces (#184)

* feat: useKbdShortcuts hook & example implementation

* chore: tidy up remnant

* feat: useToastMutation hook

* chore: remove junk comment

* feat: implement `useToastMutation` for workspaces

Author: alex-mcgovern

src/features/workspace/components/__tests__/archive-workspace.test.tsx

@@ -4,7 +4,7 @@ import userEvent from "@testing-library/user-event";
 import { screen, waitFor } from "@testing-library/react";
 
 const mockNavigate = vi.fn();
-const mockToast = vi.fn();
+
 vi.mock("react-router-dom", async () => {
   const original =
     await vi.importActual<typeof import("react-router-dom")>(
@@ -16,21 +16,14 @@ vi.mock("react-router-dom", async () => {
   };
 });
 
-vi.mock("@stacklok/ui-kit", async () => {
-  const original =
-    await vi.importActual<typeof import("@stacklok/ui-kit")>(
-      "@stacklok/ui-kit",
-    );
-  return {
-    ...original,
-    toast: { error: () => mockToast },
-  };
-});
-
 test("archive workspace", async () => {
   render(<ArchiveWorkspace isArchived={false} workspaceName="foo" />);
 
   await userEvent.click(screen.getByRole("button", { name: /archive/i }));
   await waitFor(() => expect(mockNavigate).toHaveBeenCalledTimes(1));
   expect(mockNavigate).toHaveBeenCalledWith("/workspaces");
+
+  await waitFor(() => {
+    expect(screen.getByText(/archived "(.*)" workspace/i)).toBeVisible();
+  });
 });

src/features/workspace/components/__tests__/workspace-creation.test.tsx

@@ -23,6 +23,10 @@ test("create workspace", async () => {
   await userEvent.type(screen.getByRole("textbox"), "workspaceA");
   await userEvent.click(screen.getByRole("button", { name: /create/i }));
   await waitFor(() => expect(mockNavigate).toBeCalled());
+
+  await waitFor(() => {
+    expect(screen.getByText(/created "(.*)" workspace/i)).toBeVisible();
+  });
 });
 
 test("create workspace with enter button", async () => {
@@ -32,4 +36,8 @@ test("create workspace with enter button", async () => {
 
   await userEvent.type(screen.getByRole("textbox"), "workspaceA{enter}");
   await waitFor(() => expect(mockNavigate).toBeCalled());
+
+  await waitFor(() => {
+    expect(screen.getByText(/created "(.*)" workspace/i)).toBeVisible();
+  });
 });

src/features/workspace/components/workspace-creation.tsx

@@ -1,4 +1,4 @@
-import { useCreateWorkspace } from "@/features/workspace/hooks/use-create-workspace";
+import { useMutationCreateWorkspace } from "@/features/workspace/hooks/use-mutation-create-workspace";
 import {
   Button,
   Card,
@@ -16,12 +16,12 @@ import { useNavigate } from "react-router-dom";
 export function WorkspaceCreation() {
   const navigate = useNavigate();
   const [workspaceName, setWorkspaceName] = useState("");
-  const { mutate, isPending, error } = useCreateWorkspace();
+  const { mutateAsync, isPending, error } = useMutationCreateWorkspace();
   const errorMsg = error?.detail ? `${error?.detail}` : "";
 
   const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    mutate(
+    mutateAsync(
       {
         body: { name: workspaceName },
       },
@@ -36,6 +36,7 @@ export function WorkspaceCreation() {
       <Card>
         <CardBody className="w-full">
           <TextField
+            autoFocus
             aria-label="Workspace name"
             name="Workspace name"
             validationBehavior="aria"

src/features/workspace/components/workspace-name.tsx

@@ -9,7 +9,7 @@ import {
   TextField,
 } from "@stacklok/ui-kit";
 import { twMerge } from "tailwind-merge";
-import { useCreateWorkspace } from "../hooks/use-create-workspace";
+import { useMutationCreateWorkspace } from "../hooks/use-mutation-create-workspace";
 import { FormEvent, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
@@ -24,12 +24,12 @@ export function WorkspaceName({
 }) {
   const navigate = useNavigate();
   const [name, setName] = useState(workspaceName);
-  const { mutate, isPending, error } = useCreateWorkspace();
+  const { mutateAsync, isPending, error } = useMutationCreateWorkspace();
   const errorMsg = error?.detail ? `${error?.detail}` : "";
 
   const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    mutate(
+    mutateAsync(
       { body: { name: workspaceName, rename_to: name } },
       {
         onSuccess: () => navigate(`/workspace/${name}`),
@@ -63,6 +63,7 @@ export function WorkspaceName({
             isDisabled={isArchived || name === ""}
             isPending={isPending}
             type="submit"
+            variant="secondary"
           >
             Save
           </Button>

src/features/workspace/components/workspaces-selection.tsx

@@ -13,15 +13,15 @@ import {
 import { useQueryClient } from "@tanstack/react-query";
 import { ChevronDown, Search, Settings } from "lucide-react";
 import { useState } from "react";
-import { useActivateWorkspace } from "../hooks/use-activate-workspace";
+import { useMutationActivateWorkspace } from "../hooks/use-mutation-activate-workspace";
 import clsx from "clsx";
 import { useActiveWorkspaceName } from "../hooks/use-active-workspace-name";
 
 export function WorkspacesSelection() {
   const queryClient = useQueryClient();
 
   const { data: workspacesResponse } = useListWorkspaces();
-  const { mutateAsync: activateWorkspace } = useActivateWorkspace();
+  const { mutateAsync: activateWorkspace } = useMutationActivateWorkspace();
 
   const { data: activeWorkspaceName } = useActiveWorkspaceName();
 

src/features/workspace/hooks/use-activate-workspace.ts

@@ -1,18 +1,26 @@
 import { Button } from "@stacklok/ui-kit";
 import { ComponentProps } from "react";
-import { useArchiveWorkspace } from "@/features/workspace-system-prompt/hooks/use-archive-workspace";
+import { useMutationArchiveWorkspace } from "@/features/workspace/hooks/use-mutation-archive-workspace";
+import { useNavigate } from "react-router-dom";
 
 export function useArchiveWorkspaceButton({
   workspaceName,
 }: {
   workspaceName: string;
 }): ComponentProps<typeof Button> {
-  const { mutate, isPending } = useArchiveWorkspace();
+  const { mutateAsync, isPending } = useMutationArchiveWorkspace();
+  const navigate = useNavigate();
 
   return {
     isPending,
     isDisabled: isPending,
-    onPress: () => mutate({ path: { workspace_name: workspaceName } }),
+    onPress: () =>
+      mutateAsync(
+        { path: { workspace_name: workspaceName } },
+        {
+          onSuccess: () => navigate("/workspaces"),
+        },
+      ),
     isDestructive: true,
     children: "Archive",
   };

src/features/workspace/hooks/use-archive-workspace-button.tsx

@@ -0,0 +1,23 @@
+import {
+  v1ListArchivedWorkspacesQueryKey,
+  v1ListWorkspacesOptions,
+} from "@/api/generated/@tanstack/react-query.gen";
+import { useQueryClient } from "@tanstack/react-query";
+import { useCallback } from "react";
+
+export function useInvalidateWorkspaceQueries() {
+  const queryClient = useQueryClient();
+
+  const invalidate = useCallback(() => {
+    queryClient.invalidateQueries({
+      queryKey: v1ListWorkspacesOptions(),
+      refetchType: "all",
+    });
+    queryClient.invalidateQueries({
+      queryKey: v1ListArchivedWorkspacesQueryKey(),
+      refetchType: "all",
+    });
+  }, [queryClient]);
+
+  return invalidate;
+}

src/features/workspace/hooks/use-create-workspace.ts

@@ -0,0 +1,13 @@
+import { v1ActivateWorkspaceMutation } from "@/api/generated/@tanstack/react-query.gen";
+import { useToastMutation as useToastMutation } from "@/hooks/use-toast-mutation";
+import { useInvalidateWorkspaceQueries } from "./use-invalidate-workspace-queries";
+
+export function useMutationActivateWorkspace() {
+  const invalidate = useInvalidateWorkspaceQueries();
+
+  return useToastMutation({
+    ...v1ActivateWorkspaceMutation(),
+    onSuccess: () => invalidate(),
+    successMsg: (variables) => `Activated "${variables.body.name}" workspace`,
+  });
+}

src/features/workspace/hooks/use-invalidate-workspace-queries.ts

@@ -0,0 +1,14 @@
+import { v1DeleteWorkspaceMutation } from "@/api/generated/@tanstack/react-query.gen";
+import { useToastMutation } from "@/hooks/use-toast-mutation";
+import { useInvalidateWorkspaceQueries } from "./use-invalidate-workspace-queries";
+
+export function useMutationArchiveWorkspace() {
+  const invalidate = useInvalidateWorkspaceQueries();
+
+  return useToastMutation({
+    ...v1DeleteWorkspaceMutation(),
+    onSuccess: () => invalidate(),
+    successMsg: (variables) =>
+      `Archived "${variables.path.workspace_name}" workspace`,
+  });
+}

src/features/workspace/hooks/use-mutation-activate-workspace.ts

@@ -0,0 +1,13 @@
+import { v1CreateWorkspaceMutation } from "@/api/generated/@tanstack/react-query.gen";
+import { useInvalidateWorkspaceQueries } from "./use-invalidate-workspace-queries";
+import { useToastMutation } from "@/hooks/use-toast-mutation";
+
+export function useMutationCreateWorkspace() {
+  const invalidate = useInvalidateWorkspaceQueries();
+
+  return useToastMutation({
+    ...v1CreateWorkspaceMutation(),
+    onSuccess: () => invalidate(),
+    successMsg: (variables) => `Created "${variables.body.name}" workspace`,
+  });
+}

src/features/workspace/hooks/use-mutation-archive-workspace.ts

@@ -0,0 +1,14 @@
+import { v1HardDeleteWorkspaceMutation } from "@/api/generated/@tanstack/react-query.gen";
+import { useToastMutation } from "@/hooks/use-toast-mutation";
+import { useInvalidateWorkspaceQueries } from "./use-invalidate-workspace-queries";
+
+export function useMutationHardDeleteWorkspace() {
+  const invalidate = useInvalidateWorkspaceQueries();
+
+  return useToastMutation({
+    ...v1HardDeleteWorkspaceMutation(),
+    onSuccess: () => invalidate(),
+    successMsg: (variables) =>
+      `Permanently deleted "${variables.path.name}" workspace`,
+  });
+}

src/features/workspace/hooks/use-mutation-create-workspace.ts

@@ -0,0 +1,14 @@
+import { v1RecoverWorkspaceMutation } from "@/api/generated/@tanstack/react-query.gen";
+import { useToastMutation } from "@/hooks/use-toast-mutation";
+import { useInvalidateWorkspaceQueries } from "./use-invalidate-workspace-queries";
+
+export function useMutationRestoreWorkspace() {
+  const invalidate = useInvalidateWorkspaceQueries();
+
+  return useToastMutation({
+    ...v1RecoverWorkspaceMutation(),
+    onSuccess: () => invalidate(),
+    successMsg: (variables) =>
+      `Restored "${variables.path.workspace_name}" workspace`,
+  });
+}

src/features/workspace/hooks/use-mutation-hard-delete-workspace.ts

@@ -1,18 +1,18 @@
 import { Button } from "@stacklok/ui-kit";
 import { ComponentProps } from "react";
-import { useRestoreWorkspace } from "./use-restore-workspace";
+import { useMutationRestoreWorkspace } from "./use-mutation-restore-workspace";
 
 export function useRestoreWorkspaceButton({
   workspaceName,
 }: {
   workspaceName: string;
 }): ComponentProps<typeof Button> {
-  const { mutate, isPending } = useRestoreWorkspace();
+  const { mutateAsync, isPending } = useMutationRestoreWorkspace();
 
   return {
     isPending,
     isDisabled: isPending,
-    onPress: () => mutate({ path: { workspace_name: workspaceName } }),
+    onPress: () => mutateAsync({ path: { workspace_name: workspaceName } }),
     children: "Restore",
   };
 }

src/features/workspace/hooks/use-mutation-restore-workspace.ts

@@ -11,29 +11,40 @@ export function useToastMutation<
   TError = DefaultError,
   TVariables = void,
   TContext = unknown,
->(options: UseMutationOptions<TData, TError, TVariables, TContext>) {
+>({
+  successMsg,
+  errorMsg,
+  loadingMsg,
+  ...options
+}: UseMutationOptions<TData, TError, TVariables, TContext> & {
+  successMsg?: ((variables: TVariables) => string) | string;
+  loadingMsg?: string;
+  errorMsg?: string;
+}) {
   const {
     mutateAsync: originalMutateAsync,
-    // NOTE: We are not allowing direct use of the `mutate` (sync) function.
+    // NOTE: We are not allowing direct use of the `mutate` (sync) function
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     mutate: _,
     ...rest
   } = useMutation(options);
 
   const mutateAsync = useCallback(
-    <TError extends { detail: string | undefined }>(
+    async <TError extends { detail: string | undefined }>(
       variables: Parameters<typeof originalMutateAsync>[0],
-      options: Parameters<typeof originalMutateAsync>[1],
-      { successMsg }: { successMsg: string },
+      options: Parameters<typeof originalMutateAsync>[1] = {},
     ) => {
       const promise = originalMutateAsync(variables, options);
 
       toast.promise(promise, {
-        success: successMsg,
-        error: (e: TError) => (e.detail ? e.detail : "An error occurred"),
+        success:
+          typeof successMsg === "function" ? successMsg(variables) : successMsg,
+        loading: loadingMsg ?? "Loading...",
+        error: (e: TError) =>
+          errorMsg ?? (e.detail ? e.detail : "An error occurred"),
       });
     },
-    [originalMutateAsync],
+    [errorMsg, loadingMsg, originalMutateAsync, successMsg],
   );
 
   return { mutateAsync, ...rest };

src/features/workspace/hooks/use-restore-workspace-button.tsx

@@ -1,5 +1,5 @@
 import { SidebarProvider } from "@/components/ui/sidebar";
-import { DarkModeProvider } from "@stacklok/ui-kit";
+import { DarkModeProvider, Toaster } from "@stacklok/ui-kit";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { RenderOptions, render } from "@testing-library/react";
 import React, { ReactNode } from "react";
@@ -45,6 +45,7 @@ const renderWithProviders = (
   render(
     <TestQueryClientProvider>
       <DarkModeProvider>
+        <Toaster />
         <MemoryRouter {...options?.routeConfig}>
           <Routes>
             <Route