refactor:legacy cms step

ui/src/components/Common/Card/card.tsx

@@ -62,18 +62,14 @@ const Card = ({ data, selectedCard, onCardClick, cardType, idField = 'id' }: Car
           top: '-5px'
         }}
       >
-        {isHovered || selectedCard[idField] === data[idField] ? (
-          <Radio checked={selectedCard?.id === data.id} disabled={!isHovered} />
+        {isHovered || selectedCard[idField] === data?.[idField] ? (
+          <Radio checked={selectedCard?.id === data?.id} disabled={!isHovered} />
         ) : (
           <></>
         )}
       </span>
 
       <div className="service_icon">
-        {/* <img
-          src={addDomainInPath(`images/${data?.group_name ?? 'lightning'}.png`)}
-          style={imgStyle}
-        /> */}
       </div>
       <div className="centered-card-title">
         <WordWrapper tooltipcontent={data.title} text={data.title} maxLength={12} position="top" />

ui/src/components/ContentMapper/index.tsx

@@ -129,7 +129,7 @@ const ContentMapper = () => {
       action_cta: actionCta,
       cta,
       search_placeholder: searchPlaceholder
-    }
+    }= {}
   } = migrationData;
 
   const parseDescription = HTMLReactParser(jsonToHtml(description ?? {}));

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

@@ -1,7 +1,7 @@
 // Libraries
-import { ChangeEvent, useContext, useEffect, useState } from 'react';
+import { ChangeEvent, useEffect, useState } from 'react';
 import { useParams } from 'react-router';
-import { Button, Icon, TextInput } from '@contentstack/venus-components';
+import { Icon, TextInput } from '@contentstack/venus-components';
 import { useDispatch, useSelector } from 'react-redux';
 
 // Utilities
@@ -15,14 +15,9 @@ import {
 
 // Interface
 import { ICardType, defaultCardType } from '../../../components/Common/Card/card.interface';
-import { INewMigration } from '../../../context/app/app.interface';
 
-// Context
-import { AppContext } from '../../../context/app/app.context';
 
 // Components
-import Card from '../../../components/Common/Card/card';
-import DocLink from '../../../components/Common/DocLink/DocLink';
 import { RootState } from '../../../store';
 import { updateNewMigrationData } from '../../../store/slice/migrationDataSlice';
 
@@ -49,7 +44,6 @@ const LoadFileFormat = (props: LoadFileFormatProps) => {
   const { projectId = '' } = useParams();
   const { allowed_file_formats = [], doc_url = { href: '', title: '' } } =
     newMigrationData?.legacy_cms?.selectedCms || {};
-
 
   /****  ALL METHODS HERE  ****/
 
@@ -109,37 +103,11 @@ const LoadFileFormat = (props: LoadFileFormatProps) => {
 
   return (
     <div className="row">
-      {/* <DocLink
-        cta={doc_url}
-        isCheckedBoxChecked={isCheckedBoxChecked}
-        label={file_format_checkbox_text}
-        onChange={handleCheckBoxChange}
-        isDisable={false}
-      /> */}
-      <div className="col-12 pb-2 p-3">
-        <span className="stepper-discription">
-          Following is the file format in which data is exported from your current CMS
-        </span>
-      </div>
       <div className="p-3">
         <div className="service_list">
           {validateArray(allowed_file_formats) ? (
             allowed_file_formats?.map((data: ICardType, index: number) => (
-
-
-              // <Card
-              //   key={data?.fileformat_id || index}
-              //   data={data}
-              //   selectedCard={data?.fileformat_id}
-              //   idField="fileformat_id"
-              //   onCardClick={() => {
-              //     return;
-              //   }}
-              // />
-
-
-              <div key={data?.fileformat_id || index}>
-
+              <div key={data?.fileformat_id || index}>             
                 <TextInput
                 value={data?.fileformat_id}
                 version="v2"              
@@ -158,11 +126,6 @@ const LoadFileFormat = (props: LoadFileFormatProps) => {
           )}
         </div>
       </div>
-      {/* <div className="col-12 pt-3 pl-0">
-        <Button version="v2" disabled={!isCheckedBoxChecked} onClick={handleBtnClick}>
-          {migrationData?.legacyCMSData?.file_format_cta}
-        </Button>
-      </div> */}
     </div>
   );
 };

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

@@ -17,14 +17,11 @@ import { DEFAULT_URL_TYPE, INewMigration } from '../../../context/app/app.interf
 import '../legacyCms.scss';
 import { Icon, TextInput } from '@contentstack/venus-components';
 import { useDebouncer } from '../../../hooks';
-import DocLink from '../../../components/Common/DocLink/DocLink';
 import { RootState } from '../../../store';
 import { updateNewMigrationData } from '../../../store/slice/migrationDataSlice';
 
 //import restricted keywords
 import restrictedKeywords from '../restrictedKeywords.json';
-import { set } from 'mongoose';
-
 
 interface LoadSelectCmsProps {
   stepComponentProps: any;
@@ -156,15 +153,7 @@ const LoadPreFix = (props: LoadSelectCmsProps) => {
 
   return (
     <div className=" p-3">
-      {/* <DocLink
-        cta={restricted_keyword_link}
-        isCheckedBoxChecked={isCheckedBoxChecked}
-        label={restricted_keyword_checkbox_text}
-        onChange={handleCheckBoxChange}
-        isDisable={false}
-      /> */}
-
-      <div className="col-12 pb-2">
+      <div className="col-12">
         <TextInput
           onChange={(e:any)=>{handleOnChange(e)}}
           value={prefix}
@@ -185,11 +174,6 @@ const LoadPreFix = (props: LoadSelectCmsProps) => {
           <span> {restricted_keyword_link?.title}</span>
         </a>
       </div>}
-      {/* <div className="col-12 pt-2">
-        <Button version="v2" disabled={!isCheckedBoxChecked} onClick={handleOnBlur}>
-          {migrationData?.legacyCMSData?.affix_cta}
-        </Button>
-      </div> */}
     </div>
   );
 };

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

@@ -5,7 +5,7 @@ import { useDispatch, useSelector } from 'react-redux';
 
 // Service
 import { updateLegacyCMSData } from '../../../services/api/migration.service';
-import { fileValidation, getConfig } from '../../../services/api/upload.service';
+import { getConfig } from '../../../services/api/upload.service';
 
 // Utilities
 import { isEmptyString, validateArray } from '../../../utilities/functions';
@@ -17,7 +17,7 @@ import { DEFAULT_CMS_TYPE, ICMSType, INewMigration } from '../../../context/app/
 
 // Components
 import Card from '../../../components/Common/Card/card';
-import { EmptyState, Line, Search } from '@contentstack/venus-components';
+import { EmptyState } from '@contentstack/venus-components';
 
 // Style
 import '../legacyCms.scss';
@@ -46,16 +46,13 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => {
   const [cmsFilterStatus, setCmsFilterStatus] = useState<IFilterStatusType>({});
   const [cmsFilter, setCmsFilter] = useState<string[]>([]);
   const [cmsType, setCmsType] = useState<ICMSType>(
-    newMigrationData?.legacy_cms?.selectedCms 
+    newMigrationData?.legacy_cms?.selectedCms || defaultCardType
   );
   const [selectedCard, setSelectedCard] = useState<ICMSType>(
-    newMigrationData?.legacy_cms?.selectedCms 
+    newMigrationData?.legacy_cms?.selectedCms || defaultCardType
   );
   const [errorMessage, setErrorMessage] = useState<string>('');
-  const [isError, setIsError] = useState<boolean>(false);
-
-
-
+  const [isError, setIsError] = useState<boolean>(false); 
 
   const { projectId = '' } = useParams();
 
@@ -64,9 +61,9 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => {
   //Handle Legacy cms selection
   const handleCardClick = async(data: ICMSType) => {
 
-    const isSingleMatch = cmsData.length === 1;
+    const isSingleMatch = cmsData.length === 1; 
 
-    if (isSingleMatch || selectedCard?.title !== data?.title) {
+    if (isSingleMatch || selectedCard?.cms_id !== data?.cms_id) {
       setSelectedCard({ ...data });
 
       const newMigrationDataObj: INewMigration = {
@@ -83,7 +80,7 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => {
       const res = await updateLegacyCMSData(selectedOrganisation.value, projectId, { legacy_cms: data?.cms_id });
 
       // Call for Step Change
-      props.handleStepChange(props.currentStep, true);
+      props?.handleStepChange(props?.currentStep, true);
     }
   };
 
@@ -97,7 +94,8 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => {
         ...newMigrationData?.legacy_cms,
         selectedCms: cms
       }
-    }))
+    }));
+
     const res = await updateLegacyCMSData(selectedOrganisation.value, projectId, { legacy_cms: cms});
 
     if (!isEmptyString(cms?.title)) {
@@ -135,14 +133,13 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => {
     if(isEmptyString(cmsType?.cms_id)){
       setCmsType(cms);
     }
-
+    
     const cmstype = !isEmptyString(cmsType?.cms_id) ? cmsType?.parent : cms; // Fetch the specific CMS type
 
     let filteredCmsData = all_cms;
     if (cmstype) {
       filteredCmsData = all_cms.filter((cms: ICMSType) => cms?.parent?.toLowerCase() === cmstype?.toLowerCase());
     }
-
 
     setCmsData(filteredCmsData)
 
@@ -157,18 +154,17 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => {
       : [];
 
     setCmsData(_filterCmsData);
-
 
-
     let newSelectedCard: ICMSType | undefined;
-
-    if (_filterCmsData.length === 1) {
+    
+    if (filteredCmsData?.length === 1) {
       newSelectedCard = filteredCmsData[0];
     } else {
-      newSelectedCard = filteredCmsData.find((cms: ICMSType) => cms?.parent.toLowerCase() === cmstype.toLowerCase());
+      newSelectedCard = DEFAULT_CMS_TYPE;
     }
+
 
-    if (newSelectedCard) {
+    if (!isEmptyString(newSelectedCard?.title)) {
       setSelectedCard(newSelectedCard);
       setErrorMessage('');
       setIsError(false);
@@ -182,10 +178,6 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => {
       };
 
       dispatch(updateNewMigrationData(newMigrationDataObj));
-
-    }else{
-      setIsError(true);
-      setErrorMessage('No matching CMS found. Please try a different search term.');
     }
   };
 
@@ -198,28 +190,10 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => {
     filterCMSData(searchText);
   }, [cmsFilter]);
 
-  // useEffect(() => {
-  //   if (selectedCard?.title !== 'Drupal' && selectedCard?.title !== 'Sitecore') {
-  //     handleDirectSelection(selectedCard);
-  //   }
-  // }, [cmsType, selectedCard]);
 
   return (
     <div>
       <div className="col-12">
-        {/* <div className="service_list_search">
-          <Search
-            className="service_list_search_bar"
-            width="full"
-            placeholder="Search for CMS"
-            debounceSearch
-            onClear
-            version="v2"
-            type="secondary"
-            onChange={(text: string) => setSearchText(text?.toLowerCase())}
-          />
-        </div>
-        <Line type="solid" /> */}
         <div className="p-3 col-12">
           { isError ? 
             <div className="empty_search_description">
@@ -232,7 +206,7 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => {
           (
             cmsData && validateArray(cmsData) && (
             <div className="service_list">
-              {cmsData.map((data: ICMSType) => (
+              {cmsData?.map((data: ICMSType) => (
                 <Card
                   key={data?.title}
                   data={data}