synced/coder
1
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2025-07-15 22:20:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Thomas Kosiewski
2025-01-13 17:54:21 +01:00
committed by GitHub
parent dd29997b9c
commit 8a8e7b19af
5 changed files with 40 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -54,6 +54,7 @@ site/stats/
# direnv
.envrc
.direnv
*.test
# Loadtesting

11
site/src/pages/GroupsPage/CreateGroupPageView.stories.tsx
View File

@ -1,4 +1,5 @@
import type { Meta, StoryObj } from "@storybook/react";
import { userEvent, within } from "@storybook/test";
import { mockApiError } from "testHelpers/entities";
import { CreateGroupPageView } from "./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();
},
};

11
site/src/pages/GroupsPage/CreateGroupPageView.tsx
View File

@ -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,6 +66,8 @@ export const CreateGroupPageView: FC<CreateGroupPageViewProps> = ({
autoFocus
fullWidth
label="Name"
onChange={onChangeTrimmed(form)}
autoComplete="name"
/>
<TextField
{...getFieldHelpers("display_name", {
@ -69,6 +75,7 @@ export const CreateGroupPageView: FC<CreateGroupPageViewProps> = ({
})}
fullWidth
label="Display Name"
autoComplete="display_name"
/>
<IconField
{...getFieldHelpers("avatar_url")}

10
site/src/pages/ManagementSettingsPage/GroupsPage/CreateGroupPageView.stories.tsx
View File

@ -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();
},
};

11
site/src/pages/ManagementSettingsPage/GroupsPage/CreateGroupPageView.tsx
View File

@ -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,6 +73,8 @@ export const CreateGroupPageView: FC<CreateGroupPageViewProps> = ({
autoFocus
fullWidth
label="Name"
onChange={onChangeTrimmed(form)}
autoComplete="name"
/>
<TextField
{...getFieldHelpers("display_name", {
@ -76,6 +82,7 @@ export const CreateGroupPageView: FC<CreateGroupPageViewProps> = ({
})}
fullWidth
label="Display Name"
autoComplete="display_name"
/>
<IconField
{...getFieldHelpers("avatar_url")}