From 546cbc2d4b91c641767e6ac49d5bd0fac4ce8f14 Mon Sep 17 00:00:00 2001
From: Sayali Joshi <sayali.joshi@contentstack.com>
Date: Tue, 9 Jul 2024 17:53:06 +0530
Subject: [PATCH] [CMG-214] - Destination Stack | Error message is not showing
 when max limit is reached for Stack name field and Description field.

---
 .../components/Common/AddStack/addStack.tsx   | 30 ++++++++++++++-----
 ui/src/components/ContentMapper/index.tsx     |  2 +-
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/ui/src/components/Common/AddStack/addStack.tsx b/ui/src/components/Common/AddStack/addStack.tsx
index 0c44f7865..f1cd43009 100644
--- a/ui/src/components/Common/AddStack/addStack.tsx
+++ b/ui/src/components/Common/AddStack/addStack.tsx
@@ -57,7 +57,7 @@ const AddStack = (props: any): JSX.Element => {
       });
       props?.closeModal();
     } else {
-      Notification({ notificationContent: { text: 'Failed to create the stack' }, type: 'error' });
+      Notification({ notificationContent: { text: 'Stack creation failed. Please try again.' }, type: 'error' });
     }
     setIsProcessing(false);
   };
@@ -102,6 +102,7 @@ const AddStack = (props: any): JSX.Element => {
       });
     //org id will always be there
   }, []);
+
   return (
     <>
       {isLoading ? (
@@ -116,9 +117,15 @@ const AddStack = (props: any): JSX.Element => {
           keepDirtyOnReinitialize={true}
           validate={(values): any => {
             const errors: any = {};
-            if (!values?.name || values?.name?.trim().lenght < 1) {
+            if (!values?.name || values?.name?.trim().length < 1) {
               errors.name = 'Stack name required';
             }
+            if (values?.name && values?.name?.length > 255) {
+              errors.name = 'Stack name should have a maximum length of 255 character(s).';
+            }
+            if (values?.description && values?.description?.length > 512) {
+              errors.description = 'Description should have a maximum length of 512 character(s).';
+            }
             if (!values?.locale || values?.locale === '') {
               errors.locale = 'Required';
             }
@@ -152,7 +159,7 @@ const AddStack = (props: any): JSX.Element => {
                                   testId="cs-stack-create-title-input"
                                   version="v2"
                                   {...input}
-                                  onChange={(event: any): any => {
+                                  onChange={(event: React.ChangeEvent<HTMLInputElement>): void => {
                                     input?.onChange(event);
                                   }}
                                   name="name"
@@ -176,7 +183,7 @@ const AddStack = (props: any): JSX.Element => {
                       </Field>
                       <Field>
                         <ReactFinalField name={'description'} type="textarea">
-                          {({ input }): any => {
+                          {({ input, meta }): JSX.Element => {
                             return (
                               <div className="input-description">
                                 <Field>
@@ -193,11 +200,20 @@ const AddStack = (props: any): JSX.Element => {
                                     className="Description-field"
                                     {...input}
                                     name="description"
-                                    onChange={(event: any): any => {
+                                    onChange={(event: React.ChangeEvent<HTMLInputElement>): void => {
                                       input?.onChange(event);
                                     }}
                                     placeholder={addStackCMSData?.stack_description_placeholder}
+                                    error={(meta?.error || meta?.submitError) && meta?.touched}
                                   />
+                                  {meta?.error && meta?.touched && (
+                                  <ValidationMessage
+                                    version="v2"
+                                    testId="cs-stack-create-description-validation"
+                                  >
+                                    {meta?.error}
+                                  </ValidationMessage>
+                                )}
                                 </Field>
                               </div>
                             );
@@ -206,7 +222,7 @@ const AddStack = (props: any): JSX.Element => {
                       </Field>
                       <Field>
                         <ReactFinalField name={'locale'}>
-                          {({ input, meta }): any => {
+                          {({ input, meta }): JSX.Element => {
                             return (
                               <>
                                 <FieldLabel
@@ -221,7 +237,7 @@ const AddStack = (props: any): JSX.Element => {
                                 <Select
                                   value={input?.value}
                                   isSearchable={true}
-                                  onChange={(event: any): any => {
+                                  onChange={(event: React.ChangeEvent<HTMLInputElement>): void => {
                                     input?.onChange(event);
                                   }}
                                   name="locale"
diff --git a/ui/src/components/ContentMapper/index.tsx b/ui/src/components/ContentMapper/index.tsx
index 4017fe117..932ed5838 100644
--- a/ui/src/components/ContentMapper/index.tsx
+++ b/ui/src/components/ContentMapper/index.tsx
@@ -1031,7 +1031,7 @@ const ContentMapper = () => {
                         </span>
                         <span className='ml-10'>
                           <Tooltip content="Schema Preview" position="bottom">
-                            <Icon icon="LivePreview" version="v2" onClick={handleSchemaPreview} />
+                            <Icon icon="LivePreview" version="v2" onClick={() => handleSchemaPreview(content?.otherCmsTitle)} />
                           </Tooltip>
                         </span>
                       </div>