improvement: add helper text and slug validation to create sub org form

This commit is contained in:
Scott Wilson
2025-10-20 16:42:31 -07:00
parent 0b5c823390
commit c12661ca9d
@@ -7,14 +7,14 @@ import { z } from "zod";
import { createNotification } from "@app/components/notifications"; import { createNotification } from "@app/components/notifications";
import { Button, FormControl, Input } from "@app/components/v2"; import { Button, FormControl, Input } from "@app/components/v2";
import { useCreateSubOrganization } from "@app/hooks/api"; import { useCreateSubOrganization } from "@app/hooks/api";
import { GenericResourceNameSchema } from "@app/lib/schemas"; import { GenericResourceNameSchema, slugSchema } from "@app/lib/schemas";
type ContentProps = { type ContentProps = {
onClose: () => void; onClose: () => void;
}; };
const AddOrgSchema = z.object({ const AddOrgSchema = z.object({
name: GenericResourceNameSchema.nonempty("Suborganization name required") name: slugSchema()
}); });
type FormData = z.infer<typeof AddOrgSchema>; type FormData = z.infer<typeof AddOrgSchema>;
@@ -67,7 +67,12 @@ export const NewSubOrganizationForm = ({ onClose }: ContentProps) => {
<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)}>
<Controller <Controller
render={({ field: { value, onChange }, fieldState: { error } }) => ( render={({ field: { value, onChange }, fieldState: { error } }) => (
<FormControl isError={Boolean(error)} errorText={error?.message} label="Name"> <FormControl
isError={Boolean(error)}
helperText="Must be slug-friendly"
errorText={error?.message}
label="Name"
>
<Input autoFocus value={value} onChange={onChange} placeholder="My Organization" /> <Input autoFocus value={value} onChange={onChange} placeholder="My Organization" />
</FormControl> </FormControl>
)} )}