refactor:fluckering issue while rendering steps and re-validate the file if contentMapper is empty

Author: AishDani

ui/src/components/DestinationStack/Actions/LoadLanguageMapper.tsx

@@ -386,6 +386,7 @@ const LanguageMapper = () => {
 
         setoptions(allLocales);
         Object?.entries(newMigrationData?.destination_stack?.localeMapping)?.length === 0 &&
+        newMigrationData?.project_current_step <= 2 &&
          setcmsLocaleOptions((prevList: { label: string; value: string }[]) => {
           const newLabel = newMigrationData?.destination_stack?.selectedStack?.master_locale;
 

ui/src/components/DestinationStack/Actions/LoadStacks.tsx

@@ -316,15 +316,17 @@ const LoadStacks = (props: LoadFileFormatProps) => {
               </div>
             </div>
             <div className="col-12">
-              <label className="title">Master Locale <span className='asterisk_input'></span>
+              <label className="title" htmlFor="master_locale">Master Locale <span className='asterisk_input'></span>
               </label>
               <Tooltip content="Master Locale is auto-selected based on the chosen stack." position='right'>
                 <Icon icon='Information' version='v2' size='small'></Icon>
               </Tooltip>
 
             </div>
-            <div className="col-12 pb-2">
+            <div className="col-12 pb-2" id="master_locale">
               <TextInput 
+                id="master_locale"
+                aria-label="master_locale"
                 version={'v2'}
                 placeholder={selectedStack?.master_locale ? '' : 'Master Locale will be set after stack selection'}
                 value={selectedStack?.master_locale }

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

@@ -89,6 +89,7 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
   //const [isCancelLoading, setIsCancelLoading] = useState<boolean>(false);
   //const [setIsFormatValid] = useState<boolean>(false);
   const [affix, setAffix] = useState<string>(newMigrationData?.legacy_cms?.affix);
+  const [reValidate, setReValidate] = useState<boolean>(newMigrationData?.legacy_cms?.uploadedFile?.reValidate || false);
 
   const { projectId = '' } = useParams();
 
@@ -394,6 +395,7 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
     if(!isEmptyString(newMigrationData?.legacy_cms?.affix) && !newMigrationData?.legacy_cms?.uploadedFile?.isValidated ){
       setIsDisabled(false);
     }
+    setReValidate(newMigrationData?.legacy_cms?.uploadedFile?.reValidate || false);
 
     // else{
     //   setIsValidated(false);
@@ -466,7 +468,7 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
             isLoading={isLoading}
             loadingColor="#6c5ce7"
             version="v2"
-            disabled={isDisabled || isEmptyString(affix)}
+            disabled={isDisabled || isEmptyString(affix) || !reValidate}
           > 
             Validate File
           </Button>

ui/src/components/LegacyCms/index.tsx

@@ -164,7 +164,8 @@ const LegacyCMSComponent = forwardRef(({ legacyCMSData, isCompleted, handleOnAll
               awsData: legacyCMSData?.awsDetails,
               isLocalPath: legacyCMSData?.is_localPath
             },
-            isValidated: legacyCMSData?.is_fileValid ,
+            isValidated: legacyCMSData?.is_fileValid,
+            reValidate: newMigrationData?.legacy_cms?.uploadedFile?.reValidate
           }, //need to add backend data once endpoint exposed.
           affix: legacyCMSData?.affix ?? '',
           isFileFormatCheckboxChecked: true, //need to add backend data once endpoint exposed.

ui/src/pages/Migration/index.tsx

@@ -84,7 +84,7 @@ const Migration = () => {
   const [isLoading, setIsLoading] = useState(false);
   const [currentStepIndex, setCurrentStepIndex] = useState(0);
   const [isCompleted, setIsCompleted] = useState<boolean>(false);
-  const [isProjectMapper, setIsProjectMapper] = useState<boolean>(false);
+  const [isProjectMapper, setIsProjectMapper] = useState<boolean>(true);
 
   const [disableMigration, setDisableMigration] = useState(false);
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -182,15 +182,14 @@ const Migration = () => {
   */
   const fetchProjectData = async () => {
   if (isEmptyString(selectedOrganisation?.value) || isEmptyString(params?.projectId)) return;
-
+  setIsProjectMapper(true);
   const data = await getMigrationData(selectedOrganisation?.value, params?.projectId ?? '');
   const migratedstacks = await getMigratedStacks(selectedOrganisation?.value, projectId );
 
   if (data) {
     setIsLoading(false);
     setProjectData(data?.data);
   }
-  setIsProjectMapper(true);
   const projectData = data?.data;
 
   const legacyCmsData:ILegacyCMSComponent = await  getCMSDataFromFile(CS_ENTRIES.LEGACY_CMS);