[CMG-418] - Content mapper | after test migration not able to update content mapping

Author: sayalijoshi27

ui/src/components/Card/index.tsx

@@ -64,10 +64,10 @@ const CardList = ({ project }: ProjectType) => {
 
   return (
     <div style={{ margin: '0 19px 20px 0' }}>
-      <div onClick={() => onClickProject(project?.id || '')}>
+      <div onClick={() => onClickProject(project?.id ?? '')}>
         <div className="ProjectCard">
           <div className='ProjectCardWrapper'>
-            <Tooltip content={project?.name} position="top" type="primary" variantType="basic">
+            <Tooltip content={project?.name} position="right" type="primary" variantType="basic">
               <div className="ProjectCard__heading">
                 {project?.name && <h4 className="ProjectCard__title flex-v-center">{project?.name}</h4>}
               </div>

ui/src/components/ContentMapper/index.tsx

@@ -895,7 +895,7 @@ const ContentMapper = forwardRef(({handleStepChange}: contentMapperProps, ref: R
               data?.otherCmsField === 'url' ||
               data?.otherCmsField === 'reference'||
               data?.contentstackFieldType === "global_field" ||
-              newMigrationData?.project_current_step?.toString() !== stepId
+              newMigrationData?.project_current_step > 4
             }
           />
         </div>
@@ -921,7 +921,7 @@ const ContentMapper = forwardRef(({handleStepChange}: contentMapperProps, ref: R
               onClick={() =>
                 handleAdvancedSetting(fieldLabel, data?.advanced || {}, data?.uid, data)
               }
-              disabled={newMigrationData?.project_current_step?.toString() !== stepId}
+              disabled={newMigrationData?.project_current_step > 4}
             />
           </Tooltip>
         )}
@@ -1376,7 +1376,7 @@ const ContentMapper = forwardRef(({handleStepChange}: contentMapperProps, ref: R
             maxWidth="290px"
             isClearable={selectedOptions?.includes(existingField?.[data?.uid]?.label ?? '')}
             options={adjustedOptions}
-            isDisabled={OptionValue?.isDisabled || newMigrationData?.project_current_step?.toString() !== stepId}
+            isDisabled={OptionValue?.isDisabled || newMigrationData?.project_current_step > 4}
           />
         </div>
         {!OptionValue?.isDisabled && (
@@ -1391,7 +1391,7 @@ const ContentMapper = forwardRef(({handleStepChange}: contentMapperProps, ref: R
             >
               <Button
                 buttonType="light"
-                disabled={(contentTypeSchema && existingField[data?.uid] || newMigrationData?.project_current_step?.toString() !== stepId) ? true : false}
+                disabled={(contentTypeSchema && existingField[data?.uid] || newMigrationData?.project_current_step > 4) ? true : false}
               >
                 <Icon
                   version={'v2'}
@@ -1995,7 +1995,7 @@ const ContentMapper = forwardRef(({handleStepChange}: contentMapperProps, ref: R
                           placeholder={otherContentType?.label}
                           isSearchable
                           version="v2"
-                          isDisabled={newMigrationData?.project_current_step?.toString() !== stepId}
+                          isDisabled={newMigrationData?.project_current_step > 4}
                         />
                       </div>
                     )}
@@ -2015,7 +2015,7 @@ const ContentMapper = forwardRef(({handleStepChange}: contentMapperProps, ref: R
                 className="saveButton"
                 onClick={handleSaveContentType}
                 version="v2"
-                disabled={newMigrationData?.project_current_step?.toString() !== stepId}
+                disabled={newMigrationData?.project_current_step > 4}
                 >
                 Save
               </Button>

ui/src/components/MigrationFlowHeader/index.tsx

@@ -21,6 +21,13 @@ type MigrationFlowHeaderProps = {
   finalExecutionStarted?: boolean;
 };
 
+/**
+ * Renders a MigrationFlowHeader component to show the project name and CTA to proceed to next step
+ * @param projectData - The projectData object containing project details.
+ * @param handleOnClick - Callback function to proceed to next step.
+ * @param isLoading - isLoading flag to load redux data
+ * @param finalExecutionStarted - The finalExecutionStarted boolean to check if migration execution is started to disable Start Migration button.
+ */
 const MigrationFlowHeader = ({projectData, handleOnClick, isLoading, finalExecutionStarted }: MigrationFlowHeaderProps) => {
   const [projectName, setProjectName] = useState('');
   const [currentStep, setCurrentStep] = useState<number>(0);
@@ -37,6 +44,9 @@ const MigrationFlowHeader = ({projectData, handleOnClick, isLoading, finalExecut
   }, [selectedOrganisation?.value, params?.projectId]);
 
   /******** Function to get project  ********/
+  /**
+   * Fetch the project details project name and current step.
+   */
   const fetchProject = async () => {
     setProjectName(projectData?.name);
     setCurrentStep(projectData?.current_step);
@@ -59,7 +69,7 @@ const MigrationFlowHeader = ({projectData, handleOnClick, isLoading, finalExecut
     <div className='d-flex align-items-center justify-content-between migration-flow-header'>
       <div className='d-flex align-items-center'>
         { projectName && 
-        <Tooltip content={projectName} position='top' version={'v2'}>
+        <Tooltip content={projectName} position='right' version={'v2'}>
           <h1 className='project-name-ellipsis'>{projectName}</h1> 
         </Tooltip>}
       </div>

ui/src/pages/Projects/index.scss

@@ -24,14 +24,14 @@
         width: 100% !important;
       }
       .PageLayout__head {
-        border-top: 0 none;
         height: auto;
         border-bottom: 1px solid $color-brand-secondary-lightest;
         border-top: 1px solid $color-brand-secondary-lightest;
         left: 56px;
         padding:20px 10px 20px 13px;
         position: fixed;
         width: calc(100% - 56px) !important;
+        z-index: 1;
       }
     }
   }