Merge pull request #839 from contentstack/feature/affix

Feature/affix

Author: sayalijoshi27

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

@@ -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,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/LegacyCms/Actions/LoadUploadFile.tsx

@@ -154,7 +154,6 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
         setIsDisabled(true);
 
         if (
-          !isEmptyString(newMigrationData?.legacy_cms?.affix) &&
           !isEmptyString(newMigrationData?.legacy_cms?.selectedCms?.cms_id) &&
           !isEmptyString(newMigrationData?.legacy_cms?.selectedFileFormat?.fileformat_id)
         ) {
@@ -358,15 +357,14 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
       setShowMessage(true);
       setValidationMessage('File validated successfully.');
       setIsDisabled(true);
-      !isEmptyString(newMigrationData?.legacy_cms?.affix) ||
         !isEmptyString(newMigrationData?.legacy_cms?.selectedCms?.cms_id) ||
         (!isEmptyString(newMigrationData?.legacy_cms?.selectedFileFormat?.fileformat_id) &&
           props.handleStepChange(props?.currentStep, true));
     }
     if (newMigrationData?.legacy_cms?.uploadedFile?.reValidate) {
       setValidationMessage('');
     }
-    if(!isEmptyString(newMigrationData?.legacy_cms?.affix) && !newMigrationData?.legacy_cms?.uploadedFile?.isValidated && !newMigrationData?.legacy_cms?.uploadedFile?.reValidate){
+    if(!newMigrationData?.legacy_cms?.uploadedFile?.isValidated && !newMigrationData?.legacy_cms?.uploadedFile?.reValidate){
       setIsDisabled(false);
     }
     setReValidate(newMigrationData?.legacy_cms?.uploadedFile?.reValidate || false);
@@ -376,6 +374,7 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
     // }
   }, [isValidated, newMigrationData]);
 
+
   useEffect(() => {
     if (newMigrationData?.legacy_cms?.selectedFileFormat?.fileformat_id) {
       setFileFormat(newMigrationData?.legacy_cms?.selectedFileFormat?.fileformat_id);
@@ -448,7 +447,7 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
             isLoading={isLoading}
             loadingColor="#6c5ce7"
             version="v2"
-            disabled={!(reValidate || (!isDisabled && !isEmptyString(newMigrationData?.legacy_cms?.affix)))}
+            disabled={!(reValidate || (!isDisabled))}
           > 
             Validate File
           </Button>

ui/src/components/LegacyCms/index.tsx

@@ -142,7 +142,7 @@ const LegacyCMSComponent = forwardRef(({ legacyCMSData, isCompleted, handleOnAll
       }
 
       //Make Step 2 complete
-      if (!isEmptyString(selectedCmsData?.cms_id) && (!isEmptyString(legacyCMSData?.affix) || !isEmptyString(newMigrationData?.legacy_cms?.affix))) {
+      if (!isEmptyString(selectedCmsData?.cms_id) && (!isEmptyString(legacyCMSData?.affix) )) {
         setInternalActiveStepIndex(1);
       }
 
@@ -197,22 +197,20 @@ const LegacyCMSComponent = forwardRef(({ legacyCMSData, isCompleted, handleOnAll
 
       //Make Step 2 complete
       if (
-        !isEmptyString(newMigrationData?.legacy_cms?.selectedCms?.cms_id) &&
-        !isEmptyString(newMigrationData?.legacy_cms?.affix)
+        !isEmptyString(newMigrationData?.legacy_cms?.selectedCms?.cms_id)
       ) {
         setInternalActiveStepIndex(1);
       }
 
-    if(!isEmptyString(newMigrationData?.legacy_cms?.selectedCms?.cms_id) && !isEmptyString(newMigrationData?.legacy_cms?.affix) && newMigrationData?.legacy_cms?.uploadedFile?.isValidated){
+    if(!isEmptyString(newMigrationData?.legacy_cms?.selectedCms?.cms_id) && newMigrationData?.legacy_cms?.uploadedFile?.isValidated){
       setInternalActiveStepIndex(3);
     }
     setisProjectMapped(newMigrationData?.isprojectMapped)
 
   },[newMigrationData]);
 
   useEffect(()=>{
-   if(! isEmptyString(newMigrationData?.legacy_cms?.affix) 
-      && !isEmptyString(newMigrationData?.legacy_cms?.selectedFileFormat?.title) &&
+   if( !isEmptyString(newMigrationData?.legacy_cms?.selectedFileFormat?.title) &&
     ! isEmptyString(newMigrationData?.legacy_cms?.selectedCms?.title) && 
     newMigrationData?.legacy_cms?.uploadedFile?.isValidated){
       setIsAllStepsCompleted(true);

ui/src/components/Stepper/HorizontalStepper/HorizontalStepper.tsx

@@ -163,7 +163,7 @@ const HorizontalStepper = forwardRef(
         -1 < newMigrationData?.legacy_cms?.currentStep &&
         newMigrationData?.legacy_cms?.currentStep < 2
       ) {
-        showNotification(newMigrationData?.legacy_cms?.currentStep + 1);
+        // showNotification(newMigrationData?.legacy_cms?.currentStep + 1);
       } else if (
         newMigrationData?.destination_stack?.selectedStack === undefined ||
         newMigrationData?.destination_stack?.selectedStack === null ||

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 }}
+            />
+          )}
         </>
       );
     };

ui/src/services/api/upload.service.ts

@@ -40,7 +40,7 @@ export const uploadFilePath = () => {
   return `${UPLOAD_FILE_RELATIVE_URL}upload`;
 };
 
-export const fileValidation = async (projectId: string, affix: string) => {
+export const fileValidation = async (projectId: string, affix = 'cs') => {
   try {
     const options = {
       headers: {