Skip to content

Commit 1d8a2f6

Browse files
sayalijoshi27sayalijoshi27
authored
Merge pull request #521 from contentstack/feature/CMG-528
refactor:logic for showing saved mapping of language and css for menu
2 parents 4d9b371 + f4172df commit 1d8a2f6

File tree

3 files changed

+67
-18
lines changed

3 files changed

+67
-18
lines changed

‎ui/src/components/DestinationStack/Actions/LoadLanguageMapper.tsx‎

Lines changed: 43 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -32,12 +32,14 @@ const Mapper = ({
3232
cmsLocaleOptions,
3333
handleLangugeDelete,
3434
options,
35-
sourceOptions
35+
sourceOptions,
36+
isDisabled
3637
}: {
3738
cmsLocaleOptions: Array<{ label: string; value: string }>;
3839
handleLangugeDelete: (index: number, locale: { label: string; value: string }) => void;
3940
options: Array<{ label: string; value: string }>;
4041
sourceOptions: Array<{ label: string; value: string }>;
42+
isDisabled: boolean
4143
}) => {
4244
const [selectedMappings, setSelectedMappings] = useState<{ [key: string]: string }>({});
4345
const [existingField, setExistingField] = useState<ExistingFieldType>({});
@@ -259,7 +261,7 @@ const Mapper = ({
259261
</Tooltip>
260262
) : (
261263
<Select
262-
value={existingField[locale]}
264+
value={locale?.value ? locale : existingField[locale]}
263265
onChange={(key: { label: string; value: string }) => {
264266
handleSelectedCsLocale(key, index, 'csLocale');
265267
}}
@@ -273,7 +275,7 @@ const Mapper = ({
273275
version="v2"
274276
hideSelectedOptions={true}
275277
isClearable={true}
276-
isDisabled={false}
278+
isDisabled={isDisabled}
277279
className="select-container"
278280
/>
279281
)}
@@ -299,26 +301,31 @@ const Mapper = ({
299301
className="select-container"
300302
/> */
301303
<Select
302-
value={existingLocale[locale]}
304+
value={locale?.value && locale?.value !== 'master_locale' ? {label: locale?.value, value: locale?.value} : existingLocale[locale]}
303305
onChange={(data: { label: string; value: string }) =>
304306
handleSelectedSourceLocale(data, index, 'sourceLocale', locale)
305307
}
308+
styles={{
309+
menuPortal: (base:any) => ({ ...base, zIndex: 9999 })
310+
}}
306311
options={sourceoptions}
307312
placeholder={placeholder}
308313
isSearchable
309-
maxMenuHeight={150}
314+
maxMenuHeight={100}
310315
multiDisplayLimit={5}
311-
menuPortalTarget={document.querySelector('.language-mapper')}
316+
//menuPortalTarget={document.querySelector('.mini-table')}
317+
menuShouldScrollIntoView={true}
312318
width="270px"
313319
version="v2"
314320
hideSelectedOptions={true}
315321
isClearable={true}
316-
isDisabled={false}
322+
isDisabled={isDisabled}
317323
className="select-container"
318324
/>
319325
}
320326
<div className={''}>
321-
{locale?.value !== 'master_locale' && (
327+
{locale?.value !== 'master_locale' &&
328+
!isDisabled && (
322329
<Tooltip content={'Delete'} position="top" showArrow={false}>
323330
<Icon
324331
icon="Trash"
@@ -330,6 +337,7 @@ const Mapper = ({
330337
hover
331338
hoverType="secondary"
332339
shadow="medium"
340+
disabled={isDisabled}
333341
/>
334342
</Tooltip>
335343
)}
@@ -373,7 +381,8 @@ const LanguageMapper = () => {
373381
setsourceLocales(sourceLocale);
374382

375383
setoptions(allLocales);
376-
setcmsLocaleOptions((prevList: { label: string; value: string }[]) => {
384+
Object?.entries(newMigrationData?.destination_stack?.localeMapping)?.length === 0 &&
385+
setcmsLocaleOptions((prevList: { label: string; value: string }[]) => {
377386
const newLabel = newMigrationData?.destination_stack?.selectedStack?.master_locale;
378387

379388
const isPresent = prevList.some((item: { label: string; value: string }) => item?.value === 'master_locale');
@@ -390,14 +399,36 @@ const LanguageMapper = () => {
390399

391400
return prevList;
392401
});
402+
if (newMigrationData?.project_current_step > 2) {
403+
Object.entries(newMigrationData?.destination_stack?.localeMapping || {})?.forEach(([key, value]) => {
404+
setcmsLocaleOptions((prevList) => {
405+
const labelKey = key?.replace(/-master_locale$/, "");
406+
407+
// Check if the key already exists in the list
408+
const exists = prevList?.some((item) => item?.label === labelKey);
409+
410+
if (!exists) {
411+
return [
412+
...prevList,
413+
{
414+
label: labelKey,
415+
value: String(value),
416+
},
417+
];
418+
}
419+
420+
return prevList; // Return the same list if key exists
421+
});
422+
});
423+
}
393424
setisLoading(false);
394425
} catch (error) {
395426
console.error('Error fetching locales:', error);
396427
}
397428
};
398429

399430
fetchData();
400-
}, []);
431+
}, [newMigrationData?.destination_stack]);
401432

402433
// const fetchLocales = async () => {
403434
// return await getStackLocales(newMigrationData?.destination_stack?.selectedOrg?.value);
@@ -435,6 +466,7 @@ const LanguageMapper = () => {
435466
cmsLocaleOptions={cmsLocaleOptions}
436467
handleLangugeDelete={handleDeleteLocale}
437468
sourceOptions={sourceLocales}
469+
isDisabled={newMigrationData?.project_current_step > 2}
438470
/>
439471
}
440472
// footerComponent={
@@ -461,7 +493,7 @@ const LanguageMapper = () => {
461493
disabled={
462494
Object.keys(newMigrationData?.destination_stack?.localeMapping || {})?.length ===
463495
newMigrationData?.destination_stack?.sourceLocale?.length ||
464-
cmsLocaleOptions?.length === newMigrationData?.destination_stack?.sourceLocale?.length
496+
cmsLocaleOptions?.length === newMigrationData?.destination_stack?.sourceLocale?.length || newMigrationData?.project_current_step > 2
465497
}>
466498
Add Language
467499
</Button>

‎ui/src/components/DestinationStack/DestinationStack.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -235,6 +235,12 @@
235235
}
236236
}
237237
}
238+
.field-content__content{
239+
height: auto !important;
240+
max-height: unset !important;
241+
overflow: visible !important;
242+
z-index: 9999;
243+
}
238244
}
239245
.span {
240246
padding: 10px 20px;
@@ -259,6 +265,8 @@
259265
.mini-table {
260266
margin-left: 40px;
261267
margin-top: 10px;
268+
overflow: visible !important;
269+
position: relative;
262270
//width: 120px;
263271
}
264272
.lang-container {

‎ui/src/pages/Migration/index.tsx‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -227,6 +227,15 @@ const Migration = () => {
227227
const stackLink = `${CS_URL[projectData?.region]}/stack/${projectData?.current_test_stack_id}/dashboard`;
228228
const stackName = projectData?.test_stacks?.find((stack:TestStacks)=> stack?.stackUid === projectData?.current_test_stack_id)?.stackName;
229229

230+
const masterLocaleEntries = projectData?.master_locale
231+
? Object?.entries(projectData?.master_locale).map(([key, value]) => [`${key}-master_locale`, value])
232+
: [];
233+
234+
const locales = {
235+
...Object?.fromEntries(masterLocaleEntries),
236+
...projectData?.locales
237+
};
238+
230239
const projectMapper = {
231240
...newMigrationData,
232241
legacy_cms: {
@@ -258,7 +267,8 @@ const Migration = () => {
258267
stackArray: [],
259268
migratedStacks: migratedstacks?.data?.destinationStacks,
260269
sourceLocale: projectData?.source_locales,
261-
csLocale: csLocales?.data?.locales
270+
csLocale: csLocales?.data?.locales,
271+
localeMapping: locales
262272
},
263273
content_mapping: {
264274
isDropDownChanged: false,
@@ -438,11 +448,10 @@ const Migration = () => {
438448
setIsLoading(true);
439449

440450
const hasNonEmptyMapping =
441-
newMigrationData?.destination_stack?.localeMapping &&
442-
Object.values(newMigrationData?.destination_stack?.localeMapping)?.some(
443-
(value) => value !== '' || value !== null || value !== undefined
444-
);
445-
console.log(hasNonEmptyMapping);
451+
newMigrationData?.destination_stack?.localeMapping &&
452+
Object.values(newMigrationData?.destination_stack?.localeMapping)?.every(
453+
(value) => value !== '' && value !== null && value !== undefined
454+
);
446455

447456
const master_locale:any = {};
448457
const locales: any= {};
@@ -456,7 +465,7 @@ const Migration = () => {
456465
if (
457466
isCompleted &&
458467
!isEmptyString(newMigrationData?.destination_stack?.selectedStack?.value) &&
459-
hasNonEmptyMapping
468+
hasNonEmptyMapping
460469
) {
461470
event?.preventDefault();
462471
//Update Data in backend

0 commit comments

Comments
 (0)