From 88648c37a7a3d72b10740a7e4b21abe1728f1bdb Mon Sep 17 00:00:00 2001 From: AishDani Date: Mon, 21 Apr 2025 20:56:39 +0530 Subject: [PATCH 1/2] fix:master-locale not showing for new stack and title and url bugs in content-mapper --- ui/src/components/ContentMapper/index.tsx | 12 ++--- .../Actions/LoadLanguageMapper.tsx | 48 +++++++++++++++---- .../DestinationStack/Actions/LoadStacks.tsx | 1 + 3 files changed, 45 insertions(+), 16 deletions(-) diff --git a/ui/src/components/ContentMapper/index.tsx b/ui/src/components/ContentMapper/index.tsx index b052caf5b..ff957e343 100644 --- a/ui/src/components/ContentMapper/index.tsx +++ b/ui/src/components/ContentMapper/index.tsx @@ -1076,9 +1076,9 @@ const ContentMapper = forwardRef(({handleStepChange}: contentMapperProps, ref: R options={option} menuPlacement="auto" isDisabled={ - data?.otherCmsType === "Group" || - data?.otherCmsField === 'title' || - data?.otherCmsField === 'url' || + data?.contentstackFieldType === 'group' || + (data?.contentstackFieldType === 'text') || + ( data?.contentstackFieldType === 'url') || data?.backupFieldType === 'reference'|| data?.contentstackFieldType === "global_field" || data?.otherCmsType === undefined || @@ -1089,9 +1089,9 @@ const ContentMapper = forwardRef(({handleStepChange}: contentMapperProps, ref: R /> {!( - data?.otherCmsType === 'Group' || - data?.otherCmsField === 'title' || - data?.otherCmsField === 'url' || + data?.contentstackFieldType === 'Group' || + data?.contentstackFieldType === 'text' || + data?.contentstackFieldType === 'url' || data?.contentstackFieldType === 'global_field' || data?.otherCmsType === undefined || data?.backupFieldType === 'extension' || diff --git a/ui/src/components/DestinationStack/Actions/LoadLanguageMapper.tsx b/ui/src/components/DestinationStack/Actions/LoadLanguageMapper.tsx index aee7bf568..b1256eb49 100644 --- a/ui/src/components/DestinationStack/Actions/LoadLanguageMapper.tsx +++ b/ui/src/components/DestinationStack/Actions/LoadLanguageMapper.tsx @@ -8,8 +8,8 @@ import { Select, Tooltip } from '@contentstack/venus-components'; -import { useEffect, useState } from 'react'; -import TableHeader from './tableHeader'; +import { useEffect, useRef, useState } from 'react'; +import TableHeader from './tableHeader' import { useDispatch, useSelector } from 'react-redux'; import { RootState } from '../../../store'; import { updateNewMigrationData } from '../../../store/slice/migrationDataSlice'; @@ -29,6 +29,8 @@ export type ExistingFieldType = { * @returns {JSX.Element | null} - Returns a JSX element if empty, otherwise null. */ const Mapper = ({ + key, + stack, cmsLocaleOptions, handleLangugeDelete, options, @@ -41,7 +43,9 @@ const Mapper = ({ options: Array<{ label: string; value: string }>; sourceOptions: Array<{ label: string; value: string }>; isDisabled: boolean; - localeChanged: boolean + localeChanged: boolean, + stack: IDropDown, + key: string, }) => { const [selectedMappings, setSelectedMappings] = useState<{ [key: string]: string }>({}); const [existingField, setExistingField] = useState({}); @@ -51,9 +55,14 @@ const Mapper = ({ const [csOptions, setcsOptions] = useState(options); const [sourceoptions, setsourceoptions] = useState(sourceOptions); const newMigrationData = useSelector((state: RootState) => state?.migration?.newMigrationData); + const [selectedStack,setselectedStack] = useState(); const dispatch = useDispatch(); const [placeholder] = useState('Select language'); + useEffect(()=>{ + setselectedStack(stack) + },[]); + useEffect(() => { const newMigrationDataObj: INewMigration = { ...newMigrationData, @@ -437,7 +446,7 @@ const Mapper = ({ ); }; -const LanguageMapper = ({stack} :{ stack : IDropDown}) => { +const LanguageMapper = ({stack, uid } :{ stack : IDropDown, uid: string}) => { const newMigrationData = useSelector((state: RootState) => state?.migration?.newMigrationData); const [options, setoptions] = useState<{ label: string; value: string }[]>([]); @@ -445,6 +454,20 @@ const LanguageMapper = ({stack} :{ stack : IDropDown}) => { const [sourceLocales, setsourceLocales] = useState<{ label: string; value: string }[]>([]); const [isLoading, setisLoading] = useState(false); const [localeChanged, setlocaleChanged] = useState(false); + const [currentStack, setcurrentStack] = useState(); + const [previousStack, setpreviousStack] = useState(); + const [isStackChanged, setisStackChanged] = useState(false); + + const prevStackRef:any = useRef(null); + + useEffect(() => { + if (prevStackRef.current && stack?.uid !== prevStackRef.current?.uid) { + setisStackChanged(true); + setcurrentStack(stack); + setpreviousStack(prevStackRef?.current); + } + prevStackRef.current = stack; + }, [stack]); useEffect(() => { const fetchData = async () => { @@ -463,16 +486,19 @@ const LanguageMapper = ({stack} :{ stack : IDropDown}) => { setsourceLocales(sourceLocale); setoptions(allLocales); const keys = Object?.keys(newMigrationData?.destination_stack?.localeMapping || {})?.find( key => key === `${newMigrationData?.destination_stack?.selectedStack?.master_locale}-master_locale`); - - (Object?.entries(newMigrationData?.destination_stack?.localeMapping)?.length === 0 || !keys ) && - newMigrationData?.project_current_step <= 2 && + if((Object?.entries(newMigrationData?.destination_stack?.localeMapping)?.length === 0 || + !keys || + currentStack?.uid !== previousStack?.uid || isStackChanged) && + newMigrationData?.project_current_step <= 2) + { setcmsLocaleOptions((prevList: { label: string; value: string }[]) => { const newLabel = stack?.master_locale; const isPresent = prevList?.filter( (item: { label: string; value: string }) => (item?.value === 'master_locale') ); - if(isPresent?.[0]?.label !== newLabel){ + if(isPresent?.[0]?.label !== newLabel || currentStack?.uid !== previousStack?.uid || isStackChanged){ + setisStackChanged(false); setlocaleChanged(true); return [ ...prevList?.filter(item => (item?.value !== 'master_locale' && item?.value !== '')) ?? [], @@ -493,7 +519,7 @@ const LanguageMapper = ({stack} :{ stack : IDropDown}) => { } return prevList; - }); + });} if (newMigrationData?.project_current_step > 2) { Object?.entries(newMigrationData?.destination_stack?.localeMapping || {})?.forEach( ([key, value]) => { @@ -525,7 +551,7 @@ const LanguageMapper = ({stack} :{ stack : IDropDown}) => { }; fetchData(); - }, [newMigrationData?.destination_stack?.selectedStack]); + }, [newMigrationData?.destination_stack?.selectedStack, currentStack]); // const fetchLocales = async () => { // return await getStackLocales(newMigrationData?.destination_stack?.selectedOrg?.value); @@ -562,6 +588,8 @@ const LanguageMapper = ({stack} :{ stack : IDropDown}) => { } rowComponent={ { )} From edf0e22fec2a0337bc78f4c8645051a266d9fb7c Mon Sep 17 00:00:00 2001 From: AishDani Date: Mon, 21 Apr 2025 21:31:43 +0530 Subject: [PATCH 2/2] fix:resolved PR comments --- .../DestinationStack/Actions/LoadLanguageMapper.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/ui/src/components/DestinationStack/Actions/LoadLanguageMapper.tsx b/ui/src/components/DestinationStack/Actions/LoadLanguageMapper.tsx index b1256eb49..feea23612 100644 --- a/ui/src/components/DestinationStack/Actions/LoadLanguageMapper.tsx +++ b/ui/src/components/DestinationStack/Actions/LoadLanguageMapper.tsx @@ -55,12 +55,12 @@ const Mapper = ({ const [csOptions, setcsOptions] = useState(options); const [sourceoptions, setsourceoptions] = useState(sourceOptions); const newMigrationData = useSelector((state: RootState) => state?.migration?.newMigrationData); - const [selectedStack,setselectedStack] = useState(); + const [selectedStack,setSelectedStack] = useState(); const dispatch = useDispatch(); const [placeholder] = useState('Select language'); useEffect(()=>{ - setselectedStack(stack) + setSelectedStack(stack) },[]); useEffect(() => { @@ -454,8 +454,8 @@ const LanguageMapper = ({stack, uid } :{ stack : IDropDown, uid: string}) => { const [sourceLocales, setsourceLocales] = useState<{ label: string; value: string }[]>([]); const [isLoading, setisLoading] = useState(false); const [localeChanged, setlocaleChanged] = useState(false); - const [currentStack, setcurrentStack] = useState(); - const [previousStack, setpreviousStack] = useState(); + const [currentStack, setCurrentStack] = useState(); + const [previousStack, setPreviousStack] = useState(); const [isStackChanged, setisStackChanged] = useState(false); const prevStackRef:any = useRef(null); @@ -463,8 +463,8 @@ const LanguageMapper = ({stack, uid } :{ stack : IDropDown, uid: string}) => { useEffect(() => { if (prevStackRef.current && stack?.uid !== prevStackRef.current?.uid) { setisStackChanged(true); - setcurrentStack(stack); - setpreviousStack(prevStackRef?.current); + setCurrentStack(stack); + setPreviousStack(prevStackRef?.current); } prevStackRef.current = stack; }, [stack]);