Dev

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/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;
@@ -138,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}>