github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

[WEB-1578] chore: add max length validation for workspace slug in create workspace form. (#4778)

Browse Source
This commit is contained in:
Prateek Shourya 2024-06-12 15:44:06 +05:30 committed by GitHub
parent 28fc8ccd0e
commit cf13ac3116
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 20 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web/core/components/onboarding/create-workspace.tsx
View File

@ -179,7 +179,9 @@ export const CreateWorkspace: React.FC<Props> = (props) => {
onChange={(event) => {
onChange(event.target.value);
setValue("name", event.target.value);
setValue("slug", event.target.value.toLocaleLowerCase().trim().replace(/ /g, "-"));
setValue("slug", event.target.value.toLocaleLowerCase().trim().replace(/ /g, "-"), {
shouldValidate: true,
});
}}
placeholder="Enter workspace name..."
ref={ref}
@ -202,6 +204,13 @@ export const CreateWorkspace: React.FC<Props> = (props) => {
<Controller
control={control}
name="slug"
rules={{
required: "Workspace slug is required",
maxLength: {
value: 48,
message: "Workspace slug should not exceed 48 characters",
},
}}
render={({ field: { value, ref, onChange } }) => (
<div
className={`relative flex items-center rounded-md border-[0.5px] px-3 ${
@ -230,6 +239,7 @@ export const CreateWorkspace: React.FC<Props> = (props) => {
{invalidSlug && (
<p className="text-sm text-red-500">{`URL can only contain ( - ), ( _ ) & alphanumeric characters.`}</p>
)}
{errors.slug && <span className="text-sm text-red-500">{errors.slug.message}</span>}
</div>
<hr className="w-full border-onboarding-border-100" />
<div className="space-y-1">

11
web/core/components/workspace/create-workspace-form.tsx
View File

@ -148,7 +148,9 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
onChange={(e) => {
onChange(e.target.value);
setValue("name", e.target.value);
setValue("slug", e.target.value.toLocaleLowerCase().trim().replace(/ /g, "-"));
setValue("slug", e.target.value.toLocaleLowerCase().trim().replace(/ /g, "-"), {
shouldValidate: true,
});
}}
ref={ref}
hasError={Boolean(errors.name)}
@ -171,7 +173,11 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
control={control}
name="slug"
rules={{
required: "Workspace URL is required",
required: "Workspace slug is required",
maxLength: {
value: 48,
message: "Workspace slug should not exceed 48 characters",
},
}}
render={({ field: { onChange, value, ref } }) => (
<Input
@ -194,6 +200,7 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
{invalidSlug && (
<p className="text-sm text-red-500">{`URL can only contain ( - ), ( _ ) & alphanumeric characters.`}</p>
)}
{errors.slug && <span className="text-xs text-red-500">{errors.slug.message}</span>}
</div>
<div className="space-y-1 text-sm">
<span>