feat: initial work on react-hook-form

Author: alex-mcgovern

package-lock.json

@@ -24,14 +24,15 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@hey-api/client-fetch": "^0.7.1",
+    "@hookform/resolvers": "^4.1.0",
     "@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",
-    "@stacklok/ui-kit": "^1.0.1-4",
+    "@stacklok/ui-kit": "^1.0.1-8",
     "@tanstack/react-query": "^5.64.1",
     "@tanstack/react-query-devtools": "^5.66.0",
     "@types/lodash": "^4.17.15",

package.json

@@ -45,11 +45,9 @@ export function ErrorFallbackContent() {
 
 export function Error() {
   return (
-    <div className="flex h-screen w-screen flex-col items-center justify-center">
-      <div className="w-full shrink-0">
-        <Header />
-      </div>
+    <>
+      <Header />
       <ErrorFallbackContent />
-    </div>
+    </>
   )
 }

src/components/Error.tsx

@@ -1,5 +1,5 @@
 import { test, expect } from 'vitest'
-import { WorkspaceName } from '../workspace-name'
+import { FormWorkspaceName } from '../form-workspace-name'
 import { render, waitFor } from '@/lib/test-utils'
 import userEvent from '@testing-library/user-event'
 import { server } from '@/mocks/msw/node'
@@ -8,7 +8,7 @@ import { mswEndpoint } from '@/test/msw-endpoint'
 
 test('can rename workspace', async () => {
   const { getByRole, getByText } = render(
-    <WorkspaceName workspaceName="foo-bar" isArchived={false} />
+    <FormWorkspaceName workspaceName="foo-bar" isArchived={false} />
   )
 
   const input = getByRole('textbox', { name: /workspace name/i })
@@ -26,7 +26,7 @@ test('can rename workspace', async () => {
 
 test("can't rename archived workspace", async () => {
   const { getByRole } = render(
-    <WorkspaceName workspaceName="foo" isArchived={true} />
+    <FormWorkspaceName workspaceName="foo" isArchived={true} />
   )
 
   expect(getByRole('textbox', { name: /workspace name/i })).toBeDisabled()
@@ -48,7 +48,7 @@ test("can't rename active workspace", async () => {
     )
   )
   const { getByRole } = render(
-    <WorkspaceName workspaceName="foo" isArchived={true} />
+    <FormWorkspaceName workspaceName="foo" isArchived={true} />
   )
 
   expect(getByRole('textbox', { name: /workspace name/i })).toBeDisabled()
@@ -57,7 +57,7 @@ test("can't rename active workspace", async () => {
 
 test("can't rename archived workspace", async () => {
   const { getByRole, queryByText } = render(
-    <WorkspaceName workspaceName="foo" isArchived={true} />
+    <FormWorkspaceName workspaceName="foo" isArchived={true} />
   )
 
   expect(getByRole('textbox', { name: /workspace name/i })).toBeDisabled()
@@ -69,7 +69,7 @@ test("can't rename archived workspace", async () => {
 
 test("can't rename default workspace", async () => {
   const { getByRole, getByText } = render(
-    <WorkspaceName workspaceName="default" isArchived={false} />
+    <FormWorkspaceName workspaceName="default" isArchived={false} />
   )
 
   expect(getByRole('textbox', { name: /workspace name/i })).toBeDisabled()

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

@@ -0,0 +1,90 @@
+import {
+  Card,
+  CardBody,
+  CardFooter,
+  Description,
+  FormDiscardChangesButton,
+  FormSubmitButton,
+  FormTextField,
+  FormV2,
+  Input,
+  Label,
+} from '@stacklok/ui-kit'
+import { useMutationCreateWorkspace } from '../hooks/use-mutation-create-workspace'
+import { useNavigate } from 'react-router-dom'
+import { twMerge } from 'tailwind-merge'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
+
+const schema = z.object({
+  rename_to: z.string().nonempty(),
+})
+type FieldValues = z.infer<typeof schema>
+const FIELD_NAME = schema.keyof().Enum
+
+export function FormWorkspaceName({
+  className,
+  workspaceName,
+  isArchived,
+}: {
+  className?: string
+  workspaceName: string
+  isArchived: boolean | undefined
+}) {
+  const navigate = useNavigate()
+  const { mutateAsync, isPending } = useMutationCreateWorkspace()
+
+  const isDefault = workspaceName === 'default'
+  const isDisabled = isArchived || isPending || isDefault
+
+  const description: string | null = isDefault
+    ? 'Cannot rename the default workspace'
+    : isArchived
+      ? 'Cannot rename an archived workspace'
+      : null
+
+  const handleSubmit = ({ rename_to }: FieldValues) => {
+    mutateAsync(
+      { body: { name: workspaceName, rename_to } },
+      {
+        onSuccess: () => {
+          navigate(`/workspace/${rename_to}`)
+        },
+      }
+    )
+  }
+
+  return (
+    <FormV2<FieldValues>
+      onSubmit={handleSubmit}
+      data-testid="workspace-name"
+      options={{
+        resolver: zodResolver(schema),
+        defaultValues: {
+          rename_to: workspaceName,
+        },
+      }}
+    >
+      <Card className={twMerge(className, 'shrink-0')}>
+        <CardBody>
+          <FormTextField
+            isDisabled={isDisabled}
+            key={workspaceName}
+            name={FIELD_NAME.rename_to}
+            isRequired
+          >
+            <Label>Workspace name</Label>
+            <Input />
+            {description ? (
+              <Description className="mt-2 block">{description}</Description>
+            ) : null}
+          </FormTextField>
+        </CardBody>
+        <CardFooter className="justify-end gap-2">
+          <FormDiscardChangesButton />
+          <FormSubmitButton />
+        </CardFooter>
+      </Card>
+    </FormV2>
+  )
+}