{fileDetails?.isLocalPath ? (
-
Local Path: {fileDetails?.localPath}
+
+
) : (
@@ -41,12 +44,12 @@ const UploadFileSummary = ({
}: UploadFileSummaryProps): JSX.Element => {
const newMigrationData = useSelector((state:RootState)=>state?.migration?.newMigrationData);
-
+ const [isLoading, setIsLoading] = useState(false);
return (
{!isEmptyString(newMigrationData?.legacy_cms?.uploadedFile?.name) ? (
-
+
{newMigrationData?.legacy_cms?.uploadedFile?.validation}
diff --git a/ui/src/components/LegacyCms/Summary/summary.scss b/ui/src/components/LegacyCms/Summary/summary.scss
index 05e619158..bb9cb6e94 100644
--- a/ui/src/components/LegacyCms/Summary/summary.scss
+++ b/ui/src/components/LegacyCms/Summary/summary.scss
@@ -1,12 +1,12 @@
@import '../../../scss/variables';
.summary-title {
- font-family: $font-family-primary;
+ //font-family: $font-family-primary;
font-style: normal;
font-weight: 700;
font-size: 13px;
line-height: 135%;
letter-spacing: 0.02em;
- color: $color-font-black;
+ //color: $color-font-black;
margin-top: 3px;
}
diff --git a/ui/src/components/LegacyCms/index.tsx b/ui/src/components/LegacyCms/index.tsx
index 754155457..ef89fb099 100644
--- a/ui/src/components/LegacyCms/index.tsx
+++ b/ui/src/components/LegacyCms/index.tsx
@@ -1,12 +1,12 @@
-import { useContext, useEffect, useRef, useState } from 'react';
+import { forwardRef, useEffect, useRef, useState } from 'react';
import { useDispatch,useSelector } from 'react-redux';
import AutoVerticalStepper from '../Stepper/VerticalStepper/AutoVerticalStepper';
import { getLegacyCMSSteps } from './StepperSteps';
import { useNavigate, useParams } from 'react-router-dom';
-import { Button, CircularLoader } from '@contentstack/venus-components';
+import { CircularLoader } from '@contentstack/venus-components';
// import { getEntries } from '../../services/contentstackSDK';
import { CS_ENTRIES } from '../../utilities/constants';
-import { AppContext } from '../../context/app/app.context';
+
import {
DEFAULT_CMS_TYPE,
DEFAULT_LEGACY_CMS_DATA,
@@ -22,26 +22,26 @@ import { updateCurrentStepData, updateLegacyCMSData } from '../../services/api/m
import { MigrationResponse } from '../../services/api/service.interface';
import { getCMSDataFromFile } from '../../cmsData/cmsSelector';
import { RootState } from '../../store';
-import { setMigrationData, setNewMigrationData, updateMigrationData } from '../../store/slice/migrationDataSlice';
+import { updateMigrationData, updateNewMigrationData } from '../../store/slice/migrationDataSlice';
type LegacyCMSComponentProps = {
legacyCMSData: any;
projectData: MigrationResponse;
+ isCompleted: boolean
handleStepChange: (currentStep: number) => void;
+ handleOnAllStepsComplete:(flag : boolean)=>void;
};
-const LegacyCMSComponent = ({ legacyCMSData, projectData, handleStepChange }: LegacyCMSComponentProps) => {
-
+const LegacyCMSComponent = forwardRef(({ legacyCMSData, projectData, isCompleted, handleStepChange, handleOnAllStepsComplete }: LegacyCMSComponentProps, ref) => {
//react-redux apis
const migrationData = useSelector((state:RootState)=>state?.migration?.migrationData);
- const newMigrationData=useSelector((state:RootState)=>state?.migration?.newMigrationData);
+ const newMigrationData = useSelector((state:RootState)=>state?.migration?.newMigrationData);
const selectedOrganisation = useSelector((state:RootState)=>state?.authentication?.selectedOrganisation);
const dispatch = useDispatch();
/** ALL HOOKS HERE */
- const [isCompleted, setIsCompleted] = useState(false);
const [isMigrationLocked, setIsMigrationLocked] = useState(false);
const [isLoading, setIsLoading] = useState(true);
const [internalActiveStepIndex, setInternalActiveStepIndex] = useState(-1);
@@ -54,10 +54,12 @@ const LegacyCMSComponent = ({ legacyCMSData, projectData, handleStepChange }: Le
const navigate = useNavigate();
const autoVerticalStepper = useRef(null);
+
//Handle on all steps are completed
- const handleOnAllStepsComplete = (flag = false) => {
- setIsCompleted(flag);
+ const handleAllStepsComplete = (flag = false) => {
+ handleOnAllStepsComplete(flag);
};
+
// handle on proceed to destination stack
const handleOnClick = async (event: MouseEvent,handleStepChange:any ) => {
@@ -75,6 +77,7 @@ const LegacyCMSComponent = ({ legacyCMSData, projectData, handleStepChange }: Le
}
};
+
//handle on delete click
const handleOnClickDeleteUploadedFile = (e: MouseEvent) => {
e.preventDefault();
@@ -83,110 +86,112 @@ const LegacyCMSComponent = ({ legacyCMSData, projectData, handleStepChange }: Le
};
/********** ALL USEEFFECT HERE *************/
- const fetchCMSData = async () => {
- 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);
-
- //fetch Legacy CMS Component Data from Contentstack CMS
- //const data = await getEntries({ contentType: CS_ENTRIES.LEGACY_CMS })
- //Check for null
- if (!data) {
- dispatch(updateMigrationData({ legacyCMSData: DEFAULT_LEGACY_CMS_DATA }));
- setIsLoading(false);
- return;
- }
-
- //Generate CMS Filter List
- const cmsFilterList: IFilterType[] = [];
-
- //Step1: traverse on all cms and check for parent ,
- //Step2: if exist and not yet added in CMS filter list then push to array.
- //Step 3: Update it in APP context for later use
- validateArray(data?.all_cms) &&
- data?.all_cms?.forEach((cms: ICMSType) => {
- if (!isEmptyString(cms.parent)) {
- const filterObject = cmsFilterList?.find(
- (obj: IFilterType) => obj.value === cms.parent
- );
-
- if (!filterObject) {
- cmsFilterList.push({
- value: cms.parent,
- label: cms.parent,
- isChecked: false
- });
+ useEffect(() => {
+ const fetchCMSData = async () => {
+ 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);
+
+ //fetch Legacy CMS Component Data from Contentstack CMS
+ //const data = await getEntries({ contentType: CS_ENTRIES.LEGACY_CMS })
+
+ //Check for null
+ if (!data) {
+ dispatch(updateMigrationData({ legacyCMSData: DEFAULT_LEGACY_CMS_DATA }));
+ setIsLoading(false);
+ return;
+ }
+
+ //Generate CMS Filter List
+ const cmsFilterList: IFilterType[] = [];
+
+ //Step1: traverse on all cms and check for parent ,
+ //Step2: if exist and not yet added in CMS filter list then push to array.
+ //Step 3: Update it in APP context for later use
+ validateArray(data?.all_cms) &&
+ data?.all_cms?.forEach((cms: ICMSType) => {
+ if (!isEmptyString(cms?.parent)) {
+ const filterObject = cmsFilterList?.find(
+ (obj: IFilterType) => obj?.value === cms?.parent
+ );
+
+ if (!filterObject) {
+ cmsFilterList?.push({
+ value: cms?.parent,
+ label: cms?.parent,
+ isChecked: false
+ });
+ }
}
+ });
+
+ const legacyCMSDataMapped: ILegacyCMSComponent = {
+ ...data,
+ all_steps: getLegacyCMSSteps(isCompleted, isMigrationLocked, data?.all_steps),
+ cmsFilterList: cmsFilterList
+ };
+
+ dispatch(updateMigrationData({ legacyCMSData: legacyCMSDataMapped }));
+
+ //Update New Migration data;
+ const selectedCmsData: ICMSType = validateArray(data.all_cms)
+ ? data.all_cms?.find((cms: ICMSType) => {
+ return cms?.cms_id === legacyCMSData?.cms})
+ : DEFAULT_CMS_TYPE;
+
+ const selectedFileFormatData: ICardType | undefined = validateArray(
+ selectedCmsData?.allowed_file_formats
+ )
+ ? selectedCmsData.allowed_file_formats?.find(
+ (cms: ICardType) => cms?.fileformat_id === legacyCMSData?.file_format
+ )
+ : defaultCardType;
+
+ //Make Step 1 Complete
+ if (!isEmptyString(selectedCmsData?.cms_id)) {
+ setInternalActiveStepIndex(0);
+ }
+
+ //Make Step 2 complete
+ if (!isEmptyString(selectedCmsData?.cms_id) && !isEmptyString(legacyCMSData?.affix)) {
+ setInternalActiveStepIndex(1);
+ }
+
+ //Make Step 3 complete
+ if (
+ !isEmptyString(selectedCmsData?.cms_id) &&
+ !isEmptyString(legacyCMSData?.affix) &&
+ !isEmptyString(selectedFileFormatData?.fileformat_id)
+ ) {
+ setInternalActiveStepIndex(2);
+ }
+ dispatch(updateNewMigrationData({
+ ...newMigrationData,
+ legacy_cms: {
+ selectedCms: selectedCmsData,
+ selectedFileFormat: selectedFileFormatData || defaultCardType,
+ uploadedFile: {
+ file_details:{
+ localPath: legacyCMSData?.file_path,
+ awsData: legacyCMSData?.awsDetails
+ },
+ isValidated: legacyCMSData?.is_fileValid
+ }, //need to add backend data once endpoint exposed.
+ affix: legacyCMSData?.affix || newMigrationData?.legacy_cms?.affix || '',
+ isFileFormatCheckboxChecked: true, //need to add backend data once endpoint exposed.
+ isRestictedKeywordCheckboxChecked: true //need to add backend data once endpoint exposed.
}
- });
-
- const legacyCMSDataMapped: ILegacyCMSComponent = {
- ...data,
- all_steps: getLegacyCMSSteps(isCompleted, isMigrationLocked, data?.all_steps),
- cmsFilterList: cmsFilterList
+ }))
+
+
+ setIsLoading(false);
+
+ //Check for migration Status and lock.
+ // Status where Migration is to be Locked:
+ setIsMigrationLocked(projectData?.status === 2 || projectData?.status === 5);
};
-
- dispatch(updateMigrationData({ legacyCMSData: legacyCMSDataMapped }));
-
- //Update New Migration data
-
- const selectedCmsData: ICMSType = validateArray(data.all_cms)
- ? data.all_cms?.find((cms: ICMSType) => cms?.cms_id === legacyCMSData?.cms) ||
- DEFAULT_CMS_TYPE
- : DEFAULT_CMS_TYPE;
-
- const selectedFileFormatData: ICardType | undefined = validateArray(
- selectedCmsData?.allowed_file_formats
- )
- ? selectedCmsData.allowed_file_formats?.find(
- (cms: ICardType) => cms?.fileformat_id === legacyCMSData?.file_format
- )
- : defaultCardType;
-
- //Make Step 1 Complete
- if (!isEmptyString(selectedCmsData?.cms_id)) {
- setInternalActiveStepIndex(0);
- }
-
- //Make Step 2 complete
- if (!isEmptyString(selectedCmsData?.cms_id) && !isEmptyString(legacyCMSData?.affix)) {
- setInternalActiveStepIndex(1);
- }
-
- //Make Step 3 complete
- if (
- !isEmptyString(selectedCmsData?.cms_id) &&
- !isEmptyString(legacyCMSData?.affix) &&
- !isEmptyString(selectedFileFormatData?.fileformat_id)
- ) {
- setInternalActiveStepIndex(2);
- }
-
- dispatch(updateMigrationData({
- ...newMigrationData,
- legacy_cms: {
- selectedCms: selectedCmsData,
- selectedFileFormat: selectedFileFormatData || defaultCardType,
- uploadedFile: newMigrationData?.legacy_cms?.uploadedFile, //need to add backend data once endpoint exposed.
- affix: legacyCMSData?.affix || newMigrationData?.legacy_cms?.affix || '',
- isFileFormatCheckboxChecked:
- legacyCMSData?.affix_confirmation ||
- newMigrationData?.legacy_cms?.isFileFormatCheckboxChecked, //need to add backend data once endpoint exposed.
- isRestictedKeywordCheckboxChecked:
- legacyCMSData?.file_format_confirmation ||
- newMigrationData?.legacy_cms?.isRestictedKeywordCheckboxChecked //need to add backend data once endpoint exposed.
- }
- }))
-
- setIsLoading(false);
-
- //Check for migration Status and lock.
- // Status where Migration is to be Locked:
- setIsMigrationLocked(projectData?.status === 2 || projectData?.status === 5);
- };
- useEffect(() => {
fetchCMSData();
@@ -210,8 +215,7 @@ const LegacyCMSComponent = ({ legacyCMSData, projectData, handleStepChange }: Le
autoVerticalStepper.current.handleDynamicStepChange(internalActiveStepIndex, true);
}
}
- }, [internalActiveStepIndex]);
-
+ }, [internalActiveStepIndex]);
return (
<>
{isLoading ? (
@@ -233,32 +237,17 @@ const LegacyCMSComponent = ({ legacyCMSData, projectData, handleStepChange }: Le
migrationData?.legacyCMSData?.all_steps
)}
isEdit={!isMigrationLocked}
- handleOnAllStepsComplete={handleOnAllStepsComplete}
+ handleOnAllStepsComplete={handleAllStepsComplete}
stepComponentProps={{
handleDeleteFile: handleOnClickDeleteUploadedFile
}}
/>
- {isCompleted && !isMigrationLocked ? (
-
-
-
-
-
- ) : (
- <>
- )}
)}
);
-};
-
+});
+LegacyCMSComponent.displayName = 'LegacyCMSComponent';
export default LegacyCMSComponent;
diff --git a/ui/src/components/LegacyCms/legacyCms.scss b/ui/src/components/LegacyCms/legacyCms.scss
index c3918f41d..aa682eada 100644
--- a/ui/src/components/LegacyCms/legacyCms.scss
+++ b/ui/src/components/LegacyCms/legacyCms.scss
@@ -4,7 +4,7 @@
display: flex;
flex-wrap: wrap;
gap: 12px;
- margin: $space-15;
+ margin: 20px 20px !important;
}
.pl-40 {
@@ -25,8 +25,16 @@
border-top: $px-5 solid $color-brand-primary-base !important;
}
.legacy-cms-container {
- padding: $px-60 0 $px-60 10% !important;
- width: $px-850 !important;
+
+ padding-left: 25px !important;
+ padding-top: 26px;
+ padding-right: 30px;
+
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 70vh;
+ background-color: $color-base-white-10;
+
}
.service_list_search {
@@ -63,14 +71,61 @@
.validation-container {
display: flex;
background-color: $color-base-white-5;
- height: $px-108;
- width: 100%;
+ height: 72px;
+ width: 592px;
align-items: center;
- padding: 0 !important;
+ margin-left: 20px !important;
border: 1px solid $color-brand-secondary-lightest;
border-radius: var(--TermCount, 5px);
+
+}
+.validation-container > * {
+ margin-right: 10px;
+ margin-left: 15px;
+}
+.error-container{
+ display: flex;
+ background-color: $color-base-white-5;
+ height: 72px;
+ flex-direction: column;
+ width: 592px;
+ align-items: flex-start;
+ margin-left: 20px !important;
+ border: 1px solid $color-brand-fail-base;
+ border-radius: var(--TermCount, 5px);
+}
+.error-container > * {
+ margin-left: 10px;
+ margin-top: 5px;
}
+
.errorMessage {
color: $color-brand-warning-medium;
font-size: 12px;
}
+.validation-cta{
+ margin: 10px 20px;
+}
+.success{
+ color: $color-brand-success-base;
+}
+.error{
+ color: $color-brand-fail-base;
+}
+.link-discription{
+ font-family: $font-family-primary;
+ font-style: normal;
+ font-weight: $font-weight-regular;
+ font-size: $size-font-large;
+ line-height: 185%;
+ color: $color-base-gray-20;
+ margin-bottom: $space-10;
+ margin-top: $space-10;
+}
+.bar-container{
+ height: 10px;
+ width: 592px;
+ align-items: center;
+ margin-left: 20px !important;
+ margin-top: 10px;
+}
\ No newline at end of file
diff --git a/ui/src/components/LegacyCms/restrictedKeywords.json b/ui/src/components/LegacyCms/restrictedKeywords.json
new file mode 100644
index 000000000..ea368cb4c
--- /dev/null
+++ b/ui/src/components/LegacyCms/restrictedKeywords.json
@@ -0,0 +1,47 @@
+{
+ "idArray": [
+ "uid",
+ "api_key",
+ "created_at",
+ "deleted_at",
+ "updated_at",
+ "tags_array",
+ "klass_id",
+ "applikation_id",
+ "id",
+ "_id",
+ "ACL",
+ "SYS_ACL",
+ "DEFAULT_ACL",
+ "app_user_object_uid",
+ "built_io_upload",
+ "__loc",
+ "tags",
+ "_owner",
+ "_version",
+ "toJSON",
+ "save",
+ "update",
+ "domain",
+ "share_account",
+ "shard_app",
+ "shard_random",
+ "hook",
+ "__indexes",
+ "__meta",
+ "created_by",
+ "updated_by",
+ "inbuilt_class",
+ "tenant_id",
+ "isSystemUser",
+ "isApplicationUser",
+ "isNew",
+ "_shouldLean",
+ "_shouldFilter",
+ "options",
+ "_version",
+ "__v",
+ "locale",
+ "publish_details"
+ ]
+}
\ No newline at end of file
diff --git a/ui/src/components/MigrationFlowHeader/index.tsx b/ui/src/components/MigrationFlowHeader/index.tsx
index 8ca00004c..bd7d0a04f 100644
--- a/ui/src/components/MigrationFlowHeader/index.tsx
+++ b/ui/src/components/MigrationFlowHeader/index.tsx
@@ -16,7 +16,11 @@ import { DEFAULT_NEW_MIGRATION } from '../../context/app/app.interface';
// CSS
import './index.scss';
-const MigrationFlowHeader = () => {
+type MigrationFlowHeaderProps = {
+ handleOnClick: (event: MouseEvent, handleStepChange: (currentStep: number) => void) => void;
+};
+
+const MigrationFlowHeader = ({ handleOnClick }: MigrationFlowHeaderProps) => {
const [projectName, setProjectName] = useState('');
const navigate = useNavigate();
@@ -46,7 +50,6 @@ const MigrationFlowHeader = () => {
dispatch(updateNewMigrationData(DEFAULT_NEW_MIGRATION))
navigate(-1);
}
-
return (
@@ -67,7 +70,7 @@ const MigrationFlowHeader = () => {