From 8e3957fe5d2be1295a2c0c0dd917606c85eea396 Mon Sep 17 00:00:00 2001 From: AishDani Date: Mon, 21 Oct 2024 11:51:14 +0530 Subject: [PATCH 1/2] refactor:resolved undefined content-mapper bug and steps disability once user completed the step --- ui/src/common/assets/icons.tsx | 17 +++++ ui/src/components/ContentMapper/index.scss | 3 + ui/src/components/ContentMapper/index.tsx | 76 ++++++++++++++++--- .../DestinationStack/Actions/LoadStacks.tsx | 2 +- .../LegacyCms/Actions/LoadPrefix.tsx | 2 + .../LegacyCms/Actions/LoadUploadFile.tsx | 20 +++-- .../components/MigrationFlowHeader/index.tsx | 4 +- .../HorizontalStepper/HorizontalStepper.tsx | 2 +- ui/src/context/app/app.interface.ts | 8 +- ui/src/pages/Migration/index.tsx | 10 +-- 10 files changed, 118 insertions(+), 26 deletions(-) diff --git a/ui/src/common/assets/icons.tsx b/ui/src/common/assets/icons.tsx index d20536ea..18a4870b 100644 --- a/ui/src/common/assets/icons.tsx +++ b/ui/src/common/assets/icons.tsx @@ -851,3 +851,20 @@ export const SCHEMA_PREVIEW = ( ); +export const NoDataFound = ( + + + + + + + + + + +); + + diff --git a/ui/src/components/ContentMapper/index.scss b/ui/src/components/ContentMapper/index.scss index 2c905b87..ada26592 100644 --- a/ui/src/components/ContentMapper/index.scss +++ b/ui/src/components/ContentMapper/index.scss @@ -287,4 +287,7 @@ div .table-row { .table-icons:hover { background-color: $color-brand-fail-light; cursor: pointer; +} +.mapper-emptystate{ + padding: 10px 10px; } \ No newline at end of file diff --git a/ui/src/components/ContentMapper/index.tsx b/ui/src/components/ContentMapper/index.tsx index 4ffe0bd1..53ea6cac 100644 --- a/ui/src/components/ContentMapper/index.tsx +++ b/ui/src/components/ContentMapper/index.tsx @@ -1,7 +1,7 @@ // Libraries import { useEffect, useState, useRef, useImperativeHandle, forwardRef } from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import { useParams } from 'react-router-dom'; +import { useNavigate, useParams } from 'react-router-dom'; import { InfiniteScrollTable, Select, @@ -12,7 +12,8 @@ import { Notification, cbModal, InstructionText, - CircularLoader + CircularLoader, + EmptyState } from '@contentstack/venus-components'; // Services @@ -66,7 +67,7 @@ import SaveChangesModal from '../Common/SaveChangesModal'; // Styles and Assets import './index.scss'; -import { SCHEMA_PREVIEW } from '../../common/assets'; +import { NoDataFound, SCHEMA_PREVIEW } from '../../common/assets'; const Fields: MappingFields = { 'single_line_text':{ @@ -165,8 +166,11 @@ const Fields: MappingFields = { } } +type contentMapperProps = { + handleStepChange: (currentStep: number) => void; +} -const ContentMapper = forwardRef((props, ref: React.ForwardedRef) => { +const ContentMapper = forwardRef(({handleStepChange}: contentMapperProps, ref: React.ForwardedRef) => { /** ALL CONTEXT HERE */ const migrationData = useSelector((state:RootState)=>state?.migration?.migrationData); @@ -241,9 +245,12 @@ const ContentMapper = forwardRef((props, ref: React.ForwardedRef(false); const [isContentDeleted, setIsContentDeleted] = useState(false); + const [isProjectMapped, setIsProjectMapped] = useState(newMigrationData?.isprojectMapped); + /** ALL HOOKS Here */ const { projectId = '' } = useParams(); + const navigate = useNavigate(); const filterRef = useRef(null); @@ -464,7 +471,7 @@ const ContentMapper = forwardRef((props, ref: React.ForwardedRef { try { const { data } = await getContentTypes(projectId || '', 0, 5000, searchContentType || ''); //org id will always present - + setContentTypes(data?.contentTypes); setCount(data?.contentTypes?.length); setFilteredContentTypes(data?.contentTypes); @@ -1781,13 +1788,21 @@ const ContentMapper = forwardRef((props, ref: React.ForwardedRef - :
-
+ : +
+ {contentTypes.length > 0 ? +
{/* Content Types List */}
@@ -1970,8 +1985,49 @@ const ContentMapper = forwardRef((props, ref: React.ForwardedRef
-
-
+
: + No Content Types available
} + description={ +
+ {modalProps?.body} +
+ } + className="mapper-emptystate" + img={NoDataFound} + actions={ + <> + + + } + version="v2" + testId="no-results-found-page" + />} + + + ); }); diff --git a/ui/src/components/DestinationStack/Actions/LoadStacks.tsx b/ui/src/components/DestinationStack/Actions/LoadStacks.tsx index c2da08f8..55f9472e 100644 --- a/ui/src/components/DestinationStack/Actions/LoadStacks.tsx +++ b/ui/src/components/DestinationStack/Actions/LoadStacks.tsx @@ -290,7 +290,7 @@ const LoadStacks = (props: LoadFileFormatProps) => { isClearable={newMigrationData?.destination_stack?.stackArray?.length > 0 && !emptyStackValue} // hideSelectedOptions={true} - // isDisabled={props?.stepComponentProps?.isSummary || false} + isDisabled={newMigrationData?.project_current_step > 2} error={isLoading ? false : !!isError } width="600px" hasAddOption={true} diff --git a/ui/src/components/LegacyCms/Actions/LoadPrefix.tsx b/ui/src/components/LegacyCms/Actions/LoadPrefix.tsx index deb0d31f..1371ceeb 100644 --- a/ui/src/components/LegacyCms/Actions/LoadPrefix.tsx +++ b/ui/src/components/LegacyCms/Actions/LoadPrefix.tsx @@ -119,6 +119,8 @@ const LoadPreFix = (props: LoadSelectCmsProps) => { version="v2" error={isError} aria-label='affix' + disabled={newMigrationData?.project_current_step > 1} + isReadOnly={newMigrationData?.project_current_step > 1} /> {isError &&

{errorMessage}

} diff --git a/ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx b/ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx index 1fdcdc8b..80b6469b 100644 --- a/ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx +++ b/ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx @@ -67,7 +67,7 @@ const LoadUploadFile = (props: LoadUploadFileProps) => { /**** ALL HOOKS HERE ****/ const newMigrationData = useSelector((state:RootState)=>state?.migration?.newMigrationData); - //const selectedOrganisation = useSelector((state:RootState)=>state?.authentication?.selectedOrganisation); + const selectedOrganisation = useSelector((state:RootState)=>state?.authentication?.selectedOrganisation); const migrationData = useSelector((state:RootState)=>state?.migration?.migrationData); const newMigrationDataRef = useRef(newMigrationData); @@ -86,6 +86,7 @@ const LoadUploadFile = (props: LoadUploadFileProps) => { const [showProgress, setShowProgress]= useState(false); const [fileFormat, setFileFormat] = useState(newMigrationData?.legacy_cms?.selectedFileFormat?.fileformat_id); const [processing, setProcessing] = useState(''); + const [reValidate, setReValidate] = useState(newMigrationData?.legacy_cms?.uploadedFile?.reValidate || false); //const [isCancelLoading, setIsCancelLoading] = useState(false); //const [setIsFormatValid] = useState(false); @@ -123,6 +124,7 @@ const LoadUploadFile = (props: LoadUploadFileProps) => { url: data?.file_details?.localPath, validation: data?.message, isValidated: status == 200 ? true : false, + reValidate: false, file_details: { isLocalPath: data?.file_details?.isLocalPath, cmsType: data?.file_details?.cmsType, @@ -243,6 +245,7 @@ const LoadUploadFile = (props: LoadUploadFileProps) => { name: data?.localPath, url: data?.localPath, isValidated: newMigrationData?.legacy_cms?.uploadedFile?.isValidated, + reValidate: false, file_details: { isLocalPath: data?.isLocalPath, cmsType: data?.cmsType, @@ -374,7 +377,7 @@ const LoadUploadFile = (props: LoadUploadFileProps) => { ]); useEffect(()=>{ - if(newMigrationData?.legacy_cms?.uploadedFile?.isValidated && ! showProgress) + if(newMigrationData?.legacy_cms?.uploadedFile?.isValidated && ! showProgress && !newMigrationData?.legacy_cms?.uploadedFile?.reValidate) { setIsValidated(true); @@ -382,14 +385,19 @@ const LoadUploadFile = (props: LoadUploadFileProps) => { setValidationMessage('Validation is successful'); setIsDisabled(true); ! isEmptyString(newMigrationData?.legacy_cms?.affix) || ! isEmptyString(newMigrationData?.legacy_cms?.selectedCms?.cms_id) || ! isEmptyString(newMigrationData?.legacy_cms?.selectedFileFormat?.fileformat_id) && props.handleStepChange(props?.currentStep, true); - + + } - + if(newMigrationData?.legacy_cms?.uploadedFile?.reValidate){ + setValidationMessage(''); + } + // else{ // setIsValidated(false); // } - - },[isValidated,newMigrationData]) + setReValidate(newMigrationData?.legacy_cms?.uploadedFile?.reValidate || false); + },[isValidated,newMigrationData]); + useEffect(()=>{ if(newMigrationData?.legacy_cms?.selectedFileFormat?.fileformat_id){ diff --git a/ui/src/components/MigrationFlowHeader/index.tsx b/ui/src/components/MigrationFlowHeader/index.tsx index 8d80a1f5..792c1930 100644 --- a/ui/src/components/MigrationFlowHeader/index.tsx +++ b/ui/src/components/MigrationFlowHeader/index.tsx @@ -70,7 +70,9 @@ const MigrationFlowHeader = ({projectData, handleOnClick, isLoading }: Migration version="v2" aria-label='Save and Continue' isLoading={isLoading} - disabled={params?.stepId === '4' && !newMigrationData?.test_migration?.isMigrationComplete} + disabled={(params?.stepId === '4' && !newMigrationData?.test_migration?.isMigrationComplete) || + (params?.stepId && params?.stepId <= '2' && currentStep > 2) + } > {stepValue} diff --git a/ui/src/components/Stepper/HorizontalStepper/HorizontalStepper.tsx b/ui/src/components/Stepper/HorizontalStepper/HorizontalStepper.tsx index b5581d88..5da5b88a 100644 --- a/ui/src/components/Stepper/HorizontalStepper/HorizontalStepper.tsx +++ b/ui/src/components/Stepper/HorizontalStepper/HorizontalStepper.tsx @@ -191,7 +191,7 @@ const HorizontalStepper = forwardRef( ? 'disableEvents' : ''; - const completeDisable = stepsCompleted?.includes(idx) && idx < stepIndex - 1 ? 'disableEvents' : ''; + const completeDisable = stepsCompleted?.includes(idx) && idx < stepIndex - 1 && newMigrationData?.test_migration?.isMigrationStarted ? 'disableEvents' : ''; const disableMapper = stepsCompleted?.includes(idx) && idx === 2 && newMigrationData?.test_migration?.isMigrationStarted && !newMigrationData?.test_migration?.isMigrationComplete ? 'disableEvents' : ''; diff --git a/ui/src/context/app/app.interface.ts b/ui/src/context/app/app.interface.ts index f540b53a..4eb97eb0 100644 --- a/ui/src/context/app/app.interface.ts +++ b/ui/src/context/app/app.interface.ts @@ -66,6 +66,7 @@ export interface IFile { validation?: string; file_details?: FileDetails; isValidated: boolean; + reValidate: boolean } export interface ICMSType extends ICardType { @@ -185,6 +186,7 @@ export interface INewMigration { test_migration: ITestMigration; isprojectMapped: boolean; stackDetails: IDropDown; + project_current_step:number; } export interface TestStacks { @@ -286,7 +288,8 @@ export const DEFAULT_FILE: IFile = { buketKey: '' } }, - isValidated: false + isValidated: false, + reValidate: false, }; export const DEFAULT_CMS_TYPE: ICMSType = { @@ -342,7 +345,8 @@ export const DEFAULT_NEW_MIGRATION: INewMigration = { test_migration: DEFAULT_TEST_MIGRATION, isprojectMapped: false, stackDetails: DEFAULT_DROPDOWN, - testStacks: [] + testStacks: [], + project_current_step: 0, }; export const DEFAULT_URL_TYPE: IURLType = { diff --git a/ui/src/pages/Migration/index.tsx b/ui/src/pages/Migration/index.tsx index 7fd03b56..2eadd316 100644 --- a/ui/src/pages/Migration/index.tsx +++ b/ui/src/pages/Migration/index.tsx @@ -179,8 +179,6 @@ const Migration = () => { created_at: '', isNewStack: false }; - - console.log('projectData', projectData); selectedStackData = { @@ -214,7 +212,8 @@ const Migration = () => { }, isLocalPath: projectData?.legacy_cms?.is_localPath }, - isValidated: projectData?.legacy_cms?.is_fileValid + isValidated: projectData?.legacy_cms?.is_fileValid, + reValidate: newMigrationData?.legacy_cms?.uploadedFile?.reValidate }, isFileFormatCheckboxChecked: true, isRestictedKeywordCheckboxChecked: true, @@ -239,7 +238,8 @@ const Migration = () => { isMigrationComplete: false }, stackDetails: projectData?.stackDetails, - testStacks: projectData?.test_stacks + testStacks: projectData?.test_stacks, + project_current_step: projectData?.current_step, }; dispatch(updateNewMigrationData(projectMapper)); @@ -271,7 +271,7 @@ const Migration = () => { title:'Destination Stack' }, { - data: , + data: , id:'3', title:'Content Mapping' }, From 3fb6068cd578aef79f62474ae3e15e4b1673008f Mon Sep 17 00:00:00 2001 From: AishDani Date: Mon, 21 Oct 2024 17:41:41 +0530 Subject: [PATCH 2/2] refactor:refactored the logic for disabling the save and continue button --- ui/src/components/MigrationFlowHeader/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/components/MigrationFlowHeader/index.tsx b/ui/src/components/MigrationFlowHeader/index.tsx index 792c1930..da0d78e3 100644 --- a/ui/src/components/MigrationFlowHeader/index.tsx +++ b/ui/src/components/MigrationFlowHeader/index.tsx @@ -71,7 +71,7 @@ const MigrationFlowHeader = ({projectData, handleOnClick, isLoading }: Migration aria-label='Save and Continue' isLoading={isLoading} disabled={(params?.stepId === '4' && !newMigrationData?.test_migration?.isMigrationComplete) || - (params?.stepId && params?.stepId <= '2' && currentStep > 2) + (params?.stepId && params?.stepId <= '2' && currentStep.toString() !== params?.stepId) } > {stepValue}