feat: implement "Revert" button for workspace name (#276)

* Label Workspaces dropdown with Active Workspace instead of just Workspace.

* Add indicator to the "active" workspace within the Workspace Settings page.

* change wording of workspace settings title

* add jsonforms

* .

* types fix

* fix failing test

* better schema for string

* make form label in jsonforms loook like design

* add revert feature

* make dropdown work

* remove useless stuff

* .

* Revert "."

This reverts commit 0b1edec.

* .

* .

* .

* fixes

* implement James's suggestions

* remove some unused stuff

Author: kantord

package-lock.json

@@ -21,20 +21,26 @@
   },
   "dependencies": {
     "@hey-api/client-fetch": "^0.7.1",
+    "@jsonforms/core": "^3.5.1",
+    "@jsonforms/react": "^3.5.1",
+    "@jsonforms/vanilla-renderers": "^3.5.1",
     "@monaco-editor/react": "^4.6.0",
     "@radix-ui/react-dialog": "^1.1.4",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
+    "@sinclair/typebox": "^0.34.16",
     "@stacklok/ui-kit": "^1.0.1-1",
     "@tanstack/react-query": "^5.64.1",
     "@tanstack/react-query-devtools": "^5.66.0",
+    "@types/lodash": "^4.17.15",
     "@types/prismjs": "^1.26.5",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@untitled-ui/icons-react": "^0.1.4",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "fuse.js": "^7.0.0",
     "highlight.js": "^11.11.1",
+    "lodash": "^4.17.21",
     "prismjs": "^1.29.0",
     "react": "19.0.0",
     "react-dom": "19.0.0",

package.json

@@ -93,7 +93,7 @@ describe("App", () => {
     );
 
     const workspaceSelectionButton = screen.getByRole("button", {
-      name: "Workspace default",
+      name: "Active workspace default",
     });
     await waitFor(() => expect(workspaceSelectionButton).toBeVisible());
 

src/App.test.tsx

@@ -5,7 +5,7 @@ export function WorkspaceHeading({
   title,
   children,
 }: {
-  title: string;
+  title: React.ReactNode;
   children?: React.ReactNode;
 }) {
   return (

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

@@ -1,17 +1,14 @@
-import {
-  Button,
-  Card,
-  CardBody,
-  CardFooter,
-  Form,
-  Input,
-  Label,
-  TextField,
-} from "@stacklok/ui-kit";
-import { twMerge } from "tailwind-merge";
 import { useMutationCreateWorkspace } from "../hooks/use-mutation-create-workspace";
-import { FormEvent, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
+import { Static, Type } from "@sinclair/typebox";
+import { FormCard } from "@/forms/FormCard";
+
+const schema = Type.Object({
+  workspaceName: Type.String({
+    title: "Workspace name",
+    minLength: 1,
+  }),
+});
 
 export function WorkspaceName({
   className,
@@ -23,59 +20,30 @@ export function WorkspaceName({
   isArchived: boolean | undefined;
 }) {
   const navigate = useNavigate();
-  const { mutateAsync, isPending, error, reset } = useMutationCreateWorkspace();
+  const { mutateAsync, isPending, error } = useMutationCreateWorkspace();
   const errorMsg = error?.detail ? `${error?.detail}` : "";
 
-  const [name, setName] = useState(() => workspaceName);
-  // NOTE: When navigating from one settings page to another, this value is not
-  // updated, hence the synchronization effect
-  useEffect(() => {
-    setName(workspaceName);
-    reset();
-  }, [reset, workspaceName]);
+  const initialData = { workspaceName };
 
-  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
+  const handleSubmit = (data: Static<typeof schema>) => {
     mutateAsync(
-      { body: { name: workspaceName, rename_to: name } },
+      { body: { name: workspaceName, rename_to: data.workspaceName } },
       {
-        onSuccess: () => navigate(`/workspace/${name}`),
+        onSuccess: () => navigate(`/workspace/${data.workspaceName}`),
       },
     );
   };
 
   return (
-    <Form onSubmit={handleSubmit} validationBehavior="aria" key={workspaceName}>
-      <Card
-        className={twMerge(className, "shrink-0")}
-        data-testid="workspace-name"
-      >
-        <CardBody>
-          <TextField
-            key={workspaceName}
-            aria-label="Workspace name"
-            value={name}
-            name="Workspace name"
-            validationBehavior="aria"
-            isRequired
-            isDisabled={isArchived}
-            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={isArchived || name === ""}
-            isPending={isPending}
-            type="submit"
-          >
-            Save
-          </Button>
-        </CardFooter>
-      </Card>
-    </Form>
+    <FormCard
+      data-testid="workspace-name"
+      className={className}
+      formError={errorMsg}
+      schema={schema}
+      isDisabled={isArchived}
+      isPending={isPending}
+      initialData={initialData}
+      onSubmit={handleSubmit}
+    />
   );
 }

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

@@ -46,7 +46,8 @@ export function WorkspacesSelection() {
   return (
     <DialogTrigger isOpen={isOpen} onOpenChange={(test) => setIsOpen(test)}>
       <Button variant="tertiary" className="flex cursor-pointer">
-        Workspace {activeWorkspaceName ?? "default"}
+        Active workspace{" "}
+        <span className="font-bold">{activeWorkspaceName ?? "default"}</span>
         <ChevronDown />
       </Button>