diff --git a/ui/src/components/Stepper/HorizontalStepper/HorizontalStepper.tsx b/ui/src/components/Stepper/HorizontalStepper/HorizontalStepper.tsx index 92a5d024..96a6859c 100644 --- a/ui/src/components/Stepper/HorizontalStepper/HorizontalStepper.tsx +++ b/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 = () => (
{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 (
handleTabStep(idx)} >
diff --git a/ui/src/components/TestMigration/index.tsx b/ui/src/components/TestMigration/index.tsx index 3671c760..17ba79bc 100644 --- a/ui/src/components/TestMigration/index.tsx +++ b/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({}); + const [showLogs, setShowLogs] = useState(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 (
@@ -45,7 +109,7 @@ const TestMigration = () => {

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.

@@ -97,11 +161,10 @@ const TestMigration = () => { }
-
Execution Logs
- +
diff --git a/ui/src/pages/Migration/index.tsx b/ui/src/pages/Migration/index.tsx index ae9b3be3..c119e57a 100644 --- a/ui/src/pages/Migration/index.tsx +++ b/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) => ( { 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); } - - } diff --git a/ui/src/services/api/migration.service.ts b/ui/src/services/api/migration.service.ts index 042916ec..f13ee155 100644 --- a/ui/src/services/api/migration.service.ts +++ b/ui/src/services/api/migration.service.ts @@ -114,9 +114,9 @@ export const getContentTypes = ( skip: number, limit: number, searchText: string -) => { +) => { try { - const encodedSearchText = encodeURIComponent(searchText) ; + const encodedSearchText = encodeURIComponent(searchText); return getCall( `${API_VERSION}/mapper/contentTypes/${projectId}/${skip}/${limit}/${encodedSearchText}?`, options @@ -135,10 +135,10 @@ export const getFieldMapping = async ( skip: number, limit: number, searchText: string, - projectId:string + projectId: string ) => { try { - const encodedSearchText = encodeURIComponent(searchText) ; + const encodedSearchText = encodeURIComponent(searchText); return await getCall( `${API_VERSION}/mapper/fieldMapping/${projectId}/${contentTypeId}/${skip}/${limit}/${encodedSearchText}?`, options @@ -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); @@ -254,12 +242,13 @@ export const fetchGlobalField = async (projectId: string, globalFieldUid: string } } -export const removeContentMapper = async(orgId: string, projectId: string) => { + +export const removeContentMapper = async (orgId: string, projectId: string) => { try { - return await getCall(`${API_VERSION}/mapper/${orgId}/${projectId}/content-mapper`, options); + return await getCall(`${API_VERSION}/mapper/${orgId}/${projectId}/content-mapper`, options); } catch (error) { return error; - + } } @@ -268,7 +257,7 @@ export const updateContentMapper = async ( projectId: string, data: ObjectType ) => { - const mapperKeys = {content_mapper: data} + const mapperKeys = { content_mapper: data } try { return await patchCall( @@ -285,22 +274,41 @@ export const updateContentMapper = async ( } }; -export const updateStackDetails = async(orgId: string, projectId: string, data: ObjectType)=>{ +export const updateStackDetails = async (orgId: string, projectId: string, data: ObjectType) => { try { - const Data = { stack_details: data }; - return await patchCall(`${API_VERSION}/org/${orgId}/project/${projectId}/stack-details`, Data,options); + const Data = { stack_details: data }; + return await patchCall(`${API_VERSION}/org/${orgId}/project/${projectId}/stack-details`, Data, options); } catch (error) { return error; - + } } -export const getOrgDetails = async(orgId: string) => { +export const getOrgDetails = async (orgId: string) => { try { - return await getCall(`${API_VERSION}/org/${orgId}/get_org_details`, options); + return await getCall(`${API_VERSION}/org/${orgId}/get_org_details`, options); } catch (error) { return error; } } -// const { orgId } = req.params; \ No newline at end of file +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; + } +}; \ No newline at end of file