feat: archive workspace (#145)

* feat: add manage workspaces breadcrumb to creation page

* feat: retrieve workspace name

* test: add archive workspace msw

* feat: archive workspace

* test: define route configuration

Author: peppescg

src/Page.tsx

@@ -16,7 +16,7 @@ export default function Page() {
       <Route path="/prompt/:id" element={<RouteChat />} />
       <Route path="/help/:section" element={<RouteHelp />} />
       <Route path="/certificates" element={<RouteCertificates />} />
-      <Route path="/workspace/:id" element={<RouteWorkspace />} />
+      <Route path="/workspace/:name" element={<RouteWorkspace />} />
       <Route path="/workspaces" element={<RouteWorkspaces />} />
       <Route path="/workspace/create" element={<RouteWorkspaceCreation />} />
       <Route

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

@@ -0,0 +1,15 @@
+import { v1DeleteWorkspaceMutation } from "@/api/generated/@tanstack/react-query.gen";
+import { toast } from "@stacklok/ui-kit";
+import { useMutation } from "@tanstack/react-query";
+import { useNavigate } from "react-router-dom";
+
+export function useArchiveWorkspace() {
+  const navigate = useNavigate();
+  return useMutation({
+    ...v1DeleteWorkspaceMutation(),
+    onSuccess: () => navigate("/workspaces"),
+    onError: (err) => {
+      toast.error(err.detail ? `${err.detail}` : "Failed to archive workspace");
+    },
+  });
+}

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

@@ -0,0 +1,35 @@
+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();
+const mockToast = 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,
+  };
+});
+
+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 workspaceName="foo" />);
+
+  await userEvent.click(screen.getByRole("button", { name: /archive/i }));
+  await waitFor(() => expect(mockNavigate).toBeCalled());
+});

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

@@ -0,0 +1,35 @@
+import { Card, CardBody, Button, Text } from "@stacklok/ui-kit";
+import { twMerge } from "tailwind-merge";
+import { useArchiveWorkspace } from "../../workspace-system-prompt/hooks/use-archive-workspace";
+
+export function ArchiveWorkspace({
+  className,
+  workspaceName,
+}: {
+  workspaceName: string;
+  className?: string;
+}) {
+  const { mutate, isPending } = useArchiveWorkspace();
+
+  return (
+    <Card className={twMerge(className, "shrink-0")}>
+      <CardBody>
+        <Text className="text-primary">Archive Workspace</Text>
+        <div className="flex justify-between items-center">
+          <Text className="flex items-center text-secondary mb-0">
+            Archiving this workspace removes it from the main workspaces list,
+            though it can be restored if needed.
+          </Text>
+          <Button
+            isPending={isPending}
+            onPress={() => {
+              mutate({ path: { workspace_name: workspaceName } });
+            }}
+          >
+            Archive
+          </Button>
+        </div>
+      </CardBody>
+    </Card>
+  );
+}

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

@@ -1,11 +1,17 @@
 import { Card, CardBody, Input, Label, TextField } from "@stacklok/ui-kit";
 import { twMerge } from "tailwind-merge";
 
-export function WorkspaceName({ className }: { className?: string }) {
+export function WorkspaceName({
+  className,
+  workspaceName,
+}: {
+  workspaceName: string;
+  className?: string;
+}) {
   return (
     <Card className={twMerge(className, "shrink-0")}>
       <CardBody>
-        <TextField value="my-awesome-workspace" isReadOnly>
+        <TextField value={workspaceName} isReadOnly>
           <Label>Workspace name</Label>
           <Input />
         </TextField>

src/mocks/msw/handlers.ts

@@ -36,4 +36,7 @@ export const handlers = [
   http.post("*/api/v1/workspaces", () => {
     return HttpResponse.json(mockedWorkspaces);
   }),
+  http.delete("*/api/v1/workspaces/:workspace_name", () =>
+    HttpResponse.json({ status: 204 }),
+  ),
 ];

src/routes/__tests__/route-workspace.test.tsx

@@ -2,7 +2,13 @@ import { render, within } from "@/lib/test-utils";
 import { test, expect } from "vitest";
 import { RouteWorkspace } from "../route-workspace";
 
-const renderComponent = () => render(<RouteWorkspace />);
+const renderComponent = () =>
+  render(<RouteWorkspace />, {
+    routeConfig: {
+      initialEntries: ["/workspace/foo"],
+    },
+    pathConfig: "/workspace/:name",
+  });
 
 vi.mock("@monaco-editor/react", () => {
   const FakeEditor = vi.fn((props) => {

src/routes/route-workspace-creation.tsx

@@ -8,6 +8,7 @@ export function RouteWorkspaceCreation() {
     <>
       <Breadcrumbs>
         <BreadcrumbHome />
+        <Breadcrumb href="/workspaces">Manage Workspaces</Breadcrumb>
         <Breadcrumb>Create Workspace</Breadcrumb>
       </Breadcrumbs>
 

src/routes/route-workspace.tsx

@@ -1,10 +1,16 @@
 import { BreadcrumbHome } from "@/components/BreadcrumbHome";
+import { ArchiveWorkspace } from "@/features/workspace/components/archive-workspace";
 import { SystemPromptEditor } from "@/features/workspace-system-prompt/components/system-prompt-editor";
 import { WorkspaceHeading } from "@/features/workspace/components/workspace-heading";
 import { WorkspaceName } from "@/features/workspace/components/workspace-name";
 import { Breadcrumb, Breadcrumbs } from "@stacklok/ui-kit";
+import { useParams } from "react-router-dom";
 
 export function RouteWorkspace() {
+  const { name } = useParams();
+
+  if (!name) throw Error("Workspace name is required");
+
   return (
     <>
       <Breadcrumbs>
@@ -14,8 +20,9 @@ export function RouteWorkspace() {
       </Breadcrumbs>
 
       <WorkspaceHeading title="Workspace settings" />
-      <WorkspaceName className="mb-4" />
+      <WorkspaceName className="mb-4" workspaceName={name} />
       <SystemPromptEditor className="mb-4" />
+      <ArchiveWorkspace workspaceName={name} />
     </>
   );
 }