From a4e5138d1c39dfdbf0b4f1998116204a5424a6ff Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Tue, 23 Apr 2024 19:59:34 +0530
Subject: [PATCH] [WEB-1047] chore: create page modal improvement (#4266)

* chore: create page modal improvement

* chore: create page modal improvement
---
 web/components/pages/modals/page-form.tsx | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/web/components/pages/modals/page-form.tsx b/web/components/pages/modals/page-form.tsx
index 0698b7e2b5..2a3ad8380b 100644
--- a/web/components/pages/modals/page-form.tsx
+++ b/web/components/pages/modals/page-form.tsx
@@ -35,18 +35,14 @@ export const PageForm: React.FC<Props> = (props) => {
     }
   };
 
+  const isTitleLengthMoreThan255Character = formData.name ? formData.name.length > 255 : false;
+
   return (
     <form onSubmit={handlePageFormSubmit}>
       <div className="space-y-4">
         <h3 className="text-lg font-medium leading-6 text-custom-text-100">Create Page</h3>
 
         <div className="space-y-2">
-          <div>
-            <div className="text-custom-text-200">Name</div>
-            <div className="text-xs text-custom-text-300">
-              Max length of the name should be less than 255 characters
-            </div>
-          </div>
           <Input
             id="name"
             type="text"
@@ -56,8 +52,10 @@ export const PageForm: React.FC<Props> = (props) => {
             className="w-full resize-none text-lg"
             tabIndex={1}
             required
-            maxLength={255}
           />
+          {isTitleLengthMoreThan255Character && (
+            <span className="text-xs text-red-500">Max length of the name should be less than 255 characters</span>
+          )}
         </div>
       </div>
 
@@ -95,7 +93,14 @@ export const PageForm: React.FC<Props> = (props) => {
           <Button variant="neutral-primary" size="sm" onClick={handleModalClose} tabIndex={4}>
             Cancel
           </Button>
-          <Button variant="primary" size="sm" type="submit" loading={isSubmitting} tabIndex={5}>
+          <Button
+            variant="primary"
+            size="sm"
+            type="submit"
+            loading={isSubmitting}
+            disabled={isTitleLengthMoreThan255Character}
+            tabIndex={5}
+          >
             {isSubmitting ? "Creating" : "Create Page"}
           </Button>
         </div>