Dev

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 };
   });

ui/src/components/ContentMapper/contentMapper.interface.ts

@@ -46,6 +46,7 @@ export interface ContentType {
   updateAt: string;
   id?: string;
   status: string;
+  type: string;
   fieldMapping?: FieldMapType[] | [];
 }
 

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;

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<number>(tableData?.length);
   const [fieldValue, setFieldValue] = useState<FieldTypes>();
-  const [currentIndex, setCurrentIndex] = useState(0);
 
   const [searchText, setSearchText] = useState('');
   const [contentTypes, setContentTypes] = useState<ContentType[]>([]);
@@ -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]);
@@ -987,7 +984,7 @@ const ContentMapper = () => {
                     {Object.keys(CONTENT_MAPPING_STATUS).map((key, keyInd) => (
                       <>
                       <li key={`${keyInd?.toString()}`} onClick={(e) => handleContentTypeFilter(CONTENT_MAPPING_STATUS[key], e)}>
-                        <span className='filter-status'>{CONTENT_MAPPING_STATUS[key]}</span>
+                        {CONTENT_MAPPING_STATUS[key] && <span className='filter-status'>{CONTENT_MAPPING_STATUS[key]}</span> }
                         {STATUS_ICON_Mapping[key] && <Icon size="small" icon={STATUS_ICON_Mapping[key]} className={STATUS_ICON_Mapping[key] === 'CheckedCircle' ? 'mapped-icon' : ''} />}
                       </li>  
                       </>
@@ -1003,6 +1000,7 @@ const ContentMapper = () => {
               <ul className="ct-list">
                 {filteredContentTypes?.map((content: ContentType, index: number) => {
                   const icon = STATUS_ICON_Mapping[content?.status] || '';
+
                   return (
                     <li
                       key={`${index.toString()}`}
@@ -1011,9 +1009,15 @@ const ContentMapper = () => {
                       onKeyDown={() => openContentType(index)}
                     >
                       <div className='cms-title'>
-                        <Tooltip content={content?.otherCmsTitle} position="left">
-                          <span>{content?.otherCmsTitle}</span>
+                        <Tooltip content={content?.type} position="bottom">
+                          {content?.type === "Content Type" 
+                            ? <Icon icon={active == index ? "ContentModelsMediumActive" : "ContentModelsMedium"} size="small"  />
+                            : content?.type === "Global Field"
+                              ? <Icon icon={active == index ? "GlobalFieldsMediumActive" : "GlobalFieldsMedium"} size="small" />
+                              : <></>
+                          }
                         </Tooltip>
+                        {content?.otherCmsTitle && <span>{content?.otherCmsTitle}</span> }
                       </div>
 
 
@@ -1030,22 +1034,6 @@ const ContentMapper = () => {
                             <Icon icon="LivePreview" version="v2" onClick={handleSchemaPreview} />
                           </Tooltip>
                         </span>
-
-                        {/* <Dropdown
-                          list={[
-                            {
-                              action: handleSchemaPreview,
-                              default: true,
-                              label: 'Schema Preview'
-                            }
-                          ]}
-                          type="click"
-                          withIcon
-                          dropDownPosition="left"
-                          className='dropdown-align'
-                        >
-                          <Icon icon="DotsThreeLargeVertical" version="v2" />
-                        </Dropdown> */}
                       </div>
                     </li>
                   )

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<string>('');
   const [progressPercentage, setProgressPercentage] = useState<number>(0);
   const [showProgress, setShowProgress]= useState<boolean>(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<boolean>(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);}

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,

ui/src/components/MainHeader/index.scss

@@ -31,6 +31,7 @@
   }
 
   .logo {
+    cursor: pointer;
     position: relative;
     text-align: center;
     width: 3.5rem;

ui/src/components/MainHeader/index.tsx

@@ -1,20 +1,21 @@
 // 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';
 
 // 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';
 import {
-  clearLocalStorage,
   getDataFromLocalStorage,
   isEmptyString,
   setDataInLocalStorage
@@ -23,32 +24,27 @@ 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';
-import { getProject } from '../../services/api/project.service';
 
 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);
   const newMigrationData = useSelector((state:RootState)=> state?.migration?.newMigrationData);
 
   const [data, setData] = useState<MainHeaderType>({});
   const [orgsList, setOrgsList] = useState<IDropDown[]>([]);
-  const [currentStep, setCurrentStep] = useState<number>(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 +53,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 +85,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;
@@ -110,14 +96,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({
@@ -136,13 +124,8 @@ const MainHeader = () => {
     else{
       dispatch(updateNewMigrationData(DEFAULT_NEW_MIGRATION))
       navigate(`/projects`, { replace: true });
-
     }
-
-
-
   };
-
   return (
     <div className="mainheader">
           <div className="d-flex align-items-center" onClick={handleonClick}>