From d41c640c6a31728dedb2636d941312439fc4fb49 Mon Sep 17 00:00:00 2001 From: Sayali Joshi Date: Wed, 19 Jun 2024 12:28:21 +0530 Subject: [PATCH 1/8] Test Migration and Settings new design changes --- api/src/services/migration.service.ts | 2 +- ui/src/App.tsx | 15 +-- .../components/Common/Settings/Settings.scss | 102 +++++++++--------- ui/src/components/Common/Settings/index.tsx | 96 +++++------------ ui/src/components/Common/router.tsx | 5 +- ui/src/components/ContentMapper/index.tsx | 25 ----- ui/src/components/MainHeader/index.scss | 14 ++- ui/src/components/MainHeader/index.tsx | 8 +- ui/src/components/SideBar/index.tsx | 26 ++++- .../HorizontalStepper/HorizontalStepper.scss | 1 + ui/src/components/TestMigration/index.tsx | 61 +++++++++-- ui/src/components/layout/AppLayout/index.tsx | 12 ++- ui/src/context/app/app.interface.ts | 4 +- ui/src/pages/Migration/index.tsx | 10 +- ui/src/scss/App.scss | 16 +++ 15 files changed, 210 insertions(+), 187 deletions(-) diff --git a/api/src/services/migration.service.ts b/api/src/services/migration.service.ts index 631f12d6..84c182f3 100644 --- a/api/src/services/migration.service.ts +++ b/api/src/services/migration.service.ts @@ -23,7 +23,7 @@ const createTestStack = async (req: Request): Promise => { await ProjectModelLowdb.read(); const projectData = ProjectModelLowdb.chain.get("projects").value(); - const testStackCount = projectData[0].test_stacks.length + 1; + const testStackCount = projectData[0]?.test_stacks?.length + 1; const newName = name + "-" + testStackCount; const [err, res] = await safePromise( diff --git a/ui/src/App.tsx b/ui/src/App.tsx index 5221fac6..20774136 100644 --- a/ui/src/App.tsx +++ b/ui/src/App.tsx @@ -1,16 +1,19 @@ +// Libraries +import { Suspense } from 'react'; +import { Provider} from 'react-redux'; +import { PersistGate } from 'redux-persist/integration/react'; +import { FullPageLoader } from '@contentstack/venus-components'; + +import { persistor, store } from './store'; + +// Components import AppRouter from './components/Common/router'; import ErrorBoundary from './components/ErrorBoundary'; -import AppContextProvider from './context/app/app.provider'; import AppLayout from './components/layout/AppLayout'; -import { Suspense, useEffect } from 'react'; -import { FullPageLoader } from '@contentstack/venus-components'; -import { persistor, store } from './store'; // Styles import '@contentstack/venus-components/build/main.css'; import './scss/App.scss'; -import { Provider} from 'react-redux'; -import { PersistGate } from 'redux-persist/integration/react'; function App() { diff --git a/ui/src/components/Common/Settings/Settings.scss b/ui/src/components/Common/Settings/Settings.scss index cfb8d60e..4c6377a3 100644 --- a/ui/src/components/Common/Settings/Settings.scss +++ b/ui/src/components/Common/Settings/Settings.scss @@ -1,44 +1,42 @@ @import '../../../scss/variables'; -.icon-wrapper { - background-color: $color-base-white-10 !important; -} -.setting-wrapper { - width: 100%; - margin: 0 !important; -} #setting-page { display: flex; width: 100%; + .SectionHeader { + color: $color-stepper-title; + font-weight: $font-weight-semi-bold; + margin-bottom: 2rem; + } .PageLayout { width: 100%; } - .PageLayout__head { - border-left: 0 none; + .PageLayout__head, .PageLayout__leftSidebar { + border-top: 0 none; + } + .PageLayout--primary { + .PageLayout__content { + .PageLayout__body { + background: none; + margin-left: 15rem; + padding-top: $px-8; + } + } + } + .action-component-title { + justify-content: space-between; + width: calc(100vw - 326px); + } + .content-block { + margin-right: 0; + padding: 1.5rem; + width: 100%; } -} -.deleteButton { - position: fixed !important; - right: $px-40; - top: $px-80; } .Field { margin-bottom: $px-40; } -.settings-body { - padding-left: 120px !important; -} - -#page_header { - margin-left: 50px !important; -} - -.pagehead-wrapper { - margin-left: 240px; - width: calc(100% - 15rem) !important ; - z-index: 10 !important; -} .PageLayout__leftSidebar--hide { display: none; } @@ -47,16 +45,16 @@ margin-top: 0 !important; } -.content-body .white-box-container { - background-color: $color-brand-white-base; - padding: 20px; - margin-top: 50px !important; - margin-left: 240px; - margin-right: auto; - position: relative; - z-index: 10; - height: 600px; -} +// .content-body .white-box-container { +// background-color: $color-brand-white-base; +// padding: 20px; +// margin-top: 50px !important; +// margin-left: 240px; +// margin-right: auto; +// position: relative; +// z-index: 10; +// height: 600px; +// } .stack-settings__heading { color: $color-base-black-base; @@ -67,22 +65,22 @@ margin-bottom: $px-20; } -.toggle-class { - width: calc(100% - 18.4375rem) !important; -} -.layout-container.specific-context .PageLayout__head { - z-index: 10 !important; - margin-left: 240px; - width: 100% !important; -} -.SaveButton { - padding: 30px 10px; -} +// .toggle-class { +// width: calc(100% - 18.4375rem) !important; +// } +// .layout-container.specific-context .PageLayout__head { +// z-index: 10 !important; +// margin-left: 240px; +// width: 100% !important; +// } +// .SaveButton { +// padding: 30px 10px; +// } -.layout-container.content-body .PageLayout__body { - margin-top: 90px !important; - margin-left: 227px !important; -} +// .layout-container.content-body .PageLayout__body { +// margin-top: 90px !important; +// margin-left: 227px !important; +// } .PageLayout__leftSidebar { background-color: #f7f9fc !important; diff --git a/ui/src/components/Common/Settings/index.tsx b/ui/src/components/Common/Settings/index.tsx index e019f589..ba6d9e5a 100644 --- a/ui/src/components/Common/Settings/index.tsx +++ b/ui/src/components/Common/Settings/index.tsx @@ -142,26 +142,22 @@ const Settings = () => { const pageActions = [ { label: ( -
-
- +
+ ) } ]; @@ -170,7 +166,7 @@ const Settings = () => { component: (
{active === cmsData?.project?.title && ( -
+
{cmsData?.project?.general}
@@ -207,28 +203,6 @@ const Settings = () => {
- -
-
- - {cmsData?.project?.email} - -
-
- - -
- -
- -
-
-
@@ -267,7 +231,7 @@ const Settings = () => { const leftSidebar = { component: ( -
+
{ }} version="v2" /> -
- } - onClick={() => { - setActive(cmsData?.execution_logs?.title); - setCurrentHeader(cmsData?.execution_logs?.title); - }} - version="v2" - /> -
+ } + onClick={() => { + setActive(cmsData?.execution_logs?.title); + setCurrentHeader(cmsData?.execution_logs?.title); + }} + version="v2" + />
) }; diff --git a/ui/src/components/Common/router.tsx b/ui/src/components/Common/router.tsx index 82f61ea8..6df9932c 100644 --- a/ui/src/components/Common/router.tsx +++ b/ui/src/components/Common/router.tsx @@ -17,6 +17,7 @@ const LoginLazyLoad = lazy(() => import('../../pages/Login')); const RegionalLoginLazyLoad = lazy(() => import('../../pages/RegionalLogin')); const MigrationLazyLoad = lazy(() => import('../../pages/Migration')); const ProjectsLazyLoad = lazy(() => import('../../pages/Projects')); +const SettingsLazyLoad = lazy(() => import ('../Common/Settings')) const AppRouter = () => { return ( @@ -34,9 +35,9 @@ const AppRouter = () => { } - > + /> - + } /> } /> diff --git a/ui/src/components/ContentMapper/index.tsx b/ui/src/components/ContentMapper/index.tsx index 19680ce8..9168fd9b 100644 --- a/ui/src/components/ContentMapper/index.tsx +++ b/ui/src/components/ContentMapper/index.tsx @@ -537,31 +537,6 @@ const ContentMapper = () => { } }); }; - - const handleValidateOnClick = async () => { - setisButtonLoading(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 } - }; - - dispatch(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]; diff --git a/ui/src/components/MainHeader/index.scss b/ui/src/components/MainHeader/index.scss index b330fa47..71225d6d 100644 --- a/ui/src/components/MainHeader/index.scss +++ b/ui/src/components/MainHeader/index.scss @@ -4,6 +4,7 @@ background-color: $color-brand-white-base; border-bottom: 1px solid $color-brand-secondary-lightest; height: 3.5rem; + justify-content: space-between; position: fixed; width: 100%; top: 0; @@ -14,9 +15,9 @@ border: 0 none; } .logo { - margin-right: 1.063rem; position: relative; - width: 3rem; + text-align: center; + width: 3.5rem; a { align-items: center; display: flex; @@ -30,9 +31,12 @@ box-shadow: 0 0 1px $color-brand-primary-base, 0 0 0 4px #bbb4f4; } } - .organisationWrapper:focus { - box-shadow: 0 0 1px $color-brand-primary-base, 0 0 0 4px #bbb4f4; - } + .organisationWrapper { + margin-left: 1.063rem; + &:focus { + box-shadow: 0 0 1px $color-brand-primary-base, 0 0 0 4px #bbb4f4; + } + } .Dropdown-wrapper { padding: 0 18px; } diff --git a/ui/src/components/MainHeader/index.tsx b/ui/src/components/MainHeader/index.tsx index 52e9d1c3..1061a071 100644 --- a/ui/src/components/MainHeader/index.tsx +++ b/ui/src/components/MainHeader/index.tsx @@ -97,9 +97,7 @@ const MainHeader = () => { }; return (
-
-
-
+
{logo?.image?.url ? (
@@ -126,7 +124,7 @@ const MainHeader = () => {
}
- {(location.pathname == '/projects' || location.pathname.includes('/projects/')) &&
+ {(location.pathname == '/projects' || location.pathname.includes('/projects/')) &&
{
} -
-
); }; diff --git a/ui/src/components/SideBar/index.tsx b/ui/src/components/SideBar/index.tsx index a273915a..149ca958 100644 --- a/ui/src/components/SideBar/index.tsx +++ b/ui/src/components/SideBar/index.tsx @@ -1,12 +1,30 @@ // Libraries -import { Icon } from '@contentstack/venus-components'; +import { Tooltip, Icon, Link } from '@contentstack/venus-components'; +import { useNavigate } from 'react-router'; + // Styles import './index.scss'; -const SideBar = () => { +type SettingIconProp = { + projectId: string; +} + +const SideBar = ({projectId}: SettingIconProp) => { + const navigate = useNavigate(); + + const settingsNavigate = () => { + const url = `/projects/${projectId}/settings`; + navigate(url, { replace: true }); + } return ( -
- {location.pathname.includes('/projects/') && } +
+ {location.pathname.includes('/projects/') && + + + + + + }
); }; diff --git a/ui/src/components/Stepper/HorizontalStepper/HorizontalStepper.scss b/ui/src/components/Stepper/HorizontalStepper/HorizontalStepper.scss index e20b914c..776cce0c 100644 --- a/ui/src/components/Stepper/HorizontalStepper/HorizontalStepper.scss +++ b/ui/src/components/Stepper/HorizontalStepper/HorizontalStepper.scss @@ -119,6 +119,7 @@ z-index: 9; } .stepContent { + background-color: $color-base-white-10; height: calc(100vh - 56px); padding-top: 190px; } \ No newline at end of file diff --git a/ui/src/components/TestMigration/index.tsx b/ui/src/components/TestMigration/index.tsx index 007eca4c..45eeec98 100644 --- a/ui/src/components/TestMigration/index.tsx +++ b/ui/src/components/TestMigration/index.tsx @@ -1,6 +1,6 @@ import { useContext, useEffect, useState } from 'react'; -import { Link, useNavigate, useParams } from 'react-router-dom'; -import { Button } from '@contentstack/venus-components'; +import { useNavigate, useParams } from 'react-router-dom'; +import { Field, FieldLabel, TextInput, Link, Icon, Tooltip } from '@contentstack/venus-components'; import { UseDispatch,useSelector } from 'react-redux'; // Services @@ -19,7 +19,8 @@ import { AppContext } from '../../context/app/app.context'; const TestMigration = () => { const [data, setData] = useState({}); - const newMigrationData = useSelector((state:any)=>state?.migration?.newMigration); + const newMigrationData = useSelector((state:any)=>state?.migration?.newMigrationData); + /** ALL HOOKS Here */ const { projectId = '' } = useParams(); @@ -38,9 +39,57 @@ const TestMigration = () => { const { subtitle, cta } = data; + + return ( -
-
+
+
+
UID
+
+

Select your current Content Management system from the available options.

+ + + Uploaded CMS + +
+ {newMigrationData?.test_migration?.stack_api_key && ( + + )} + + {newMigrationData?.test_migration?.stack_link && ( + + + + + + )} +
+ +
+
+ +
+
Execution Logs
+
+ +
+
+ {/*
{subtitle}: @@ -63,7 +112,7 @@ const TestMigration = () => { )} -
+
*/}
); }; diff --git a/ui/src/components/layout/AppLayout/index.tsx b/ui/src/components/layout/AppLayout/index.tsx index 059dac48..9fe95556 100644 --- a/ui/src/components/layout/AppLayout/index.tsx +++ b/ui/src/components/layout/AppLayout/index.tsx @@ -1,11 +1,13 @@ // Libraries import { FC, ReactNode, useEffect } from 'react'; -import { useLocation } from 'react-router'; +import { Params, useLocation, useParams } from 'react-router'; +import { useDispatch } from 'react-redux'; + +import { getUserDetails } from '../../../store/slice/authSlice'; + // Component import MainHeader from '../../MainHeader'; import SideBar from '../../SideBar'; -import { getUserDetails } from '../../../store/slice/authSlice'; -import { useDispatch } from 'react-redux'; type IProps = { children?: ReactNode; @@ -15,6 +17,8 @@ const AppLayout: FC = ({ children }) => { const location = useLocation(); const dispatch = useDispatch(); + const projectId = location?.pathname?.split('/')?.[2]; + useEffect(()=>{ dispatch(getUserDetails()); @@ -25,7 +29,7 @@ const AppLayout: FC = ({ children }) => { {location.pathname.includes('projects') && <> - + }
diff --git a/ui/src/context/app/app.interface.ts b/ui/src/context/app/app.interface.ts index 910c2a74..dfc9738d 100644 --- a/ui/src/context/app/app.interface.ts +++ b/ui/src/context/app/app.interface.ts @@ -187,6 +187,7 @@ export interface IDropDown { } export interface ITestMigration { stack_link: string; + stack_api_key: string; } export interface IAppContext { authToken: string; @@ -286,7 +287,8 @@ export const DEFAULT_CONTENT_MAPPER: IContentMapper = { }; export const DEFAULT_TEST_MIGRATION: ITestMigration = { - stack_link: '' + stack_link: '', + stack_api_key: '' }; export const DEFAULT_NEW_MIGRATION: INewMigration = { diff --git a/ui/src/pages/Migration/index.tsx b/ui/src/pages/Migration/index.tsx index f4f1398b..7794c7ed 100644 --- a/ui/src/pages/Migration/index.tsx +++ b/ui/src/pages/Migration/index.tsx @@ -189,7 +189,6 @@ const Migration = () => { }; const handleOnClickContentMapper = async (event: MouseEvent) => { - if (isCompleted) { event.preventDefault(); const data = { @@ -203,10 +202,11 @@ const Migration = () => { projectId, data ); + const newMigrationDataObj: INewMigration = { ...newMigrationData, - test_migration: { stack_link: res?.data?.data?.url } + test_migration: { stack_link: res?.data?.data?.url, stack_api_key: res?.data?.data?.data?.stack?.api_key } }; dispatch(updateNewMigrationData((newMigrationDataObj))); @@ -214,12 +214,6 @@ const Migration = () => { const url = `/projects/${projectId}/migration/steps/4`; navigate(url, { replace: true }); } - } else { - Notification({ - notificationContent: { text: 'Please complete all steps' }, - type: 'warning' - }); - } } const handleOnClickFunctions = [ diff --git a/ui/src/scss/App.scss b/ui/src/scss/App.scss index b76ecbd7..4cc6ff59 100644 --- a/ui/src/scss/App.scss +++ b/ui/src/scss/App.scss @@ -387,6 +387,22 @@ h2 { } } } +.content-block { + background-color: $color-brand-white-base; + border: 1px solid $color-base-gray-40; + border-radius: $px-4; + margin: $px-24 $px-20 $px-32; + + .content-header { + font-size: $size-font-large; + font-weight: $font-weight-semi-bold; + padding: $px-12 $px-24; + } + .content-body { + border-top: 1px solid $color-base-gray-40; + padding: $px-24 $px-30; + } +} ::-webkit-input-placeholder { color: $color-stepper-title !important; } From bc9c9550525841b8baede92e8515e95c94ec0efb Mon Sep 17 00:00:00 2001 From: AishDani Date: Wed, 19 Jun 2024 13:51:13 +0530 Subject: [PATCH 2/8] refactor:modified validated api props --- .../components/LegacyCms/Actions/LoadUploadFile.tsx | 2 +- ui/src/services/api/upload.service.ts | 12 ++++++++++-- uplaode-api/src/routes/index.ts | 2 +- 3 files changed, 12 insertions(+), 4 deletions(-) diff --git a/ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx b/ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx index 314ec21e..b1c2f1fe 100644 --- a/ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx +++ b/ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx @@ -76,7 +76,7 @@ const LoadUploadFile = (props: LoadUploadFileProps) => { setProgressPercentage(30); setShowProgress(true); - const res: any = await fileValidation(); + const res: any = await fileValidation(projectId); if(res?.status === 200){ setIsValidated(true); setValidationMessage('Validated'); diff --git a/ui/src/services/api/upload.service.ts b/ui/src/services/api/upload.service.ts index 67ada600..ead7f3f2 100644 --- a/ui/src/services/api/upload.service.ts +++ b/ui/src/services/api/upload.service.ts @@ -2,6 +2,7 @@ import axios from 'axios'; import { UPLOAD_FILE_RELATIVE_URL } from '../../utilities/constants'; import { User, SmsToken } from '../../pages/Login/login.interface'; import { API_VERSION } from '../../utilities/constants'; +import { getDataFromLocalStorage } from '../../utilities/functions'; //Axios Calls for Upload server export const getCall = async (url: string, options?: any) => { @@ -36,9 +37,16 @@ export const uploadFilePath = () => { return `${UPLOAD_FILE_RELATIVE_URL}upload`; }; -export const fileValidation = () => { +export const fileValidation = (projectId: string) => { try { - return getCall(`${UPLOAD_FILE_RELATIVE_URL}validator`); + const options = { + headers: { + 'app_token': getDataFromLocalStorage('app_token'), + 'projectId': projectId + }, + + }; + return getCall(`${UPLOAD_FILE_RELATIVE_URL}validator`, options); } catch (error) { return error; } diff --git a/uplaode-api/src/routes/index.ts b/uplaode-api/src/routes/index.ts index 32a46b61..b66241db 100644 --- a/uplaode-api/src/routes/index.ts +++ b/uplaode-api/src/routes/index.ts @@ -91,7 +91,7 @@ router.post('/upload', upload.single('file'), async function (req: Request, res: // deepcode ignore NoRateLimitingForExpensiveWebOperation: router.get('/validator', express.json(), fileOperationLimiter, async function (req: Request, res: Response) { try { - const projectId: string | string[] = req?.body?.projectId ?? ""; + const projectId: string | string[] = req?.headers?.projectid ?? ""; const app_token: string | string[] = req?.headers?.app_token ?? ""; const cmsType = config?.cmsType?.toLowerCase(); From a32b0cb80ed2869f4373a2eae5a0687a14e5f162 Mon Sep 17 00:00:00 2001 From: snehalsankhe Date: Wed, 19 Jun 2024 15:08:25 +0530 Subject: [PATCH 3/8] solved issues on destination stack --- .../Actions/LoadOrganisation.tsx | 8 +++----- .../DestinationStack/Actions/LoadStacks.tsx | 20 ++++++++++++------- .../DestinationStack/DestinationStack.scss | 7 ++++++- .../VerticalStepper/AutoVerticalStepper.tsx | 4 ++-- ui/src/pages/Migration/index.tsx | 5 +++++ 5 files changed, 29 insertions(+), 15 deletions(-) diff --git a/ui/src/components/DestinationStack/Actions/LoadOrganisation.tsx b/ui/src/components/DestinationStack/Actions/LoadOrganisation.tsx index 2dba6f8c..cc31ab3d 100644 --- a/ui/src/components/DestinationStack/Actions/LoadOrganisation.tsx +++ b/ui/src/components/DestinationStack/Actions/LoadOrganisation.tsx @@ -1,6 +1,6 @@ import { ChangeEvent, useEffect, useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import { INewMigration } from '../../../context/app/app.interface'; +import { IDropDown, INewMigration } from '../../../context/app/app.interface'; import { TextInput } from '@contentstack/venus-components'; import '../DestinationStack.scss'; @@ -23,8 +23,7 @@ const LoadOrganisation = (props: LoadOrganisationProps) => { const dispatch = useDispatch(); - const [selectedOrg, setSelectedOrg] = useState(); - + const [selectedOrg, setSelectedOrg] = useState(); /**** ALL METHODS HERE ****/ //update new Migration Data @@ -32,7 +31,6 @@ const LoadOrganisation = (props: LoadOrganisationProps) => { dispatch(updateNewMigrationData((data))); }; - const textInput = newMigrationData?.destination_stack?.selectedOrg?.label //Handle Organisation selection // const handleDropdownChange = (data: ChangeEvent) => { @@ -87,7 +85,7 @@ const LoadOrganisation = (props: LoadOrganisationProps) => {
*/} { const [isSaving, setIsSaving] = useState(false); const [isLoading, setisLoading] = useState(false); + const { projectId = '' }: Params = useParams(); //Handle new stack details @@ -103,6 +104,7 @@ const LoadStacks = (props: LoadFileFormatProps) => { /**** ALL METHODS HERE ****/ + const [placeholder, setPlaceholder] = useState('Select a stack'); //Handle Legacy cms selection const handleDropdownChange = (name: string) => (data: IDropDown) => { const stackChanged = selectedStack?.value !== data?.value; @@ -110,6 +112,11 @@ const LoadStacks = (props: LoadFileFormatProps) => { if (data?.value == '+ Create a new Stack') { handleCreateNewStack() } + if (stackCleared === true) { + setPlaceholder('Select a stack'); + } + + if (name === 'stacks' && data?.value != '+ Create a new Stack') { setSelectedStack(() => ({ ...data })); @@ -121,8 +128,8 @@ const LoadStacks = (props: LoadFileFormatProps) => { } }; - dispatch(updateNewMigrationData((newMigrationDataObj))); + dispatch(updateNewMigrationData((newMigrationDataObj))); if (!stackCleared) { if (props?.handleStepChange) { props?.handleStepChange(props?.currentStep, true); @@ -212,7 +219,7 @@ const LoadStacks = (props: LoadFileFormatProps) => { limit: number; }) => { const stackData = await getAllStacksInOrg( - newMigrationData?.destination_stack?.selectedOrg?.value + selectedOrganisation?.value ); //org id will always be there const stackArray = validateArray(stackData?.data?.stacks) @@ -240,7 +247,6 @@ const LoadStacks = (props: LoadFileFormatProps) => { } stackArray.push(addLabel) - setAllStack(stackArray); //Set selected Stack @@ -272,7 +278,6 @@ const LoadStacks = (props: LoadFileFormatProps) => { } } }; - return (
@@ -287,12 +292,13 @@ const LoadStacks = (props: LoadFileFormatProps) => { onBlur={onBlurDropdown} canEditOption={true} value={selectedStack} - isSearchable={true} isClearable={true} + isSearchable={true} width="600px" isDisabled={props?.stepComponentProps?.isSummary || false} - placeholder={'Select a stack'} + placeholder={placeholder} limit={10} + updateOption={()=> undefined} />
diff --git a/ui/src/components/DestinationStack/DestinationStack.scss b/ui/src/components/DestinationStack/DestinationStack.scss index 35113f8e..726a0d15 100644 --- a/ui/src/components/DestinationStack/DestinationStack.scss +++ b/ui/src/components/DestinationStack/DestinationStack.scss @@ -25,7 +25,12 @@ .pl-40 { padding-left: $px-40; } - +.Dropdown-wrapper { + .css-b8ldur-Input { + // border: 1px solid red; + cursor: not-allowed; + } +} .stackselect { min-width: 600px !important; max-width: 600px !important; diff --git a/ui/src/components/Stepper/VerticalStepper/AutoVerticalStepper.tsx b/ui/src/components/Stepper/VerticalStepper/AutoVerticalStepper.tsx index af961eca..2e247e48 100644 --- a/ui/src/components/Stepper/VerticalStepper/AutoVerticalStepper.tsx +++ b/ui/src/components/Stepper/VerticalStepper/AutoVerticalStepper.tsx @@ -88,13 +88,13 @@ const AutoVerticalStepper = React.forwardRef<
{data.titleNote ? data.titleNote : ''}
- {data?.lock ? ( + {/* {data?.lock ? (
lock-icon
- ) : null} + ) : null} */}
{data.description &&
{data.description}
} diff --git a/ui/src/pages/Migration/index.tsx b/ui/src/pages/Migration/index.tsx index 85ae8fd3..3b72e519 100644 --- a/ui/src/pages/Migration/index.tsx +++ b/ui/src/pages/Migration/index.tsx @@ -202,6 +202,11 @@ const Migration = () => { const url = `/projects/${projectId}/migration/steps/3`; navigate(url, { replace: true }); } + } else{ + Notification({ + notificationContent: { text: 'Please complete all steps' }, + type: 'warning' + }); } }; From 4c8cfc0e5b00dc00fcf8451c07b3ee0ee5c82c95 Mon Sep 17 00:00:00 2001 From: Sayali Joshi Date: Wed, 19 Jun 2024 15:35:40 +0530 Subject: [PATCH 4/8] Content Mapper changes --- ui/src/components/Common/Settings/index.tsx | 11 --- .../DestinationStack/Actions/LoadStacks.tsx | 1 + .../LegacyCms/Actions/LoadUploadFile.tsx | 6 +- ui/src/components/MainHeader/index.scss | 2 +- .../components/MigrationExecution/index.tsx | 45 ++++++----- .../components/MigrationFlowHeader/index.tsx | 4 +- ui/src/pages/Migration/index.tsx | 79 +++++++++++++------ ui/src/scss/App.scss | 2 +- uplaode-api/.env | 2 +- 9 files changed, 87 insertions(+), 65 deletions(-) diff --git a/ui/src/components/Common/Settings/index.tsx b/ui/src/components/Common/Settings/index.tsx index ba6d9e5a..7103fb79 100644 --- a/ui/src/components/Common/Settings/index.tsx +++ b/ui/src/components/Common/Settings/index.tsx @@ -252,17 +252,6 @@ const Settings = () => { }} version="v2" /> - } - onClick={() => { - setActive(cmsData?.execution_logs?.title); - setCurrentHeader(cmsData?.execution_logs?.title); - }} - version="v2" - />
) }; diff --git a/ui/src/components/DestinationStack/Actions/LoadStacks.tsx b/ui/src/components/DestinationStack/Actions/LoadStacks.tsx index dcd747dd..1b019012 100644 --- a/ui/src/components/DestinationStack/Actions/LoadStacks.tsx +++ b/ui/src/components/DestinationStack/Actions/LoadStacks.tsx @@ -293,6 +293,7 @@ const LoadStacks = (props: LoadFileFormatProps) => { isDisabled={props?.stepComponentProps?.isSummary || false} placeholder={'Select a stack'} limit={10} + updateOption={()=> undefined} />
diff --git a/ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx b/ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx index b1c2f1fe..b2e36cc2 100644 --- a/ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx +++ b/ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx @@ -27,7 +27,7 @@ const FileComponent = ({fileDetails}:Props ) => {
{fileDetails?.isLocalPath && (!isEmptyString(fileDetails?.localPath) || !isEmptyString(fileDetails?.awsData?.awsRegion)) ? (
- +
) : ( @@ -289,9 +289,9 @@ const LoadUploadFile = (props: LoadUploadFileProps) => { {!isConfigLoading && !isEmptyString(cmsType) ? ( ) : - } + } {showMessage && - () + () }
diff --git a/ui/src/components/MainHeader/index.scss b/ui/src/components/MainHeader/index.scss index 71225d6d..b5609bdc 100644 --- a/ui/src/components/MainHeader/index.scss +++ b/ui/src/components/MainHeader/index.scss @@ -10,7 +10,7 @@ top: 0; display: flex; align-items: center; - z-index: 9; + z-index: 10; button { border: 0 none; } diff --git a/ui/src/components/MigrationExecution/index.tsx b/ui/src/components/MigrationExecution/index.tsx index b3b82b73..3e78ef6f 100644 --- a/ui/src/components/MigrationExecution/index.tsx +++ b/ui/src/components/MigrationExecution/index.tsx @@ -67,27 +67,30 @@ const MigrationExecution = () => { }; return ( -
-
- {MigrationInformation && - validateArray(MigrationInformation) && - MigrationInformation?.map((item, index) => ( -
- - - {item?.title} - - {getPlaceHolder(item?.title)} - - {index < MigrationInformation?.length - 1 && ( - - )} -
- ))} -
-
-
- +
+
+
Path
+
Select your organization maintained on Contentstack.
+
+ +
+ {MigrationInformation && + validateArray(MigrationInformation) && + MigrationInformation?.map((item, index) => ( +
+ + + {item?.title} + + {getPlaceHolder(item?.title)} + + {index < MigrationInformation?.length - 1 && ( + + )} +
+ ))} +
+
); diff --git a/ui/src/components/MigrationFlowHeader/index.tsx b/ui/src/components/MigrationFlowHeader/index.tsx index bd7d0a04..3a597972 100644 --- a/ui/src/components/MigrationFlowHeader/index.tsx +++ b/ui/src/components/MigrationFlowHeader/index.tsx @@ -18,9 +18,10 @@ import './index.scss'; type MigrationFlowHeaderProps = { handleOnClick: (event: MouseEvent, handleStepChange: (currentStep: number) => void) => void; + isLoading: boolean; }; -const MigrationFlowHeader = ({ handleOnClick }: MigrationFlowHeaderProps) => { +const MigrationFlowHeader = ({ handleOnClick, isLoading }: MigrationFlowHeaderProps) => { const [projectName, setProjectName] = useState(''); const navigate = useNavigate(); @@ -73,6 +74,7 @@ const MigrationFlowHeader = ({ handleOnClick }: MigrationFlowHeaderProps) => { onClick={handleOnClick} version="v2" aria-label='Save and Continue' + isLoading={isLoading} > Save and Continue diff --git a/ui/src/pages/Migration/index.tsx b/ui/src/pages/Migration/index.tsx index 62be4e08..d62bcb63 100644 --- a/ui/src/pages/Migration/index.tsx +++ b/ui/src/pages/Migration/index.tsx @@ -165,6 +165,8 @@ const Migration = () => { // handle on proceed to destination stack const handleOnClickLegacyCms = async (event: MouseEvent ) => { + setIsLoading(true); + if(isCompleted){ event.preventDefault(); @@ -175,12 +177,16 @@ const Migration = () => { const res = await updateCurrentStepData(selectedOrganisation.value, projectId); handleStepChange(1); if (res) { + setIsLoading(false); + const url = `/projects/${projectId}/migration/steps/2`; navigate(url, { replace: true }); } } else{ + setIsLoading(false); + Notification({ notificationContent: { text: 'Please complete all steps' }, type: 'warning' @@ -190,6 +196,8 @@ const Migration = () => { }; // handle on proceed to content mapping const handleOnClickDestinationStack = async (event: MouseEvent) => { + setIsLoading(true); + if(isCompleted){ event?.preventDefault(); //Update Data in backend @@ -199,6 +207,8 @@ const Migration = () => { handleStepChange(2); const res = await updateCurrentStepData(selectedOrganisation?.value, projectId); if (res) { + setIsLoading(false); + const url = `/projects/${projectId}/migration/steps/3`; navigate(url, { replace: true }); } @@ -206,42 +216,59 @@ const Migration = () => { }; const handleOnClickContentMapper = async (event: MouseEvent) => { - event.preventDefault(); + setIsLoading(true); + + event.preventDefault(); + + 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 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) { - const url = `/projects/${projectId}/migration/steps/4`; - navigate(url, { replace: true }); - } + const url = `/projects/${projectId}/migration/steps/4`; + navigate(url, { replace: true }); + + await updateCurrentStepData(selectedOrganisation.value, projectId); + handleStepChange(3); + } + } + + const handleOnClickTestMigration = async (event: MouseEvent) => { + setIsLoading(false); + + const url = `/projects/${projectId}/migration/steps/5`; + navigate(url, { replace: true }); + + await updateCurrentStepData(selectedOrganisation.value, projectId); + handleStepChange(4); } const handleOnClickFunctions = [ handleOnClickLegacyCms, handleOnClickDestinationStack, - handleOnClickContentMapper + handleOnClickContentMapper, + handleOnClickTestMigration ]; return (
- +
{ projectData && diff --git a/ui/src/scss/App.scss b/ui/src/scss/App.scss index 4cc6ff59..0d931e43 100644 --- a/ui/src/scss/App.scss +++ b/ui/src/scss/App.scss @@ -400,7 +400,7 @@ h2 { } .content-body { border-top: 1px solid $color-base-gray-40; - padding: $px-24 $px-30; + padding: $px-24 $px-24; } } ::-webkit-input-placeholder { diff --git a/uplaode-api/.env b/uplaode-api/.env index 5f3a84b6..2c50b649 100644 --- a/uplaode-api/.env +++ b/uplaode-api/.env @@ -1,2 +1,2 @@ PORT=4002 -NODE_BACKEND_API =http://localhost:5000 \ No newline at end of file +NODE_BACKEND_API =http://localhost:5001 \ No newline at end of file From 03d4ee07988d9ddd43ab0490a124890d995ff9f3 Mon Sep 17 00:00:00 2001 From: AishDani Date: Wed, 19 Jun 2024 18:15:25 +0530 Subject: [PATCH 5/8] feat:added search functionality in getAllStack api --- api/src/routes/org.routes.ts | 2 +- api/src/services/org.service.ts | 13 +++++++++++-- .../DestinationStack/Actions/LoadStacks.tsx | 4 ++-- ui/src/components/DestinationStack/index.tsx | 2 +- .../components/LegacyCms/Actions/LoadUploadFile.tsx | 9 +++++---- ui/src/services/api/stacks.service.ts | 4 ++-- 6 files changed, 22 insertions(+), 12 deletions(-) diff --git a/api/src/routes/org.routes.ts b/api/src/routes/org.routes.ts index d4c2216b..2e8a3c57 100644 --- a/api/src/routes/org.routes.ts +++ b/api/src/routes/org.routes.ts @@ -6,7 +6,7 @@ import validator from "../validators/index.js"; const router = express.Router({ mergeParams: true }); // GET all org stacks route -router.get("/stacks", asyncRouter(orgController.getAllStacks)); +router.get("/stacks/:searchText?", asyncRouter(orgController.getAllStacks)); // Create a new stack route router.post( diff --git a/api/src/services/org.service.ts b/api/src/services/org.service.ts index ccff6804..3c13f84e 100644 --- a/api/src/services/org.service.ts +++ b/api/src/services/org.service.ts @@ -13,6 +13,7 @@ const getAllStacks = async (req: Request): Promise => { const srcFun = "getAllStacks"; const orgId = req?.params?.orgId; const { token_payload } = req.body; + const search: string = req?.params?.searchText?.toLowerCase(); try { const authtoken = await getAuthtoken( @@ -42,13 +43,21 @@ const getAllStacks = async (req: Request): Promise => { err.response.data ) ); - return { data: err.response.data, status: err.response.status, }; } - let locale = await getStackLocal(token_payload, res.data.stacks); + let stacks = res?.data?.stacks; + if(search){ + stacks = stacks.filter((stack:{name: string, description:string})=>{ + const stackName = stack.name?.toLowerCase(); + const stackDescription = stack.description?.toLowerCase(); + return stackName.includes(search) || stackDescription.includes(search); + + }) + } + const locale = await getStackLocal(token_payload, stacks); return { data: { stacks: locale, diff --git a/ui/src/components/DestinationStack/Actions/LoadStacks.tsx b/ui/src/components/DestinationStack/Actions/LoadStacks.tsx index a05ac289..bd6b57d8 100644 --- a/ui/src/components/DestinationStack/Actions/LoadStacks.tsx +++ b/ui/src/components/DestinationStack/Actions/LoadStacks.tsx @@ -141,7 +141,7 @@ const LoadStacks = (props: LoadFileFormatProps) => { const fetchData = async () => { setisLoading(true); const stackData = await getAllStacksInOrg( - newMigrationData?.destination_stack?.selectedOrg?.value + newMigrationData?.destination_stack?.selectedOrg?.value,'' ); //org id will always be there const stackArray = validateArray(stackData?.data?.stacks) @@ -219,7 +219,7 @@ const LoadStacks = (props: LoadFileFormatProps) => { limit: number; }) => { const stackData = await getAllStacksInOrg( - selectedOrganisation?.value + selectedOrganisation?.value, search ); //org id will always be there const stackArray = validateArray(stackData?.data?.stacks) diff --git a/ui/src/components/DestinationStack/index.tsx b/ui/src/components/DestinationStack/index.tsx index 0440151d..76cd2981 100644 --- a/ui/src/components/DestinationStack/index.tsx +++ b/ui/src/components/DestinationStack/index.tsx @@ -96,7 +96,7 @@ const DestinationStackComponent = ({ //If stack is already selected and exist in backend, then fetch all stack list and filter selected stack. if (!isEmptyString(destination_stack)) { const stackData: any = await getAllStacksInOrg( - selectedOrganisationData?.value || selectedOrganisation?.value + selectedOrganisationData?.value || selectedOrganisation?.value,'' ); const stack = diff --git a/ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx b/ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx index b2e36cc2..6997c85c 100644 --- a/ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx +++ b/ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx @@ -27,7 +27,7 @@ const FileComponent = ({fileDetails}:Props ) => {
{fileDetails?.isLocalPath && (!isEmptyString(fileDetails?.localPath) || !isEmptyString(fileDetails?.awsData?.awsRegion)) ? (
- +
) : ( @@ -289,9 +289,9 @@ const LoadUploadFile = (props: LoadUploadFileProps) => { {!isConfigLoading && !isEmptyString(cmsType) ? ( ) : - } + } {showMessage && - () + () }
@@ -305,7 +305,8 @@ const LoadUploadFile = (props: LoadUploadFileProps) => { onClick={handleOnFileUploadCompletion} isLoading={isLoading} version={"v2"} - disabled={isDasabled}>Validate + disabled={isDasabled} + >Validate
diff --git a/ui/src/services/api/stacks.service.ts b/ui/src/services/api/stacks.service.ts index abb79029..334b2b7a 100644 --- a/ui/src/services/api/stacks.service.ts +++ b/ui/src/services/api/stacks.service.ts @@ -8,9 +8,9 @@ const options = { } }; -export const getAllStacksInOrg = async (orgId: string) => { +export const getAllStacksInOrg = async (orgId: string,searchText: string) => { try { - return await getCall(`${API_VERSION}/org/${orgId}/stacks`, options); + return await getCall(`${API_VERSION}/org/${orgId}/stacks/${searchText}?`, options); } catch (error) { return error; } From 03f687620d41fd5a248ec98f02776590a0ea4958 Mon Sep 17 00:00:00 2001 From: AishDani Date: Wed, 19 Jun 2024 18:50:19 +0530 Subject: [PATCH 6/8] refactor:handled empty stack getting even if stack is present --- .../DestinationStack/Actions/LoadStacks.tsx | 47 ++++++++++++------- 1 file changed, 29 insertions(+), 18 deletions(-) diff --git a/ui/src/components/DestinationStack/Actions/LoadStacks.tsx b/ui/src/components/DestinationStack/Actions/LoadStacks.tsx index bd6b57d8..183fb08e 100644 --- a/ui/src/components/DestinationStack/Actions/LoadStacks.tsx +++ b/ui/src/components/DestinationStack/Actions/LoadStacks.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { AsyncSelect, cbModal } from '@contentstack/venus-components'; import { DEFAULT_DROPDOWN, IDropDown, INewMigration } from '../../../context/app/app.interface'; @@ -35,6 +35,7 @@ const LoadStacks = (props: LoadFileFormatProps) => { ? newMigrationData?.destination_stack?.selectedStack : DEFAULT_DROPDOWN ); + const [allStack, setAllStack] = useState([]); const [allLocales, setAllLocales] = useState([]); @@ -44,6 +45,12 @@ const LoadStacks = (props: LoadFileFormatProps) => { const { projectId = '' }: Params = useParams(); + useEffect(()=>{ + if(! isEmptyString(newMigrationData?.destination_stack?.selectedStack?.value)){ + setSelectedStack(newMigrationData?.destination_stack?.selectedStack); + } + },[newMigrationData?.destination_stack?.selectedStack]) + //Handle new stack details const handleOnSave = async (data: Stack) => { if (isSaving) return false; @@ -249,25 +256,29 @@ const LoadStacks = (props: LoadFileFormatProps) => { setAllStack(stackArray); - //Set selected Stack - const selectedStackData = validateArray(stackArray) - ? stackArray.find( - (stack: IDropDown) => - stack?.value === newMigrationData?.destination_stack?.selectedStack?.value - ) - : DEFAULT_DROPDOWN; - - setSelectedStack(selectedStackData); + // //Set selected Stack + // const selectedStackData = validateArray(stackArray) + // ? stackArray.find( + // (stack: IDropDown) =>{ + // console.log("stack :::", selectedStack?.value) + + // return stack?.value === selectedStack?.value} + // ) + // : DEFAULT_DROPDOWN; + + // setSelectedStack(selectedStackData); + // console.log("inload more ::::", selectedStackData); + - const newMigrationDataObj: INewMigration = { - ...newMigrationData, - destination_stack: { - ...newMigrationData?.destination_stack, - selectedStack: selectedStackData - } - }; + // const newMigrationDataObj: INewMigration = { + // ...newMigrationData, + // destination_stack: { + // ...newMigrationData?.destination_stack, + // selectedStack: selectedStackData + // } + // }; - dispatch(updateNewMigrationData((newMigrationDataObj))); + // dispatch(updateNewMigrationData((newMigrationDataObj))); return { options: stackArray }; }; From 6ad06016b9c27b68004067c200badebbc5badf4d Mon Sep 17 00:00:00 2001 From: Sayali Joshi Date: Thu, 20 Jun 2024 16:21:30 +0530 Subject: [PATCH 7/8] Design corrections --- ui/src/components/ContentMapper/index.scss | 1 + .../LegacyCms/Actions/LoadUploadFile.tsx | 21 +++--- ui/src/components/LegacyCms/legacyCms.scss | 2 +- ui/src/components/MainHeader/index.scss | 4 +- .../components/MigrationExecution/index.scss | 19 ++++-- .../components/MigrationExecution/index.tsx | 32 +++++---- .../components/MigrationFlowHeader/index.tsx | 3 +- ui/src/components/SchemaModal/index.scss | 2 +- ui/src/components/SchemaModal/index.tsx | 6 +- ui/src/components/TestMigration/index.scss | 66 +++---------------- ui/src/components/TestMigration/index.tsx | 40 +---------- ui/src/pages/Migration/index.tsx | 5 +- ui/src/pages/Projects/index.tsx | 4 +- ui/src/scss/App.scss | 8 +++ 14 files changed, 78 insertions(+), 135 deletions(-) diff --git a/ui/src/components/ContentMapper/index.scss b/ui/src/components/ContentMapper/index.scss index 591460fe..3249fe80 100644 --- a/ui/src/components/ContentMapper/index.scss +++ b/ui/src/components/ContentMapper/index.scss @@ -29,6 +29,7 @@ border-bottom: 1px solid $color-brand-secondary-lightest; padding: $px-8 $px-12; .Search__v2 { + background-color: $color-brand-white-base; height: 2.5rem; width: 100%!important; .Search-input-show { diff --git a/ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx b/ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx index 6997c85c..7311d0bc 100644 --- a/ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx +++ b/ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx @@ -27,7 +27,7 @@ const FileComponent = ({fileDetails}:Props ) => {
{fileDetails?.isLocalPath && (!isEmptyString(fileDetails?.localPath) || !isEmptyString(fileDetails?.awsData?.awsRegion)) ? (
- +
) : ( @@ -55,7 +55,7 @@ const LoadUploadFile = (props: LoadUploadFileProps) => { const [showMessage, setShowMessage] = useState(!!newMigrationData?.legacy_cms?.uploadedFile?.isValidated); const [validationMessgae, setValidationMessage] = useState(''); const [isValidationAttempted, setIsValidationAttempted] = useState(false); - const [isDasabled, setIsDisabled] = useState(false); + const [isDisabled, setIsDisabled] = useState(false); const [isConfigLoading, setIsConfigLoading] = useState(true); const [cmsType, setCmsType]= useState(''); const [fileDetails, setFileDetails] = useState(newMigrationData?.legacy_cms?.uploadedFile?.file_details || {}); @@ -301,12 +301,17 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
} - +
diff --git a/ui/src/components/LegacyCms/legacyCms.scss b/ui/src/components/LegacyCms/legacyCms.scss index aa682ead..f4fe0116 100644 --- a/ui/src/components/LegacyCms/legacyCms.scss +++ b/ui/src/components/LegacyCms/legacyCms.scss @@ -104,7 +104,7 @@ font-size: 12px; } .validation-cta{ - margin: 10px 20px; + margin: $space-24 $space-20 0; } .success{ color: $color-brand-success-base; diff --git a/ui/src/components/MainHeader/index.scss b/ui/src/components/MainHeader/index.scss index b5609bdc..fad380d7 100644 --- a/ui/src/components/MainHeader/index.scss +++ b/ui/src/components/MainHeader/index.scss @@ -2,7 +2,7 @@ .mainheader { background-color: $color-brand-white-base; - border-bottom: 1px solid $color-brand-secondary-lightest; + // border-bottom: 1px solid $color-brand-secondary-lightest; height: 3.5rem; justify-content: space-between; position: fixed; @@ -10,7 +10,7 @@ top: 0; display: flex; align-items: center; - z-index: 10; + z-index: 100; button { border: 0 none; } diff --git a/ui/src/components/MigrationExecution/index.scss b/ui/src/components/MigrationExecution/index.scss index 09cc16c8..42f81c48 100644 --- a/ui/src/components/MigrationExecution/index.scss +++ b/ui/src/components/MigrationExecution/index.scss @@ -4,8 +4,12 @@ .select-wrapper { display: flex; align-items: center; - justify-content: space-around; - margin-left: 5px; + .Field { + margin-bottom: 0; + } +} +.content-body.step-desc { + padding: 1rem 1.5rem; } .terminal-container { background-color: #000; @@ -39,12 +43,17 @@ div .step-component .action-component-body { padding: 5px 10px; margin: 5px; } -.icon-wrapper { +.arrow-wrapper { + align-items: center; display: flex; + height: 19.5px; margin-left: 30px; /* Adds space to the left of the icon */ margin-right: 30px; - margin-top: 20px; - align-items: center; + width: 23.5px; + &.Icon--original { + height: auto; + width: auto; + } } .execution-wrapper { diff --git a/ui/src/components/MigrationExecution/index.tsx b/ui/src/components/MigrationExecution/index.tsx index 3e78ef6f..2706f78c 100644 --- a/ui/src/components/MigrationExecution/index.tsx +++ b/ui/src/components/MigrationExecution/index.tsx @@ -1,25 +1,23 @@ -import { useEffect, useContext } from 'react'; -import { Icon, Button, Field, TextInput, FieldLabel } from '@contentstack/venus-components'; -import { UseDispatch, useSelector } from 'react-redux'; +import { useEffect } from 'react'; +import { Icon, Field, TextInput, FieldLabel } from '@contentstack/venus-components'; +import { useSelector, useDispatch } from 'react-redux'; // Services import { getCMSDataFromFile } from '../../cmsData/cmsSelector'; +// Redux +import { RootState } from '../../store'; +import { setMigrationData, updateMigrationData } from '../../store/slice/migrationDataSlice'; + // Utilities import { CS_ENTRIES } from '../../utilities/constants'; import { validateArray } from '../../utilities/functions'; -// Context -import { AppContext } from '../../context/app/app.context'; - // Interface import { DEFAULT_MIGRATION_EXECUTION } from '../../context/app/app.interface'; //stylesheet import './index.scss'; -import { useDispatch } from 'react-redux'; -import { RootState } from '../../store'; -import { setMigrationData, updateMigrationData } from '../../store/slice/migrationDataSlice'; const MigrationExecution = () => { //const { migrationData, updateMigrationData, newMigrationData } = useContext(AppContext); @@ -70,22 +68,28 @@ const MigrationExecution = () => {
Path
-
Select your organization maintained on Contentstack.
+
Select your organization maintained on Contentstack.
-
{MigrationInformation && validateArray(MigrationInformation) && MigrationInformation?.map((item, index) => (
- + {item?.title} - {getPlaceHolder(item?.title)} + {index < MigrationInformation?.length - 1 && ( - + )}
))} diff --git a/ui/src/components/MigrationFlowHeader/index.tsx b/ui/src/components/MigrationFlowHeader/index.tsx index 3a597972..1b081efc 100644 --- a/ui/src/components/MigrationFlowHeader/index.tsx +++ b/ui/src/components/MigrationFlowHeader/index.tsx @@ -51,6 +51,7 @@ const MigrationFlowHeader = ({ handleOnClick, isLoading }: MigrationFlowHeaderPr dispatch(updateNewMigrationData(DEFAULT_NEW_MIGRATION)) navigate(-1); } + return (
@@ -76,7 +77,7 @@ const MigrationFlowHeader = ({ handleOnClick, isLoading }: MigrationFlowHeaderPr aria-label='Save and Continue' isLoading={isLoading} > - Save and Continue + {params?.stepId === '5' ? 'Start' : 'Save and Continue'}
) diff --git a/ui/src/components/SchemaModal/index.scss b/ui/src/components/SchemaModal/index.scss index 6cbf7e62..8065e9dd 100644 --- a/ui/src/components/SchemaModal/index.scss +++ b/ui/src/components/SchemaModal/index.scss @@ -69,7 +69,7 @@ } } } - .title { + .field-title { color: $color-font-base; font-size: $size-font-large; font-weight: $font-weight-regular; diff --git a/ui/src/components/SchemaModal/index.tsx b/ui/src/components/SchemaModal/index.tsx index 120f657f..27bf9b88 100644 --- a/ui/src/components/SchemaModal/index.tsx +++ b/ui/src/components/SchemaModal/index.tsx @@ -38,7 +38,7 @@ const getTopLevelIcons = (field: FieldMapType) => { return icons['title']; } - if (field?.ContentstackFieldType === 'URL') { + if (field?.ContentstackFieldType === 'URL' || field?.ContentstackFieldType === 'single_line_text') { return icons['text']; } @@ -170,7 +170,7 @@ const TreeView = ({ schema = [] }: schemaType) => { )} - + {getChildFieldName(field?.otherCmsField, item?.otherCmsField)}
@@ -220,7 +220,7 @@ const TreeView = ({ schema = [] }: schemaType) => { {hasNested && } - {item?.otherCmsField} + {item?.otherCmsField}
{hasNested && generateNestedOutline(item, index)} diff --git a/ui/src/components/TestMigration/index.scss b/ui/src/components/TestMigration/index.scss index 5d6d4c6c..d7711aea 100644 --- a/ui/src/components/TestMigration/index.scss +++ b/ui/src/components/TestMigration/index.scss @@ -1,61 +1,11 @@ @import '../../scss/App.scss'; @import '../../scss/variables'; -.test { - background-color: #000000; - color: $color-brand-white-base; - height: 469px; - padding: 20px; - overflow-y: auto; - white-space: pre-wrap; - width: 100% !important; - box-sizing: border-box; -} - -div .step-component .action-component-body { - //margin-top: 60px !important; - width: 100% !important; - margin-left: 0px !important; -} -.cta-wrapper-test-migration { - border-top: 1px solid $color-base-gray-40; - bottom: 0; - left: 0; - padding: $space-12 $space-24 $space-12 $space-12; - position: fixed; - right: 0; - text-align: right; - width: 100%; - z-index: 1; -} -.selectedOptions { - color: $color-base-gray-20; - font-size: $size-font-large; - font-weight: $font-weight-semi-bold; - padding: 5px 0; - margin: 20px 0; -} -.icon-wrapper { - display: flex; - margin-left: 30px; /* Adds space to the left of the icon */ - margin-right: 30px; - margin-top: 20px; - align-items: center; -} - -.execution-wrapper { - display: flex; - background-color: $color-base-white-5; - color: $color-font-base; - height: $px-40; - justify-content: center; - align-items: center; - width: 100%; - text-align: center !important; - padding: 0 !important; - 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 45eeec98..d3360734 100644 --- a/ui/src/components/TestMigration/index.tsx +++ b/ui/src/components/TestMigration/index.tsx @@ -1,7 +1,7 @@ -import { useContext, useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; import { Field, FieldLabel, TextInput, Link, Icon, Tooltip } from '@contentstack/venus-components'; -import { UseDispatch,useSelector } from 'react-redux'; +import { useSelector } from 'react-redux'; // Services import { getCMSDataFromFile } from '../../cmsData/cmsSelector'; @@ -12,20 +12,12 @@ import { CS_ENTRIES } from '../../utilities/constants'; // Interface import { MigrationType } from './testMigration.interface'; -//stylesheet -import './index.scss'; -import { AppContext } from '../../context/app/app.context'; - const TestMigration = () => { const [data, setData] = useState({}); const newMigrationData = useSelector((state:any)=>state?.migration?.newMigrationData); - /** ALL HOOKS Here */ - const { projectId = '' } = useParams(); - const navigate = useNavigate(); - /********** ALL USEEFFECT HERE *************/ useEffect(() => { //check if offline CMS data field is set to true, if then read data from cms data file. @@ -37,10 +29,6 @@ const TestMigration = () => { }); }, []); - const { subtitle, cta } = data; - - - return (
@@ -89,30 +77,6 @@ const TestMigration = () => {
- {/* -
-
- {cta && cta?.title && ( - - - - )} -
*/}
); }; diff --git a/ui/src/pages/Migration/index.tsx b/ui/src/pages/Migration/index.tsx index 978729b6..5c0ebb74 100644 --- a/ui/src/pages/Migration/index.tsx +++ b/ui/src/pages/Migration/index.tsx @@ -98,8 +98,7 @@ const Migration = () => { } }; - const createStepper = (projectData:any,handleStepChange: (currentStep: number) => void) => { - + const createStepper = (projectData: MigrationResponse,handleStepChange: (currentStep: number) => void) => { const steps = [ { data: { } } - const handleOnClickTestMigration = async (event: MouseEvent) => { + const handleOnClickTestMigration = async () => { setIsLoading(false); const url = `/projects/${projectId}/migration/steps/5`; diff --git a/ui/src/pages/Projects/index.tsx b/ui/src/pages/Projects/index.tsx index e26d3b92..8b42f630 100644 --- a/ui/src/pages/Projects/index.tsx +++ b/ui/src/pages/Projects/index.tsx @@ -61,7 +61,9 @@ const Projects = () => { const [loadStatus, setLoadStatus] = useState(true); const [searchText, setSearchText] = useState(search); - + useEffect(()=>{ + dispatch(getUserDetails()); + },[]); const fetchProjects = async () => { if (selectedOrganisation?.value) { diff --git a/ui/src/scss/App.scss b/ui/src/scss/App.scss index 0d931e43..5a960be4 100644 --- a/ui/src/scss/App.scss +++ b/ui/src/scss/App.scss @@ -45,6 +45,7 @@ display: flex; height: 100vh; margin-left: auto; + overflow: hidden; .Icon--original { height: 1.25rem; width: 1.25rem; @@ -336,6 +337,7 @@ h2 { margin-bottom: $space-30; } .migration-steps-wrapper { + border-top: 1px solid $color-brand-secondary-lightest; margin-top: 3.5rem; h1 { color: $color-black-2121; @@ -400,9 +402,15 @@ h2 { } .content-body { border-top: 1px solid $color-base-gray-40; + line-height: $line-height-default; padding: $px-24 $px-24; } } +.layout-container { + .PageLayout__content { + border-top: 1px solid $color-brand-secondary-lightest; + } +} ::-webkit-input-placeholder { color: $color-stepper-title !important; } From 8b4a6ff6dd2ceffaf924cdd1ccff0f2514da5162 Mon Sep 17 00:00:00 2001 From: AishDani Date: Thu, 20 Jun 2024 17:06:53 +0530 Subject: [PATCH 8/8] refactor:resolved not getting group and refernce options in mapper dropdowns --- api/src/services/org.service.ts | 6 ++-- .../ContentMapper/contentMapper.interface.ts | 2 +- ui/src/components/ContentMapper/index.tsx | 34 ++++++++++++------- ui/src/pages/Projects/index.tsx | 6 +++- 4 files changed, 31 insertions(+), 17 deletions(-) diff --git a/api/src/services/org.service.ts b/api/src/services/org.service.ts index 3c13f84e..bc69192e 100644 --- a/api/src/services/org.service.ts +++ b/api/src/services/org.service.ts @@ -51,9 +51,9 @@ const getAllStacks = async (req: Request): Promise => { let stacks = res?.data?.stacks; if(search){ stacks = stacks.filter((stack:{name: string, description:string})=>{ - const stackName = stack.name?.toLowerCase(); - const stackDescription = stack.description?.toLowerCase(); - return stackName.includes(search) || stackDescription.includes(search); + const stackName = stack?.name?.toLowerCase(); + const stackDescription = stack?.description?.toLowerCase(); + return stackName?.includes(search) || stackDescription?.includes(search); }) } diff --git a/ui/src/components/ContentMapper/contentMapper.interface.ts b/ui/src/components/ContentMapper/contentMapper.interface.ts index 2708d800..7f07c28b 100644 --- a/ui/src/components/ContentMapper/contentMapper.interface.ts +++ b/ui/src/components/ContentMapper/contentMapper.interface.ts @@ -86,7 +86,7 @@ export interface FieldMetadata { export interface ContentTypesSchema { uid?: string; display_name?: string; - data_type?: 'text' | 'number' | 'isodate' | 'json' | 'file'; + data_type?: 'text' | 'number' | 'isodate' | 'json' | 'file' | 'reference' | 'group'; field_metadata?: FieldMetadata; enum?: any; } diff --git a/ui/src/components/ContentMapper/index.tsx b/ui/src/components/ContentMapper/index.tsx index 9168fd9b..f3f3def5 100644 --- a/ui/src/components/ContentMapper/index.tsx +++ b/ui/src/components/ContentMapper/index.tsx @@ -641,17 +641,18 @@ const ContentMapper = () => { 'multiline': 'multiline', 'HTML Rich text Editor': 'allow_rich_text', 'JSON Rich Text Editor': 'json', - group: 'Group', - URL: 'url', - file: 'file', - number: 'number', - Date: 'isodate', - boolean: 'boolean', - link: 'link', - reference: 'reference', - dropdown: 'enum', - radio: 'enum', - CheckBox: 'enum' + 'Rich Text':'json', + 'Group': 'Group', + 'URL': 'url', + 'file': 'file', + 'number': 'number', + 'Date': 'isodate', + 'boolean': 'boolean', + 'link': 'link', + 'reference': 'reference', + 'dropdown': 'enum', + 'radio': 'enum', + 'CheckBox': 'enum' }; const OptionsForRow: optionsType[] = []; // let ContentTypeSchema: ContentTypesSchema | undefined; @@ -666,7 +667,7 @@ const ContentMapper = () => { if (contentTypeSchema && validateArray(contentTypeSchema)) { const fieldTypeToMatch = fieldsOfContentstack[data?.otherCmsType as keyof Mapping]; - contentTypeSchema.forEach((value) => { + contentTypeSchema.forEach((value) => { switch (fieldTypeToMatch) { case 'text': if ( @@ -720,8 +721,16 @@ const ContentMapper = () => { } break; case 'Group': + if (value?.data_type === 'group') { OptionsForRow.push({ label: value?.display_name, value: value, isDisabled: false }); + } + break; + case 'reference': + if (value?.data_type === 'reference') { + OptionsForRow.push({ label: value?.display_name, value: value, isDisabled: false }); + } break; + default: OptionsForRow.push({ label: 'No matches found', @@ -744,6 +753,7 @@ const ContentMapper = () => { ...option, isDisabled: selectedOptions?.includes(option?.label ?? '') })); + return (
diff --git a/ui/src/pages/Projects/index.tsx b/ui/src/pages/Projects/index.tsx index e26d3b92..d73b02d6 100644 --- a/ui/src/pages/Projects/index.tsx +++ b/ui/src/pages/Projects/index.tsx @@ -85,10 +85,14 @@ const Projects = () => { // fetchProjects(); }; + useEffect(()=>{ dispatch(getUserDetails()); + },[dispatch]); - },[dispatch]) + useEffect(()=>{ + dispatch(getUserDetails()); + },[]); useEffect(() => { fetchData();