implement default affix handling on blur and chnaged the affix description

Author: yashin4112

ui/src/cmsData/legacyCms.json

@@ -338,7 +338,7 @@
         "uid": "cs6c761d71844ac800"
       },
       "title": "Add Source Affix",
-      "description": "Add a 2–5 character affix for the source name. Use only letters, no numbers or special characters",
+      "description": "Add a 2–5 letter-only affix for the source name. The affix will function as a prefix if the content type UID matches with <a href=\"https://www.contentstack.com/docs/developers/create-content-types/restricted-keywords-for-uids\" target=\"_blank\">restricted UIDs</a>. The affix will function as a suffix for field UIDs. If left blank, \"cs\" will be used by default. Avoid numbers, special characters, and restricted keywords",
       "step_lock_text": "Editing this step is currently disabled. To make changes in Draft mode, please deactivate the migration",
       "lock": false,
       "active": false,

ui/src/components/LegacyCms/Actions/LoadPrefix.tsx

@@ -100,6 +100,18 @@ const LoadPreFix = (props: LoadSelectCmsProps) => {
       }
     } else {
       setIsError(false);
+      setErrorMessage('');
+      setIsRestrictedKey(false);
+      setPrefix('');
+    }
+  });
+
+  const handleOnBlur = (value: string) => {
+    if (isEmptyString(value?.trim())) {
+      setIsError(false);
+      setErrorMessage('');
+      setIsRestrictedKey(false);
+      setPrefix('cs');
       const newMigrationDataObj: INewMigration = {
         ...newMigrationData,
         legacy_cms: {
@@ -110,7 +122,7 @@ const LoadPreFix = (props: LoadSelectCmsProps) => {
       };
       dispatch(updateNewMigrationData(newMigrationDataObj));
     }
-  });
+  }
 
   /****  ALL USEEffects  HERE  ****/
 
@@ -132,6 +144,11 @@ const LoadPreFix = (props: LoadSelectCmsProps) => {
           aria-label="affix"
           disabled={newMigrationData?.legacy_cms?.uploadedFile?.isValidated}
           isReadOnly={newMigrationData?.legacy_cms?.uploadedFile?.isValidated}
+          onBlur={(e: React.FocusEvent<HTMLInputElement>) => {
+            handleOnBlur(e.target.value);
+            
+          }}
+          
         />
         {isError && <p className="errorMessage">{errorMessage}</p>}
       </div>

ui/src/components/Stepper/VerticalStepper/AutoVerticalStepper.tsx

@@ -93,7 +93,12 @@ const AutoVerticalStepper = React.forwardRef<
               </Tooltip>
             ) : null} */}
           </div>
-          {data.description && <div className="stepper-discription"> {data.description}</div>}
+          {data.description && (
+            <div 
+              className="stepper-discription" 
+              dangerouslySetInnerHTML={{ __html: data.description }}
+            />
+          )}
         </>
       );
     };

upload-api/src/config/index.ts

@@ -2,7 +2,7 @@ export default {
   plan: {
     dropdown: { optionLimit: 100 }
   },
-  cmsType: process.env.CMS_TYPE || 'cmsType',
+  cmsType: process.env.CMS_TYPE || 'aem',
   isLocalPath: true,
   awsData: {
     awsRegion: 'us-east-2',
@@ -12,5 +12,5 @@ export default {
     bucketName: '',
     bucketKey: ''
   },
-  localPath: process.env.CONTAINER_PATH || 'localPath'
+  localPath: process.env.CONTAINER_PATH || '/Users/yash.shinde/Documents/Migration/Expample-Data/AEM/aem_data_structure/templates'
 };