Refactor UID handling and improve error messaging in components

- Updated UID processing logic in AEM and Sitecore services to ensure correct field mapping.
- Enhanced error handling in AdvanceProperties component to provide user feedback for validation regex input.
- Cleaned up unnecessary comments and improved code readability in ContentMapper and LegacyCms components.
- Added default value for affix in file validation to streamline user experience.
- Updated legacy CMS description for clarity and improved user guidance.

Author: sauravraw

api/src/services/aem.service.ts

@@ -932,22 +932,25 @@ function processFieldsRecursive(
         let value = getFieldValue(items, aemFieldName);
         const uid = getLastKey(field?.contentstackFieldUid);
 
+        const actualUid = getActualFieldUid(uid, field?.uid);
         if (value && typeof value === 'string' && /<[^>]+>/.test(value)) {
           value = stripHtmlTags(value);
         }
 
-        obj[uid] = value !== null && value !== undefined ? String(value) : "";
+        obj[actualUid] = value !== null && value !== undefined ? String(value) : "";
         break;
       }
 
       case 'text': {
         const uid = getLastKey(field?.contentstackFieldUid);
-        obj[uid] = title ?? '';
+        const actualUid = getActualFieldUid(uid, field?.uid);
+        obj[actualUid] = title ?? '';
         break;
       }
       case 'url': {
         const uid = getLastKey(field?.contentstackFieldUid);
-        obj[uid] = `/${slugify(title)}`;
+        const actualUid = getActualFieldUid(uid, field?.uid);
+        obj[actualUid] = `/${slugify(title)}`;
         break;
       }
       case 'reference': {

api/src/services/contentMapper.service.ts

@@ -65,8 +65,6 @@ const putTestData = async (req: Request) => {
       });
     });
 
-
-
     /*
     this code snippet iterates over an array of contentTypes and performs 
     some operations on each element. 
@@ -742,10 +740,8 @@ const updateContentType = async (req: Request) => {
           FieldMapperModel.update((data: any) => {
             const existingField = data?.field_mapper?.[fieldIndex];
             const preservedInitial = existingField?.advanced?.initial;
-            
 
             data.field_mapper[fieldIndex] = field;
-            
 
             if (preservedInitial && field?.advanced) {
               data.field_mapper[fieldIndex].advanced.initial = preservedInitial;
@@ -841,7 +837,7 @@ const resetToInitialMapping = async (req: Request) => {
   const fieldMappingData = contentTypeData.fieldMapping.map((itemId: any) => {
     const fieldData = FieldMapperModel.chain
       .get('field_mapper')
-      .find({ id: itemId, projectId: projectId })
+      .find({ id: itemId, projectId: projectId, contentTypeId: contentTypeId })
       .value();
     return fieldData;
   });
@@ -861,21 +857,23 @@ const resetToInitialMapping = async (req: Request) => {
       //await FieldMapperModel.read();
       (fieldMappingData || []).forEach((field: any) => {
         const fieldIndex = FieldMapperModel.data.field_mapper.findIndex(
-          (f: any) => f?.id === field?.id
+          (f: any) =>
+            f?.id === field?.id &&
+            f?.projectId === projectId &&
+            f?.contentTypeId === contentTypeId
         );
         if (fieldIndex > -1) {
           FieldMapperModel.update((data: any) => {
-            
-              data.field_mapper[fieldIndex] = {
-                ...field,
-                contentstackField: field?.otherCmsField,
-                contentstackFieldUid: field?.backupFieldUid,
-                contentstackFieldType: field?.backupFieldType,
-                advanced: {
-                  ...field?.advanced?.initial,
-                  initial: field?.advanced?.initial,
-                }
-              }
+            data.field_mapper[fieldIndex] = {
+              ...field,
+              contentstackField: field?.otherCmsField,
+              contentstackFieldUid: field?.backupFieldUid,
+              contentstackFieldType: field?.backupFieldType,
+              advanced: {
+                ...field?.advanced?.initial,
+                initial: field?.advanced?.initial,
+              },
+            };
           });
         }
       });

api/src/services/sitecore.service.ts

@@ -105,16 +105,31 @@ async function writeFiles(
     console.error('Error writing files:', error);
   }
 }
+const uidCorrector = ({ uid } :{uid : string}) => {
+  if (!uid || typeof uid !== 'string') {
+    return '';
+  }
+
+  let newUid = uid;
+
+  // Note: UIDs starting with numbers and restricted keywords are handled externally in Sitecore
+  // The prefix is applied in contentTypeMaker function when needed
 
-const uidCorrector = ({ uid }: any) => {
-  if (startsWithNumber(uid)) {
-    return `${append}_${_.replace(
-      uid,
-      new RegExp('[ -]', 'g'),
-      '_'
-    )?.toLowerCase()}`;
+  // Clean up the UID
+  newUid = newUid
+    .replace(/[ -]/g, '_') // Replace spaces and hyphens with underscores
+    .replace(/[^a-zA-Z0-9_]+/g, '_') // Replace non-alphanumeric characters (except underscore)
+    .replace(/([A-Z])/g, (match) => `_${match.toLowerCase()}`) // Handle camelCase
+    .toLowerCase() // Convert to lowercase
+    .replace(/_+/g, '_') // Replace multiple underscores with single
+    .replace(/^_|_$/g, ''); // Remove leading/trailing underscores
+
+  // Ensure UID doesn't start with underscore (Contentstack requirement)
+  if (newUid.startsWith('_')) {
+    newUid = newUid.substring(1);
   }
-  return _.replace(uid, new RegExp('[ -]', 'g'), '_')?.toLowerCase();
+
+  return newUid;
 };
 
 const createAssets = async ({

api/src/utils/content-type-creator.utils.ts

@@ -74,12 +74,32 @@ function startsWithNumber(str: string) {
   return /^\d/.test(str);
 }
 
-const uidCorrector = ({ uid }: any) => {
-  if (startsWithNumber(uid)) {
-    return `a_${_.replace(uid, new RegExp("[ -]", "g"), '_')?.toLowerCase()}`
+const uidCorrector = ({ uid } : {uid : string}) => {
+  if (!uid || typeof uid !== 'string') {
+    return '';
   }
-  return _.replace(uid, new RegExp("[ -]", "g"), '_')?.toLowerCase()
-}
+
+  let newUid = uid;
+
+  // Note: UIDs starting with numbers and restricted keywords are handled externally in Sitecore
+  // The prefix is applied in contentTypeMaker function when needed
+
+  // Clean up the UID
+  newUid = newUid
+    .replace(/[ -]/g, '_') // Replace spaces and hyphens with underscores
+    .replace(/[^a-zA-Z0-9_]+/g, '_') // Replace non-alphanumeric characters (except underscore)
+    .replace(/([A-Z])/g, (match) => `_${match.toLowerCase()}`) // Handle camelCase
+    .toLowerCase() // Convert to lowercase
+    .replace(/_+/g, '_') // Replace multiple underscores with single
+    .replace(/^_|_$/g, ''); // Remove leading/trailing underscores
+
+  // Ensure UID doesn't start with underscore (Contentstack requirement)
+  if (newUid.startsWith('_')) {
+    newUid = newUid.substring(1);
+  }
+
+  return newUid;
+};
 
 
 function buildFieldSchema(item: any, marketPlacePath: string, parentUid = ''): any {
@@ -627,8 +647,8 @@ export const convertToSchemaFormate = ({ field, advanced = true, marketPlacePath
         "field_metadata": {
           description: "",
           "default_value": {
-            "title": "",
-            "url": '',
+            "title": field?.advanced?.title ?? '',
+            "url": field?.advanced?.url ?? '',
           }
         },
         "format": field?.advanced?.validationRegex ?? '',

ui/src/cmsData/legacyCms.json

@@ -284,7 +284,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/AdvancePropertise/index.scss

@@ -184,3 +184,8 @@
     }
   }  
 }
+
+.errorMessage {
+  color: $color-brand-warning-medium;
+  font-size: 12px;
+}

ui/src/components/AdvancePropertise/index.tsx

@@ -97,6 +97,9 @@ const AdvancePropertise = (props: SchemaProps) => {
   const [options, setOptions] = useState(props?.value?.options || []);
   const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
 
+  const [isError, setIsError] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+
   useEffect(() => {
     if (props?.data?.referenceTo && Array.isArray(props?.data?.referenceTo)) {
       const updatedReferencedItems = props?.data?.referenceTo.map((item: string) => ({
@@ -234,6 +237,16 @@ const AdvancePropertise = (props: SchemaProps) => {
       [field]: (event.target as HTMLInputElement)?.value
     }));
 
+    if(field === 'validationRegex') {
+      if(event.target.value?.trim()?.length > 0) {
+        setIsError(true);
+        setErrorMessage('Adding a regex could impact entry creation.');
+      }
+      else {
+        setIsError(false);
+        setErrorMessage('');
+      }
+    }
     const currentToggleStates = {
       ...toggleStates,
       [field]: (event.target as HTMLInputElement)?.value
@@ -582,6 +595,7 @@ const AdvancePropertise = (props: SchemaProps) => {
                       handleOnChange('validationRegex', e, true))
                   }
                 />
+                  {isError && <p className="errorMessage">{errorMessage}</p>}
               </Field>
             </>
           )}

ui/src/components/ContentMapper/index.scss

@@ -152,14 +152,7 @@
   .Table {
     border-left: 0 none;
     min-height: 26.25rem;
-    // &__rowgroup {
-    //   display: flex;
-    //   flex: 1;
-    //   flex-direction: column;
-    // }
     .Table__body__row {
-      //   height: auto!important;
-      //   min-height: 80px;
         .Table-select-body {
          >.checkbox-wrapper {
           align-items: flex-start;

ui/src/components/ContentMapper/index.tsx

@@ -769,12 +769,8 @@ const ContentMapper = forwardRef(({ handleStepChange }: contentMapperProps, ref:
       setItemStatusMap(itemStatusMap);
       setLoading(true);
 
-
-      // console.info('loading', loading);
-
       const { data } = await getFieldMapping(contentTypeId || '', 0, 1000, searchText || '', projectId);
 
-
       for (let index = 0; index <= 1000; index++) {
         itemStatusMap[index] = 'loaded';
       }
@@ -789,7 +785,6 @@ const ContentMapper = forwardRef(({ handleStepChange }: contentMapperProps, ref:
       setSelectedEntries(validTableData ?? []);
       setTotalCounts(validTableData?.length);
       setInitialRowSelectedData(validTableData?.filter((item: FieldMapType) => !item?.isDeleted))
-      // setIsLoading(false);
       generateSourceGroupSchema(validTableData);
     } catch (error) {
       console.error('fetchData -> error', error);
@@ -812,7 +807,7 @@ const ContentMapper = forwardRef(({ handleStepChange }: contentMapperProps, ref:
       }
 
       setItemStatusMap({ ...itemStatusMapCopy });
-      // setLoading(true);
+      setLoading(true);
 
       const { data } = await getFieldMapping(contentTypeUid || '', skip, limit, searchText || '', projectId);
 
@@ -823,15 +818,15 @@ const ContentMapper = forwardRef(({ handleStepChange }: contentMapperProps, ref:
       }
 
       setItemStatusMap({ ...updateditemStatusMapCopy });
+      setLoading(false);
 
       const validTableData = data?.fieldMapping?.filter((field: FieldMapType) => field?.otherCmsType !== undefined);
 
       // eslint-disable-next-line no-unsafe-optional-chaining
-      setTableData([...tableData, ...validTableData ?? tableData]);
-      setTotalCounts([...tableData, ...validTableData ?? tableData]?.length);
-      setIsLoading(false);
+      setTableData(validTableData ?? []);
+      setSelectedEntries(validTableData ?? []);
+      setTotalCounts(validTableData?.length);
       setIsAllCheck(true);
-
     } catch (error) {
       console.error('loadMoreItems -> error', error);
     }
@@ -2680,20 +2675,6 @@ const ContentMapper = forwardRef(({ handleStepChange }: contentMapperProps, ref:
                   initialRowSelectedData={initialRowSelectedData}
                   initialSelectedRowIds={rowIds}
                   itemSize={80}
-                  // v2Features={{
-                  //   isNewEmptyState: true
-                  // }}
-                  // customEmptyState={
-                  //   <EmptyState
-                  //     forPage="list"
-                  //     heading={<div className="empty_search_heading">No Fields available</div>}
-                  //     moduleIcon="NoSearchResult"
-                  //     description="Try changing the search query to find what you are looking for."
-                  //     version="v2"
-                  //     testId="no-results-found-page"
-                  //     className="custom-empty-state"
-                  //   />
-                  // }
                   withExportCta={{
                     component: (
                       <div className='d-flex align-items-center'>

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

@@ -29,7 +29,7 @@ const LoadPreFix = (props: LoadSelectCmsProps) => {
 
   const dispatch = useDispatch();
 
-  const [prefix, setPrefix] = useState<string>(newMigrationData?.legacy_cms?.affix || '');
+  const [prefix, setPrefix] = useState<string>(newMigrationData?.legacy_cms?.affix || 'cs');
 
   const [isError, setIsError] = useState<boolean>(false);
   const [errorMessage, setErrorMessage] = useState<string>('');
@@ -76,7 +76,6 @@ const LoadPreFix = (props: LoadSelectCmsProps) => {
             isRestictedKeywordCheckboxChecked: isCheckedBoxChecked
           }
         };
-
         dispatch(updateNewMigrationData(newMigrationDataObj));
       } else {
         setPrefix(value);
@@ -93,28 +92,37 @@ const LoadPreFix = (props: LoadSelectCmsProps) => {
         };
 
         dispatch(updateNewMigrationData(newMigrationDataObj));
-
         setIsError(false);
 
         //call for Step Change
         props?.handleStepChange(props?.currentStep);
         return;
       }
     } else {
-      setIsError(true);
-      setErrorMessage('Please enter Affix');
+      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: {
           ...newMigrationData?.legacy_cms,
-          affix: value,
+          affix: 'cs',
           isRestictedKeywordCheckboxChecked: isCheckedBoxChecked
         }
       };
-
       dispatch(updateNewMigrationData(newMigrationDataObj));
     }
-  });
+  };
 
   /****  ALL USEEffects  HERE  ****/
 
@@ -136,6 +144,9 @@ 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>