fix: show banner in archived workspace (#165)

* fix: show banner in archived workspace

* chore: fix types in tests

Author: alex-mcgovern

src/components/icons/FlipBackward.tsx

@@ -7,7 +7,7 @@ const SvgFlipBackward = (props: SVGProps<SVGSVGElement>) => (
     {...props}
   >
     <path
-      stroke="#2E323A"
+      stroke="currentColor"
       strokeLinecap="round"
       strokeLinejoin="round"
       d="M1 5h13.5a4.5 4.5 0 1 1 0 9H10M1 5l4-4M1 5l4 4"

src/features/workspace-system-prompt/components/__tests__/system-prompt-editor.test.tsx

@@ -21,13 +21,13 @@ vi.mock("@monaco-editor/react", () => {
 });
 
 const renderComponent = () =>
-  render(<SystemPromptEditor workspaceName="foo" />);
+  render(<SystemPromptEditor isArchived={false} workspaceName="foo" />);
 
 test("can update system prompt", async () => {
   server.use(
     http.get("*/api/v1/workspaces/:name/system-prompt", () => {
       return HttpResponse.json({ prompt: "initial prompt from server" });
-    }),
+    })
   );
 
   const { getByRole } = renderComponent();
@@ -48,7 +48,7 @@ test("can update system prompt", async () => {
   server.use(
     http.get("*/api/v1/workspaces/:name/system-prompt", () => {
       return HttpResponse.json({ prompt: "new prompt from test" });
-    }),
+    })
   );
 
   await waitFor(() => {

src/features/workspace-system-prompt/components/system-prompt-editor.tsx

@@ -132,9 +132,11 @@ function usePromptValue({
 export function SystemPromptEditor({
   className,
   workspaceName,
+  isArchived,
 }: {
   className?: string;
   workspaceName: string;
+  isArchived: boolean | undefined;
 }) {
   const context = useContext(DarkModeContext);
   const theme: Theme = inferDarkMode(context);
@@ -194,21 +196,22 @@ export function SystemPromptEditor({
             <Editor
               options={{
                 minimap: { enabled: false },
+                readOnly: isArchived,
               }}
               value={value}
               onChange={(v) => setValue(v ?? "")}
               height="20rem"
               defaultLanguage="Markdown"
               theme={theme}
-              className="bg-base"
+              className={twMerge("bg-base", isArchived ? "opacity-25" : "")}
             />
           )}
         </div>
       </CardBody>
       <CardFooter className="justify-end gap-2">
         <Button
           isPending={isMutationPending}
-          isDisabled={Boolean(isGetPromptPending ?? saved)}
+          isDisabled={Boolean(isArchived ?? isGetPromptPending ?? saved)}
           onPress={() => handleSubmit(value)}
         >
           {saved ? (

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

@@ -8,7 +8,7 @@ const mockToast = vi.fn();
 vi.mock("react-router-dom", async () => {
   const original =
     await vi.importActual<typeof import("react-router-dom")>(
-      "react-router-dom",
+      "react-router-dom"
     );
   return {
     ...original,
@@ -19,7 +19,7 @@ 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",
+      "@stacklok/ui-kit"
     );
   return {
     ...original,
@@ -28,7 +28,7 @@ vi.mock("@stacklok/ui-kit", async () => {
 });
 
 test("archive workspace", async () => {
-  render(<ArchiveWorkspace workspaceName="foo" />);
+  render(<ArchiveWorkspace isArchived={false} workspaceName="foo" />);
 
   await userEvent.click(screen.getByRole("button", { name: /archive/i }));
   await waitFor(() => expect(mockNavigate).toBeCalled());

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

@@ -1,15 +1,19 @@
 import { Card, CardBody, Button, Text } from "@stacklok/ui-kit";
 import { twMerge } from "tailwind-merge";
-import { useArchiveWorkspace } from "../../workspace-system-prompt/hooks/use-archive-workspace";
+import { useRestoreWorkspaceButton } from "../hooks/use-restore-workspace-button";
+import { useArchiveWorkspaceButton } from "../hooks/use-archive-workspace-button";
 
 export function ArchiveWorkspace({
   className,
   workspaceName,
+  isArchived,
 }: {
   workspaceName: string;
   className?: string;
+  isArchived: boolean | undefined;
 }) {
-  const { mutate, isPending } = useArchiveWorkspace();
+  const restoreButtonProps = useRestoreWorkspaceButton({ workspaceName });
+  const archiveButtonProps = useArchiveWorkspaceButton({ workspaceName });
 
   return (
     <Card className={twMerge(className, "shrink-0")}>
@@ -22,15 +26,7 @@ export function ArchiveWorkspace({
           </Text>
         </div>
 
-        <Button
-          isDestructive
-          isPending={isPending}
-          onPress={() => {
-            mutate({ path: { workspace_name: workspaceName } });
-          }}
-        >
-          Archive
-        </Button>
+        <Button {...(isArchived ? restoreButtonProps : archiveButtonProps)} />
       </CardBody>
     </Card>
   );

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

@@ -15,9 +15,11 @@ import { FormEvent, useState } from "react";
 export function WorkspaceName({
   className,
   workspaceName,
+  isArchived,
 }: {
   className?: string;
   workspaceName: string;
+  isArchived: boolean | undefined;
 }) {
   const [name, setName] = useState(workspaceName);
   const { mutate, isPending, error } = useCreateWorkspace();
@@ -38,6 +40,7 @@ export function WorkspaceName({
             name="Workspace name"
             validationBehavior="aria"
             isRequired
+            isDisabled={isArchived}
             onChange={setName}
           >
             <Label>Workspace name</Label>
@@ -46,7 +49,11 @@ export function WorkspaceName({
           </TextField>
         </CardBody>
         <CardFooter className="justify-end gap-2">
-          <Button isDisabled={name === ""} isPending={isPending} type="submit">
+          <Button
+            isDisabled={isArchived || name === ""}
+            isPending={isPending}
+            type="submit"
+          >
             Save
           </Button>
         </CardFooter>

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

@@ -0,0 +1,19 @@
+import { Button } from "@stacklok/ui-kit";
+import { ComponentProps } from "react";
+import { useArchiveWorkspace } from "@/features/workspace-system-prompt/hooks/use-archive-workspace";
+
+export function useArchiveWorkspaceButton({
+  workspaceName,
+}: {
+  workspaceName: string;
+}): ComponentProps<typeof Button> {
+  const { mutate, isPending } = useArchiveWorkspace();
+
+  return {
+    isPending,
+    isDisabled: isPending,
+    onPress: () => mutate({ path: { workspace_name: workspaceName } }),
+    isDestructive: true,
+    children: "Archive",
+  };
+}

src/features/workspace/hooks/use-archived-workspaces.ts

@@ -1,14 +1,20 @@
 import { useQuery } from "@tanstack/react-query";
 import { v1ListArchivedWorkspacesOptions } from "@/api/generated/@tanstack/react-query.gen";
+import { V1ListArchivedWorkspacesResponse } from "@/api/generated";
 
-export const useArchivedWorkspaces = () => {
+export function useArchivedWorkspaces<T = V1ListArchivedWorkspacesResponse>({
+  select,
+}: {
+  select?: (data: V1ListArchivedWorkspacesResponse) => T;
+} = {}) {
   return useQuery({
     ...v1ListArchivedWorkspacesOptions(),
-    refetchInterval: 5_000,
+    refetchInterval: 5000,
     refetchIntervalInBackground: true,
     refetchOnMount: true,
     refetchOnReconnect: true,
     refetchOnWindowFocus: true,
     retry: false,
+    select,
   });
-};
+}

src/features/workspace/hooks/use-list-workspaces.ts

@@ -1,14 +1,20 @@
 import { useQuery } from "@tanstack/react-query";
 import { v1ListWorkspacesOptions } from "@/api/generated/@tanstack/react-query.gen";
+import { V1ListWorkspacesResponse } from "@/api/generated";
 
-export const useListWorkspaces = () => {
+export function useListWorkspaces<T = V1ListWorkspacesResponse>({
+  select,
+}: {
+  select?: (data: V1ListWorkspacesResponse) => T;
+} = {}) {
   return useQuery({
     ...v1ListWorkspacesOptions(),
-    refetchInterval: 5_000,
+    refetchInterval: 5000,
     refetchIntervalInBackground: true,
     refetchOnMount: true,
     refetchOnReconnect: true,
     refetchOnWindowFocus: true,
     retry: false,
+    select,
   });
-};
+}

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

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