[CMG-90]

ui/src/components/LegacyCms/Actions/LoadSelectCms.tsx

@@ -52,7 +52,7 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => {
   /****  ALL METHODS HERE  ****/
 
   //Handle Legacy cms selection
-  const handleDirectSelection = (cms:any) => {
+  const handleDirectSelection = async (cms:any) => {   
 
     setSelectedCard(cms);
     updateNewMigrationData({
@@ -61,10 +61,11 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => {
         ...newMigrationData?.legacy_cms,
         selectedCms: cms }
     });
-    updateLegacyCMSData(selectedOrganisation?.value, projectId, { legacy_cms: cms?.cms_id });
-    if(selectedCard?.title){     
-      props?.handleStepChange(props?.currentStep);
-    }
+
+    await updateLegacyCMSData(selectedOrganisation?.value, projectId, { legacy_cms: cms?.cms_id });
+
+    props?.handleStepChange(props?.currentStep);
+
   };
 
  //Handle CMS Filter Updation in local storage.
@@ -89,14 +90,18 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => {
   const filterCMSData = async (searchText: string) => {
 
     const { all_cms = [] } = migrationData?.legacyCMSData || {};
-    const cmstype = cmsType // Fetch the specific CMS type
+
+    const res: any = await fileValidation();
+    const cms = res?.data?.file_details?.cmsType?.toLowerCase();  
+    setCmsType(cms);   
+    const cmstype = cms // Fetch the specific CMS type
 
     let filteredCmsData: ICMSType[] = [];
     if (isEmptyString(searchText) && !validateArray(cmsFilter) && !cmstype) {
       filteredCmsData = all_cms;
     } else {
-      if (cmstype) {
-        filteredCmsData = all_cms?.filter((cms: ICMSType) => cms?.cms_id === cmstype);
+      if (cmstype) {       
+        filteredCmsData = all_cms?.filter((cms: ICMSType) => cms?.cms_id === cmstype);        
       }
     }
 
@@ -116,11 +121,12 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => {
 
 
 
-    const newSelectedCard = filteredCmsData?.some((cms) => cms?.cms_id === cmstype)  ? filteredCmsData?.[0] : DEFAULT_CMS_TYPE
-      
+  const newSelectedCard = filteredCmsData?.some((cms) => cms?.cms_id === cmstype)  ? filteredCmsData?.[0] : DEFAULT_CMS_TYPE
+
    setSelectedCard(newSelectedCard);
+
 
-    if (newSelectedCard && selectedCard?.cms_id) {
+    if (newSelectedCard) {
       setSelectedCard(newSelectedCard);
 
       const newMigrationDataObj: INewMigration = {
@@ -151,21 +157,27 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => {
   }, [cmsFilter]);
 
   useEffect(()=>{
-   handleDirectSelection(selectedCard)
+    if(selectedCard?.title !== 'Drupal' && selectedCard?.title !== 'Sitecore'){
+     handleDirectSelection(selectedCard)
+    }
   },[cmsType,selectedCard]);
 
   useEffect(() => {
     const getCmsType = async () => {
       const res: any = await fileValidation();
-      const cmsType = res?.data?.file_details?.cmsType?.toLowerCase();
-      setCmsType(cmsType);
+      const cms = res?.data?.file_details?.cmsType?.toLowerCase();        
+      setCmsType(cms);
+      filterCMSData(cms);
       return cmsType;
     }; 
-  }, []); 
+    getCmsType();
+
+  }, [cmsType]); 
 
-  return (    
-    <div>
+  return (  
 
+    <div>  
+
       {(cmsType === 'sitecore' || cmsType === 'drupal') && (
         <div className="row bg-white action-content-wrapper p-3">
         <div className="col-12">
@@ -194,7 +206,7 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => {
               <Card
                 key={data?.title}
                 data={data}
-                onCardClick={()=>{return}}
+                onCardClick={handleDirectSelection}
                 selectedCard={selectedCard}
                 idField="cms_id"
               />
@@ -215,7 +227,7 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => {
       )}
       </div>
       </div>)}
-
+      
       {isEmptyString(newMigrationData?.legacy_cms?.selectedCms?.title) &&
         (<div className="col-12 bg-white p-3">
           <span className="summary-title">Please enter the correct CMS</span>

ui/src/components/Stepper/FlowStepper/FlowBlockItem.tsx

@@ -16,16 +16,19 @@ interface FlowBlockItemProps {
   isActive?: boolean;
   isCompleted?: boolean;
   step: IFlowStep;
-  onStepClick: (step: IFlowStep) => () => void;
+  onStepClick: (step: IFlowStep, isCompleted:boolean) => () => void;
 }
 
 const FlowBlockItem: FC<FlowBlockItemProps> = (props: FlowBlockItemProps) => {
+  //console.log("isComeplted : ", props?.isCompleted, props?.step);
+
   const [isHovered, setIsHovered] = useState<boolean>(false);
 
   const handleHoveredToggle = (flag: boolean) => () => {
     setIsHovered(flag);
   };
 
+
   return (
     <div className="ft-block-item" style={{ display: 'flex', flexDirection: 'row' }}>
       <div className="centered-flex-container step-name-icon">
@@ -38,9 +41,9 @@ const FlowBlockItem: FC<FlowBlockItemProps> = (props: FlowBlockItemProps) => {
             <span className="step_name_tested">{props?.step.name}</span>
             <Icon
               className="step_tested_check"
-              icon={props?.isCompleted || false ? 'CheckCircle' : 'WarningBold'}
+              icon={props?.isCompleted ? 'CheckCircle' : 'WarningBold'}
               version="v2"
-              stroke={props?.isCompleted || false ? 'none' : '#475161'}
+              stroke={props?.isCompleted  ? 'none' : '#475161'}
             ></Icon>
           </div>
         </Tooltip>
@@ -49,8 +52,8 @@ const FlowBlockItem: FC<FlowBlockItemProps> = (props: FlowBlockItemProps) => {
       <div
         onMouseEnter={handleHoveredToggle(true)}
         onMouseLeave={handleHoveredToggle(false)}
-        className={`ft-step-block-head ${props?.isActive ? 'ft-step-block-head-active' : ''} `}
-        onClick={props.onStepClick(props.step)}
+        className={`ft-step-block-head ${props?.isActive ? 'ft-step-block-head-active' : ''} ${!(props?.isCompleted || props?.isActive) ? 'ft-step-block-head-disabled' : ''} `}
+        onClick={props?.onStepClick(props?.step, props?.isCompleted || false)}
       >
         <div
           style={{

ui/src/components/Stepper/FlowStepper/FlowStepper.scss

@@ -72,7 +72,12 @@
   margin-left: -$space-10;
   min-height: 78px;
 }
-
+.ft-block-item:has(.ft-step-block-head-disabled){
+  cursor: not-allowed;
+}
+.ft-step-block-head-disabled{
+  pointer-events: none;
+}
 .ft-step-block-head-active:hover {
   background-color: white !important;
   cursor: pointer;

ui/src/components/Stepper/FlowStepper/FlowStepper.tsx

@@ -18,6 +18,7 @@ import FlowBlockItem from './FlowBlockItem';
 // Styles
 import './FlowStepper.scss';
 
+
 type IProp = {
   currentStep: number;
 };
@@ -26,29 +27,32 @@ const FlowStepper = ({ currentStep }: IProp) => {
   /** ALL HOOKS Here */
   const params = useParams();
   const navigate = useNavigate();
-  const { migrationData, updateMigrationData } = useContext(AppContext);
-
-  const onStepClick = (step: IFlowStep) => () => {
-    if (params.stepId === `${step.name}`) return;
+  const { migrationData, updateMigrationData, selectedOrganisation } = useContext(AppContext);
 
+  const onStepClick = (step: IFlowStep, isCompleted: boolean) => async() => {
+    if (params?.stepId === `${step?.name}`) return;  
+
     updateMigrationData({ currentFlowStep: step });
-    const url = `/projects/${params?.projectId}/migration/steps/${step.name}`;
+
+    const url = `/projects/${params?.projectId}/migration/steps/${step?.name}`;
 
-    navigate(url, { replace: true });
+    navigate(url, { replace: true }); 
+
   };
 
   return (
     <FlowBlock className={'ft-block'}>
       {validateArray(migrationData?.allFlowSteps) ? (
-        migrationData?.allFlowSteps?.map((step: IFlowStep) => (
+        migrationData?.allFlowSteps?.map((step: IFlowStep) => {
+          return(
           <FlowBlockItem
             onStepClick={onStepClick}
             step={step}
-            isActive={params.stepId === `${step.name}`}
-            key={step.flow_id}
-            isCompleted={currentStep > +step.name}
+            isActive={params?.stepId === `${step?.name}`}
+            key={step?.flow_id}
+            isCompleted={currentStep > +step?.name}
           />
-        ))
+        )})
       ) : (
         <></>
       )}

ui/src/components/Stepper/FlowStepper/flowStep.interface.ts

@@ -4,12 +4,14 @@ export interface IFlowStep {
   description: string;
   name: string;
   flow_id: string;
+  isCompleted: boolean
 }
 
 export const DEFAULT_IFLOWSTEP: IFlowStep = {
   title: 'Legacy CMS',
   description: '',
   name: '1',
   flow_id: '',
-  group_name: ''
+  group_name: '',
+  isCompleted:false
 };