diff --git a/ui/package-lock.json b/ui/packaga-lock.json similarity index 100% rename from ui/package-lock.json rename to ui/packaga-lock.json diff --git a/ui/src/cmsData/test_migration.json b/ui/src/cmsData/test_migration.json index 6a0c0faf5..faeaea63b 100644 --- a/ui/src/cmsData/test_migration.json +++ b/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 } } diff --git a/ui/src/components/AdvancePropertise/index.scss b/ui/src/components/AdvancePropertise/index.scss new file mode 100644 index 000000000..3df80f930 --- /dev/null +++ b/ui/src/components/AdvancePropertise/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; +} diff --git a/ui/src/components/AdvancePropertise/index.tsx b/ui/src/components/AdvancePropertise/index.tsx new file mode 100644 index 000000000..1b60299b4 --- /dev/null +++ b/ui/src/components/AdvancePropertise/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 AdvancePropertise = (props: SchemaProps) => { + return ( + <> + + + + Validation (Regex) + + + + Options + +
+ + + + +

+ 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. +

+
+ + {/* + + + + + */} + + ); +}; + +export default AdvancePropertise; diff --git a/ui/src/components/ContentMapper/contentMapper.interface.ts b/ui/src/components/ContentMapper/contentMapper.interface.ts index 5e8499d6c..f6766980f 100644 --- a/ui/src/components/ContentMapper/contentMapper.interface.ts +++ b/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; } diff --git a/ui/src/components/ContentMapper/index.scss b/ui/src/components/ContentMapper/index.scss index 45bdb543f..44f79f702 100644 --- a/ui/src/components/ContentMapper/index.scss +++ b/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; +} diff --git a/ui/src/components/ContentMapper/index.tsx b/ui/src/components/ContentMapper/index.tsx index 77b8e4eed..f7942dd9d 100644 --- a/ui/src/components/ContentMapper/index.tsx +++ b/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 '../AdvancePropertise'; // 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(); const [exstingField, setexsitingField] = useState({}); const [selectedOptions, setSelectedOptions] = useState([]); + const [isButtonLoading, setisButtonLoading] = useState(false); const [active, setActive] = useState(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((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) => , + 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 ( -
- handleValueChange(selectedOption, data?.uid)} + placeholder="Select Field" + version={'v2'} + maxWidth="290px" + isClearable={false} + options={option} + /> +
+ handleAdvancedSetting(data?.ContentstackFieldType)} /> ); @@ -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 && (
- +
)} diff --git a/ui/src/components/Migrations/NewMigration/NewMigrationWrapper.scss b/ui/src/components/Migrations/NewMigration/NewMigrationWrapper.scss index f09c93fc3..8b2e203cb 100644 --- a/ui/src/components/Migrations/NewMigration/NewMigrationWrapper.scss +++ b/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; } diff --git a/ui/src/components/TestMigration/index.scss b/ui/src/components/TestMigration/index.scss index 19394f9ab..5d6d4c6cb 100644 --- a/ui/src/components/TestMigration/index.scss +++ b/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; +} diff --git a/ui/src/components/TestMigration/index.tsx b/ui/src/components/TestMigration/index.tsx index 847cfd207..2784cd50a 100644 --- a/ui/src/components/TestMigration/index.tsx +++ b/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({}); + const { newMigrationData } = useContext(AppContext); + + /** ALL HOOKS Here */ + const { projectId = '' } = useParams(); + const navigate = useNavigate(); /********** ALL USEEFFECT HERE *************/ useEffect(() => { @@ -32,18 +38,22 @@ const TestMigration = () => { return (
-
+ -
-
+
+
{cta && cta?.title && (