From dec14c5c767e610b0d4036552e0431928738aec0 Mon Sep 17 00:00:00 2001 From: AishDani Date: Tue, 24 Sep 2024 15:00:38 +0530 Subject: [PATCH 1/5] refactor:occurances of project and profile calls --- ui/src/components/Card/index.tsx | 2 +- ui/src/components/LegacyCms/index.tsx | 2 +- ui/src/components/MainHeader/index.tsx | 8 +++++--- ui/src/components/MigrationFlowHeader/index.tsx | 16 +++++++++------- ui/src/components/layout/AppLayout/index.tsx | 3 +-- ui/src/pages/Login/index.tsx | 5 ++++- ui/src/pages/Migration/index.tsx | 8 +++++--- ui/src/pages/Projects/index.tsx | 12 ++++++------ 8 files changed, 32 insertions(+), 24 deletions(-) diff --git a/ui/src/components/Card/index.tsx b/ui/src/components/Card/index.tsx index 496f4c6b..32eee662 100644 --- a/ui/src/components/Card/index.tsx +++ b/ui/src/components/Card/index.tsx @@ -29,7 +29,7 @@ const CardList = ({ project }: ProjectType) => { */ const onClickProject = (id: string) => { if (isEmptyString(id)) return; - navigate(`/projects/${id}/migration/steps/1`); + navigate(`/projects/${id}/migration/steps/${project?.current_step}`); }; const iconMapping: { [key: string]: string } = { diff --git a/ui/src/components/LegacyCms/index.tsx b/ui/src/components/LegacyCms/index.tsx index d727f469..dc925de8 100644 --- a/ui/src/components/LegacyCms/index.tsx +++ b/ui/src/components/LegacyCms/index.tsx @@ -91,7 +91,7 @@ const LegacyCMSComponent = forwardRef(({ legacyCMSData, isCompleted, handleOnAll useEffect(() => { const fetchCMSData = async () => { - setIsLoading(true); + //setIsLoading(true); //check if offline CMS data field is set to true, if then read data from cms data file. const data = await getCMSDataFromFile(CS_ENTRIES.LEGACY_CMS); diff --git a/ui/src/components/MainHeader/index.tsx b/ui/src/components/MainHeader/index.tsx index 5a3a9086..1311672a 100644 --- a/ui/src/components/MainHeader/index.tsx +++ b/ui/src/components/MainHeader/index.tsx @@ -41,7 +41,7 @@ const MainHeader = () => { const newMigrationData = useSelector((state:RootState)=> state?.migration?.newMigrationData); const [data, setData] = useState({}); - const [orgsList, setOrgsList] = useState([]); + const [orgsList, setOrgsList] = useState(organisationsList ?? []); const [isModalOpen, setIsModalOpen] = useState(false); @@ -51,9 +51,11 @@ const MainHeader = () => { const { logo, organization_label: organizationLabel } = data; - const name = `${user?.first_name?.charAt(0)}${user?.last_name?.charAt(0)}`.toUpperCase() ?? ''; + const name = user ? `${user?.first_name?.charAt(0)}${user?.last_name?.charAt(0)}`.toUpperCase() ?? '' : ''; const updateOrganisationListState = () => { + console.log("otgs ", organisationsList, user); + if (organisationsList) { //set selected org as default const list = organisationsList.map((org: IDropDown) => ({ @@ -87,7 +89,7 @@ const MainHeader = () => { useEffect(() => { updateOrganisationListState(); - }, [selectedOrganisation]); + }, [selectedOrganisation,organisationsList]); const handleOnDropDownChange = (data: IDropDown) => { if (data.value === selectedOrganisation.value) return; diff --git a/ui/src/components/MigrationFlowHeader/index.tsx b/ui/src/components/MigrationFlowHeader/index.tsx index 6187a1d2..53d59764 100644 --- a/ui/src/components/MigrationFlowHeader/index.tsx +++ b/ui/src/components/MigrationFlowHeader/index.tsx @@ -13,6 +13,7 @@ import { getProject } from '../../services/api/project.service'; // Interfaces import { DEFAULT_NEW_MIGRATION } from '../../context/app/app.interface'; import { ModalObj } from '../Modal/modal.interface'; +import { MigrationResponse } from '../../services/api/service.interface'; // CSS import './index.scss'; @@ -25,9 +26,10 @@ type MigrationFlowHeaderProps = { isLoading: boolean; isCompleted: boolean; legacyCMSRef: React.MutableRefObject; + projectData:MigrationResponse }; -const MigrationFlowHeader = ({ handleOnClick, isLoading, isCompleted , legacyCMSRef}: MigrationFlowHeaderProps) => { +const MigrationFlowHeader = ({projectData, handleOnClick, isLoading, isCompleted , legacyCMSRef}: MigrationFlowHeaderProps) => { const [projectName, setProjectName] = useState(''); const [currentStep, setCurrentStep] = useState(0); @@ -46,16 +48,16 @@ const MigrationFlowHeader = ({ handleOnClick, isLoading, isCompleted , legacyCMS /******** Function to get project ********/ const fetchProject = async () => { - const response = await getProject(selectedOrganisation?.value || '', params?.projectId || ''); + //const response = await getProject(selectedOrganisation?.value || '', params?.projectId || ''); - if (response?.status === 200) { - setProjectName(response?.data?.name); - setCurrentStep(response?.data?.current_step); + //if (response?.status === 200) { + setProjectName(projectData?.name); + setCurrentStep(projectData?.current_step); //Navigate to lastest or active Step - const url = `/projects/${params?.projectId}/migration/steps/${response?.data?.current_step}`; + const url = `/projects/${params?.projectId}/migration/steps/${projectData.current_step}`; navigate(url, { replace: true }); - } + // } }; const backNavigation = () => { diff --git a/ui/src/components/layout/AppLayout/index.tsx b/ui/src/components/layout/AppLayout/index.tsx index 295985da..47a94058 100644 --- a/ui/src/components/layout/AppLayout/index.tsx +++ b/ui/src/components/layout/AppLayout/index.tsx @@ -25,8 +25,7 @@ const AppLayout: FC = ({ children }) => { useEffect(()=>{ dispatch(getUserDetails()); - - },[dispatch]); + },[]); useAuthCheck(); diff --git a/ui/src/pages/Login/index.tsx b/ui/src/pages/Login/index.tsx index b5e684ae..060ee5bd 100644 --- a/ui/src/pages/Login/index.tsx +++ b/ui/src/pages/Login/index.tsx @@ -3,7 +3,7 @@ import { FC,useEffect, useState } from 'react'; import { useNavigate, useLocation } from 'react-router-dom'; import { useDispatch, useSelector } from 'react-redux'; -import { setAuthToken } from '../../store/slice/authSlice'; +import { getUserDetails, setAuthToken } from '../../store/slice/authSlice'; import { Button, Field, @@ -166,6 +166,9 @@ const Login: FC = () => { dispatch(setAuthToken(authenticationObj)); setLoginStates((prev) => ({ ...prev, submitted: true })); + + dispatch(getUserDetails()); + navigate(`/projects`, { replace: true }); } }; diff --git a/ui/src/pages/Migration/index.tsx b/ui/src/pages/Migration/index.tsx index 9ef616df..7a4e2dca 100644 --- a/ui/src/pages/Migration/index.tsx +++ b/ui/src/pages/Migration/index.tsx @@ -485,12 +485,14 @@ const Migration = () => {
- + {projectData && + <> +
- { projectData && - }
+ + }
diff --git a/ui/src/pages/Projects/index.tsx b/ui/src/pages/Projects/index.tsx index 0b031971..e7456210 100644 --- a/ui/src/pages/Projects/index.tsx +++ b/ui/src/pages/Projects/index.tsx @@ -62,9 +62,9 @@ const Projects = () => { const [searchText, setSearchText] = useState(search); const [isModalOpen, setIsModalOpen] = useState(false); - useEffect(()=>{ - dispatch(getUserDetails()); - },[]); + // useEffect(()=>{ + // dispatch(getUserDetails()); + // },[]); const fetchProjects = async () => { setLoadStatus(true); @@ -88,9 +88,9 @@ const Projects = () => { }); }; - useEffect(()=>{ - dispatch(getUserDetails()); - },[dispatch]); + // useEffect(()=>{ + // dispatch(getUserDetails()); + // },[dispatch]); useEffect(() => { fetchData(); From d60edec0087646f77ca45a700771e27b2ed6562d Mon Sep 17 00:00:00 2001 From: AishDani Date: Tue, 24 Sep 2024 15:06:01 +0530 Subject: [PATCH 2/5] refactor:removed console log --- ui/src/components/MainHeader/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/ui/src/components/MainHeader/index.tsx b/ui/src/components/MainHeader/index.tsx index 1311672a..db86ecb2 100644 --- a/ui/src/components/MainHeader/index.tsx +++ b/ui/src/components/MainHeader/index.tsx @@ -54,7 +54,6 @@ const MainHeader = () => { const name = user ? `${user?.first_name?.charAt(0)}${user?.last_name?.charAt(0)}`.toUpperCase() ?? '' : ''; const updateOrganisationListState = () => { - console.log("otgs ", organisationsList, user); if (organisationsList) { //set selected org as default From a7c2448629c1d32ddd8e3e883933f550a5da7d96 Mon Sep 17 00:00:00 2001 From: Sayali Joshi Date: Tue, 24 Sep 2024 16:29:16 +0530 Subject: [PATCH 3/5] [CMG-136] --- ui/src/components/ContentMapper/index.scss | 4 ++ ui/src/components/ContentMapper/index.tsx | 12 ++-- ui/src/components/MainHeader/index.scss | 1 + .../components/MigrationFlowHeader/index.tsx | 4 +- ui/src/components/ProfileHeader/index.scss | 5 +- ui/src/pages/Migration/index.tsx | 3 +- ui/src/pages/MigrationEditor/index.scss | 39 ---------- ui/src/pages/MigrationEditor/index.tsx | 72 ------------------- ui/src/pages/Projects/index.tsx | 2 +- 9 files changed, 16 insertions(+), 126 deletions(-) delete mode 100644 ui/src/pages/MigrationEditor/index.scss delete mode 100644 ui/src/pages/MigrationEditor/index.tsx diff --git a/ui/src/components/ContentMapper/index.scss b/ui/src/components/ContentMapper/index.scss index 6fe7d8cb..2c905b87 100644 --- a/ui/src/components/ContentMapper/index.scss +++ b/ui/src/components/ContentMapper/index.scss @@ -153,6 +153,10 @@ } .cms-field { text-transform: capitalize; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 445px; } .InstructionText { font-size: $size-font-small; diff --git a/ui/src/components/ContentMapper/index.tsx b/ui/src/components/ContentMapper/index.tsx index 09931295..e9d9f0d6 100644 --- a/ui/src/components/ContentMapper/index.tsx +++ b/ui/src/components/ContentMapper/index.tsx @@ -206,11 +206,7 @@ const Fields: Mapping = { global_field: 'Global' }; -type ContentMapperComponentProps = { - projectData: MigrationResponse; -}; - -const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, ref: React.ForwardedRef) => { +const ContentMapper = forwardRef((props, ref: React.ForwardedRef) => { /** ALL CONTEXT HERE */ const migrationData = useSelector((state:RootState)=>state?.migration?.migrationData); @@ -693,7 +689,7 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re const accessorCall = (data: FieldMapType) => { return (
-
{data?.otherCmsField}
+
{data?.otherCmsField}
 Type: {data?.otherCmsType}
@@ -1599,7 +1595,7 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re // Function to fetch single content type const handleFetchContentType = async () => { - const { data , status} = await fetchExistingContentType(projectId,'') ; + const { data } = await fetchExistingContentType(projectId,'') ; if(data?.contentTypes?.length <= 0){ Notification({ notificationContent: { text: "No content found in the stack" }, @@ -1620,7 +1616,7 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re setContentModels(data?.contentTypes); - const content_type = data?.contentTypes?.find((item:any)=>item?.title === otherContentType?.label); + const content_type = data?.contentTypes?.find((item: ContentTypeList)=>item?.title === otherContentType?.label); const contentTypeKey = Object.keys(contentTypeMapped).find(key => contentTypeMapped[key] === otherContentType?.label); diff --git a/ui/src/components/MainHeader/index.scss b/ui/src/components/MainHeader/index.scss index f3c6149c..8dac578f 100644 --- a/ui/src/components/MainHeader/index.scss +++ b/ui/src/components/MainHeader/index.scss @@ -107,6 +107,7 @@ color: $color-font-base; font-weight: $font-weight-bold; height: $px-32; + line-height: 1.35; width: $px-32; &:hover { border-color: $color-brand-primary-base; diff --git a/ui/src/components/MigrationFlowHeader/index.tsx b/ui/src/components/MigrationFlowHeader/index.tsx index 6187a1d2..bf178f66 100644 --- a/ui/src/components/MigrationFlowHeader/index.tsx +++ b/ui/src/components/MigrationFlowHeader/index.tsx @@ -1,5 +1,5 @@ // Libraries -import { useEffect, useRef, useState } from 'react'; +import { useEffect, useState } from 'react'; import { Button, cbModal } from '@contentstack/venus-components'; import { useDispatch, useSelector } from 'react-redux'; import { Params, useNavigate, useParams } from 'react-router'; @@ -116,7 +116,7 @@ const MigrationFlowHeader = ({ handleOnClick, isLoading, isCompleted , legacyCMS aria-label='Save and Continue' isLoading={isLoading} > - {params?.stepId === '5' ? 'Start' : 'Save and Continue'} + {params?.stepId === '3' || params?.stepId === '4' ? 'Continue' : params?.stepId === '5' ? 'Start' : 'Save and Continue'}
) diff --git a/ui/src/components/ProfileHeader/index.scss b/ui/src/components/ProfileHeader/index.scss index 26361a47..2552bd8b 100644 --- a/ui/src/components/ProfileHeader/index.scss +++ b/ui/src/components/ProfileHeader/index.scss @@ -3,7 +3,6 @@ .profile-card { width: 300px; padding: 11px 16px; - // background-color: #f8f9fa; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); text-align: center; } @@ -31,13 +30,15 @@ color: #6E6B86; font-size: $size-font-large; font-weight: $font-weight-semi-bold; + line-height: $line-height-default; margin-bottom: 5px; text-transform: capitalize; } .profile-card__email { - font-size: $size-font-small; color: #6E6B86; + font-size: $size-font-small; + line-height: $line-height-default; } .profile-card__logout { diff --git a/ui/src/pages/Migration/index.tsx b/ui/src/pages/Migration/index.tsx index 9ef616df..46ed91b6 100644 --- a/ui/src/pages/Migration/index.tsx +++ b/ui/src/pages/Migration/index.tsx @@ -225,8 +225,7 @@ const Migration = () => { title:'Destination Stack' }, { - data: , + data: , id:'3', title:'Content Mapping' }, diff --git a/ui/src/pages/MigrationEditor/index.scss b/ui/src/pages/MigrationEditor/index.scss deleted file mode 100644 index 3cc4e410..00000000 --- a/ui/src/pages/MigrationEditor/index.scss +++ /dev/null @@ -1,39 +0,0 @@ -@import '../../scss/variables'; -.migration-container { - #PageLayout__body { - //display: flex; - margin-left: 0; - width: 100% !important; - background: $color-base-white-10; - padding: 0; - overflow: hidden; - } - .PageTitle { - margin-left: 1rem; - font-weight: 700; - font-size: 18px; - font-family: Inter, sans-serif; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - line-height: normal; - } - .step-flow-wrapper-tree-area { - // border-right: 1px solid $color-base-gray-40; - display: flex; - max-width: 380px; - min-width: 378px; - max-height: 94vh; - min-height: calc(100vh - 115px); - } - .step-flow-wrapper-content-area { - display: flex; - flex-direction: column; - flex-grow: 1; - // justify-content: center; - // max-height: calc(100vh - 37px); - // overflow-y: auto; - // overflow-x: hidden; - width: calc(100% - 420px); - } -} diff --git a/ui/src/pages/MigrationEditor/index.tsx b/ui/src/pages/MigrationEditor/index.tsx deleted file mode 100644 index 69db889d..00000000 --- a/ui/src/pages/MigrationEditor/index.tsx +++ /dev/null @@ -1,72 +0,0 @@ -// Libraries -import { useEffect, useState } from 'react'; -import { PageHeader, PageLayout } from '@contentstack/venus-components'; -import { Params, useNavigate, useParams } from 'react-router'; -import { useDispatch, useSelector } from 'react-redux'; - -// Context -import { DEFAULT_NEW_MIGRATION } from '../../context/app/app.interface'; - -// Service -import { getProject } from '../../services/api/project.service'; - -//Component -import NewMigrationWrapper from '../../components/Migrations/NewMigration/NewMigrationWrapper'; - -// Style -import './index.scss'; -import { updateNewMigrationData } from '../../store/slice/migrationDataSlice'; -import { RootState } from '../../store'; - -const MigrationEditor = () => { - const navigate = useNavigate(); - const params: Params = useParams(); - const dispatch = useDispatch(); - - - const selectedOrganisation = useSelector((state:RootState)=>state?.authentication?.selectedOrganisation); - - - const [projectName, setProjectName] = useState(''); - - const header = { - backNavigation: () => { - - dispatch(updateNewMigrationData(DEFAULT_NEW_MIGRATION)) - navigate(-1); - }, - component: - }; - - const bodyContent = { - component: - }; - /******** Function to get project ********/ - const fetchProject = async () => { - const response = await getProject(selectedOrganisation?.value || '', params?.projectId || ''); - - if (response?.status === 200) { - setProjectName(response?.data?.name); - - //Navigate to lastest or active Step - const url = `/projects/${params?.projectId}/migration/steps/${response?.data?.current_step}`; - navigate(url, { replace: true }); - } - }; - - // useEffect(() => { - // fetchProject(); - // }, []); - - useEffect(() => { - fetchProject(); - }, [selectedOrganisation?.value, params?.projectId]); - - return ( -
- -
- ); -}; - -export default MigrationEditor; diff --git a/ui/src/pages/Projects/index.tsx b/ui/src/pages/Projects/index.tsx index 0b031971..d8030f84 100644 --- a/ui/src/pages/Projects/index.tsx +++ b/ui/src/pages/Projects/index.tsx @@ -197,7 +197,7 @@ const Projects = () => { ) diff --git a/ui/src/components/TestMigration/index.tsx b/ui/src/components/TestMigration/index.tsx index a4bdf8b7..3671c760 100644 --- a/ui/src/components/TestMigration/index.tsx +++ b/ui/src/components/TestMigration/index.tsx @@ -1,7 +1,10 @@ import { useEffect, useState } from 'react'; -import { Field, FieldLabel, TextInput, Link, Icon, Tooltip } from '@contentstack/venus-components'; +import { Field, FieldLabel, TextInput, Link, Icon, Tooltip, Button } from '@contentstack/venus-components'; import { useSelector } from 'react-redux'; +// Redux files +import { RootState } from '../../store'; + // Services import { getCMSDataFromFile } from '../../cmsData/cmsSelector'; @@ -20,7 +23,7 @@ import './index.scss'; const TestMigration = () => { const [data, setData] = useState({}); - const newMigrationData = useSelector((state:any)=>state?.migration?.newMigrationData); + const newMigrationData = useSelector((state: RootState)=>state?.migration?.newMigrationData); /********** ALL USEEFFECT HERE *************/ @@ -39,40 +42,59 @@ const TestMigration = () => {
UID
-

Select your current Content Management system from the available options.

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

+ + {(newMigrationData?.test_migration?.stack_api_key || newMigrationData?.test_migration?.stack_link) && + + + Test Stack + +
+ {newMigrationData?.test_migration?.stack_api_key && ( + + )} - {newMigrationData?.test_migration?.stack_link && ( - - - - - - )} -
- + {newMigrationData?.test_migration?.stack_link && ( + + + + + + )} + + +
+ + }