refactor:CMG-506:refactored user flow when content mapper not generated by enabling save and continue button

Author: AishDani

ui/src/components/ContentMapper/index.tsx

@@ -215,7 +215,7 @@ const Fields: MappingFields = {
 
 }
 type contentMapperProps  = {
-  handleStepChange: (currentStep: number) => void;
+  handleStepChange: (step: number) => void;
 }
 
 const ContentMapper = forwardRef(({handleStepChange}: contentMapperProps, ref: React.ForwardedRef<ContentTypeSaveHandles>) => {
@@ -2410,7 +2410,8 @@ const ContentMapper = forwardRef(({handleStepChange}: contentMapperProps, ref: R
                   ...newMigrationData?.legacy_cms,
                   uploadedFile:{
                     ...newMigrationData?.legacy_cms?.uploadedFile,
-                    reValidate: true
+                    reValidate: true,
+                    file_revalidated: true
                   }
                 }
               }

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

@@ -137,7 +137,8 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
                 buketKey: data?.file_details?.awsData?.buketKey
               }
             },
-            cmsType: data?.cmsType
+            cmsType: data?.cmsType,
+            file_revalidated: true
 
           }
         }

ui/src/components/MigrationFlowHeader/index.tsx

@@ -36,6 +36,7 @@ const MigrationFlowHeader = ({
 }: MigrationFlowHeaderProps) => {
   const [projectName, setProjectName] = useState('');
   const [currentStep, setCurrentStep] = useState<number>(0);
+  const [contentMapperLength, setcontentMapperLength] = useState<number>();
 
   const navigate = useNavigate();
   const params: Params<string> = useParams();
@@ -56,6 +57,7 @@ const MigrationFlowHeader = ({
   const fetchProject = async () => {
     setProjectName(projectData?.name);
     setCurrentStep(projectData?.current_step);
+    setcontentMapperLength(projectData?.content_mapper?.length)
 
     //Navigate to lastest or active Step
     const url = `/projects/${params?.projectId}/migration/steps/${projectData?.current_step}`;
@@ -94,6 +96,8 @@ const MigrationFlowHeader = ({
       newMigrationData?.destination_stack?.selectedStack?.value
     );
 
+  const enableButton = contentMapperLength === 0 && newMigrationData?.project_current_step === 3 && params?.stepId === '1' && (!newMigrationData?.legacy_cms?.uploadedFile?.reValidate || newMigrationData?.legacy_cms?.uploadedFile?.reValidate) && newMigrationData?.legacy_cms?.uploadedFile?.file_revalidated
+
   return (
     <div className="d-flex align-items-center justify-content-between migration-flow-header">
       <div className="d-flex align-items-center">
@@ -112,7 +116,7 @@ const MigrationFlowHeader = ({
         aria-label="Save and Continue"
         isLoading={isLoading || newMigrationData?.isprojectMapped}
         disabled={
-          isStep4AndNotMigrated || isStepInvalid || isExecutionStarted || destinationStackMigrated
+          (isStep4AndNotMigrated || isStepInvalid || isExecutionStarted || destinationStackMigrated) && !enableButton
         }
       >
         {stepValue}

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

@@ -50,7 +50,7 @@ export type stepperProps = {
 };
 
 export type HorizontalStepperHandles = {
-  handleStepChange: (currentStep: number) => void;
+  handleStepChange: (stepIndex: number) => void;
 };
 
 const showNotification = (currentIndex: number) => {

ui/src/context/app/app.interface.ts

@@ -68,7 +68,8 @@ export interface IFile {
   file_details?: FileDetails;
   isValidated: boolean;
   reValidate: boolean;
-  cmsType: string
+  cmsType: string;
+  file_revalidated: boolean;
 }
 
 export interface ICMSType extends ICardType {
@@ -311,6 +312,7 @@ export const DEFAULT_FILE: IFile = {
   isValidated: false,
   reValidate: false,
   cmsType: '',
+  file_revalidated: false
 };
 
 export const DEFAULT_CMS_TYPE: ICMSType = {

ui/src/pages/Migration/index.tsx

@@ -324,7 +324,8 @@ const Migration = () => {
             isLocalPath: projectData?.legacy_cms?.is_localPath
           },
           isValidated: projectData?.legacy_cms?.is_fileValid,
-          reValidate: newMigrationData?.legacy_cms?.uploadedFile?.reValidate
+          reValidate: newMigrationData?.legacy_cms?.uploadedFile?.reValidate,
+          file_revalidated: newMigrationData?.legacy_cms?.uploadedFile?.file_revalidated
         } : uploadObj,
         isFileFormatCheckboxChecked: true,
         isRestictedKeywordCheckboxChecked: true,
@@ -373,7 +374,7 @@ const Migration = () => {
    */
   const createStepper = (
     projectData: MigrationResponse,
-    handleStepChange: (currentStep: number) => void
+    handleStepChange: (step: number) => void
   ) => {
     const steps = [
       {
@@ -450,7 +451,7 @@ const Migration = () => {
   const handleOnClickLegacyCms = async (event: MouseEvent) => {
     setIsLoading(true);
 
-    if (isCompleted) {
+    if (isCompleted && newMigrationData?.project_current_step === 1) {
       event.preventDefault();
 
       //Update Data in backend
@@ -493,6 +494,26 @@ const Migration = () => {
           type: 'error'
         });
       }
+    }
+    else if(newMigrationData?.project_current_step > 1 && (!newMigrationData?.legacy_cms?.uploadedFile?.reValidate || newMigrationData?.legacy_cms?.uploadedFile?.reValidate)){
+      if(!newMigrationData?.legacy_cms?.uploadedFile?.file_revalidated){
+        setIsLoading(false);
+        Notification({
+          notificationContent: {
+            text: 'Please reValidate the file to procced furthur'
+          },
+          type: 'warning'
+        });
+      }
+      else{
+        setIsLoading(false);
+        handleStepChange(2);
+        const url = `/projects/${projectId}/migration/steps/3`;
+        navigate(url, { replace: true });
+
+      }
+
+
     } else {
       setIsLoading(false);
 
@@ -623,12 +644,21 @@ const Migration = () => {
         }
       });
     } else {
-      event.preventDefault();
-      const url = `/projects/${projectId}/migration/steps/4`;
-      navigate(url, { replace: true });
 
-      await updateCurrentStepData(selectedOrganisation.value, projectId);
-      handleStepChange(3);
+      const res = await updateCurrentStepData(selectedOrganisation.value, projectId);
+      if (res?.status === 200) {
+        setIsLoading(false);
+        event.preventDefault();
+        const url = `/projects/${projectId}/migration/steps/4`;
+        navigate(url, { replace: true });
+      } else {
+        setIsLoading(false);
+        Notification({
+          notificationContent: { text: res?.data?.error?.message },
+          type: 'error'
+        });
+      }
+     
     }
   };
 
@@ -722,7 +752,7 @@ const Migration = () => {
       <div className="steps-wrapper">
         <HorizontalStepper
           ref={stepperRef}
-          steps={createStepper(projectData ?? defaultMigrationResponse, handleClick)}
+          steps={createStepper(projectData ?? defaultMigrationResponse, handleStepChange)}
           handleSaveCT={saveRef?.current?.handleSaveContentType}
           changeDropdownState={changeDropdownState}
           projectData={projectData || defaultMigrationResponse}

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

@@ -37,6 +37,7 @@ export interface MigrationResponse {
   isMigrationStarted: boolean;
   isMigrationCompleted: boolean;
   migration_execution: boolean;
+  content_mapper: []
 }
 
 export interface LegacyCms {
@@ -65,7 +66,8 @@ export const defaultMigrationResponse: MigrationResponse = {
   current_step: 1,
   isMigrationStarted: false,
   isMigrationCompleted: false,
-  migration_execution: false
+  migration_execution: false,
+  content_mapper: []
 };
 interface data {
   file_details: FileDetails;