Test Migration UI changes

ui/src/components/ContentMapper/index.tsx

@@ -1974,7 +1974,7 @@ const ContentMapper = forwardRef((props, ref: React.ForwardedRef<ContentTypeSave
                 plural: `${totalCounts === 0 ? 'Count' : ''}`
               }}
             />
-            <div className='text-end my-3 mx-3 px-1'>
+            <div className='text-end my-2 mx-3 px-1 py-1'>
               <Button
                   className="saveButton"
                   onClick={handleSaveContentType}

ui/src/components/MigrationFlowHeader/index.tsx

@@ -1,25 +1,16 @@
 // Libraries
 import { useEffect, useState } from 'react';
-import { Button, cbModal } from '@contentstack/venus-components';
-import { useDispatch, useSelector } from 'react-redux';
+import { Button } from '@contentstack/venus-components';
+import { useSelector } from 'react-redux';
 import { Params, useNavigate, useParams } from 'react-router';
 
-// Redux files
-import {  updateNewMigrationData } from '../../store/slice/migrationDataSlice';
-
-// Service
-import { getProject } from '../../services/api/project.service';
+import { RootState } from '../../store';
 
 // Interfaces
-import { DEFAULT_NEW_MIGRATION } from '../../context/app/app.interface';
-import { ModalObj } from '../Modal/modal.interface';
 import { MigrationResponse } from '../../services/api/service.interface';
 
 // CSS
 import './index.scss';
-import NotificationModal from '../Common/NotificationModal';
-import { isEmptyString } from '../../utilities/functions';
-import { RootState } from '../../store';
 
 type MigrationFlowHeaderProps = {
   handleOnClick: (event: MouseEvent, handleStepChange: (currentStep: number) => void) => void;
@@ -29,84 +20,41 @@ type MigrationFlowHeaderProps = {
   projectData:MigrationResponse
 };
 
-const MigrationFlowHeader = ({projectData, handleOnClick, isLoading, isCompleted , legacyCMSRef}: MigrationFlowHeaderProps) => {
+const MigrationFlowHeader = ({projectData, handleOnClick, isLoading }: MigrationFlowHeaderProps) => {
   const [projectName, setProjectName] = useState('');
   const [currentStep, setCurrentStep] = useState<number>(0);
 
   const navigate = useNavigate();
   const params: Params<string> = useParams();
-  const dispatch = useDispatch();
-
-  const selectedOrganisation = useSelector((state:any)=>state?.authentication?.selectedOrganisation);
-  const newMigrationData = useSelector((state:RootState)=> state?.migration?.newMigrationData);
 
-  //const legacyCMSRef = useRef<any>(null);
+  const selectedOrganisation = useSelector((state: RootState)=>state?.authentication?.selectedOrganisation);
 
   useEffect(() => {
     fetchProject();
   }, [selectedOrganisation?.value, params?.projectId]);
 
   /******** Function to get project  ********/
   const fetchProject = async () => {
-    //const response = await getProject(selectedOrganisation?.value || '', params?.projectId || '');
+    setProjectName(projectData?.name);
+    setCurrentStep(projectData?.current_step);
 
-    //if (response?.status === 200) {
-      setProjectName(projectData?.name);
-      setCurrentStep(projectData?.current_step);
-
-      //Navigate to lastest or active Step
-      const url = `/projects/${params?.projectId}/migration/steps/${projectData.current_step}`;
-      navigate(url, { replace: true });
-   // }
+    //Navigate to lastest or active Step
+    const url = `/projects/${params?.projectId}/migration/steps/${projectData?.current_step}`;
+    navigate(url, { replace: true });
   };
 
-  const backNavigation = () => {
-
-    const goback = () => {
-      dispatch(updateNewMigrationData(DEFAULT_NEW_MIGRATION))
-      navigate(-1);
-    }
-
-
-    if (legacyCMSRef.current) {
-      const currentIndex = legacyCMSRef.current.getInternalActiveStepIndex() + 1 ; 
-
-      if(-1 < currentIndex && currentIndex < 4 && ( !isEmptyString(newMigrationData?.legacy_cms?.selectedCms?.cms_id) || !isEmptyString(newMigrationData?.legacy_cms?.affix) )&& currentStep === 1
-        ){
-        return cbModal({
-          component: (props: ModalObj) => (
-            <NotificationModal
-            goBack={goback}
-            {...props}
-            isopen={false}
-            />
-          ),
-          modalProps: {
-            size: 'xsmall',
-            shouldCloseOnOverlayClick: false
-          }
-        });
-      }
-    }
-
-    dispatch(updateNewMigrationData(DEFAULT_NEW_MIGRATION))
-    navigate(-1);
+  let stepValue;
+  if (params?.stepId === '3' || params?.stepId === '4') {
+    stepValue = 'Continue';
+  } else if (params?.stepId === '5') {
+    stepValue = 'Start';
+  } else {
+    stepValue = 'Save and Continue';
   }
 
   return (
     <div className='d-flex align-items-center justify-content-between migration-flow-header'>
       <div className='d-flex align-items-center'>
-        {/* <Button 
-          aria-label='Go back'
-          buttonType="secondary"
-          icon="v2-LeftArrow"
-          iconAlignment="left"
-          size="large"
-          version="v2"
-          className="back-btn"
-          onlyIconHoverColor="secondary"
-          onClick={backNavigation}
-        /> */}
         { projectName && <h1>{projectName}</h1> }
       </div>
 
@@ -118,7 +66,7 @@ const MigrationFlowHeader = ({projectData, handleOnClick, isLoading, isCompleted
         aria-label='Save and Continue'
         isLoading={isLoading}
       >
-        {params?.stepId === '3' || params?.stepId === '4' ? 'Continue' : params?.stepId === '5' ? 'Start' : 'Save and Continue'}
+        {stepValue}
       </Button>
     </div>
   )

ui/src/components/TestMigration/index.tsx

@@ -1,7 +1,10 @@
 import { useEffect, useState } from 'react';
-import { Field, FieldLabel, TextInput, Link, Icon, Tooltip } from '@contentstack/venus-components';
+import { Field, FieldLabel, TextInput, Link, Icon, Tooltip, Button } from '@contentstack/venus-components';
 import { useSelector } from 'react-redux';
 
+// Redux files
+import { RootState } from '../../store';
+
 // Services
 import { getCMSDataFromFile } from '../../cmsData/cmsSelector';
 
@@ -20,7 +23,7 @@ import './index.scss';
 const TestMigration = () => {
   const [data, setData] = useState<MigrationType>({});
 
-  const newMigrationData = useSelector((state:any)=>state?.migration?.newMigrationData);
+  const newMigrationData = useSelector((state: RootState)=>state?.migration?.newMigrationData);
 
 
   /********** ALL USEEFFECT HERE *************/
@@ -39,40 +42,59 @@ const TestMigration = () => {
       <div className='content-block'>
         <div className='content-header text-uppercase'>UID</div>
         <div className='content-body'>
-          <p>Select your current Content Management system from the available options.</p>
-          <Field
-            id="stack"
-            name="stack"
-            className='pt-4'
+          <p>Test Migration is a step where some content types are migrated in a test stack for review. A user can verify the stack and data. If the data is migrated properly then it can proceed with the final Migration Execution process.</p>
+          <Button
+            className="mt-3"
+            // onClick={handleSaveContentType}
+            version="v2"
+            // size="medium"
           >
-            <FieldLabel htmlFor="stackKey" version="v2" requiredText="(read only)">
-              Uploaded CMS
-            </FieldLabel>
-            <div className='d-flex align-items-center'>
-              {newMigrationData?.test_migration?.stack_api_key && (
-                <TextInput
-                  type="text"
-                  isReadOnly
-                  name="stackKey"
-                  value={`${newMigrationData?.test_migration?.stack_api_key}`}
-                  version="v2"
-                  width="medium"
-                />
-              )}
+          Create Test Stack
+          </Button>
+          {(newMigrationData?.test_migration?.stack_api_key || newMigrationData?.test_migration?.stack_link) &&
+            <Field
+              id="stack"
+              name="stack"
+              className='pt-4'
+            >
+              <FieldLabel htmlFor="stackKey" version="v2" requiredText="(read only)">
+                Test Stack
+              </FieldLabel>
+              <div className='d-flex align-items-center'>
+                {newMigrationData?.test_migration?.stack_api_key && (
+                  <TextInput
+                    type="text"
+                    isReadOnly
+                    name="stackKey"
+                    value={`${newMigrationData?.test_migration?.stack_api_key}`}
+                    version="v2"
+                    width="medium"
+                  />
+                )}
 
-              {newMigrationData?.test_migration?.stack_link && (
-                <Link href={`${newMigrationData?.test_migration?.stack_link}`} target='_blank' className='ml-8'>
-                  <Tooltip content='Stack Link' position="right">
-                    <Icon
-                      icon="Link"
-                      size="small"
-                      version="v2"
-                    />
-                  </Tooltip>
-                </Link>
-              )}
-            </div>
-          </Field>
+                {newMigrationData?.test_migration?.stack_link && (
+                  <Link href={`${newMigrationData?.test_migration?.stack_link}`} target='_blank' className='ml-8'>
+                    <Tooltip content='Stack Link' position="right">
+                      <Icon
+                        icon="Link"
+                        size="small"
+                        version="v2"
+                      />
+                    </Tooltip>
+                  </Link>
+                )}
+
+                <Button
+                  className="mt-3"
+                  // onClick={handleSaveContentType}
+                  version="v2"
+                  // size="medium"
+                >
+                  Start Test Migration
+                </Button>
+              </div>
+            </Field>
+          }
         </div>
       </div>