fix(site): validate group name before submitting to the backend

ThomasK33 · ThomasK33 · commit 913d8a09293e · 2025-01-13T15:46:05.000+01:00
Change-Id: I6ffc2d571b2f6c6387ef143e0b0e74cf4196a551
Signed-off-by: Thomas Kosiewski &lt;tk@coder.com&gt;
diff --git a/.gitignore b/.gitignore
@@ -54,6 +54,7 @@ site/stats/
 
 # direnv
 .envrc
+.direnv
 *.test
 
 # Loadtesting
diff --git a/site/src/pages/GroupsPage/CreateGroupPageView.stories.tsx b/site/src/pages/GroupsPage/CreateGroupPageView.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { mockApiError } from "testHelpers/entities";
 import { CreateGroupPageView } from "./CreateGroupPageView";
+import { userEvent, within } from "@storybook/test";
 
 const meta: Meta<typeof CreateGroupPageView> = {
 	title: "pages/GroupsPage/CreateGroupPageView",
@@ -21,3 +22,13 @@ export const WithError: Story = {
 		initialTouched: { name: true },
 	},
 };
+
+export const InvalidName: Story = {
+	play: async ({ canvasElement }) => {
+		const user = userEvent.setup();
+		const body = within(canvasElement.ownerDocument.body);
+		const input = await body.findByLabelText("Name");
+		await user.type(input, "$om3 !nv@lid Name");
+		input.blur();
+	},
+};
diff --git a/site/src/pages/GroupsPage/CreateGroupPageView.tsx b/site/src/pages/GroupsPage/CreateGroupPageView.tsx
@@ -12,11 +12,15 @@ import { Stack } from "components/Stack/Stack";
 import { type FormikTouched, useFormik } from "formik";
 import type { FC } from "react";
 import { useNavigate } from "react-router-dom";
-import { getFormHelpers, onChangeTrimmed } from "utils/formUtils";
+import {
+	getFormHelpers,
+	nameValidator,
+	onChangeTrimmed,
+} from "utils/formUtils";
 import * as Yup from "yup";
 
 const validationSchema = Yup.object({
-	name: Yup.string().required().label("Name"),
+	name: nameValidator("Name"),
 });
 
 export type CreateGroupPageViewProps = {
@@ -62,13 +66,16 @@ export const CreateGroupPageView: FC<CreateGroupPageViewProps> = ({
 							autoFocus
 							fullWidth
 							label="Name"
+							onChange={onChangeTrimmed(form)}
+							autoComplete="name"
 						/>
 						<TextField
 							{...getFieldHelpers("display_name", {
 								helperText: "Optional: keep empty to default to the name.",
 							})}
 							fullWidth
 							label="Display Name"
+							autoComplete="display_name"
 						/>
 						<IconField
 							{...getFieldHelpers("avatar_url")}
diff --git a/site/src/pages/ManagementSettingsPage/GroupsPage/CreateGroupPageView.stories.tsx b/site/src/pages/ManagementSettingsPage/GroupsPage/CreateGroupPageView.stories.tsx
@@ -30,3 +30,13 @@ export const WithError: Story = {
 		});
 	},
 };
+
+export const InvalidName: Story = {
+	play: async ({ canvasElement }) => {
+		const user = userEvent.setup();
+		const body = within(canvasElement.ownerDocument.body);
+		const input = await body.findByLabelText("Name");
+		await user.type(input, "$om3 !nv@lid Name");
+		input.blur();
+	},
+};
diff --git a/site/src/pages/ManagementSettingsPage/GroupsPage/CreateGroupPageView.tsx b/site/src/pages/ManagementSettingsPage/GroupsPage/CreateGroupPageView.tsx
@@ -15,11 +15,15 @@ import { Spinner } from "components/Spinner/Spinner";
 import { useFormik } from "formik";
 import type { FC } from "react";
 import { useNavigate } from "react-router-dom";
-import { getFormHelpers, onChangeTrimmed } from "utils/formUtils";
+import {
+	getFormHelpers,
+	nameValidator,
+	onChangeTrimmed,
+} from "utils/formUtils";
 import * as Yup from "yup";
 
 const validationSchema = Yup.object({
-	name: Yup.string().required().label("Name"),
+	name: nameValidator("Name"),
 });
 
 export type CreateGroupPageViewProps = {
@@ -69,13 +73,16 @@ export const CreateGroupPageView: FC<CreateGroupPageViewProps> = ({
 							autoFocus
 							fullWidth
 							label="Name"
+							onChange={onChangeTrimmed(form)}
+							autoComplete="name"
 						/>
 						<TextField
 							{...getFieldHelpers("display_name", {
 								helperText: "Optional: keep empty to default to the name.",
 							})}
 							fullWidth
 							label="Display Name"
+							autoComplete="display_name"
 						/>
 						<IconField
 							{...getFieldHelpers("avatar_url")}
