From fbdb141728a42cd9545910d3b463bbc8bd5789bd Mon Sep 17 00:00:00 2001 From: AishDani Date: Tue, 9 Jul 2024 11:17:17 +0530 Subject: [PATCH 1/4] refactor:added disablity to valid button if format is not compatible --- api/src/services/contentMapper.service.ts | 6 +++--- .../LegacyCms/Actions/LoadUploadFile.tsx | 19 +++++++++++++++++-- ui/src/components/LegacyCms/index.tsx | 7 ++++--- ui/src/components/MainHeader/index.tsx | 6 ++++-- 4 files changed, 28 insertions(+), 10 deletions(-) diff --git a/api/src/services/contentMapper.service.ts b/api/src/services/contentMapper.service.ts index bd0118c7c..e9d41e96a 100644 --- a/api/src/services/contentMapper.service.ts +++ b/api/src/services/contentMapper.service.ts @@ -26,13 +26,13 @@ import { ContentTypesMapper } from "../models/contentTypesMapper-lowdb.js"; // Developer service to create dummy contentmapping data const putTestData = async (req: Request) => { const projectId = req.params.projectId; - const contentTypes = req.body.contentTypes; + const contentTypes = req.body.contentTypes; await FieldMapperModel.read(); contentTypes.map((type: any, index: any) => { const fieldIds: string[] = []; const fields = type?.fieldMapping?.map?.((field: any) => { - const id = uuidv4(); + const id = field?.id || uuidv4(); fieldIds.push(id); return { id, isDeleted: true, ...field }; }); @@ -45,7 +45,7 @@ const putTestData = async (req: Request) => { await ContentTypesMapperModelLowdb.read(); const contentIds: string[] = []; const contentType = contentTypes.map((item: any) => { - const id = uuidv4(); + const id = item?.id || uuidv4(); contentIds.push(id); return { ...item, id }; }); diff --git a/ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx b/ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx index 213efbf58..dbe8f5799 100644 --- a/ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx +++ b/ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx @@ -55,6 +55,7 @@ const LoadUploadFile = (props: LoadUploadFileProps) => { const newMigrationData = useSelector((state:RootState)=>state?.migration?.newMigrationData); const selectedOrganisation = useSelector((state:RootState)=>state?.authentication?.selectedOrganisation); + const migrationData = useSelector((state:RootState)=>state?.migration?.migrationData); const dispatch = useDispatch(); @@ -70,7 +71,7 @@ const LoadUploadFile = (props: LoadUploadFileProps) => { const [fileExtension, setFileExtension] = useState(''); const [progressPercentage, setProgressPercentage] = useState(0); const [showProgress, setShowProgress]= useState(false); - const [fileFormat, setFileFormat] = useState(newMigrationData?.legacy_cms?.selectedFileFormat?.title); + const [fileFormat, setFileFormat] = useState(newMigrationData?.legacy_cms?.selectedFileFormat?.fileformat_id); const [processing, setProcessing] = useState(''); const [isCancelLoading, setIsCancelLoading] = useState(false); @@ -211,6 +212,20 @@ const LoadUploadFile = (props: LoadUploadFileProps) => { dispatch(updateNewMigrationData(newMigrationDataObj)); + const { all_cms = [] } = migrationData?.legacyCMSData || {}; + let filteredCmsData:any = all_cms; + if (res?.data?.cmsType) { + filteredCmsData = all_cms?.filter((cms: any) => cms?.parent?.toLowerCase() === res?.data?.cmsType?.toLowerCase()); + } + + const isFormatValid = filteredCmsData[0]?.allowed_file_formats?.find((format: any) => { + const isValid = format?.fileformat_id?.toLowerCase() === extension; + return isValid; + }); + + setIsDisabled(!isFormatValid); + + // if (res?.data?.localPath !== newMigrationData?.legacy_cms?.uploadedFile?.file_details?.localPath) { // console.log("INNNNNNNNN",res?.data?.localPath, newMigrationData?.legacy_cms?.uploadedFile?.file_details?.localPath); @@ -322,7 +337,7 @@ const LoadUploadFile = (props: LoadUploadFileProps) => { // setIsValidated(false); // } },[isValidated,newMigrationData]) - + useEffect(()=>{ if(newMigrationData?.legacy_cms?.selectedFileFormat?.fileformat_id){ setFileFormat(newMigrationData?.legacy_cms?.selectedFileFormat?.fileformat_id);} diff --git a/ui/src/components/LegacyCms/index.tsx b/ui/src/components/LegacyCms/index.tsx index 59fd06de8..b2d7096e4 100644 --- a/ui/src/components/LegacyCms/index.tsx +++ b/ui/src/components/LegacyCms/index.tsx @@ -141,7 +141,7 @@ const LegacyCMSComponent = forwardRef(({ legacyCMSData, projectData, isCompleted //Update New Migration data; const selectedCmsData: ICMSType = validateArray(data.all_cms) - ? data.all_cms?.find((cms: ICMSType) => { + ? data.all_cms?.some((cms: ICMSType) => { return cms?.cms_id === legacyCMSData?.cms}) : DEFAULT_CMS_TYPE; @@ -170,13 +170,14 @@ const LegacyCMSComponent = forwardRef(({ legacyCMSData, projectData, isCompleted !isEmptyString(selectedFileFormatData?.fileformat_id) ) { setInternalActiveStepIndex(2); - } + } dispatch(updateNewMigrationData({ ...newMigrationData, legacy_cms: { + ...newMigrationData?.legacy_cms, currentStep: internalActiveStepIndex, selectedCms: selectedCmsData, - selectedFileFormat: selectedFileFormatData || defaultCardType, + selectedFileFormat: selectedFileFormatData || newMigrationData?.legacy_cms?.selectedFileFormat , uploadedFile: { file_details:{ localPath: legacyCMSData?.file_path, diff --git a/ui/src/components/MainHeader/index.tsx b/ui/src/components/MainHeader/index.tsx index 3b499c0c1..96d9a00e7 100644 --- a/ui/src/components/MainHeader/index.tsx +++ b/ui/src/components/MainHeader/index.tsx @@ -110,14 +110,16 @@ const MainHeader = () => { const handleonClick = async () => { const currentIndex = newMigrationData?.legacy_cms?.currentStep + 1; const pathSegments = location?.pathname.split('/'); - const lastPathSegment = pathSegments[pathSegments.length - 1]; + const lastPathSegment = pathSegments[pathSegments.length - 4]; + const response = await getProject(selectedOrganisation?.uid || '', lastPathSegment); + const current_step = response?.data?.current_step; const goback = () => { dispatch(updateNewMigrationData(DEFAULT_NEW_MIGRATION)) navigate(`/projects`, { replace: true }); } - if(-1 < currentIndex && currentIndex < 4 && ( !isEmptyString(newMigrationData?.legacy_cms?.selectedCms?.cms_id) || !isEmptyString(newMigrationData?.legacy_cms?.affix) || newMigrationData?.legacy_cms?.uploadedFile?.isValidated ) && lastPathSegment === '1') + if(-1 < currentIndex && currentIndex < 4 && ( !isEmptyString(newMigrationData?.legacy_cms?.selectedCms?.cms_id) || !isEmptyString(newMigrationData?.legacy_cms?.affix) || newMigrationData?.legacy_cms?.uploadedFile?.isValidated ) && current_step === 1) { return cbModal({ From 31c063a29b8f087870f309f536e09059fcae6315 Mon Sep 17 00:00:00 2001 From: AishDani Date: Tue, 9 Jul 2024 12:22:05 +0530 Subject: [PATCH 2/4] refactor:added id to mapper --- uplaode-api/migration-sitecore/libs/contenttypes.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/uplaode-api/migration-sitecore/libs/contenttypes.js b/uplaode-api/migration-sitecore/libs/contenttypes.js index da41e8872..944bc48b0 100644 --- a/uplaode-api/migration-sitecore/libs/contenttypes.js +++ b/uplaode-api/migration-sitecore/libs/contenttypes.js @@ -107,6 +107,7 @@ const ContentTypeSchema = ({ type, name, uid, default_value = "", description = switch (type) { case 'Single-Line Text': { return { + id: id, uid: sitecoreKey, "otherCmsField": name, "otherCmsType": type, @@ -118,6 +119,7 @@ const ContentTypeSchema = ({ type, name, uid, default_value = "", description = } case 'Checkbox': { return { + id: id, uid: sitecoreKey, "otherCmsField": name, "otherCmsType": type, @@ -130,6 +132,7 @@ const ContentTypeSchema = ({ type, name, uid, default_value = "", description = } case 'Rich Text': { return { + id: id, uid: sitecoreKey, "otherCmsField": name, "otherCmsType": type, @@ -142,6 +145,7 @@ const ContentTypeSchema = ({ type, name, uid, default_value = "", description = case 'Droplist': { return { + id: id, uid: sitecoreKey, "otherCmsField": name, "otherCmsType": type, @@ -154,6 +158,7 @@ const ContentTypeSchema = ({ type, name, uid, default_value = "", description = case "Image": { return { + id: id, uid: sitecoreKey, "otherCmsField": name, "otherCmsType": type, @@ -166,6 +171,7 @@ const ContentTypeSchema = ({ type, name, uid, default_value = "", description = case "General Link": case "Internal Link": { return { + id: id, uid: sitecoreKey, "otherCmsField": name, "otherCmsType": type, @@ -178,6 +184,7 @@ const ContentTypeSchema = ({ type, name, uid, default_value = "", description = case "Multi-Line Text": { return { + id: id, uid: sitecoreKey, "otherCmsField": name, "otherCmsType": type, @@ -192,6 +199,7 @@ const ContentTypeSchema = ({ type, name, uid, default_value = "", description = case "Integer": case "Number": { return { + id: id, uid: sitecoreKey, "otherCmsField": name, "otherCmsType": type, @@ -206,6 +214,7 @@ const ContentTypeSchema = ({ type, name, uid, default_value = "", description = case "Date": case "Time": { return { + id: id, uid: sitecoreKey, "otherCmsField": name, "otherCmsType": type, @@ -219,6 +228,7 @@ const ContentTypeSchema = ({ type, name, uid, default_value = "", description = case 'Grouped Droplist': { if (choices?.length) { return { + id: id, uid: sitecoreKey, "otherCmsField": name, "otherCmsType": type, @@ -233,6 +243,7 @@ const ContentTypeSchema = ({ type, name, uid, default_value = "", description = case "Treelist": { if (sourLet?.key !== "source") { return { + id: id, uid: sitecoreKey, "otherCmsField": name, "otherCmsType": type, From 922f49aba1b808875bbe36c3e043743569c04c21 Mon Sep 17 00:00:00 2001 From: Sayali Joshi Date: Tue, 9 Jul 2024 13:37:05 +0530 Subject: [PATCH 3/4] Content type and Global fields icons added --- .../ContentMapper/contentMapper.interface.ts | 1 + ui/src/components/ContentMapper/index.scss | 14 +++++---- ui/src/components/ContentMapper/index.tsx | 30 ++++++------------- ui/src/components/MainHeader/index.scss | 1 + ui/src/components/MainHeader/index.tsx | 25 ++-------------- 5 files changed, 21 insertions(+), 50 deletions(-) diff --git a/ui/src/components/ContentMapper/contentMapper.interface.ts b/ui/src/components/ContentMapper/contentMapper.interface.ts index 8fd01e46b..a247930a8 100644 --- a/ui/src/components/ContentMapper/contentMapper.interface.ts +++ b/ui/src/components/ContentMapper/contentMapper.interface.ts @@ -46,6 +46,7 @@ export interface ContentType { updateAt: string; id?: string; status: string; + type: string; fieldMapping?: FieldMapType[] | []; } diff --git a/ui/src/components/ContentMapper/index.scss b/ui/src/components/ContentMapper/index.scss index 475d4006e..cf03e88cb 100644 --- a/ui/src/components/ContentMapper/index.scss +++ b/ui/src/components/ContentMapper/index.scss @@ -70,7 +70,7 @@ justify-content: space-between; line-height: normal; min-height: 42px; - padding: $px-8 $px-4 $px-8 $px-12; + padding: $px-8 $px-10 $px-8 $px-12; &:hover, &.active-ct { background-color: $color-brand-white-base; .cms-title { @@ -80,22 +80,24 @@ } } .cms-title { - margin-right: 12px; + align-items: center; + display: flex; + margin-right: $px-12; max-height: 24px; - max-width: 155px; white-space: nowrap; + width: 80%; .tippy-wrapper { display: flex; } span { color: $color-font-base; + margin-left: $px-10; overflow: hidden; text-overflow: ellipsis; } } .ct-options { justify-content: flex-end; - min-width: 150px; } } } @@ -111,14 +113,14 @@ } } .content-type-list { - padding-left: 12px; + padding-left: $px-12; } .content-types-fields-wrapper { display: flex; flex-direction: column; max-width: 75%; width: 100%; - padding: 0px; + padding: 0; } .cta-wrapper { border-top: 1px solid $color-base-gray-40; diff --git a/ui/src/components/ContentMapper/index.tsx b/ui/src/components/ContentMapper/index.tsx index 46c1a7aad..a23191a73 100644 --- a/ui/src/components/ContentMapper/index.tsx +++ b/ui/src/components/ContentMapper/index.tsx @@ -12,7 +12,6 @@ import { Notification, cbModal, InstructionText, - Dropdown } from '@contentstack/venus-components'; // Services @@ -122,7 +121,6 @@ const ContentMapper = () => { const [itemStatusMap, updateItemStatusMap] = useState({}); const [totalCounts, setTotalCounts] = useState(tableData?.length); const [fieldValue, setFieldValue] = useState(); - const [currentIndex, setCurrentIndex] = useState(0); const [searchText, setSearchText] = useState(''); const [contentTypes, setContentTypes] = useState([]); @@ -356,7 +354,6 @@ const ContentMapper = () => { setOtherContentType({ label: option, value: option }); setContentTypeUid(contentTypes?.[i]?.id ?? ''); - setCurrentIndex(i); fetchFields(contentTypes?.[i]?.id ?? '', searchText || ''); setotherCmsUid(contentTypes?.[i]?.otherCmsUid); setSelectedContentType(contentTypes?.[i]); @@ -1003,6 +1000,7 @@ const ContentMapper = () => {
    {filteredContentTypes?.map((content: ContentType, index: number) => { const icon = STATUS_ICON_Mapping[content?.status] || ''; + return (
  • { onKeyDown={() => openContentType(index)} >
    - - {content?.otherCmsTitle} + + {content?.type === "Content Type" + ? + : content?.type === "Global Field" + ? + : <> + } + {content?.otherCmsTitle}
    @@ -1030,22 +1034,6 @@ const ContentMapper = () => { - - {/* - - */}
    • ) diff --git a/ui/src/components/MainHeader/index.scss b/ui/src/components/MainHeader/index.scss index a08bd3287..14a769e90 100644 --- a/ui/src/components/MainHeader/index.scss +++ b/ui/src/components/MainHeader/index.scss @@ -31,6 +31,7 @@ } .logo { + cursor: pointer; position: relative; text-align: center; width: 3.5rem; diff --git a/ui/src/components/MainHeader/index.tsx b/ui/src/components/MainHeader/index.tsx index 3b499c0c1..29abaa388 100644 --- a/ui/src/components/MainHeader/index.tsx +++ b/ui/src/components/MainHeader/index.tsx @@ -1,6 +1,6 @@ // Libraries import { useEffect, useState } from 'react'; -import { useNavigate, useLocation, Link, Params, useParams } from 'react-router-dom'; +import { useNavigate, useLocation } from 'react-router-dom'; import { cbModal, Dropdown, Tooltip} from '@contentstack/venus-components'; import { useDispatch, useSelector } from 'react-redux'; @@ -14,7 +14,6 @@ import { setSelectedOrganisation } from '../../store/slice/authSlice'; //Utilities import { CS_ENTRIES } from '../../utilities/constants'; import { - clearLocalStorage, getDataFromLocalStorage, isEmptyString, setDataInLocalStorage @@ -30,7 +29,6 @@ import './index.scss'; import NotificationModal from '../Common/NotificationModal'; import { updateNewMigrationData } from '../../store/slice/migrationDataSlice'; import { ModalObj } from '../Modal/modal.interface'; -import { getProject } from '../../services/api/project.service'; const MainHeader = () => { @@ -41,14 +39,10 @@ const MainHeader = () => { const [data, setData] = useState({}); const [orgsList, setOrgsList] = useState([]); - const [currentStep, setCurrentStep] = useState(0); - const [projectName, setProjectName] = useState(''); const location = useLocation(); const navigate = useNavigate(); const dispatch = useDispatch(); - const params = useParams(); - const { logo, organization_label: organizationLabel } = data; @@ -57,7 +51,7 @@ const MainHeader = () => { const updateOrganisationListState = () => { if (organisationsList) { //set selected org as default - const list = organisationsList.map((org: any) => ({ + const list = organisationsList.map((org: IDropDown) => ({ ...org, default: org?.value === selectedOrganisation?.value })); @@ -89,16 +83,6 @@ const MainHeader = () => { useEffect(() => { updateOrganisationListState(); }, [selectedOrganisation]); - - const urlParams = new URLSearchParams(location.search); - const newParam = urlParams.get('region'); - - // Function for Logout - const handleLogout = () => { - if (clearLocalStorage()) { - navigate('/', { replace: true }); - } - }; const handleOnDropDownChange = (data: IDropDown) => { if (data.value === selectedOrganisation.value) return; @@ -136,13 +120,8 @@ const MainHeader = () => { else{ dispatch(updateNewMigrationData(DEFAULT_NEW_MIGRATION)) navigate(`/projects`, { replace: true }); - } - - - }; - return (
    From d605df371cf57e6e769637d9e7e2119df97f5520 Mon Sep 17 00:00:00 2001 From: Sayali Joshi Date: Tue, 9 Jul 2024 14:24:59 +0530 Subject: [PATCH 4/4] Code refactored --- ui/src/components/ContentMapper/index.tsx | 4 ++-- ui/src/components/MainHeader/index.tsx | 10 ++++++---- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/ui/src/components/ContentMapper/index.tsx b/ui/src/components/ContentMapper/index.tsx index a23191a73..4017fe117 100644 --- a/ui/src/components/ContentMapper/index.tsx +++ b/ui/src/components/ContentMapper/index.tsx @@ -984,7 +984,7 @@ const ContentMapper = () => { {Object.keys(CONTENT_MAPPING_STATUS).map((key, keyInd) => ( <>
  • handleContentTypeFilter(CONTENT_MAPPING_STATUS[key], e)}> - {CONTENT_MAPPING_STATUS[key]} + {CONTENT_MAPPING_STATUS[key] && {CONTENT_MAPPING_STATUS[key]} } {STATUS_ICON_Mapping[key] && }
    • @@ -1017,7 +1017,7 @@ const ContentMapper = () => { : <> } - {content?.otherCmsTitle} + {content?.otherCmsTitle && {content?.otherCmsTitle} }
    diff --git a/ui/src/components/MainHeader/index.tsx b/ui/src/components/MainHeader/index.tsx index 86bf37981..d8337e997 100644 --- a/ui/src/components/MainHeader/index.tsx +++ b/ui/src/components/MainHeader/index.tsx @@ -6,10 +6,12 @@ import { useDispatch, useSelector } from 'react-redux'; // Service import { getCMSDataFromFile } from '../../cmsData/cmsSelector'; +import { getProject } from '../../services/api/project.service'; // Redux import { RootState } from '../../store'; import { setSelectedOrganisation } from '../../store/slice/authSlice'; +import { updateNewMigrationData } from '../../store/slice/migrationDataSlice'; //Utilities import { CS_ENTRIES } from '../../utilities/constants'; @@ -22,16 +24,16 @@ import { // Interface import { MainHeaderType } from './mainheader.interface'; import { DEFAULT_NEW_MIGRATION, IDropDown } from '../../context/app/app.interface'; +import { ModalObj } from '../Modal/modal.interface'; +// Components import ProfileCard from '../ProfileHeader'; +import NotificationModal from '../Common/NotificationModal'; + // Styles import './index.scss'; -import NotificationModal from '../Common/NotificationModal'; -import { updateNewMigrationData } from '../../store/slice/migrationDataSlice'; -import { ModalObj } from '../Modal/modal.interface'; const MainHeader = () => { - const user = useSelector((state:RootState)=>state?.authentication?.user); const organisationsList = useSelector((state:RootState)=>state?.authentication?.organisationsList); const selectedOrganisation = useSelector((state:RootState)=>state?.authentication?.selectedOrganisation);