Skip to content

Commit aa3147e

Browse files
RohitKiniRohitKini
authored
Merge pull request #576 from contentstack/feature/dropdown-field-choices
Feature/dropdown field choices
2 parents 2879ebe + 61cfb3d commit aa3147e

File tree

7 files changed

+214
-257
lines changed

7 files changed

+214
-257
lines changed

‎ui/package-lock.json‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ui/src/components/LegacyCms/Actions/LoadFileFormat.tsx‎

Lines changed: 14 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const LoadFileFormat = (props: LoadFileFormatProps) => {
3232
const [isCheckedBoxChecked] = useState<boolean>(
3333
newMigrationData?.legacy_cms?.isFileFormatCheckboxChecked || true
3434
);
35-
const [fileIcon, setFileIcon] = useState(newMigrationData?.legacy_cms?.selectedFileFormat?.title);
35+
const [fileIcon, setFileIcon] = useState(newMigrationDataRef?.current?.legacy_cms?.selectedFileFormat?.title);
3636
const [isError, setIsError] = useState<boolean>(false);
3737
const [error, setError] = useState<string>('');
3838

@@ -55,33 +55,13 @@ const LoadFileFormat = (props: LoadFileFormatProps) => {
5555
}
5656
};
5757

58-
const getFileExtension = (filePath: string): string => {
59-
const normalizedPath = filePath?.replace(/\\/g, '/')?.replace(/\/$/, '');
60-
61-
// Use regex to extract the file extension
62-
const match = normalizedPath?.match(/\.([a-zA-Z0-9]+)$/);
63-
const ext = match ? match[1]?.toLowerCase() : '';
64-
65-
const fileName = filePath?.split('/')?.pop();
66-
//const ext = fileName?.split('.')?.pop();
67-
const validExtensionRegex = /\.(pdf|zip|xml|json)$/i;
68-
return ext && validExtensionRegex?.test(`.${ext}`) ? `${ext}` : '';
69-
};
70-
71-
const handleFileFormat = async () => {
58+
const handleFileFormat = async() =>{
7259
try {
73-
const { data } = await getConfig();
74-
75-
const cmsType = !isEmptyString(newMigrationData?.legacy_cms?.selectedCms?.parent)
76-
? newMigrationData?.legacy_cms?.selectedCms?.parent
77-
: data?.cmsType?.toLowerCase();
78-
const filePath = data?.localPath?.toLowerCase();
79-
const fileFormat = getFileExtension(filePath);
80-
if (
81-
!isEmptyString(selectedCard?.fileformat_id) &&
82-
selectedCard?.fileformat_id !== fileFormat &&
83-
newMigrationData?.project_current_step > 1
84-
) {
60+
61+
const cmsType = !isEmptyString(newMigrationData?.legacy_cms?.selectedCms?.parent) ? newMigrationData?.legacy_cms?.selectedCms?.parent : newMigrationData?.legacy_cms?.uploadedFile?.cmsType;
62+
const filePath = newMigrationData?.legacy_cms?.uploadedFile?.file_details?.localPath?.toLowerCase();
63+
const fileFormat: string = newMigrationData?.legacy_cms?.selectedFileFormat?.title?.toLowerCase();
64+
if(! isEmptyString(selectedCard?.fileformat_id) && selectedCard?.fileformat_id !== fileFormat && newMigrationData?.project_current_step > 1){
8565
setFileIcon(selectedCard?.title);
8666
} else {
8767
const { all_cms = [] } = migrationData?.legacyCMSData || {};
@@ -103,32 +83,18 @@ const LoadFileFormat = (props: LoadFileFormatProps) => {
10383
setIsError(true);
10484
setError('File format does not support, please add the correct file format.');
10585
}
106-
86+
10787
const selectedFileFormatObj = {
10888
description: '',
10989
fileformat_id: fileFormat,
11090
group_name: fileFormat,
11191
isactive: true,
112-
title:
113-
fileFormat === 'zip'
114-
? fileFormat?.charAt(0)?.toUpperCase() + fileFormat?.slice(1)
115-
: fileFormat?.toUpperCase()
116-
};
117-
118-
const newMigrationDataObj = {
119-
...newMigrationDataRef?.current,
120-
legacy_cms: {
121-
...newMigrationDataRef?.current?.legacy_cms,
122-
selectedFileFormat: selectedFileFormatObj,
123-
}
124-
};
92+
title: fileFormat === 'zip' ? fileFormat?.charAt(0)?.toUpperCase() + fileFormat?.slice(1) : fileFormat?.toUpperCase()
93+
}
94+
95+
96+
setFileIcon(fileFormat === 'zip' ? fileFormat?.charAt(0).toUpperCase() + fileFormat.slice(1) : fileFormat?.toUpperCase());
12597

126-
setFileIcon(
127-
fileFormat === 'zip'
128-
? fileFormat?.charAt(0).toUpperCase() + fileFormat.slice(1)
129-
: fileFormat?.toUpperCase()
130-
);
131-
dispatch(updateNewMigrationData(newMigrationDataObj));
13298
}
13399
} catch (error) {
134100
return error;
@@ -138,13 +104,13 @@ const LoadFileFormat = (props: LoadFileFormatProps) => {
138104
/**** ALL USEEffects HERE ****/
139105
useEffect(() => {
140106
handleFileFormat();
141-
//handleBtnClick();
142107
},[]);
143108

144109
useEffect(() => {
145110
newMigrationDataRef.current = newMigrationData;
146111
}, [newMigrationData]);
147112

113+
148114
return (
149115
<div className="p-3">
150116
<div className="col-12">

‎ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx‎

Lines changed: 64 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useEffect, useRef, useState } from 'react';
22
import { useDispatch, useSelector } from 'react-redux';
33
import { FileDetails, ICMSType, INewMigration } from '../../../context/app/app.interface';
4-
import { fileValidation, getConfig } from '../../../services/api/upload.service';
4+
import { fileValidation } from '../../../services/api/upload.service';
55
import { RootState } from '../../../store';
66
import { updateNewMigrationData } from '../../../store/slice/migrationDataSlice';
77
import { Button, CircularLoader, Paragraph } from '@contentstack/venus-components';
@@ -73,23 +73,17 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
7373
const newMigrationDataRef = useRef(newMigrationData);
7474
const dispatch = useDispatch();
7575
const [isLoading, setIsLoading] = useState<boolean>(false);
76-
const [isValidated, setIsValidated] = useState<boolean>(
77-
newMigrationData?.legacy_cms?.uploadedFile?.isValidated
78-
);
79-
const [showMessage, setShowMessage] = useState<boolean>(
80-
newMigrationData?.legacy_cms?.uploadedFile?.isValidated
81-
);
76+
const [isValidated, setIsValidated] = useState<boolean>(newMigrationDataRef?.current?.legacy_cms?.uploadedFile?.isValidated);
77+
const [showMessage, setShowMessage] = useState<boolean>(newMigrationDataRef?.current?.legacy_cms?.uploadedFile?.isValidated);
8278
const [validationMessgae, setValidationMessage] = useState<string>('');
8379
const [isValidationAttempted, setIsValidationAttempted] = useState<boolean>(false);
8480
const [isDisabled, setIsDisabled] = useState<boolean>(
8581
newMigrationData?.legacy_cms?.uploadedFile?.isValidated ||
8682
isEmptyString(newMigrationDataRef?.current?.legacy_cms?.affix)
8783
);
8884
const [isConfigLoading, setIsConfigLoading] = useState<boolean>(false);
89-
const [cmsType, setCmsType] = useState('');
90-
const [fileDetails, setFileDetails] = useState(
91-
newMigrationData?.legacy_cms?.uploadedFile?.file_details
92-
);
85+
const [cmsType, setCmsType]= useState('');
86+
const [fileDetails, setFileDetails] = useState(newMigrationDataRef?.current?.legacy_cms?.uploadedFile?.file_details);
9387
const [fileExtension, setFileExtension] = useState<string>('');
9488
const [progressPercentage, setProgressPercentage] = useState<number>(0);
9589
const [showProgress, setShowProgress] = useState<boolean>(false);
@@ -142,7 +136,9 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
142136
bucketName: data?.file_details?.awsData?.bucketName,
143137
buketKey: data?.file_details?.awsData?.buketKey
144138
}
145-
}
139+
},
140+
cmsType: data?.cmsType
141+
146142
}
147143
}
148144
};
@@ -222,108 +218,71 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
222218
//function to get config details
223219
const getConfigDetails = async () => {
224220
try {
225-
setIsConfigLoading(true);
226-
const { data, status } = await getConfig();
227-
228-
if (
229-
!isEmptyString(fileDetails?.localPath) &&
230-
data?.localPath !== fileDetails?.localPath &&
231-
!isEmptyString(newMigrationDataRef?.current?.legacy_cms?.affix)
232-
) {
233-
setIsDisabled(false);
234-
setShowMessage(true);
235-
setValidationMessage('');
221+
//setIsConfigLoading(true);
222+
223+
if (!isEmptyString(fileDetails?.localPath) && newMigrationData?.legacy_cms?.uploadedFile?.file_details?.localPath !== fileDetails?.localPath && !isEmptyString(newMigrationDataRef?.current?.legacy_cms?.affix)) {
224+
setIsDisabled(false);
225+
setShowMessage(true);
226+
setValidationMessage('');
227+
228+
}
229+
230+
const extension = getFileExtension(newMigrationData?.legacy_cms?.uploadedFile?.file_details?.localPath || '');
231+
setCmsType(newMigrationData?.legacy_cms?.uploadedFile?.cmsType);
232+
//setFileDetails(data);
233+
setFileExtension(extension);
234+
235+
236+
const { all_cms = [] } = migrationData?.legacyCMSData || {};
237+
let filteredCmsData:ICMSType[] = all_cms;
238+
if (newMigrationData?.legacy_cms?.uploadedFile?.cmsType) {
239+
filteredCmsData = all_cms?.filter((cms: ICMSType) => cms?.parent?.toLowerCase() === newMigrationData?.legacy_cms?.uploadedFile?.cmsType?.toLowerCase());
236240
}
237-
238-
if (status === 200) {
239-
const extension = getFileExtension(data?.localPath);
240-
setCmsType(data?.cmsType);
241-
setFileDetails(data);
242-
setFileExtension(extension);
243-
244-
const newMigrationDataObj: INewMigration = {
245-
...newMigrationDataRef?.current,
241+
242+
const isFormatValid = filteredCmsData[0]?.allowed_file_formats?.some((format: ICardType) => {
243+
const isValid = format?.fileformat_id?.toLowerCase() === extension;
244+
return isValid;
245+
});
246+
247+
248+
//setIsFormatValid(isFormatValid);
249+
setIsDisabled(!isFormatValid || isEmptyString(newMigrationDataRef?.current?.legacy_cms?.affix));
250+
if(!isFormatValid){
251+
setValidationMessage('');
252+
dispatch(updateNewMigrationData({
253+
...newMigrationData,
246254
legacy_cms: {
247-
...newMigrationDataRef?.current?.legacy_cms,
248255
uploadedFile: {
249-
name: data?.localPath,
250-
url: data?.localPath,
251-
isValidated: newMigrationData?.legacy_cms?.uploadedFile?.isValidated,
252-
reValidate: false,
253-
file_details: {
254-
isLocalPath: data?.isLocalPath,
255-
cmsType: data?.cmsType,
256-
localPath: data?.localPath,
257-
awsData: {
258-
awsRegion: data?.awsData?.awsRegion,
259-
bucketName: data?.awsData?.bucketName,
260-
buketKey: data?.awsData?.buketKey
261-
}
262-
}
256+
isValidated: false,
263257
}
264-
}
265-
};
266258

267-
if (isEmptyString(newMigrationData?.legacy_cms?.uploadedFile?.file_details?.localPath)) {
268-
dispatch(updateNewMigrationData(newMigrationDataObj));
269-
}
270-
271-
const { all_cms = [] } = migrationData?.legacyCMSData || {};
272-
let filteredCmsData: ICMSType[] = all_cms;
273-
if (data?.cmsType) {
274-
filteredCmsData = all_cms?.filter(
275-
(cms: ICMSType) => cms?.parent?.toLowerCase() === data?.cmsType?.toLowerCase()
276-
);
277-
}
278259

279-
const isFormatValid = filteredCmsData[0]?.allowed_file_formats?.some(
280-
(format: ICardType) => {
281-
const isValid = format?.fileformat_id?.toLowerCase() === extension;
282-
return isValid;
283260
}
284-
);
285-
286-
//setIsFormatValid(isFormatValid);
287-
288-
setIsDisabled(
289-
!isFormatValid || isEmptyString(newMigrationDataRef?.current?.legacy_cms?.affix)
290-
);
291-
if (!isFormatValid) {
292-
setValidationMessage('');
293-
dispatch(
294-
updateNewMigrationData({
295-
...newMigrationData,
296-
legacy_cms: {
297-
uploadedFile: {
298-
isValidated: false
299-
}
300-
}
301-
})
302-
);
303-
}
304-
}
305-
if (
306-
!isEmptyString(newMigrationData?.legacy_cms?.selectedCms?.parent?.toLowerCase()) &&
307-
newMigrationData?.legacy_cms?.selectedCms?.parent.toLowerCase() !==
308-
data?.cmsType.toLowerCase()
309-
) {
310-
setIsValidated(false);
311-
setValidationMessage('file format is not appropriate');
312-
setIsValidationAttempted(true);
313-
setShowMessage(true);
314-
setIsLoading(false);
315-
setIsDisabled(true);
316-
}
317-
setIsConfigLoading(false);
261+
}))
262+
263+
}
264+
265+
266+
//}
267+
// if((! isEmptyString(newMigrationData?.legacy_cms?.selectedCms?.parent?.toLowerCase()) &&
268+
// newMigrationData?.legacy_cms?.selectedCms?.parent.toLowerCase() !== data?.cmsType.toLowerCase()))
269+
// {
270+
// setIsValidated(false);
271+
// setValidationMessage('file format is not appropriate');
272+
// setIsValidationAttempted(true);
273+
// setShowMessage(true);
274+
// setIsLoading(false);
275+
// setIsDisabled(true);
276+
// }
277+
setIsConfigLoading(false);
278+
318279
} catch (error) {
319280
return error;
320281
}
321282
};
322283

323284
useEffect(() => {
324-
if (isEmptyString(newMigrationData?.legacy_cms?.uploadedFile?.file_details?.localPath)) {
325-
getConfigDetails();
326-
}
285+
getConfigDetails();
327286
}, []);
328287

329288
useEffect(() => {
@@ -333,7 +292,7 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
333292
setIsConfigLoading(savedState.isConfigLoading);
334293
setIsValidated(savedState?.isValidated);
335294
setValidationMessage(savedState?.validationMessage);
336-
setIsDisabled(savedState?.isDisabled);
295+
//setIsDisabled(savedState?.isDisabled);
337296
setCmsType(savedState.cmsType);
338297
//setFileDetails(savedState.fileDetails);
339298
setFileExtension(savedState.fileExtension);
@@ -402,10 +361,7 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
402361
if (newMigrationData?.legacy_cms?.uploadedFile?.reValidate) {
403362
setValidationMessage('');
404363
}
405-
if (
406-
!isEmptyString(newMigrationData?.legacy_cms?.affix) &&
407-
!newMigrationData?.legacy_cms?.uploadedFile?.isValidated
408-
) {
364+
if(!isEmptyString(newMigrationData?.legacy_cms?.affix) && !newMigrationData?.legacy_cms?.uploadedFile?.isValidated && !newMigrationData?.legacy_cms?.uploadedFile?.reValidate){
409365
setIsDisabled(false);
410366
}
411367
setReValidate(newMigrationData?.legacy_cms?.uploadedFile?.reValidate || false);
@@ -429,7 +385,7 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
429385
const sanitizedCmsType = cmsType?.toLowerCase().replace(/[^\w\s-]/g, '');
430386

431387
const documentationUrl = VALIDATION_DOCUMENTATION_URL?.[sanitizedCmsType];
432-
388+
433389
const validationClassName = isValidated ? 'success' : 'error';
434390

435391
const containerClassName = `validation-container ${
@@ -490,7 +446,7 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
490446
isLoading={isLoading}
491447
loadingColor="#6c5ce7"
492448
version="v2"
493-
disabled={isDisabled || isEmptyString(affix) || reValidate}
449+
disabled={!(reValidate || (!isDisabled && !isEmptyString(newMigrationData?.legacy_cms?.affix)))}
494450
>
495451
Validate File
496452
</Button>

0 commit comments

Comments
 (0)