Test Migration API integrated

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

@@ -51,7 +51,7 @@ export type HorizontalStepperHandles = {
     handleStepChange: (currentStep: number) => void;
 };
 
-const showNotification = (currentIndex:number) =>{
+const showNotification = (currentIndex:number) => {
 
     let result;
         switch (currentIndex ) {
@@ -97,6 +97,9 @@ 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);
@@ -184,19 +187,18 @@ const HorizontalStepper = forwardRef(
         const StepsTitleCreator: React.FC = () => (
             <div className="stepper stepper-position">
                 {steps?.map(({ id, title }, idx: number) => {
-
-
                     const completedClass = stepsCompleted?.includes(idx)  ? 'completed' : '';
                     const activeClass = idx === showStep  && !stepsCompleted?.includes(idx)? 'active' : '';           
                     const disableClass =
                         !stepsCompleted.includes(idx) && idx !== showStep && !stepsCompleted?.includes(idx - 1)
                             ? 'disableEvents'
                             : '';
+                    const completeDisable = stepsCompleted?.includes(idx) && idx < steps?.length - 1 ? 'completed disableEvents' : '';
                     return (
                         <React.Fragment key={id}>
                             <div className="stepWrapperContainer">
                                 <div
-                                    className={`stepWrapper ${completedClass} ${activeClass} ${disableClass}`}
+                                    className={`stepWrapper ${completedClass} ${activeClass} ${disableClass} ${completeDisable}`}
                                     onClick={() => handleTabStep(idx)}
                                 >
                                     <div className="circle-title-wrapper">

ui/src/components/TestMigration/index.tsx

@@ -1,18 +1,25 @@
-import { useEffect, useState } from 'react';
-import { Field, FieldLabel, TextInput, Link, Icon, Tooltip, Button } from '@contentstack/venus-components';
-import { useSelector } from 'react-redux';
+import { useEffect, useState, useRef } from 'react';
+import { useParams } from 'react-router';
+import { Field, FieldLabel, TextInput, Link, Icon, Tooltip, Button, Notification } from '@contentstack/venus-components';
+import { useSelector, useDispatch } from 'react-redux';
 
 // Redux files
 import { RootState } from '../../store';
+import { updateNewMigrationData } from '../../store/slice/migrationDataSlice';
+
 
 // Services
 import { getCMSDataFromFile } from '../../cmsData/cmsSelector';
+import { getOrgDetails, createTestStack, createTestMigration } from '../../services/api/migration.service';
+import { getAllStacksInOrg } from '../../services/api/stacks.service';
 
 // Utilities
 import { CS_ENTRIES } from '../../utilities/constants';
 
 // Interface
 import { MigrationType } from './testMigration.interface';
+import { INewMigration } from '../../context/app/app.interface';
+
 
 // Component
 import LogViewer from '../LogScreen';
@@ -22,9 +29,12 @@ import './index.scss';
 
 const TestMigration = () => {
   const [data, setData] = useState<MigrationType>({});
+  const [showLogs, setShowLogs] = useState<boolean>(false);
 
-  const newMigrationData = useSelector((state: RootState)=>state?.migration?.newMigrationData);
-
+  const newMigrationData = useSelector((state: RootState) => state?.migration?.newMigrationData);
+  const selectedOrganisation = useSelector((state: RootState)=>state?.authentication?.selectedOrganisation);
+  const { projectId = '' } = useParams();
+  const dispatch = useDispatch();
 
   /********** ALL USEEFFECT HERE *************/
   useEffect(() => {
@@ -37,6 +47,60 @@ const TestMigration = () => {
       });
   }, []);
 
+  console.log("projectId", projectId);
+
+
+  // Method to create test stack
+  const handleCreateTestStack = async () => {
+    //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') || '';
+
+    const max_stack_limit = orgDetails?.data?.organization?.plan?.features[stacks_details_key]?.max_limit;
+
+    const stackData = await getAllStacksInOrg(selectedOrganisation?.value, ''); // org id will always be there
+
+    const stack_count = stackData?.data?.stacks?.length;
+
+    if (stack_count >= max_stack_limit) {
+      // setIsLoading(false);
+      Notification({
+        notificationContent: { text: 'You have reached the maximum limit of stacks for your organization' },
+        type: 'warning'
+      });
+      return;
+    }
+
+    const data = {
+      name: newMigrationData?.destination_stack?.selectedStack?.label,
+      description: 'test migration stack',
+      master_locale: newMigrationData?.destination_stack?.selectedStack?.master_locale
+    };
+
+    const res = await createTestStack(
+      newMigrationData?.destination_stack?.selectedOrg?.value,
+      projectId,
+      data
+    );
+
+    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 (
     <div className='migration-step-container'>
       <div className='content-block'>
@@ -45,7 +109,7 @@ const TestMigration = () => {
           <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}
+            onClick={handleCreateTestStack}
             version="v2"
             // size="medium"
           >
@@ -85,10 +149,10 @@ const TestMigration = () => {
                 )}
 
                 <Button
-                  className="mt-3"
-                  // onClick={handleSaveContentType}
+                  className="ml-8"
+                  onClick={handleTestMigration}
                   version="v2"
-                  // size="medium"
+                  // size="medium" 
                 >
                   Start Test Migration
                 </Button>
@@ -97,11 +161,10 @@ const TestMigration = () => {
           }
         </div>
       </div>
-
       <div className='content-block'>
         <div className='content-header'>Execution Logs</div>
         <div>
-          <LogViewer serverPath="http://localhost:5001" />
+          <LogViewer serverPath={process.env.REACT_APP_BASE_API_URL ?? ''} />
         </div>
       </div>
     </div>

ui/src/pages/Migration/index.tsx

@@ -390,26 +390,7 @@ const Migration = () => {
   const handleOnClickContentMapper = async (event: MouseEvent) => {
     setIsModalOpen(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') || '';
-
-    const max_stack_limit = orgDetails?.data?.organization?.plan?.features[stacks_details_key]?.max_limit;
-
-    const stackData = await getAllStacksInOrg(selectedOrganisation?.value, ''); // org id will always be there
-
-    const stack_count = stackData?.data?.stacks?.length;
-
-    if (stack_count >= max_stack_limit) {
-      setIsLoading(false);
-      Notification({
-        notificationContent: { text: 'You have reached the maximum limit of stacks for your organization' },
-        type: 'warning'
-      });
-      return;
-    }
-
-    if(newMigrationData?.content_mapping?.isDropDownChanged){
+    if(newMigrationData?.content_mapping?.isDropDownChanged) {
       return cbModal({
         component: (props: ModalObj) => (
         <SaveChangesModal
@@ -418,36 +399,12 @@ const Migration = () => {
             otherCmsTitle={newMigrationData?.content_mapping?.otherCmsTitle}
             saveContentType={saveRef?.current?.handleSaveContentType}
             changeStep={async () => {
-              setIsLoading(true);
-              const data = {
-                name: newMigrationData?.destination_stack?.selectedStack?.label,
-                description: 'test migration stack',
-                master_locale: newMigrationData?.destination_stack?.selectedStack?.master_locale
-              };
-
-              const res = await createTestStack(
-                newMigrationData?.destination_stack?.selectedOrg?.value,
-                projectId,
-                data
-              );
-
-              if (res?.status) {
-                setIsLoading(false);
-                const newMigrationDataObj: INewMigration = {
-                  ...newMigrationData,
-                    content_mapping: { ...newMigrationData?.content_mapping, isDropDownChanged: false },
-
-                  test_migration: { stack_link: res?.data?.data?.url, stack_api_key: res?.data?.data?.data?.stack?.api_key }
-                };
-
-                dispatch(updateNewMigrationData((newMigrationDataObj)));
-
                 const url = `/projects/${projectId}/migration/steps/4`;
                 navigate(url, { replace: true });
 
                 await updateCurrentStepData(selectedOrganisation.value, projectId);
                 handleStepChange(3);
-              }}}
+              }}
             dropdownStateChange={changeDropdownState}
         />
         ),
@@ -460,38 +417,12 @@ const Migration = () => {
     }
     else{
       event.preventDefault();
-      setIsLoading(true);
-      const data = {
-        name: newMigrationData?.destination_stack?.selectedStack?.label,
-        description: 'test migration stack',
-        master_locale: newMigrationData?.destination_stack?.selectedStack?.master_locale
-      };
-
-      const res = await createTestStack(
-        newMigrationData?.destination_stack?.selectedOrg?.value,
-        projectId,
-        data
-      );
-
-      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)));
-      if (res?.status) {
-        setIsLoading(false);
-
-        const url = `/projects/${projectId}/migration/steps/4`;
-        navigate(url, { replace: true });
-
-        await updateCurrentStepData(selectedOrganisation.value, projectId);
-        handleStepChange(3);
-      }
+      const url = `/projects/${projectId}/migration/steps/4`;
+      navigate(url, { replace: true });
 
+      await updateCurrentStepData(selectedOrganisation.value, projectId);
+      handleStepChange(3);
     }
-
-
 
   }
 

ui/src/services/api/migration.service.ts

@@ -218,18 +218,6 @@ export const resetToInitialMapping = async (
   }
 };
 
-export const createTestStack = async (orgId: string, projectId: string, data: ObjectType) => {
-  try {
-    return await postCall(
-      `${API_VERSION}/migration/test-stack/${orgId}/${projectId}`,
-      data,
-      options
-    );
-  } catch (error) {
-    return error;
-  }
-};
-
 export const fetchExistingContentType = async (projectId: string, contentTypeUid: string) => {
   try {
     return await getCall(`${API_VERSION}/mapper/${projectId}/${contentTypeUid}`, options);
@@ -303,4 +291,23 @@ export const getOrgDetails = async(orgId: string) => {
   }
 }
 
-// const { orgId } = req.params;
+export const createTestStack = async (orgId: string, projectId: string, data: ObjectType) => {
+  try {
+    return await postCall(
+      `${API_VERSION}/migration/create-test-stack/${orgId}/${projectId}`,
+      data,
+      options
+    );
+  } catch (error) {
+    return error;
+  }
+};
+
+export const createTestMigration = async (orgId: string, projectId: string) => {
+  try {
+    return await postCall(
+      `${API_VERSION}/migration/test-stack/${orgId}/${projectId}`, options);
+  } catch (error) {
+    return error;
+  }
+};