From cf13ac3116fb00d1a03332dd35cadde2930c6aae Mon Sep 17 00:00:00 2001
From: Prateek Shourya <prateekshourya29@gmail.com>
Date: Wed, 12 Jun 2024 15:44:06 +0530
Subject: [PATCH] [WEB-1578] chore: add max length validation for workspace
 slug in create workspace form. (#4778)

---
 web/core/components/onboarding/create-workspace.tsx  | 12 +++++++++++-
 .../components/workspace/create-workspace-form.tsx   | 11 +++++++++--
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/web/core/components/onboarding/create-workspace.tsx b/web/core/components/onboarding/create-workspace.tsx
index f59266bac..210bf3c32 100644
--- a/web/core/components/onboarding/create-workspace.tsx
+++ b/web/core/components/onboarding/create-workspace.tsx
@@ -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">
diff --git a/web/core/components/workspace/create-workspace-form.tsx b/web/core/components/workspace/create-workspace-form.tsx
index 4e234c3f2..e01ab20a4 100644
--- a/web/core/components/workspace/create-workspace-form.tsx
+++ b/web/core/components/workspace/create-workspace-form.tsx
@@ -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>