Dev

ui/src/cmsData/legacyCms.json

@@ -350,7 +350,7 @@
         "uid": "cs7c935e15de9ea7c8"
       },
       "title": "File Format",
-      "description": "Click to read the document and subsequently continue with migration process.",
+      "description": "The file format compatible with the above cms is as follows.",
       "step_lock_text": "Editing this step is currently disabled. To make changes in Draft mode, please deactivate the migration.",
       "lock": false,
       "active": true,
@@ -362,7 +362,7 @@
         "uid": "cs0279f1f0ce13e83e"
       },
       "title": "Imported File",
-      "description": "Select File to upload CMS Data.",
+      "description": "The uploaded file is as follows.",
       "step_lock_text": "Editing this step is currently disabled. To make changes in Draft mode, please deactivate the migration.",
       "lock": false,
       "active": true,

ui/src/components/Card/index.tsx

@@ -58,7 +58,7 @@ const CardList = ({ project }: ProjectType) => {
   }, [selectedOrganisation?.value, project?.id]);
 
   return (
-    <div style={{ padding: '0 20px 20px 0' }}>
+    <div style={{ margin: '0 20px 20px 0' }}>
       <div onClick={() => onClickProject(project?.id || '')}>
         <div className="ProjectCard">
           <div className='ProjectCardWrapper'>

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

@@ -1,4 +1,4 @@
-import { Icon, Radio, Tooltip } from '@contentstack/venus-components';
+import { Icon, Paragraph, Radio, Tooltip } from '@contentstack/venus-components';
 import { MouseEvent, useState } from 'react';
 import WordWrapper from '../WordWrapper/WordWrapper';
 import { addDomainInPath } from '../../../utilities/functions';
@@ -72,7 +72,7 @@ const Card = ({ data, selectedCard, onCardClick, cardType, idField = 'id' }: Car
       <div className="service_icon">
       </div>
       <div className="centered-card-title">
-        <WordWrapper tooltipcontent={data.title} text={data.title} maxLength={12} position="top" />
+        <Paragraph variantStyle={'bold'} variant={'p2'} text={data.title}/>
       </div>
     </div>
   );

ui/src/components/ContentMapper/index.scss

@@ -66,7 +66,8 @@
 }
 .dropdown-align {
   .Dropdown__menu--primary {
-    right: 0.25rem;
+    right: 0;
+    top: 1.5rem;
   }       
 }
 .content-type-list {

ui/src/components/ContentMapper/index.tsx

@@ -18,8 +18,6 @@ import {
   ModalFooter,
   Dropdown
 } from '@contentstack/venus-components';
-import { jsonToHtml } from '@contentstack/json-rte-serializer';
-import HTMLReactParser from 'html-react-parser';
 
 // Services
 import { getCMSDataFromFile } from '../../cmsData/cmsSelector';
@@ -29,7 +27,6 @@ import {
   getExistingContentTypes,
   updateContentType,
   resetToInitialMapping,
-  createTestStack,
   fetchExistingContentType
 } from '../../services/api/migration.service';
 import { getStackStatus } from '../../services/api/stacks.service';
@@ -512,6 +509,7 @@ const ContentMapper = () => {
       return row;
     });
     setTableData(updatedRows);
+    setSelectedEntries(updatedRows);
   };
 
   const handleDropDownChange = (value: FieldTypes) => {
@@ -630,6 +628,7 @@ const ContentMapper = () => {
     });
 
     setTableData(updatedRows as FieldMapType[]);
+    setSelectedEntries(updatedRows as FieldMapType[]);
   };
 
   const SelectAccessorOfColumn = (data: FieldMapType) => {
@@ -1007,7 +1006,6 @@ const ContentMapper = () => {
 
                   {active == index && (
 
-                    <span>
                       <Dropdown
                         // version="v2"
                         list={[
@@ -1018,21 +1016,20 @@ const ContentMapper = () => {
                           }
                         ]}
                         type="click"
-                        isEllipse
+                        withIcon
                         dropDownPosition="left"
                         className='dropdown-align'
                       >
-                        <Icon icon="Settings" size="small" version="v2" />
+                        <Icon icon="DotsThreeLargeVertical" version="v2" />
                       </Dropdown>
-                      {/* <Tooltip content={'Schema Preview'} position="left">
+                      /* <Tooltip content={'Schema Preview'} position="left">
                         <Icon
                           icon="LivePreview"
                           size="small"
                           version="v2"
                           onClick={() => handleOnClick(content?.otherCmsTitle)}
                         />
-                      </Tooltip> */}
-                    </span>
+                      </Tooltip> */
                   )}
                 </li>
               ))}
@@ -1106,88 +1103,16 @@ const ContentMapper = () => {
             <div className='text-end my-3 mx-3 px-1'>
               <Button
                   className="saveButton"
-                  size="small"
+                  size="medium"
                   buttonType="secondary"
                   onClick={handleSaveContentType}
                 >
                 Save
               </Button>
             </div>
           </div>
-
-
-
-          {/* {actionCta && validateArray(actionCta) && (
-            <ButtonGroup className="action-btn-wrapper">
-              <div
-                className="IconStoriesWrapper"
-                style={{
-                  columns: '4'
-                }}
-              >
-                <div className="flex pt-10 pb-10 hover:text-purple-400" style={{ columnGap: 20 }}>
-                  {currentIndex > 0 && (
-                    <span
-                      onClick={handlePrevClick}
-                      className="cursor-pointer"
-                      title="Previous Content Type"
-                    >
-                      <Icon icon="Left" size="tiny" hover={true} />
-                      {prevButtonLabel}
-                    </span>
-                  )}
-                </div>
-              </div>
-              <div className="d-flex">
-                <Button
-                  className="saveButton"
-                  size="medium"
-                  buttonType="secondary"
-                  onClick={handleSaveContentType}
-                >
-                  Save
-                </Button>
-
-                <div
-                  className="IconStoriesWrapper"
-                  style={{
-                    columns: '4'
-                  }}
-                >
-                  <div
-                    className="justify-content-end flex pt-10 pb-10 hover:text-purple-400"
-                    style={{ columnGap: 20 }}
-                  >
-                    {currentIndex < contentTypes.length - 1 && (
-                      <span
-                        onClick={handleNextClick}
-                        className="cursor-pointer"
-                        title="Next Content Type"
-                      >
-                        {nextButtonLabel}
-                        <Icon icon="Right" size="tiny" hover={true} />
-                      </span>
-                    )}
-                  </div>
-                </div>
-              </div>
-            </ButtonGroup>
-          )} */}
         </div>
       </div>
-
-      {/* {cta?.title && (
-        <div className="cta-wrapper">
-          <Button
-            buttonType={cta?.theme}
-            isLoading={isButtonLoading}
-            disabled={isDropDownChanged}
-            onClick={handleValidateOnClick}
-          >
-            {cta?.title}
-          </Button>
-        </div>
-      )} */}
     </div>
   );
 };

ui/src/components/DestinationStack/Actions/LoadStacks.tsx

@@ -46,7 +46,7 @@ const LoadStacks = (props: LoadFileFormatProps) => {
   const { projectId = '' }: Params<string> = useParams();
 
   useEffect(()=>{
-    if(! isEmptyString(newMigrationData?.destination_stack?.selectedStack?.value)){
+    if(!isEmptyString(newMigrationData?.destination_stack?.selectedStack?.value)){
       setSelectedStack(newMigrationData?.destination_stack?.selectedStack);
     }
   },[newMigrationData?.destination_stack?.selectedStack])
@@ -110,11 +110,9 @@ const LoadStacks = (props: LoadFileFormatProps) => {
   };
 
   /****  ALL METHODS HERE  ****/
-
   const [placeholder, setPlaceholder] = useState('Select a stack');
   //Handle Legacy cms selection
   const handleDropdownChange = (name: string) => (data: IDropDown) => {
-    const stackChanged = selectedStack?.value !== data?.value;
     const stackCleared = data?.value === '' || data?.value === null || data === null;
     if (data?.value == '+ Create a new Stack') {
       handleCreateNewStack()
@@ -135,7 +133,6 @@ const LoadStacks = (props: LoadFileFormatProps) => {
         }
       };
 
-
       dispatch(updateNewMigrationData((newMigrationDataObj)));
       if (!stackCleared) {
         if (props?.handleStepChange) {
@@ -161,7 +158,6 @@ const LoadStacks = (props: LoadFileFormatProps) => {
           created_at: stack?.created_at
         }))
       : [];
-
     stackArray.sort(
       (a: IDropDown, b: IDropDown) =>
         new Date(b?.created_at)?.getTime() - new Date(a?.created_at)?.getTime()
@@ -218,12 +214,8 @@ const LoadStacks = (props: LoadFileFormatProps) => {
 
   const loadMoreOptions: any = async ({
     search,
-    skip,
-    limit
   }: {
     search: string;
-    skip: number;
-    limit: number;
   }) => {
     const stackData = await getAllStacksInOrg(
       selectedOrganisation?.value, search
@@ -282,6 +274,9 @@ const LoadStacks = (props: LoadFileFormatProps) => {
 
     return { options: stackArray };
   };
+
+  const emptyStackValue = selectedStack?.value === undefined || selectedStack?.value === '' || selectedStack?.value === null
+
   const onBlurDropdown = () => {
     if (!isEmptyString(selectedStack?.value)) {
       if (props?.handleStepChange) {
@@ -303,15 +298,17 @@ const LoadStacks = (props: LoadFileFormatProps) => {
                     onBlur={onBlurDropdown}
                     canEditOption={true}
                     value={selectedStack}
-                    isClearable={true}
                     isSearchable={true}
+                    isClearable={!emptyStackValue ? true : false }
                     width="600px"
                     isDisabled={props?.stepComponentProps?.isSummary || false}
                     placeholder={placeholder}
                     limit={10}
                     updateOption={()=> undefined}
+                    error={emptyStackValue ? true : false}
                   />
                 </div>
+                {emptyStackValue && <div className='errorMessage'>Please select a stack</div>}
             </div>
             <div className="col-12">
               <label className="title">Master Locale</label>

ui/src/components/DestinationStack/DestinationStack.scss

@@ -27,8 +27,8 @@
 }
 .Dropdown-wrapper {
   .css-b8ldur-Input {
-    // border: 1px solid red;
-    cursor: not-allowed;
+   margin: 0;
+   padding: 0;
   }
 }
 .stackselect {
@@ -107,6 +107,10 @@
         padding: 0 !important;
       }
     }
+    .errorMessage {
+      color: $color-brand-warning-medium;
+      font-size: $size-font-small;
+    }
 
 
   }

ui/src/components/DestinationStack/index.tsx

@@ -2,7 +2,6 @@ import { useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import AutoVerticalStepper from '../Stepper/VerticalStepper/AutoVerticalStepper';
 import { getDestinationStackSteps } from './StepperSteps';
-import { useNavigate, useParams } from 'react-router-dom';
 import { CircularLoader } from '@contentstack/venus-components';
 import { CS_ENTRIES } from '../../utilities/constants';
 import {
@@ -15,10 +14,6 @@ import './DestinationStack.scss';
 import { isEmptyString, validateArray } from '../../utilities/functions';
 import { getAllStacksInOrg } from '../../services/api/stacks.service';
 import { MigrationResponse, StackResponse } from '../../services/api/service.interface';
-// import {
-//   updateCurrentStepData,
-//   updateDestinationStack
-// } from '../../services/api/migration.service';
 import { getCMSDataFromFile } from '../../cmsData/cmsSelector';
 import { RootState } from '../../store';
 import { updateMigrationData, updateNewMigrationData } from '../../store/slice/migrationDataSlice';
@@ -220,6 +215,7 @@ const DestinationStackComponent = ({
             description={migrationData?.destinationStackData?.description}
             ref={autoVerticalStepperComponent}
             isEdit={!isMigrationLocked}
+            isRequired={false}
             handleOnAllStepsComplete={handleAllStepsComplete}
           />
         </div>

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

@@ -101,7 +101,7 @@ const LoadFileFormat = (props: LoadFileFormatProps) => {
 
   return (
     <div className="row">
-        <div className="service_list">
+        <div className="service_list_legacy">
           {validateArray(allowed_file_formats) ? (
             allowed_file_formats?.map((data: ICardType, index: number) => (
               <div key={data?.fileformat_id || index}>             

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

@@ -204,7 +204,7 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => {
            :
           (
             cmsData && validateArray(cmsData) && (
-            <div className="service_list">
+            <div className="service_list_legacy">
               {cmsData?.map((data: ICMSType) => (
                 <Card
                   key={data?.title}

ui/src/components/LegacyCms/index.tsx

@@ -237,6 +237,7 @@ const LegacyCMSComponent = forwardRef(({ legacyCMSData, projectData, isCompleted
                   migrationData?.legacyCMSData?.all_steps
                 )}
                 isEdit={!isMigrationLocked}
+                isRequired={true}
                 handleOnAllStepsComplete={handleAllStepsComplete}
                 stepComponentProps={{
                   handleDeleteFile: handleOnClickDeleteUploadedFile

ui/src/components/LegacyCms/legacyCms.scss

@@ -1,10 +1,10 @@
 @import '../../scss/variables';
-.service_list {
+.service_list_legacy {
   text-align: center;
   display: flex;
   flex-wrap: wrap;
-  gap: 12px;
-  margin: 20px 20px !important;
+  gap: 12px ;
+  margin: 20px 20px ;
 }
 
 .pl-40 {
@@ -105,6 +105,7 @@
 }
 .validation-cta{
   margin: $space-24 $space-20 0;
+  line-height: 24px;
 }
 .success{
   color: $color-brand-success-base;