fix: enter to submit workspace create form (#142)

Author: alex-mcgovern

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

@@ -20,8 +20,16 @@ test("create workspace", async () => {
 
   expect(screen.getByText(/name/i)).toBeVisible();
 
-  screen.logTestingPlaygroundURL();
   await userEvent.type(screen.getByRole("textbox"), "workspaceA");
   await userEvent.click(screen.getByRole("button", { name: /create/i }));
   await waitFor(() => expect(mockNavigate).toBeCalled());
 });
+
+test("create workspace with enter button", async () => {
+  render(<WorkspaceCreation />);
+
+  expect(screen.getByText(/name/i)).toBeVisible();
+
+  await userEvent.type(screen.getByRole("textbox"), "workspaceA{enter}");
+  await waitFor(() => expect(mockNavigate).toBeCalled());
+});

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

@@ -4,45 +4,53 @@ import {
   Card,
   CardBody,
   CardFooter,
+  Form,
   Input,
   Label,
   LinkButton,
   TextField,
 } from "@stacklok/ui-kit";
-import { useState } from "react";
+import { FormEvent, useState } from "react";
 
 export function WorkspaceCreation() {
   const [workspaceName, setWorkspaceName] = useState("");
   const { mutate, isPending, error } = useCreateWorkspace();
   const errorMsg = error?.detail ? `${error?.detail}` : "";
 
-  const handleCreateWorkspace = () => {
+  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
     mutate({ body: { name: workspaceName } });
   };
 
   return (
-    <Card>
-      <CardBody className="w-full">
-        <TextField
-          aria-label="Workspace name"
-          validationBehavior="aria"
-          isRequired
-          onChange={setWorkspaceName}
-        >
-          <Label>Name</Label>
-          <Input value={workspaceName} />
-          {errorMsg && <div className="p-1 text-red-700">{errorMsg}</div>}
-        </TextField>
-      </CardBody>
-      <CardFooter className="justify-end gap-2">
-        <LinkButton variant="secondary">Cancel</LinkButton>
-        <Button
-          isDisabled={isPending || workspaceName === ""}
-          onPress={() => handleCreateWorkspace()}
-        >
-          Create
-        </Button>
-      </CardFooter>
-    </Card>
+    <Form onSubmit={handleSubmit} validationBehavior="aria">
+      <Card>
+        <CardBody className="w-full">
+          <TextField
+            aria-label="Workspace name"
+            name="Workspace name"
+            validationBehavior="aria"
+            isRequired
+            onChange={setWorkspaceName}
+          >
+            <Label>Name</Label>
+            <Input value={workspaceName} />
+            {errorMsg && <div className="p-1 text-red-700">{errorMsg}</div>}
+          </TextField>
+        </CardBody>
+        <CardFooter className="justify-end gap-2">
+          <LinkButton variant="secondary" href="/workspaces">
+            Cancel
+          </LinkButton>
+          <Button
+            isDisabled={workspaceName === ""}
+            isPending={isPending}
+            type="submit"
+          >
+            Create
+          </Button>
+        </CardFooter>
+      </Card>
+    </Form>
   );
 }