Feature/project dashboard

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/AdvanceSettings/index.scss

@@ -0,0 +1,19 @@
+.options-class {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 20px;
+  grid-template-columns: 1fr;
+  gap: 20px;
+}
+.validation-input {
+  margin-bottom: 20px;
+}
+.option-label {
+  margin-bottom: 20px;
+}
+.non-localizable-message {
+  margin-top: 0;
+  margin-left: 30px;
+}

ui/src/components/AdvanceSettings/index.tsx

@@ -0,0 +1,58 @@
+import {
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  Button,
+  ButtonGroup,
+  FieldLabel,
+  TextInput,
+  ToggleSwitch
+} from '@contentstack/venus-components';
+
+import './index.scss';
+
+export interface SchemaProps {
+  fieldtype: string;
+  closeModal: () => void;
+}
+const AdvanceSettings = (props: SchemaProps) => {
+  return (
+    <>
+      <ModalHeader title={`${props.fieldtype} propertise`} closeModal={props.closeModal} />
+      <ModalBody>
+        <FieldLabel htmlFor="someInput" version="v2">
+          Validation (Regex)
+        </FieldLabel>
+        <TextInput
+          className="validation-input"
+          type="text"
+          placeholder="Enter value"
+          version="v2"
+        />
+        <FieldLabel className="option-label" htmlFor="someInput" version="v2">
+          Options
+        </FieldLabel>
+        <div className="options-class">
+          <ToggleSwitch label="Mandatory" labelColor="primary" labelPosition="right" />
+          <ToggleSwitch label="Multiple" labelColor="primary" labelPosition="right" />
+          <ToggleSwitch label="Unique" labelColor="primary" labelPosition="right" />
+          <ToggleSwitch label="Non-localizable" labelColor="primary" labelPosition="right" />
+          <p className="non-localizable-message">
+            If enabled, editing this field is restricted in localized entries. The field will use
+            the value of the master-language entry in all localized entries.
+          </p>
+        </div>
+      </ModalBody>
+      {/* <ModalFooter>
+            <ButtonGroup>
+              <Button buttonType="light" onClick={() => props.closeModal()}>
+                Cancel
+              </Button>
+              <Button>Save and proceed</Button>
+            </ButtonGroup>
+          </ModalFooter> */}
+    </>
+  );
+};
+
+export default AdvanceSettings;

ui/src/components/ContentMapper/contentMapper.interface.ts

@@ -54,7 +54,7 @@ export interface FieldMapType {
   otherCmsField: string;
   otherCmsType: string;
   uid: string;
-  _id: string;
+  id: string;
   _invalid?: boolean;
 }
 

ui/src/components/ContentMapper/index.scss

@@ -88,3 +88,9 @@ div .select .Select {
   width: $px-50;
   max-width: $px-50 !important;
 }
+div .table-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex: 1;
+}

ui/src/components/ContentMapper/index.tsx

@@ -1,6 +1,6 @@
 // Libraries
 import { useEffect, useState, useContext } from 'react';
-import { useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import {
   Heading,
   InfiniteScrollTable,
@@ -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,
@@ -52,6 +53,7 @@ import { ModalObj } from '../Modal/modal.interface';
 
 // Components
 import SchemaModal from '../SchemaModal';
+import AdvanceSettings from '../AdvanceSettings';
 
 // Styles
 import './index.scss';
@@ -80,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: {
@@ -111,11 +114,13 @@ 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);
 
   /** ALL HOOKS Here */
   const { projectId = '' } = useParams();
+  const navigate = useNavigate();
 
   /********** ALL USEEFFECT HERE *************/
   useEffect(() => {
@@ -149,8 +154,9 @@ const ContentMapper = () => {
 
     setContentTypes(data?.contentTypes);
     setSelectedContentType(data?.contentTypes?.[0]);
+    setTotalCounts(data?.contentTypes?.[0]?.fieldMapping?.length);
     setOtherCmsTitle(data?.contentTypes?.[0]?.otherCmsTitle);
-    setContentTypeUid(data?.contentTypes?.[0]?.otherCmsUid);
+    setContentTypeUid(data?.contentTypes?.[0]?.id);
     fetchFields(data?.contentTypes?.[0]?.id);
   };
   const stackStatus = async () => {
@@ -234,7 +240,7 @@ const ContentMapper = () => {
       updateItemStatusMap({ ...itemStatusMapCopy });
       setLoading(true);
 
-      const { data } = await getFieldMapping(contentTypeUid, startIndex, limit, searchText || '');
+      const { data } = await getFieldMapping(contentTypeUid, skip, limit, '');
 
       const updateditemStatusMapCopy: ItemStatusMapProp = { ...itemStatusMap };
 
@@ -324,7 +330,7 @@ const ContentMapper = () => {
     [key: string]: boolean;
   }
   const rowIds = tableData.reduce<UidMap>((acc, item) => {
-    acc[item.uid] = true;
+    acc[item.id] = true;
     return acc;
   }, {});
 
@@ -344,6 +350,40 @@ const ContentMapper = () => {
     setOtherContentType(value);
   };
 
+  const handleAdvancedSetting = (fieldtype: string) => {
+    return cbModal({
+      component: (props: ModalObj) => <AdvanceSettings fieldtype={fieldtype} {...props} />,
+      modalProps: {
+        shouldCloseOnOverlayClick: 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) => {
     const OptionsForRow = Fields[data?.backupFieldType as keyof Mapping];
 
@@ -352,16 +392,24 @@ const ContentMapper = () => {
       : [{ label: OptionsForRow, value: OptionsForRow }];
 
     return (
-      <div className="select">
-        <Select
-          id={data.uid}
-          value={{ label: data.ContentstackFieldType, value: fieldValue }}
-          onChange={(selectedOption: FieldTypes) => handleValueChange(selectedOption, data.uid)}
-          placeholder="Select Field"
-          version={'v2'}
-          maxWidth="290px"
-          isClearable={false}
-          options={option}
+      <div className="table-row">
+        <div className="select">
+          <Select
+            id={data.uid}
+            value={{ label: data.ContentstackFieldType, value: fieldValue }}
+            onChange={(selectedOption: FieldTypes) => handleValueChange(selectedOption, data.uid)}
+            placeholder="Select Field"
+            version={'v2'}
+            maxWidth="290px"
+            isClearable={false}
+            options={option}
+          />
+        </div>
+        <Icon
+          version="v2"
+          icon="Setting"
+          size="small"
+          onClick={() => handleAdvancedSetting(data?.ContentstackFieldType)}
         />
       </div>
     );
@@ -585,7 +633,7 @@ const ContentMapper = () => {
       accessor: accessorCall,
       // accessor: 'otherCmsField',
       // default: true
-      id: 'uid'
+      id: 'uuid'
     },
     {
       disableSortBy: true,
@@ -696,7 +744,7 @@ const ContentMapper = () => {
               loading={loading}
               data={tableData}
               columns={columns}
-              uniqueKey={'uid'}
+              uniqueKey={'id'}
               canSearch
               isRowSelect={true}
               itemStatusMap={itemStatusMap}
@@ -798,7 +846,13 @@ const ContentMapper = () => {
 
       {cta?.title && (
         <div className="cta-wrapper">
-          <Button buttonType={cta?.theme}>{cta?.title}</Button>
+          <Button
+            buttonType={cta?.theme}
+            isLoading={isButtonLoading}
+            onClick={handleValidateOnClick}
+          >
+            {cta?.title}
+          </Button>
         </div>
       )}
     </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;
+}