From 1bca97acd0b57b028d8976de67899af015560bfc Mon Sep 17 00:00:00 2001
From: Sayali Joshi <sayali.joshi@contentstack.com>
Date: Fri, 26 Jul 2024 19:49:32 +0530
Subject: [PATCH] Content mapper dropdown state change issue solved

---
 .../Common/SaveChangesModal/index.tsx         |   3 +
 ui/src/components/ContentMapper/index.tsx     |  29 +-
 .../HorizontalStepper/HorizontalStepper.tsx   |  11 +-
 ui/src/pages/Migration/index.tsx              | 250 +++++++++---------
 4 files changed, 140 insertions(+), 153 deletions(-)

diff --git a/ui/src/components/Common/SaveChangesModal/index.tsx b/ui/src/components/Common/SaveChangesModal/index.tsx
index 42207bde..e0b76001 100644
--- a/ui/src/components/Common/SaveChangesModal/index.tsx
+++ b/ui/src/components/Common/SaveChangesModal/index.tsx
@@ -14,6 +14,7 @@ interface Props {
   saveContentType: () => void;
   openContentType?: () => void;
   changeStep?: () => void;
+  dropdownStateChange: () => void;
 }
 
 const SaveChangesModal = (props: Props) => {
@@ -37,6 +38,7 @@ const SaveChangesModal = (props: Props) => {
           </Button>
           <Button buttonType="secondary"version={"v2"}  onClick={() => {
             props.closeModal(); 
+            props?.dropdownStateChange();
             props.openContentType?.();
             props.isopen(false);
             props?.changeStep?.();
@@ -45,6 +47,7 @@ const SaveChangesModal = (props: Props) => {
             Don&apos;t Save
           </Button>
           <Button version={"v2"} onClick={() => { 
+            props?.dropdownStateChange();
             props.saveContentType(); 
             props.closeModal(); 
             props.openContentType?.();
diff --git a/ui/src/components/ContentMapper/index.tsx b/ui/src/components/ContentMapper/index.tsx
index d3a3f774..73c933f2 100644
--- a/ui/src/components/ContentMapper/index.tsx
+++ b/ui/src/components/ContentMapper/index.tsx
@@ -357,7 +357,6 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re
       ...newMigrationData,
       content_mapping: {
         ...newMigrationData?.content_mapping,
-        // content_type_mapping: contentTypeMapped,
         isDropDownChanged: isDropDownChanged,
         otherCmsTitle: otherCmsTitle,
       }
@@ -366,25 +365,6 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re
     dispatch(updateNewMigrationData((newMigrationDataObj)));
   }, [isDropDownChanged]);
 
-  useEffect(()=>{ 
-    const handlePopState = (event: PopStateEvent) => {
-      event.preventDefault();
-      window.history.pushState(null, '', window.location.href);
-      handleOpenContentType();
-      
-    };
-
-    if(isModalOpen || isDropDownChanged){
-      window.history.pushState(null, '', window.location.href);
-    }
-    window.history.pushState(null, '', window.location.href);
-    window.addEventListener('popstate',handlePopState);
-    return () => {
-      window.removeEventListener('popstate', handlePopState);
-    };
-
-  },[isModalOpen]);
-
   // Method to fetch content types
   const fetchContentTypes = async (searchText: string) => {
     const { data } = await getContentTypes(projectId || '', 0, 5000, searchContentType || ''); //org id will always present
@@ -497,7 +477,6 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re
   const handleOpenContentType = async (i = 0) => {
     if (isDropDownChanged) {
       setIsModalOpen(true);
-      handleDropdownState();
       return cbModal({
         component: (props: ModalObj) => (
           <SaveChangesModal
@@ -506,6 +485,7 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re
             otherCmsTitle={otherCmsTitle}
             saveContentType={handleSaveContentType}
             openContentType={() => openContentType(i)}
+            dropdownStateChange={handleDropdownState}
           />
         ),
         modalProps: {
@@ -519,8 +499,6 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re
   };
 
   const openContentType = (i: number) => {
-    // setIsModalOpen(false);
-
     setActive(i);
     const otherTitle = contentTypes?.[i]?.otherCmsTitle;
     setOtherCmsTitle(otherTitle);
@@ -1023,7 +1001,7 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re
     
     const OptionValue: any =
       OptionsForRow.length === 1 &&
-      (OptionsForRow[0]?.value?.uid === 'url' || OptionsForRow[0]?.value?.uid === 'title' || OptionsForRow[0]?.value?.data_type === 'group')
+      (OptionsForRow[0]?.value?.uid === 'url' || OptionsForRow[0]?.value?.uid === 'title' || OptionsForRow[0]?.value?.data_type === 'group' || OptionsForRow[0]?.value?.data_type === 'reference')
         ? {
           label: OptionsForRow[0]?.value?.display_name,
           value: OptionsForRow[0]?.value,
@@ -1036,7 +1014,8 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re
             value: dummy_obj[data?.ContentstackFieldType]?.label,
             isDisabled: data?.ContentstackFieldType === 'text' ||
               data?.ContentstackFieldType === 'group' ||
-              data?.ContentstackFieldType === 'url'
+              data?.ContentstackFieldType === 'url' ||
+              data?.otherCmsType === "reference"
           }
           : {
             label: `${selectedOption} matches`,
diff --git a/ui/src/components/Stepper/HorizontalStepper/HorizontalStepper.tsx b/ui/src/components/Stepper/HorizontalStepper/HorizontalStepper.tsx
index 8698448d..0ed4d023 100644
--- a/ui/src/components/Stepper/HorizontalStepper/HorizontalStepper.tsx
+++ b/ui/src/components/Stepper/HorizontalStepper/HorizontalStepper.tsx
@@ -44,6 +44,8 @@ const HorizontalStepper = forwardRef(
         const { steps, className, emptyStateMsg, stepComponentProps, hideTabView, testId } = props;
         const [showStep, setShowStep] = useState(0);
         const [stepsCompleted, setStepsCompleted] = useState<number[]>([]);
+        const [isModalOpen, setIsModalOpen] = useState(false);
+
         const { stepId } = useParams<{ stepId: any }>();
 
         const navigate = useNavigate();
@@ -52,8 +54,7 @@ const HorizontalStepper = forwardRef(
         const newMigrationData = useSelector((state:RootState)=> state?.migration?.newMigrationData);
 
         const handleSaveCT = props?.handleSaveCT
-        const handleDropdownChange = props?.changeDropdownState
-
+        const handleDropdownChange = props?.changeDropdownState;
 
         useEffect(() => {
             const stepIndex = parseInt(stepId, 10) - 1;
@@ -87,12 +88,9 @@ const HorizontalStepper = forwardRef(
             }
         }));
 
-        const [isModalOpen, setIsModalOpen] = useState(false);
-
         const handleTabStep = (idx: number) => {
             if (newMigrationData?.content_mapping?.isDropDownChanged) {
                 setIsModalOpen(true);
-                handleDropdownChange();
                 return cbModal({
                     component: (props: ModalObj) => (
                     <SaveChangesModal
@@ -101,6 +99,7 @@ const HorizontalStepper = forwardRef(
                         otherCmsTitle={newMigrationData?.content_mapping?.otherCmsTitle}
                         saveContentType={handleSaveCT}
                         changeStep={() => setTabStep(idx)}
+                        dropdownStateChange={handleDropdownChange}
                     />
                     ),
                     modalProps: {
@@ -120,9 +119,7 @@ const HorizontalStepper = forwardRef(
                 navigate(url, { replace: true });
             }
         }
-
         
-
         const StepsTitleCreator: React.FC = () => (
             <div className="stepper stepper-position">
                 {steps?.map(({ id, title }, idx: number) => {
diff --git a/ui/src/pages/Migration/index.tsx b/ui/src/pages/Migration/index.tsx
index 5fd4822c..8b65bc9c 100644
--- a/ui/src/pages/Migration/index.tsx
+++ b/ui/src/pages/Migration/index.tsx
@@ -146,15 +146,14 @@ const Migration = () => {
      ]
      return steps;
   }
-  const handleClick = () => {
 
+  const handleClick = () => {
     // Call handleStepChange function
     const x : string | undefined= params.stepId 
     const currentStep : number = parseInt(x || '');  
     stepperRef?.current?.handleStepChange(currentStep-1);
   };
 
-
   const handleStepChange = (currentStep: number) => { 
     if (stepperRef?.current) {
       stepperRef.current.handleStepChange(currentStep-1);
@@ -166,146 +165,155 @@ const Migration = () => {
     setIsCompleted(flag);
   };
 
-    // handle on proceed to destination stack
-    const handleOnClickLegacyCms = async (event: MouseEvent ) => {
-      setIsLoading(true);
-      if(isCompleted){
-        event.preventDefault();
-  
-      //Update Data in backend
-      await updateLegacyCMSData(selectedOrganisation?.value, projectId, {
-        legacy_cms: newMigrationData?.legacy_cms?.selectedCms?.cms_id
-      });
-      await updateAffixData(selectedOrganisation?.value, projectId, { affix: newMigrationData?.legacy_cms?.affix });
-      await fileformatConfirmation(selectedOrganisation?.value, projectId, {
-        fileformat_confirmation: true
-      });     
-      await updateFileFormatData(selectedOrganisation?.value, projectId, {
-        file_format: newMigrationData?.legacy_cms?.selectedCms?.allowed_file_formats[0]?.fileformat_id?.toString() ,
-        file_path: newMigrationData?.legacy_cms?.uploadedFile?.file_details?.localPath,
-        is_fileValid: newMigrationData?.legacy_cms?.uploadedFile?.isValidated,
-        is_localPath: newMigrationData?.legacy_cms?.uploadedFile?.file_details?.isLocalPath,
-        awsDetails:{
-          awsRegion: newMigrationData?.legacy_cms?.uploadedFile?.file_details?.awsData?.awsRegion,
-          bucketName: newMigrationData?.legacy_cms?.uploadedFile?.file_details?.awsData?.bucketName,
-          buketKey: newMigrationData?.legacy_cms?.uploadedFile?.file_details?.awsData?.buketKey
-        }
-      });
-      const res = await updateCurrentStepData(selectedOrganisation.value, projectId);
-      handleStepChange(1);
-      if (res) {
-        setIsLoading(false);
-
-        const url = `/projects/${projectId}/migration/steps/2`;
-        navigate(url, { replace: true });
-      }
+  // handle on proceed to destination stack
+  const handleOnClickLegacyCms = async (event: MouseEvent ) => {
+    setIsLoading(true);
+    if(isCompleted){
+      event.preventDefault();
 
+    //Update Data in backend
+    await updateLegacyCMSData(selectedOrganisation?.value, projectId, {
+      legacy_cms: newMigrationData?.legacy_cms?.selectedCms?.cms_id
+    });
+    await updateAffixData(selectedOrganisation?.value, projectId, { affix: newMigrationData?.legacy_cms?.affix });
+    await fileformatConfirmation(selectedOrganisation?.value, projectId, {
+      fileformat_confirmation: true
+    });     
+    await updateFileFormatData(selectedOrganisation?.value, projectId, {
+      file_format: newMigrationData?.legacy_cms?.selectedCms?.allowed_file_formats[0]?.fileformat_id?.toString() ,
+      file_path: newMigrationData?.legacy_cms?.uploadedFile?.file_details?.localPath,
+      is_fileValid: newMigrationData?.legacy_cms?.uploadedFile?.isValidated,
+      is_localPath: newMigrationData?.legacy_cms?.uploadedFile?.file_details?.isLocalPath,
+      awsDetails:{
+        awsRegion: newMigrationData?.legacy_cms?.uploadedFile?.file_details?.awsData?.awsRegion,
+        bucketName: newMigrationData?.legacy_cms?.uploadedFile?.file_details?.awsData?.bucketName,
+        buketKey: newMigrationData?.legacy_cms?.uploadedFile?.file_details?.awsData?.buketKey
       }
-      else{
-        setIsLoading(false);
+    });
+    const res = await updateCurrentStepData(selectedOrganisation.value, projectId);
+    handleStepChange(1);
+    if (res) {
+      setIsLoading(false);
 
-        if (legacyCMSRef?.current) {
-          const currentIndex = legacyCMSRef?.current?.getInternalActiveStepIndex() + 1;                
-          let result;
-          switch (currentIndex ) {
-            case 0:
-              result = 'CMS';
-              break;
-            case 1:
-              result = 'Enter Affix';
-              break;
-            case 2:
-              result = 'Imported File';
-              break;
-          }
-          if (currentIndex !== 3 || currentIndex !== 4) {
-            Notification({
-              notificationContent: { text: `Please complete ${result} step` },
-              type: 'warning'
-            });
-          }
-        }
+      const url = `/projects/${projectId}/migration/steps/2`;
+      navigate(url, { replace: true });
+    }
 
-      }
-      
-    };
+    }
+    else{
+      setIsLoading(false);
 
-    // handle on proceed to content mapping
-    const handleOnClickDestinationStack = async (event: MouseEvent) => {
-      setIsLoading(true);
-
-      if(isCompleted && !isEmptyString(newMigrationData?.destination_stack?.selectedStack?.value)){
-        event?.preventDefault();
-        //Update Data in backend
-        await updateDestinationStack(selectedOrganisation?.value, projectId, {
-          stack_api_key: newMigrationData?.destination_stack?.selectedStack?.value
-        });
-        handleStepChange(2);
-        const res = await updateCurrentStepData(selectedOrganisation?.value, projectId);
-        if (res) {
-          setIsLoading(false);
-          const url = `/projects/${projectId}/migration/steps/3`;
-          navigate(url, { replace: true });
+      if (legacyCMSRef?.current) {
+        const currentIndex = legacyCMSRef?.current?.getInternalActiveStepIndex() + 1;                
+        let result;
+        switch (currentIndex ) {
+          case 0:
+            result = 'CMS';
+            break;
+          case 1:
+            result = 'Enter Affix';
+            break;
+          case 2:
+            result = 'Imported File';
+            break;
+        }
+        if (currentIndex !== 3 || currentIndex !== 4) {
+          Notification({
+            notificationContent: { text: `Please complete ${result} step` },
+            type: 'warning'
+          });
         }
-      } else{
-        setIsLoading(false);
-        Notification({
-          notificationContent: { text: 'Please select a stack to proceed further' },
-          type: 'warning'
-        });
       }
-    };
 
-    const handleOnClickContentMapper = async (event: MouseEvent) => {
-      setIsLoading(true);
+    }
+    
+  };
 
-      event.preventDefault();
+  // handle on proceed to content mapping
+  const handleOnClickDestinationStack = async (event: MouseEvent) => {
+    setIsLoading(true);
 
-      const data = {
-        name: newMigrationData?.destination_stack?.selectedStack?.label,
-        description: 'test migration stack',
-        master_locale: newMigrationData?.destination_stack?.selectedStack?.master_locale
-      };
-
-      const res = await createTestStack(
-        newMigrationData?.destination_stack?.selectedOrg?.value,
-        projectId,
-        data
-      );
-
-      const newMigrationDataObj: INewMigration = {
-        ...newMigrationData,
-        test_migration: { stack_link: res?.data?.data?.url, stack_api_key: res?.data?.data?.data?.stack?.api_key }
-      };
-  
-      dispatch(updateNewMigrationData((newMigrationDataObj)));
-      if (res?.status) {
+    if(isCompleted && !isEmptyString(newMigrationData?.destination_stack?.selectedStack?.value)){
+      event?.preventDefault();
+      //Update Data in backend
+      await updateDestinationStack(selectedOrganisation?.value, projectId, {
+        stack_api_key: newMigrationData?.destination_stack?.selectedStack?.value
+      });
+      handleStepChange(2);
+      const res = await updateCurrentStepData(selectedOrganisation?.value, projectId);
+      if (res) {
         setIsLoading(false);
-
-        const url = `/projects/${projectId}/migration/steps/4`;
+        const url = `/projects/${projectId}/migration/steps/3`;
         navigate(url, { replace: true });
-
-        await updateCurrentStepData(selectedOrganisation.value, projectId);
-        handleStepChange(3);
       }
+    } else{
+      setIsLoading(false);
+      Notification({
+        notificationContent: { text: 'Please select a stack to proceed further' },
+        type: 'warning'
+      });
     }
+  };
+
+  const handleOnClickContentMapper = async (event: MouseEvent) => {
+    setIsLoading(true);
 
-    const handleOnClickTestMigration = async () => {
+    event.preventDefault();
+
+    const data = {
+      name: newMigrationData?.destination_stack?.selectedStack?.label,
+      description: 'test migration stack',
+      master_locale: newMigrationData?.destination_stack?.selectedStack?.master_locale
+    };
+
+    const res = await createTestStack(
+      newMigrationData?.destination_stack?.selectedOrg?.value,
+      projectId,
+      data
+    );
+
+    const newMigrationDataObj: INewMigration = {
+      ...newMigrationData,
+      test_migration: { stack_link: res?.data?.data?.url, stack_api_key: res?.data?.data?.data?.stack?.api_key }
+    };
+
+    dispatch(updateNewMigrationData((newMigrationDataObj)));
+    if (res?.status) {
       setIsLoading(false);
 
-      const url = `/projects/${projectId}/migration/steps/5`;
+      const url = `/projects/${projectId}/migration/steps/4`;
       navigate(url, { replace: true });
 
       await updateCurrentStepData(selectedOrganisation.value, projectId);
-      handleStepChange(4);
+      handleStepChange(3);
     }
+  }
 
-    const handleOnClickFunctions = [
-      handleOnClickLegacyCms, 
-      handleOnClickDestinationStack,
-      handleOnClickContentMapper,
-      handleOnClickTestMigration 
-    ];
+  const handleOnClickTestMigration = async () => {
+    setIsLoading(false);
+
+    const url = `/projects/${projectId}/migration/steps/5`;
+    navigate(url, { replace: true });
+
+    await updateCurrentStepData(selectedOrganisation.value, projectId);
+    handleStepChange(4);
+  }
+
+  const handleOnClickFunctions = [
+    handleOnClickLegacyCms, 
+    handleOnClickDestinationStack,
+    handleOnClickContentMapper,
+    handleOnClickTestMigration 
+  ];
+
+  const changeDropdownState = () =>{
+    const newMigrationDataObj: INewMigration = {
+      ...newMigrationData,
+      content_mapping: { ...newMigrationData?.content_mapping, isDropDownChanged: false }
+    };
+
+    dispatch(updateNewMigrationData((newMigrationDataObj)));
+  }
 
   return (
     <div className='migration-steps-wrapper'>
@@ -313,7 +321,7 @@ const Migration = () => {
 
       <div className='steps-wrapper'>
         { projectData &&
-          <HorizontalStepper ref={stepperRef} steps={createStepper(projectData, handleClick)} handleSaveCT={saveRef?.current?.handleSaveContentType} changeDropdownState={saveRef?.current?.handleDropdownState } />
+          <HorizontalStepper ref={stepperRef} steps={createStepper(projectData, handleClick)} handleSaveCT={saveRef?.current?.handleSaveContentType} changeDropdownState={changeDropdownState } />
         }     
       </div>
     </div>