Merge pull request #303 from contentstack/feature/test-migration

Feature/test migration

Author: RohitKini

ui/src/components/MigrationFlowHeader/index.tsx

@@ -28,6 +28,8 @@ const MigrationFlowHeader = ({projectData, handleOnClick, isLoading }: Migration
   const params: Params<string> = useParams();
 
   const selectedOrganisation = useSelector((state: RootState)=>state?.authentication?.selectedOrganisation);
+  const newMigrationData = useSelector((state: RootState) => state?.migration?.newMigrationData);
+
 
   useEffect(() => {
     fetchProject();
@@ -65,6 +67,7 @@ const MigrationFlowHeader = ({projectData, handleOnClick, isLoading }: Migration
         version="v2"
         aria-label='Save and Continue'
         isLoading={isLoading}
+        disabled={newMigrationData?.testStacks?.length > 0}
       >
         {stepValue}
       </Button>

ui/src/components/Stepper/HorizontalStepper/HorizontalStepper.tsx

@@ -97,9 +97,6 @@ const HorizontalStepper = forwardRef(
 
         useEffect(() => {
             const stepIndex = parseInt(stepId || '', 10) - 1;
-
-            console.log("stepIndex", stepIndex);
-
 
             if (!Number.isNaN(stepIndex) && stepIndex >= 0 && stepIndex < steps?.length) {
                 setShowStep(stepIndex);
@@ -193,7 +190,7 @@ const HorizontalStepper = forwardRef(
                         !stepsCompleted.includes(idx) && idx !== showStep && !stepsCompleted?.includes(idx - 1)
                             ? 'disableEvents'
                             : '';
-                    const completeDisable = stepsCompleted?.includes(idx) && idx < steps?.length - 1 ? 'completed disableEvents' : '';
+                    const completeDisable = stepsCompleted?.includes(idx) && idx < steps?.length - 3 ? 'completed disableEvents' : '';
                     return (
                         <React.Fragment key={id}>
                             <div className="stepWrapperContainer">

ui/src/components/TestMigration/index.tsx

@@ -18,7 +18,7 @@ import { CS_ENTRIES } from '../../utilities/constants';
 
 // Interface
 import { MigrationType } from './testMigration.interface';
-import { INewMigration } from '../../context/app/app.interface';
+import { INewMigration, TestStacks } from '../../context/app/app.interface';
 
 
 // Component
@@ -29,7 +29,7 @@ import './index.scss';
 
 const TestMigration = () => {
   const [data, setData] = useState<MigrationType>({});
-  const [showLogs, setShowLogs] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
 
   const newMigrationData = useSelector((state: RootState) => state?.migration?.newMigrationData);
   const selectedOrganisation = useSelector((state: RootState)=>state?.authentication?.selectedOrganisation);
@@ -47,11 +47,10 @@ const TestMigration = () => {
       });
   }, []);
 
-  console.log("projectId", projectId);
-  
-
   // Method to create test stack
   const handleCreateTestStack = async () => {
+    setIsLoading(true);
+
     //get org plan details
     const orgDetails = await getOrgDetails(selectedOrganisation?.value);
     const stacks_details_key = Object.keys(orgDetails?.data?.organization?.plan?.features).find(key => orgDetails?.data?.organization?.plan?.features[key].uid === 'stacks') || '';
@@ -83,22 +82,24 @@ const TestMigration = () => {
       data
     );
 
-    const newMigrationDataObj: INewMigration = {
-      ...newMigrationData,
-      test_migration: { stack_link: res?.data?.data?.url, stack_api_key: res?.data?.data?.data?.stack?.api_key }
-    };
+    if (res?.status === 200) {
+      setIsLoading(false);
+
 
-    dispatch(updateNewMigrationData((newMigrationDataObj)));
+      const newMigrationDataObj: INewMigration = {
+        ...newMigrationData,
+        test_migration: { stack_link: res?.data?.data?.url, stack_api_key: res?.data?.data?.data?.stack?.api_key }
+      };
+
+      dispatch(updateNewMigrationData((newMigrationDataObj)));
+    }
   }
 
   const handleTestMigration = async () => {
     const testRes = await createTestMigration(
       newMigrationData?.destination_stack?.selectedOrg?.value,
       projectId
     );
-
-    console.log("testRes", testRes);
-    
   }
 
   return (
@@ -111,9 +112,10 @@ const TestMigration = () => {
             className="mt-3"
             onClick={handleCreateTestStack}
             version="v2"
-            // size="medium"
+            disabled={newMigrationData?.testStacks?.some((stack: TestStacks) => stack?.isMigrated === false)}
+            isLoading={isLoading}
           >
-          Create Test Stack
+            Create Test Stack
           </Button>
           {(newMigrationData?.test_migration?.stack_api_key || newMigrationData?.test_migration?.stack_link) &&
             <Field

ui/src/context/app/app.interface.ts

@@ -176,6 +176,7 @@ export interface IContentMapper {
   contentTypeList:ContentTypeList[]
 }
 export interface INewMigration {
+  testStacks: TestStacks[];
   mapperKeys: ContentTypeMap;
   legacy_cms: ILegacyCms;
   destination_stack: IDestinationStack;
@@ -185,6 +186,11 @@ export interface INewMigration {
   stackDetails: IDropDown;
 }
 
+export interface TestStacks {
+  stackUid?: string;
+  isMigrated?: boolean;
+}
+
 export interface IMigrationData {
   allFlowSteps: IFlowStep[];
   currentFlowStep: IFlowStep;
@@ -329,7 +335,8 @@ export const DEFAULT_NEW_MIGRATION: INewMigration = {
   content_mapping: DEFAULT_CONTENT_MAPPER,
   test_migration: DEFAULT_TEST_MIGRATION,
   isprojectMapped: false,
-  stackDetails: DEFAULT_DROPDOWN
+  stackDetails: DEFAULT_DROPDOWN,
+  testStacks: []
 };
 
 export const DEFAULT_URL_TYPE: IURLType = {

ui/src/pages/Migration/index.tsx

@@ -217,7 +217,7 @@ const Migration = () => {
         existingGlobal: existingGlobalFields
       },
       stackDetails: projectData?.stackDetails,
-      // mapper_keys: projectData?.mapper_keys,
+      testStacks: projectData?.test_stacks
     };
 
   dispatch(updateNewMigrationData(projectMapper));
@@ -451,12 +451,8 @@ const Migration = () => {
     handleOnClickContentMapper,
     handleOnClickTestMigration 
   ];
-
-
 
   return (
-     
- 
     <div className='migration-steps-wrapper'>
       {projectData && 
       <>