feat: rename workspace (#163)

* feat: rename workspaces

* test: update workspace name section

Author: peppescg

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

@@ -11,15 +11,24 @@ import {
   TextField,
 } from "@stacklok/ui-kit";
 import { FormEvent, useState } from "react";
+import { useNavigate } from "react-router-dom";
 
 export function WorkspaceCreation() {
+  const navigate = useNavigate();
   const [workspaceName, setWorkspaceName] = useState("");
   const { mutate, isPending, error } = useCreateWorkspace();
   const errorMsg = error?.detail ? `${error?.detail}` : "";
 
   const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    mutate({ body: { name: workspaceName } });
+    mutate(
+      {
+        body: { name: workspaceName },
+      },
+      {
+        onSuccess: () => navigate("/workspaces"),
+      },
+    );
   };
 
   return (

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

@@ -1,5 +1,16 @@
-import { Card, CardBody, Input, Label, TextField } from "@stacklok/ui-kit";
+import {
+  Button,
+  Card,
+  CardBody,
+  CardFooter,
+  Form,
+  Input,
+  Label,
+  TextField,
+} from "@stacklok/ui-kit";
 import { twMerge } from "tailwind-merge";
+import { useCreateWorkspace } from "../hooks/use-create-workspace";
+import { FormEvent, useState } from "react";
 
 export function WorkspaceName({
   className,
@@ -8,14 +19,38 @@ export function WorkspaceName({
   className?: string;
   workspaceName: string;
 }) {
+  const [name, setName] = useState(workspaceName);
+  const { mutate, isPending, error } = useCreateWorkspace();
+  const errorMsg = error?.detail ? `${error?.detail}` : "";
+
+  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    mutate({ body: { name: workspaceName, rename_to: name } });
+  };
+
   return (
-    <Card className={twMerge(className, "shrink-0")}>
-      <CardBody>
-        <TextField value={workspaceName} isReadOnly>
-          <Label>Workspace name</Label>
-          <Input />
-        </TextField>
-      </CardBody>
-    </Card>
+    <Form onSubmit={handleSubmit} validationBehavior="aria">
+      <Card className={twMerge(className, "shrink-0")}>
+        <CardBody>
+          <TextField
+            aria-label="Workspace name"
+            value={name}
+            name="Workspace name"
+            validationBehavior="aria"
+            isRequired
+            onChange={setName}
+          >
+            <Label>Workspace name</Label>
+            <Input />
+            {errorMsg && <div className="p-1 text-red-700">{errorMsg}</div>}
+          </TextField>
+        </CardBody>
+        <CardFooter className="justify-end gap-2">
+          <Button isDisabled={name === ""} isPending={isPending} type="submit">
+            Save
+          </Button>
+        </CardFooter>
+      </Card>
+    </Form>
   );
 }

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

@@ -1,11 +1,8 @@
 import { useMutation } from "@tanstack/react-query";
-import { useNavigate } from "react-router-dom";
 import { v1CreateWorkspaceMutation } from "@/api/generated/@tanstack/react-query.gen";
 
 export function useCreateWorkspace() {
-  const navigate = useNavigate();
   return useMutation({
     ...v1CreateWorkspaceMutation(),
-    onSuccess: () => navigate("/workspaces"),
   });
 }

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

@@ -35,7 +35,7 @@ test("renders title", () => {
 test("renders workspace name input", () => {
   const { getByRole } = renderComponent();
 
-  expect(getByRole("textbox", { name: "Workspace name" })).toBeVisible();
+  expect(getByRole("textbox", { name: /workspace name/i })).toBeVisible();
 });
 
 test("renders system prompt editor", async () => {