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

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">

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>