[CMG-161] : Horizontal stepper

ui/src/components/DestinationStack/index.tsx

@@ -28,12 +28,14 @@ type DestinationStackComponentProps = {
   destination_stack: string;
   org_id: string;
   projectData: MigrationResponse;
+  handleStepChange: (currentStep: number) => void;
 };
 
 const DestinationStackComponent = ({
   destination_stack,
   org_id,
-  projectData
+  projectData,
+  handleStepChange
 }: DestinationStackComponentProps) => {
   /** ALL HOOKS HERE */
   const [isLoading, setIsLoading] = useState<boolean>(true);
@@ -65,7 +67,7 @@ const DestinationStackComponent = ({
     await updateDestinationStack(selectedOrganisation?.value, projectId, {
       stack_api_key: newMigrationData?.destination_stack?.selectedStack?.value
     });
-
+    handleStepChange(2);
     const res = await updateCurrentStepData(selectedOrganisation?.value, projectId);
     if (res) {
       const url = `/projects/${projectId}/migration/steps/3`;

ui/src/components/LegacyCms/index.tsx

@@ -28,9 +28,10 @@ import { setMigrationData, setNewMigrationData, updateMigrationData } from '../.
 type LegacyCMSComponentProps = {
   legacyCMSData: any;
   projectData: MigrationResponse;
+  handleStepChange: (currentStep: number) => void;
 };
 
-const LegacyCMSComponent = ({ legacyCMSData, projectData }: LegacyCMSComponentProps) => {
+const LegacyCMSComponent = ({ legacyCMSData, projectData, handleStepChange }: LegacyCMSComponentProps) => {
 
   //react-redux apis
   const migrationData = useSelector((state:RootState)=>state?.migration?.migrationData);
@@ -59,14 +60,15 @@ const LegacyCMSComponent = ({ legacyCMSData, projectData }: LegacyCMSComponentPr
   };
 
   // handle on proceed to destination stack
-  const handleOnClick = async (event: MouseEvent) => {
+  const handleOnClick = async (event: MouseEvent,handleStepChange:any ) => {
     event.preventDefault();
 
     //Update Data in backend
     await updateLegacyCMSData(selectedOrganisation?.value, projectId, {
       legacy_cms: newMigrationData?.legacy_cms?.selectedCms?.cms_id
     });
     const res = await updateCurrentStepData(selectedOrganisation.value, projectId);
+    handleStepChange(1);
     if (res) {
       const url = `/projects/${projectId}/migration/steps/2`;
       navigate(url, { replace: true });
@@ -243,7 +245,7 @@ const LegacyCMSComponent = ({ legacyCMSData, projectData }: LegacyCMSComponentPr
                   <Button
                     version="v2"
                     disabled={!newMigrationData?.legacy_cms?.uploadedFile?.isValidated}
-                    onClick={handleOnClick}
+                    onClick={(e:any)=>{handleOnClick(e,handleStepChange)}}
                   >
                     {migrationData?.legacyCMSData?.cta}
                   </Button>

ui/src/components/Migrations/NewMigration/NewMigrationWrapper.tsx

@@ -1,10 +1,10 @@
 // Libraries
-import { lazy, useContext, useEffect, useState } from 'react';
-import { Navigate, Outlet, Params, useNavigate, useParams } from 'react-router';
-import { UseDispatch, useSelector } from 'react-redux';
+import { lazy, useEffect, useState, useRef } from 'react';
+import {  Outlet, Params, useNavigate, useParams } from 'react-router';
+import {  useSelector } from 'react-redux';
 
 //venus components
-import { PageLayout, Stepper } from '@contentstack/venus-components';
+import { Button, PageLayout, Stepper } from '@contentstack/venus-components';
 
 // Services
 import { getMigrationData } from '../../../services/api/migration.service';
@@ -15,8 +15,6 @@ import { getCMSDataFromFile } from '../../../cmsData/cmsSelector';
 import { CS_ENTRIES } from '../../../utilities/constants';
 import { isEmptyString, validateArray } from '../../../utilities/functions';
 
-// Context
-import { AppContext } from '../../../context/app/app.context';
 
 // Interface
 import {
@@ -36,7 +34,9 @@ import {
   defaultMigrationResponse
 } from '../../../services/api/service.interface';
 import { useDispatch } from 'react-redux';
-import { setMigrationData, updateMigrationData } from '../../../store/slice/migrationDataSlice';
+import {  updateMigrationData } from '../../../store/slice/migrationDataSlice';
+import HorizontalStepper from '../../Stepper/HorizontalStepper/HorizontalStepper';
+import { RootState } from '../../../store';
 
 const defaultStep = '1';
 
@@ -51,57 +51,60 @@ const MigrationExecutionComponentLazyLoaded = lazy(
   () => import('../../../components/MigrationExecution')
 );
 
-const getComponent = (
-  params: Params<string>,
-  projectData: MigrationResponse,
-  stepId = defaultStep
-) => {
-  switch (stepId) {
-    case '1': {
-      return (
-        <LegacyCMSComponentLazyLoaded
-          legacyCMSData={projectData?.legacy_cms}
-          projectData={projectData}
-        />
-      );
-    }
-    case '2': {
-      return (
-        <DestinationStackComponentLazyLoaded
-          destination_stack={projectData?.destination_stack_id}
-          org_id={projectData?.org_id}
-          projectData={projectData}
-        />
-      );
-    }
-    case '3': {
-      return <ContentMapperComponentLazyLoaded />;
-    }
-    case '4': {
-      return <TestMigrationComponentLazyLoaded />;
-    }
-    case '5': {
-      return <MigrationExecutionComponentLazyLoaded />;
-    }
 
-    default: {
-      const url = `/projects/${params?.projectId}/migration/steps/${defaultStep}`;
-      return <Navigate replace={true} to={url} />;
-    }
-  }
-};
+const createStepper = (projectData:any,handleStepChange: (currentStep: number) => void) => {
+  const steps = [
+    {
+      data: <LegacyCMSComponentLazyLoaded
+            legacyCMSData={projectData?.legacy_cms}
+            projectData={projectData}
+            handleStepChange={handleStepChange}/>,
+      id:'1',
+      title:'Legacy CMS'
+    },
+    {
+      data: <DestinationStackComponentLazyLoaded
+              destination_stack={projectData?.destination_stack_id}
+              org_id={projectData?.org_id}
+              projectData={projectData}
+              handleStepChange={handleStepChange}
+            />,
+      id:'2',
+      title:'Destination Stack'
+    },
+    {
+      data: <ContentMapperComponentLazyLoaded />,
+      id:'3',
+      title:'Content Mapping'
+    },
+    {
+      data: <TestMigrationComponentLazyLoaded />,
+      id:'4',
+      title:'Test Migration'
+    },
+    {
+      data: <MigrationExecutionComponentLazyLoaded />,
+      id:'5',
+      title:'Migration Execution'
+    },
+
+
+   ]
+   return steps;
+}
 
 const NewMigrationWrapper = () => {
   const params: Params<string> = useParams();
   const navigate = useNavigate();
   const dispatch = useDispatch();
+  const stepperRef = useRef<any>(null);
 
   const [showInfo, setShowInfo] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [projectData, setProjectData] = useState<MigrationResponse>(defaultMigrationResponse);
 
-  const migrationData = useSelector((state:any)=>state?.migration?.migrationData);
-  const selectedOrganisation = useSelector((state:any)=>state?.authentication?.selectedOrganisation);
+  const migrationData = useSelector((state: RootState)=>state?.migration?.migrationData);
+  const selectedOrganisation = useSelector((state: RootState)=>state?.authentication?.selectedOrganisation);
 
   //Fetch project data
   const fetchProjectData = async () => {
@@ -133,7 +136,7 @@ const NewMigrationWrapper = () => {
       ? data?.all_steps?.find((step: IFlowStep) => `${step.name}` === params?.stepId)
       : DEFAULT_IFLOWSTEP;
 
-    
+
     dispatch(updateMigrationData({
       allFlowSteps: data?.all_steps,
       currentFlowStep: currentFlowStep,
@@ -149,6 +152,14 @@ const NewMigrationWrapper = () => {
     navigate(`settings`);
   };
 
+  const handleClick = () => {
+
+    // Call handleStepChange function
+    const x : string | undefined= params.stepId 
+    const currentStep : number = parseInt(x || '');  
+    stepperRef?.current?.handleStepChange(currentStep-1);
+};
+
   useEffect(() => {
     fetchData();
   }, []);
@@ -158,32 +169,7 @@ const NewMigrationWrapper = () => {
   }, [params?.stepId, params?.projectId, selectedOrganisation.value]);
 
   const { settings, migration_steps_heading } = migrationData;
- const steps = [
-  {
-    data: ()=> { return (
-      <LegacyCMSComponentLazyLoaded
-        legacyCMSData={projectData?.legacy_cms}
-        projectData={projectData}
-      />
-    )},
-    id:'1',
-    title:'Legacy CMS'
-  }
- ]
-  const content = {
-    component: (
-      <>
-        {isLoading ? (
-          <></> // Consider using a loading indicator here
-        ) : (
-          <div className="action-component-body">
-            {getComponent(params, projectData, params?.stepId)}
-
-          </div>
-        )}
-      </>
-    )
-  };
+
 
   const leftSidebar = {
     component: (
@@ -248,13 +234,7 @@ const NewMigrationWrapper = () => {
         <div id="newMigration" className="layout-container migrations-container  p-0 d-flex w-100">
           <div className="step-flow-wrapper-content-area">
             <div className="step-component step-open trigger">
-              <PageLayout
-                content={content}
-                header={header}
-                leftSidebar={leftSidebar}
-                type="list"
-                version="v2"
-              />
+              <HorizontalStepper ref={stepperRef} steps={createStepper(projectData,handleClick)}/>
             </div>
           </div>
         </div>
@@ -263,4 +243,4 @@ const NewMigrationWrapper = () => {
   );
 };
 
-export default NewMigrationWrapper;
+export default NewMigrationWrapper;

ui/src/components/Stepper/HorizontalStepper/HorizontalStepper.scss

@@ -0,0 +1,105 @@
+@import '../../../scss/variables';
+
+.stepper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0px;
+  margin: 10px;
+  @media (max-width: 768px) {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+}   
+
+.stepWrapperContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  flex: 0.6;
+  margin: 0 ;
+
+}
+
+.stepWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+  z-index: 1;
+
+  &.completed .badge{
+    background-color:$color-brand-primary-base;
+  }
+  &.active .badge {
+    background-color: white;
+    border: 0.063rem solid $color-brand-primary-base;
+    color: #6E6B86;
+    width: 40px;
+    height: 40px;
+  }
+
+  .badge {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: white;
+    border: 0.063rem solid $color-brand-primary-base;
+    color: #6E6B86;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    margin-right: 0px;
+  }
+
+  .stepper-title {
+    margin-top: 8px;
+    text-align: center;
+    font-size: 14px;
+    overflow: hidden;
+    white-space: nowrap;
+
+  }
+  &.disableEvents{
+    cursor: not-allowed;
+    opacity: 1 !important; 
+    color: #475161 !important;
+  }
+}
+.stepWrapperContainer:has(.disableEvents) {
+  cursor: not-allowed;
+}
+
+.connector {
+  height: 4px;
+  background-color: $color-brand-primary-base;
+  flex-grow: 1;
+  margin: 0; 
+  margin-bottom: 30px;
+  border-radius: 4px;
+  margin-left: -40px;
+  margin-right: -40px;
+}
+
+.circle-title-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.icon-wrapper{
+  width: 16px;
+  height: 11px;
+}
+.disabled-connector{
+  background-color: $color-base-gray-40;
+  flex-grow: 1;
+  margin: 0; 
+  margin-bottom: 30px;
+  border-radius: 4px;
+  height: 4px;
+  margin-left: -40px;
+  margin-right: -40px;
+}