Skip to content

Content mapper dropdown state change issue solved #219

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 26, 2024
Merged

Content mapper dropdown state change issue solved #219

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions ui/src/components/Common/SaveChangesModal/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ interface Props {
saveContentType: () => void;
openContentType?: () => void;
changeStep?: () => void;
dropdownStateChange: () => void;
}

const SaveChangesModal = (props: Props) => {
Expand All @@ -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?.();
Expand All @@ -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?.();
Expand Down
29 changes: 4 additions & 25 deletions ui/src/components/ContentMapper/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -357,7 +357,6 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re
...newMigrationData,
content_mapping: {
...newMigrationData?.content_mapping,
// content_type_mapping: contentTypeMapped,
isDropDownChanged: isDropDownChanged,
otherCmsTitle: otherCmsTitle,
}
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -506,6 +485,7 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re
otherCmsTitle={otherCmsTitle}
saveContentType={handleSaveContentType}
openContentType={() => openContentType(i)}
dropdownStateChange={handleDropdownState}
/>
),
modalProps: {
Expand All @@ -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);
Expand Down Expand Up @@ -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,
Expand All @@ -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`,
Expand Down
11 changes: 4 additions & 7 deletions ui/src/components/Stepper/HorizontalStepper/HorizontalStepper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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;
Expand Down Expand Up @@ -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
Expand All @@ -101,6 +99,7 @@ const HorizontalStepper = forwardRef(
otherCmsTitle={newMigrationData?.content_mapping?.otherCmsTitle}
saveContentType={handleSaveCT}
changeStep={() => setTabStep(idx)}
dropdownStateChange={handleDropdownChange}
/>
),
modalProps: {
Expand All @@ -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) => {
Expand Down
Loading