Dev

ui/src/components/Card/card.scss

@@ -4,7 +4,6 @@
   background: $color-brand-white-base;
   border-radius: 0.6rem;
   border: 1px solid $color-brand-secondary-lightest;
-  margin: 0 20px 20px;
   transition: box-shadow 0.3s ease;
   width: 20rem;
 }

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/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';

ui/src/components/MainHeader/index.scss

@@ -2,7 +2,6 @@
 
 .mainheader {
   background-color: $color-brand-white-base;
-  // border-bottom: 1px solid $color-brand-secondary-lightest;
   height: 3.5rem;
   justify-content: space-between;
   position: fixed;
@@ -34,40 +33,39 @@
   .organisationWrapper {
     margin-left: 1.063rem;
     &:focus {
-      box-shadow: 0 0 1px $color-brand-primary-base, 0 0 0 4px #bbb4f4;
+      box-shadow: none;
     }
   } 
+  .Dropdown {
+    &:focus {
+      box-shadow: none;
+    }
+  }
   .Dropdown-wrapper {
     padding: 0 18px;
   }
-  .Dropdown__header__value {
-    overflow: visible;
-    line-height: 1.2;
-  }
-  .Dropdown__header__label {
-    margin-bottom: 0;
-  }
   .Dropdown.Dropdown--hover .Dropdown__menu--primary {
     top: 2.5rem;
   }
   .organisationWrapper {
+    &:focus {
+      box-shadow: none;
+    }
     .Dropdown__header__value {
       color: #475161;
       max-width: 11.1875rem;
       width: auto;
-      // overflow: hidden;
+      color: $color-black-222 !important;
+      line-height: $line-height-reset;
     }
     .Dropdown__menu--primary .Dropdown__menu__list__item,
     .Dropdown__menu--secondary .Dropdown__menu__list__item,
     .Dropdown__menu--tertiary .Dropdown__menu__list__item {
       max-width: 14.5rem;
     }
+    .Dropdown__header__label {
+      line-height: $line-height-reset;
+      margin-bottom: 8px;
+    }
   }
 }
-.Dropdown__header__label {
-  line-height: $line-height-reset;
-}
-.Dropdown__header__value {
-  color: $color-black-222 !important;
-  line-height: $line-height-reset;
-}

ui/src/pages/Migration/index.tsx

@@ -141,7 +141,6 @@ const Migration = () => {
      ]
      return steps;
   }
-
   const handleClick = () => {
 
     // Call handleStepChange function
@@ -197,7 +196,7 @@ const Migration = () => {
     const handleOnClickDestinationStack = async (event: MouseEvent) => {
       setIsLoading(true);
 
-      if(isCompleted){
+      if(isCompleted && !isEmptyString(newMigrationData?.destination_stack?.selectedStack?.value)){
         event?.preventDefault();
         //Update Data in backend
         await updateDestinationStack(selectedOrganisation?.value, projectId, {
@@ -207,11 +206,11 @@ const Migration = () => {
         const res = await updateCurrentStepData(selectedOrganisation?.value, projectId);
         if (res) {
           setIsLoading(false);
-
           const url = `/projects/${projectId}/migration/steps/3`;
           navigate(url, { replace: true });
         }
       } else{
+        setIsLoading(false);
         Notification({
           notificationContent: { text: 'Please complete all steps' },
           type: 'warning'