feat:integrated test stack creation api

ui/src/cmsData/test_migration.json

@@ -6,7 +6,7 @@
     "open_in_new_tab": false,
     "theme": "primary",
     "title": "Start Migration",
-    "url": "",
+    "url": "/projects/${projectId}/migration/steps/5",
     "with_icon": false
   }
 }

ui/src/components/ContentMapper/index.tsx

@@ -23,7 +23,8 @@ import {
   getFieldMapping,
   getExistingContentTypes,
   updateContentType,
-  resetToInitialMapping
+  resetToInitialMapping,
+  createTestStack
 } from '../../services/api/migration.service';
 import { getStackStatus } from '../../services/api/stacks.service';
 
@@ -35,7 +36,7 @@ import { validateArray } from '../../utilities/functions';
 import { AppContext } from '../../context/app/app.context';
 
 // Interface
-import { DEFAULT_CONTENT_MAPPING_DATA } from '../../context/app/app.interface';
+import { DEFAULT_CONTENT_MAPPING_DATA, INewMigration } from '../../context/app/app.interface';
 import {
   ContentType,
   FieldMapType,
@@ -81,7 +82,8 @@ const Fields: Mapping = {
 
 const ContentMapper = () => {
   /** ALL CONTEXT HERE */
-  const { migrationData, updateMigrationData, newMigrationData } = useContext(AppContext);
+  const { migrationData, updateMigrationData, newMigrationData, updateNewMigrationData } =
+    useContext(AppContext);
 
   const {
     contentMappingData: {
@@ -112,6 +114,7 @@ const ContentMapper = () => {
   const [OtherContentType, setOtherContentType] = useState<FieldTypes>();
   const [exstingField, setexsitingField] = useState<ExistingFieldType>({});
   const [selectedOptions, setSelectedOptions] = useState<string[]>([]);
+  const [isButtonLoading, setisButtonLoading] = useState(false);
 
   const [active, setActive] = useState<number>(null ?? 0);
 
@@ -356,9 +359,29 @@ const ContentMapper = () => {
     });
   };
 
-  const handleValidateOnClick = () => {
-    const url = `/projects/${projectId}/migration/steps/3`;
-    navigate(url, { replace: true });
+  const handleValidateOnClick = async () => {
+    setisButtonLoading(true);
+    const data = {
+      name: newMigrationData?.destination_stack?.selectedStack?.label,
+      description: 'test migration stack',
+      master_locale: newMigrationData?.destination_stack?.selectedStack?.locale
+    };
+    const res = await createTestStack(
+      newMigrationData?.destination_stack?.selectedOrg?.value,
+      projectId,
+      data
+    );
+    const newMigrationDataObj: INewMigration = {
+      ...newMigrationData,
+      test_migration: { stack_link: res?.data?.data?.url }
+    };
+
+    updateNewMigrationData(newMigrationDataObj);
+    if (res?.status) {
+      setisButtonLoading(false);
+      const url = `/projects/${projectId}/migration/steps/4`;
+      navigate(url, { replace: true });
+    }
   };
 
   const SelectAccessor = (data: FieldMapType) => {
@@ -823,7 +846,11 @@ const ContentMapper = () => {
 
       {cta?.title && (
         <div className="cta-wrapper">
-          <Button buttonType={cta?.theme} onClick={handleValidateOnClick}>
+          <Button
+            buttonType={cta?.theme}
+            isLoading={isButtonLoading}
+            onClick={handleValidateOnClick}
+          >
             {cta?.title}
           </Button>
         </div>

ui/src/components/Migrations/NewMigration/NewMigrationWrapper.scss

@@ -12,7 +12,7 @@
 }
 
 .step-component .action-component-body {
-  display: flex;
+  //display: flex;
   margin-left: 0px !important;
   width: 100% !important;
 }

ui/src/components/TestMigration/index.scss

@@ -1,20 +1,14 @@
 @import '../../scss/App.scss';
 @import '../../scss/variables';
 
-.select-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  margin-left: 5px;
-}
-.terminal-container {
-  background-color: $color-base-black-base;
+.test {
+  background-color: #000000;
   color: $color-brand-white-base;
-  padding: 10px;
   height: 469px;
+  padding: 20px;
   overflow-y: auto;
   white-space: pre-wrap;
-  width: 100%;
+  width: 100% !important;
   box-sizing: border-box;
 }
 
@@ -23,7 +17,7 @@ div .step-component .action-component-body {
   width: 100% !important;
   margin-left: 0px !important;
 }
-.cta-wrapper {
+.cta-wrapper-test-migration {
   border-top: 1px solid $color-base-gray-40;
   bottom: 0;
   left: 0;
@@ -62,3 +56,6 @@ div .step-component .action-component-body {
   border: 1px solid $color-brand-secondary-lightest;
   border-radius: var(--TermCount, 5px);
 }
+.stack-link {
+  padding: 10px 10px;
+}

ui/src/components/TestMigration/index.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useState } from 'react';
-import { Link } from 'react-router-dom';
+import { useContext, useEffect, useState } from 'react';
+import { Link, useNavigate, useParams } from 'react-router-dom';
 import { Button } from '@contentstack/venus-components';
 
 // Services
@@ -13,9 +13,15 @@ import { MigrationType } from './testMigration.interface';
 
 //stylesheet
 import './index.scss';
+import { AppContext } from '../../context/app/app.context';
 
 const TestMigration = () => {
   const [data, setData] = useState<MigrationType>({});
+  const { newMigrationData } = useContext(AppContext);
+
+  /** ALL HOOKS Here */
+  const { projectId = '' } = useParams();
+  const navigate = useNavigate();
 
   /********** ALL USEEFFECT HERE *************/
   useEffect(() => {
@@ -32,18 +38,22 @@ const TestMigration = () => {
 
   return (
     <div>
-      <div className="action-component-body">
+      <div id="test-migration" className="action-component-body">
         <div className="selectedOptions d-flex">
-          <span>{subtitle}:</span>
+          <span className="stack-link">{subtitle}:</span>
           <span className="ml-6">
-            <a href="https://app.contentstack.com/#!/stack/bltd3620ec6418ad3ad/dashboard?branch=main">
-              https://app.contentstack.com/#!/stack/bltd3620ec6418ad3ad/dashboard?branch=main
+            <a
+              href={`${newMigrationData?.test_migration?.stack_link}`}
+              rel="noreferrer"
+              target="_blank"
+            >
+              {newMigrationData?.test_migration?.stack_link}
             </a>
           </span>
         </div>
       </div>
-      <div className="terminal-container"></div>
-      <div className="cta-wrapper">
+      <div className="test"></div>
+      <div className="cta-wrapper-test-migration">
         {cta && cta?.title && (
           <Link to={cta?.url as string} className="btn primary-btn">
             <Button version="v2" aria-label={cta?.title} tabindex={1}>

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

@@ -137,6 +137,7 @@ export interface IDestinationStack {
 export interface INewMigration {
   legacy_cms: ILegacyCms;
   destination_stack: IDestinationStack;
+  test_migration: ITestMigration;
 }
 
 export interface IMigrationData {
@@ -148,6 +149,7 @@ export interface IMigrationData {
   migrationexecution: IMigrationExecution;
   settings: string;
   migration_steps_heading: string;
+  testmigrationData: ITestMigration;
 }
 
 export interface IDropDown {
@@ -158,7 +160,9 @@ export interface IDropDown {
   locale: string;
   created_at: string;
 }
-
+export interface ITestMigration {
+  stack_link: string;
+}
 export interface IAppContext {
   authToken: string;
   setAuthToken: (token: string) => void;
@@ -240,9 +244,14 @@ export const DEFAULT_DESTINATION_STACK: IDestinationStack = {
   selectedStack: DEFAULT_DROPDOWN
 };
 
+export const DEFAULT_TEST_MIGRATION: ITestMigration = {
+  stack_link: ''
+};
+
 export const DEFAULT_NEW_MIGRATION: INewMigration = {
   legacy_cms: DEFAULT_LEGACY_CMS,
-  destination_stack: DEFAULT_DESTINATION_STACK
+  destination_stack: DEFAULT_DESTINATION_STACK,
+  test_migration: DEFAULT_TEST_MIGRATION
 };
 
 export const DEFAULT_URL_TYPE: IURLType = {
@@ -298,6 +307,7 @@ export const DEFAULT_MIGRATION_EXECUTION: IMigrationExecution = {
     }
   ]
 };
+
 export const DEFAULT_MIGRATION_DATA: IMigrationData = {
   allFlowSteps: [],
   currentFlowStep: DEFAULT_IFLOWSTEP,
@@ -306,7 +316,8 @@ export const DEFAULT_MIGRATION_DATA: IMigrationData = {
   contentMappingData: DEFAULT_CONTENT_MAPPING_DATA,
   migrationexecution: DEFAULT_MIGRATION_EXECUTION,
   migration_steps_heading: '',
-  settings: ''
+  settings: '',
+  testmigrationData: DEFAULT_TEST_MIGRATION
 };
 
 export const DEFAULT_APP_CONTEXT: IAppContext = {

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

@@ -133,3 +133,15 @@ export const resetToInitialMapping = async (
     return error;
   }
 };
+
+export const createTestStack = async (orgId: string, projectId: string, data: any) => {
+  try {
+    return await postCall(
+      `${API_VERSION}/migration/test-stack/${orgId}/${projectId}`,
+      data,
+      options
+    );
+  } catch (error) {
+    return error;
+  }
+};