Skip to content

Dev #577

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Mar 28, 2025
Merged

Dev #577

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f462868
fix:refactored the flow for storing config values in redux
AishDani Mar 27, 2025
7f835a2
Merge branch 'dev' of github.com:contentstack/migration-v2-node-serve…
AishDani Mar 27, 2025
83b4479
fix:project.json difference
AishDani Mar 27, 2025
e8bd77c
Merge pull request #576 from contentstack/feature/dropdown-field-choices
RohitKini Mar 27, 2025
2efb5e3
Validation added
sayalijoshi27 Mar 28, 2025
1613697
Merge pull request #578 from contentstack/feature/content-mapper
RohitKini Mar 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions ui/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

62 changes: 14 additions & 48 deletions ui/src/components/LegacyCms/Actions/LoadFileFormat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const LoadFileFormat = (props: LoadFileFormatProps) => {
const [isCheckedBoxChecked] = useState<boolean>(
newMigrationData?.legacy_cms?.isFileFormatCheckboxChecked || true
);
const [fileIcon, setFileIcon] = useState(newMigrationData?.legacy_cms?.selectedFileFormat?.title);
const [fileIcon, setFileIcon] = useState(newMigrationDataRef?.current?.legacy_cms?.selectedFileFormat?.title);
const [isError, setIsError] = useState<boolean>(false);
const [error, setError] = useState<string>('');

Expand All @@ -55,33 +55,13 @@ const LoadFileFormat = (props: LoadFileFormatProps) => {
}
};

const getFileExtension = (filePath: string): string => {
const normalizedPath = filePath?.replace(/\\/g, '/')?.replace(/\/$/, '');

// Use regex to extract the file extension
const match = normalizedPath?.match(/\.([a-zA-Z0-9]+)$/);
const ext = match ? match[1]?.toLowerCase() : '';

const fileName = filePath?.split('/')?.pop();
//const ext = fileName?.split('.')?.pop();
const validExtensionRegex = /\.(pdf|zip|xml|json)$/i;
return ext && validExtensionRegex?.test(`.${ext}`) ? `${ext}` : '';
};

const handleFileFormat = async () => {
const handleFileFormat = async() =>{
try {
const { data } = await getConfig();

const cmsType = !isEmptyString(newMigrationData?.legacy_cms?.selectedCms?.parent)
? newMigrationData?.legacy_cms?.selectedCms?.parent
: data?.cmsType?.toLowerCase();
const filePath = data?.localPath?.toLowerCase();
const fileFormat = getFileExtension(filePath);
if (
!isEmptyString(selectedCard?.fileformat_id) &&
selectedCard?.fileformat_id !== fileFormat &&
newMigrationData?.project_current_step > 1
) {

const cmsType = !isEmptyString(newMigrationData?.legacy_cms?.selectedCms?.parent) ? newMigrationData?.legacy_cms?.selectedCms?.parent : newMigrationData?.legacy_cms?.uploadedFile?.cmsType;
const filePath = newMigrationData?.legacy_cms?.uploadedFile?.file_details?.localPath?.toLowerCase();
const fileFormat: string = newMigrationData?.legacy_cms?.selectedFileFormat?.title?.toLowerCase();
if(! isEmptyString(selectedCard?.fileformat_id) && selectedCard?.fileformat_id !== fileFormat && newMigrationData?.project_current_step > 1){
setFileIcon(selectedCard?.title);
} else {
const { all_cms = [] } = migrationData?.legacyCMSData || {};
Expand All @@ -103,32 +83,18 @@ const LoadFileFormat = (props: LoadFileFormatProps) => {
setIsError(true);
setError('File format does not support, please add the correct file format.');
}

const selectedFileFormatObj = {
description: '',
fileformat_id: fileFormat,
group_name: fileFormat,
isactive: true,
title:
fileFormat === 'zip'
? fileFormat?.charAt(0)?.toUpperCase() + fileFormat?.slice(1)
: fileFormat?.toUpperCase()
};

const newMigrationDataObj = {
...newMigrationDataRef?.current,
legacy_cms: {
...newMigrationDataRef?.current?.legacy_cms,
selectedFileFormat: selectedFileFormatObj,
}
};
title: fileFormat === 'zip' ? fileFormat?.charAt?.(0)?.toUpperCase() + fileFormat?.slice?.(1) : fileFormat?.toUpperCase()
}


setFileIcon(fileFormat === 'zip' ? fileFormat?.charAt?.(0).toUpperCase() + fileFormat?.slice?.(1) : fileFormat?.toUpperCase());

setFileIcon(
fileFormat === 'zip'
? fileFormat?.charAt(0).toUpperCase() + fileFormat.slice(1)
: fileFormat?.toUpperCase()
);
dispatch(updateNewMigrationData(newMigrationDataObj));
}
} catch (error) {
return error;
Expand All @@ -138,13 +104,13 @@ const LoadFileFormat = (props: LoadFileFormatProps) => {
/**** ALL USEEffects HERE ****/
useEffect(() => {
handleFileFormat();
//handleBtnClick();
},[]);

useEffect(() => {
newMigrationDataRef.current = newMigrationData;
}, [newMigrationData]);


return (
<div className="p-3">
<div className="col-12">
Expand Down
172 changes: 64 additions & 108 deletions ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { useEffect, useRef, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { FileDetails, ICMSType, INewMigration } from '../../../context/app/app.interface';
import { fileValidation, getConfig } from '../../../services/api/upload.service';
import { fileValidation } from '../../../services/api/upload.service';
import { RootState } from '../../../store';
import { updateNewMigrationData } from '../../../store/slice/migrationDataSlice';
import { Button, CircularLoader, Paragraph } from '@contentstack/venus-components';
Expand Down Expand Up @@ -73,23 +73,17 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
const newMigrationDataRef = useRef(newMigrationData);
const dispatch = useDispatch();
const [isLoading, setIsLoading] = useState<boolean>(false);
const [isValidated, setIsValidated] = useState<boolean>(
newMigrationData?.legacy_cms?.uploadedFile?.isValidated
);
const [showMessage, setShowMessage] = useState<boolean>(
newMigrationData?.legacy_cms?.uploadedFile?.isValidated
);
const [isValidated, setIsValidated] = useState<boolean>(newMigrationDataRef?.current?.legacy_cms?.uploadedFile?.isValidated);
const [showMessage, setShowMessage] = useState<boolean>(newMigrationDataRef?.current?.legacy_cms?.uploadedFile?.isValidated);
const [validationMessgae, setValidationMessage] = useState<string>('');
const [isValidationAttempted, setIsValidationAttempted] = useState<boolean>(false);
const [isDisabled, setIsDisabled] = useState<boolean>(
newMigrationData?.legacy_cms?.uploadedFile?.isValidated ||
isEmptyString(newMigrationDataRef?.current?.legacy_cms?.affix)
);
const [isConfigLoading, setIsConfigLoading] = useState<boolean>(false);
const [cmsType, setCmsType] = useState('');
const [fileDetails, setFileDetails] = useState(
newMigrationData?.legacy_cms?.uploadedFile?.file_details
);
const [cmsType, setCmsType]= useState('');
const [fileDetails, setFileDetails] = useState(newMigrationDataRef?.current?.legacy_cms?.uploadedFile?.file_details);
const [fileExtension, setFileExtension] = useState<string>('');
const [progressPercentage, setProgressPercentage] = useState<number>(0);
const [showProgress, setShowProgress] = useState<boolean>(false);
Expand Down Expand Up @@ -142,7 +136,9 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
bucketName: data?.file_details?.awsData?.bucketName,
buketKey: data?.file_details?.awsData?.buketKey
}
}
},
cmsType: data?.cmsType

}
}
};
Expand Down Expand Up @@ -222,108 +218,71 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
//function to get config details
const getConfigDetails = async () => {
try {
setIsConfigLoading(true);
const { data, status } = await getConfig();

if (
!isEmptyString(fileDetails?.localPath) &&
data?.localPath !== fileDetails?.localPath &&
!isEmptyString(newMigrationDataRef?.current?.legacy_cms?.affix)
) {
setIsDisabled(false);
setShowMessage(true);
setValidationMessage('');
//setIsConfigLoading(true);

if (!isEmptyString(fileDetails?.localPath) && newMigrationData?.legacy_cms?.uploadedFile?.file_details?.localPath !== fileDetails?.localPath && !isEmptyString(newMigrationDataRef?.current?.legacy_cms?.affix)) {
setIsDisabled(false);
setShowMessage(true);
setValidationMessage('');

}

const extension = getFileExtension(newMigrationData?.legacy_cms?.uploadedFile?.file_details?.localPath || '');
setCmsType(newMigrationData?.legacy_cms?.uploadedFile?.cmsType);
//setFileDetails(data);
setFileExtension(extension);


const { all_cms = [] } = migrationData?.legacyCMSData || {};
let filteredCmsData:ICMSType[] = all_cms;
if (newMigrationData?.legacy_cms?.uploadedFile?.cmsType) {
filteredCmsData = all_cms?.filter((cms: ICMSType) => cms?.parent?.toLowerCase() === newMigrationData?.legacy_cms?.uploadedFile?.cmsType?.toLowerCase());
}

if (status === 200) {
const extension = getFileExtension(data?.localPath);
setCmsType(data?.cmsType);
setFileDetails(data);
setFileExtension(extension);

const newMigrationDataObj: INewMigration = {
...newMigrationDataRef?.current,

const isFormatValid = filteredCmsData[0]?.allowed_file_formats?.some((format: ICardType) => {
const isValid = format?.fileformat_id?.toLowerCase() === extension;
return isValid;
});


//setIsFormatValid(isFormatValid);
setIsDisabled(!isFormatValid || isEmptyString(newMigrationDataRef?.current?.legacy_cms?.affix));
if(!isFormatValid){
setValidationMessage('');
dispatch(updateNewMigrationData({
...newMigrationData,
legacy_cms: {
...newMigrationDataRef?.current?.legacy_cms,
uploadedFile: {
name: data?.localPath,
url: data?.localPath,
isValidated: newMigrationData?.legacy_cms?.uploadedFile?.isValidated,
reValidate: false,
file_details: {
isLocalPath: data?.isLocalPath,
cmsType: data?.cmsType,
localPath: data?.localPath,
awsData: {
awsRegion: data?.awsData?.awsRegion,
bucketName: data?.awsData?.bucketName,
buketKey: data?.awsData?.buketKey
}
}
isValidated: false,
}
}
};

if (isEmptyString(newMigrationData?.legacy_cms?.uploadedFile?.file_details?.localPath)) {
dispatch(updateNewMigrationData(newMigrationDataObj));
}

const { all_cms = [] } = migrationData?.legacyCMSData || {};
let filteredCmsData: ICMSType[] = all_cms;
if (data?.cmsType) {
filteredCmsData = all_cms?.filter(
(cms: ICMSType) => cms?.parent?.toLowerCase() === data?.cmsType?.toLowerCase()
);
}

const isFormatValid = filteredCmsData[0]?.allowed_file_formats?.some(
(format: ICardType) => {
const isValid = format?.fileformat_id?.toLowerCase() === extension;
return isValid;
}
);

//setIsFormatValid(isFormatValid);

setIsDisabled(
!isFormatValid || isEmptyString(newMigrationDataRef?.current?.legacy_cms?.affix)
);
if (!isFormatValid) {
setValidationMessage('');
dispatch(
updateNewMigrationData({
...newMigrationData,
legacy_cms: {
uploadedFile: {
isValidated: false
}
}
})
);
}
}
if (
!isEmptyString(newMigrationData?.legacy_cms?.selectedCms?.parent?.toLowerCase()) &&
newMigrationData?.legacy_cms?.selectedCms?.parent.toLowerCase() !==
data?.cmsType.toLowerCase()
) {
setIsValidated(false);
setValidationMessage('file format is not appropriate');
setIsValidationAttempted(true);
setShowMessage(true);
setIsLoading(false);
setIsDisabled(true);
}
setIsConfigLoading(false);
}))

}


//}
// if((! isEmptyString(newMigrationData?.legacy_cms?.selectedCms?.parent?.toLowerCase()) &&
// newMigrationData?.legacy_cms?.selectedCms?.parent.toLowerCase() !== data?.cmsType.toLowerCase()))
// {
// setIsValidated(false);
// setValidationMessage('file format is not appropriate');
// setIsValidationAttempted(true);
// setShowMessage(true);
// setIsLoading(false);
// setIsDisabled(true);
// }
setIsConfigLoading(false);

} catch (error) {
return error;
}
};

useEffect(() => {
if (isEmptyString(newMigrationData?.legacy_cms?.uploadedFile?.file_details?.localPath)) {
getConfigDetails();
}
getConfigDetails();
}, []);

useEffect(() => {
Expand All @@ -333,7 +292,7 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
setIsConfigLoading(savedState.isConfigLoading);
setIsValidated(savedState?.isValidated);
setValidationMessage(savedState?.validationMessage);
setIsDisabled(savedState?.isDisabled);
//setIsDisabled(savedState?.isDisabled);
setCmsType(savedState.cmsType);
//setFileDetails(savedState.fileDetails);
setFileExtension(savedState.fileExtension);
Expand Down Expand Up @@ -402,10 +361,7 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
if (newMigrationData?.legacy_cms?.uploadedFile?.reValidate) {
setValidationMessage('');
}
if (
!isEmptyString(newMigrationData?.legacy_cms?.affix) &&
!newMigrationData?.legacy_cms?.uploadedFile?.isValidated
) {
if(!isEmptyString(newMigrationData?.legacy_cms?.affix) && !newMigrationData?.legacy_cms?.uploadedFile?.isValidated && !newMigrationData?.legacy_cms?.uploadedFile?.reValidate){
setIsDisabled(false);
}
setReValidate(newMigrationData?.legacy_cms?.uploadedFile?.reValidate || false);
Expand All @@ -429,7 +385,7 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
const sanitizedCmsType = cmsType?.toLowerCase().replace(/[^\w\s-]/g, '');

const documentationUrl = VALIDATION_DOCUMENTATION_URL?.[sanitizedCmsType];

const validationClassName = isValidated ? 'success' : 'error';

const containerClassName = `validation-container ${
Expand Down Expand Up @@ -490,7 +446,7 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
isLoading={isLoading}
loadingColor="#6c5ce7"
version="v2"
disabled={isDisabled || isEmptyString(affix) || reValidate}
disabled={!(reValidate || (!isDisabled && !isEmptyString(newMigrationData?.legacy_cms?.affix)))}
>
Validate File
</Button>
Expand Down
Loading