Skip to content

Commit 055f5c3

Browse files
AishDaniAishDani
committed
refactor:language-mapper
1 parent efcb55d commit 055f5c3

File tree

8 files changed

+585
-272
lines changed

8 files changed

+585
-272
lines changed

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

Lines changed: 454 additions & 207 deletions
Large diffs are not rendered by default.

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

Lines changed: 14 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,6 @@
4545
border-radius: 4px;
4646
}
4747
.destination-stack-container {
48-
4948
padding-left: 25px !important;
5049
padding-top: 26px;
5150
padding-right: 30px;
@@ -172,10 +171,6 @@
172171
}
173172
}
174173
}
175-
176-
177-
178-
179174
}
180175
}
181176
.action-summary-wrapper {
@@ -193,25 +188,24 @@
193188
}
194189
}
195190

196-
197191
.locale-container {
198192
display: flex;
199193
background-color: $color-base-white-5;
200194
height: $px-40;
201195
align-items: center;
202196
padding: $px-10;
203197
}
204-
.lang-container{
198+
.lang-container {
205199
//display: flex;
206200
//flex-wrap: wrap;
207201
//padding: $px-20;
208202
//padding-bottom: 50px;
209203
}
210-
.language-mapper{
204+
.language-mapper {
211205
//padding-top:20px;
212206
//margin-top: 20px;
213207
//padding: 24px 30px;
214-
// height: 150px;
208+
// height: 150px;
215209
border: 1px solid $color-brand-secondary-lightest;
216210
border-radius: 4px;
217211
background-color: $color-brand-white-base;
@@ -237,40 +231,40 @@
237231
}
238232
}
239233
}
240-
.span{
234+
.span {
241235
padding: 10px 20px;
242236
}
243-
.field-label{
237+
.field-label {
244238
padding: 10px 10px;
245239
}
246240
}
247241

248-
.language-title{
242+
.language-title {
249243
margin-top: 10px;
250244
//margin-left: 2px;
251245
}
252-
.info-lang{
246+
.info-lang {
253247
display: flex;
248+
gap: 10px;
254249
}
255-
.help-text{
250+
.help-text {
256251
margin-top: -5px;
257252
margin-left: 0px;
258253
}
259-
.mini-table{
254+
.mini-table {
260255
margin-left: 40px;
261256
margin-top: 10px;
262257
//width: 120px;
263258
}
264-
.lang-container{
259+
.lang-container {
265260
margin-bottom: 30px;
266261
margin-left: 10px;
267262
margin-top: 10px;
268263
display: flex;
269264
}
270-
.info-tag{
265+
.info-tag {
271266
max-width: 500px;
272267
}
273-
.info-language-mapper{
268+
.info-language-mapper {
274269
margin-bottom: 120px;
275-
276-
}
270+
}

‎ui/src/components/DestinationStack/index.tsx‎

Lines changed: 33 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,17 @@ import { useEffect, useRef, useState } from 'react';
22
import { useDispatch, useSelector } from 'react-redux';
33
import AutoVerticalStepper from '../Stepper/VerticalStepper/AutoVerticalStepper';
44
import { getDestinationStackSteps } from './StepperSteps';
5-
import { CircularLoader, FieldLabel, HelpText, Icon, Info, Tooltip } from '@contentstack/venus-components';
5+
import {
6+
CircularLoader,
7+
HelpText,
8+
Icon,
9+
Info,
10+
Tooltip
11+
} from '@contentstack/venus-components';
612
import { CS_ENTRIES } from '../../utilities/constants';
713
import {
814
DEFAULT_DESTINATION_STACK_DATA,
9-
IDestinationStackComponent,
15+
IDestinationStackComponent
1016
} from '../../context/app/app.interface';
1117
import './DestinationStack.scss';
1218
import { MigrationResponse } from '../../services/api/service.interface';
@@ -124,34 +130,36 @@ const DestinationStackComponent = ({
124130
</div>
125131

126132
<div className="col-12 info-lang">
127-
<div className='stackTitle language-title'>Language configuration</div>
128-
<Tooltip content={`Define language mappings between Contentstack and ${newMigrationData?.legacy_cms?.selectedCms?.parent} for smooth content transfer. Each mapping aligns a WordPress source language with its Contentstack equivalent.`} position='right'>
129-
<Icon className="language-title" icon='Information' version='v2' size='small'></Icon>
130-
</Tooltip>
131-
133+
<div className="stackTitle language-title">Language configuration</div>
134+
<Tooltip
135+
content={`Define language mappings between Contentstack and ${newMigrationData?.legacy_cms?.selectedCms?.parent} for smooth content transfer. Each mapping aligns a WordPress source language with its Contentstack equivalent.`}
136+
position="right">
137+
<Icon className="language-title" icon="Information" version="v2" size="small"></Icon>
138+
</Tooltip>
132139
</div>
133-
<HelpText data-test-id="cs-paragraph-tag" className='contentMapWrapper-heading p1 regular help-text' >Contentstack and {newMigrationData?.legacy_cms?.selectedCms?.parent} Languages Mapping</HelpText>
134-
135-
{/* <FieldLabel htmlFor='language-mapper' className='language-title stackTitle'>
136-
Language configuration
137-
</FieldLabel> */}
138-
{newMigrationData?.destination_stack?.selectedStack?.value ?
139-
140-
<div className='language-mapper col-12 '>
141-
<LanguageMapper/>
142-
143-
</div> :
140+
<HelpText
141+
data-test-id="cs-paragraph-tag"
142+
className="contentMapWrapper-heading p1 regular help-text">
143+
Contentstack and {newMigrationData?.legacy_cms?.selectedCms?.parent} Languages Mapping
144+
</HelpText>
145+
146+
{newMigrationData?.destination_stack?.selectedStack?.value ? (
147+
<div className="language-mapper col-12 ">
148+
<LanguageMapper />
149+
</div>
150+
) : (
144151
<Info
145-
className="info-language-mapper col-12 info-tag"
146-
icon={<Icon icon='Information' version='v2' size='small'></Icon>}
147-
//version="v2"
148-
content="Please select the stack to processed with Language mapping"
149-
type="light"/>}
150-
152+
className="info-language-mapper col-12 info-tag"
153+
icon={<Icon icon="Information" version="v2" size="small"></Icon>}
154+
version="v2"
155+
content="Please select the stack to proceed with language mapping"
156+
type="light"
157+
/>
158+
)}
151159
</div>
152160
)}
153161
</>
154162
);
155163
};
156164

157-
export default DestinationStackComponent;
165+
export default DestinationStackComponent;

‎ui/src/context/app/app.interface.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,9 @@ export interface IDestinationStack {
173173
selectedStack: IDropDown;
174174
stackArray: IDropDown[];
175175
migratedStacks: string[];
176-
176+
sourceLocale: string[];
177+
localeMapping: {};
178+
csLocale: string[];
177179
}
178180
export interface IContentMapper {
179181
existingGlobal: ContentTypeList[] | (() => ContentTypeList[]);
@@ -337,6 +339,9 @@ export const DEFAULT_DESTINATION_STACK: IDestinationStack = {
337339
selectedStack: DEFAULT_DROPDOWN,
338340
stackArray: [],
339341
migratedStacks: [],
342+
sourceLocale: [],
343+
localeMapping: {},
344+
csLocale: []
340345
};
341346

342347
export const DEFAULT_CONTENT_MAPPER: IContentMapper = {

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

Lines changed: 66 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,22 @@ import { RootState } from '../../store';
99
import { updateMigrationData, updateNewMigrationData } from '../../store/slice/migrationDataSlice';
1010

1111
// Services
12-
import { getMigrationData, updateCurrentStepData, updateLegacyCMSData, updateDestinationStack, updateAffixData, fileformatConfirmation, updateFileFormatData, affixConfirmation, updateStackDetails, getExistingContentTypes, getExistingGlobalFields, startMigration, updateMigrationKey } from '../../services/api/migration.service';
12+
import {
13+
getMigrationData,
14+
updateCurrentStepData,
15+
updateLegacyCMSData,
16+
updateDestinationStack,
17+
updateAffixData,
18+
fileformatConfirmation,
19+
updateFileFormatData,
20+
affixConfirmation,
21+
updateStackDetails,
22+
getExistingContentTypes,
23+
getExistingGlobalFields,
24+
startMigration,
25+
updateMigrationKey,
26+
updateLocaleMapper
27+
} from '../../services/api/migration.service';
1328
import { getCMSDataFromFile } from '../../cmsData/cmsSelector';
1429

1530
// Utilities
@@ -23,7 +38,14 @@ import {
2338
DEFAULT_IFLOWSTEP,
2439
IFlowStep
2540
} from '../../components/Stepper/FlowStepper/flowStep.interface';
26-
import { IDropDown, INewMigration, ICMSType, ILegacyCMSComponent, DEFAULT_CMS_TYPE, TestStacks } from '../../context/app/app.interface';
41+
import {
42+
IDropDown,
43+
INewMigration,
44+
ICMSType,
45+
ILegacyCMSComponent,
46+
DEFAULT_CMS_TYPE,
47+
TestStacks
48+
} from '../../context/app/app.interface';
2749
import { ContentTypeSaveHandles } from '../../components/ContentMapper/contentMapper.interface';
2850
import { ICardType } from "../../components/Common/Card/card.interface";
2951
import { ModalObj } from '../../components/Modal/modal.interface';
@@ -38,6 +60,7 @@ import TestMigration from '../../components/TestMigration';
3860
import MigrationExecution from '../../components/MigrationExecution';
3961
import SaveChangesModal from '../../components/Common/SaveChangesModal';
4062
import { getMigratedStacks } from '../../services/api/project.service';
63+
import { getStackLocales } from '../../services/api/stacks.service';
4164

4265
type StepperComponentRef = {
4366
handleStepChange: (step: number) => void;
@@ -116,7 +139,6 @@ const Migration = () => {
116139
} catch (error) {
117140
// return error;
118141
console.log(error);
119-
120142
}
121143
}
122144

@@ -163,7 +185,7 @@ const Migration = () => {
163185

164186
const data = await getMigrationData(selectedOrganisation?.value, params?.projectId ?? '');
165187
const migratedstacks = await getMigratedStacks(selectedOrganisation?.value, projectId );
166-
188+
const csLocales = await getStackLocales(selectedOrganisation?.value);
167189
if (data) {
168190
setIsLoading(false);
169191
setProjectData(data?.data);
@@ -233,8 +255,10 @@ const Migration = () => {
233255
destination_stack: {
234256
selectedOrg: selectedOrganisationData,
235257
selectedStack: selectedStackData,
236-
stackArray:[],
258+
stackArray: [],
237259
migratedStacks: migratedstacks?.data?.destinationStacks,
260+
sourceLocale: projectData?.source_locales,
261+
csLocale: csLocales?.data?.locales
238262
},
239263
content_mapping: {
240264
isDropDownChanged: false,
@@ -413,40 +437,66 @@ const Migration = () => {
413437
const handleOnClickDestinationStack = async (event: MouseEvent) => {
414438
setIsLoading(true);
415439

416-
if(isCompleted && !isEmptyString(newMigrationData?.destination_stack?.selectedStack?.value)){
440+
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);
446+
447+
const master_locale:any = {};
448+
const locales: any= {};
449+
Object.entries(newMigrationData?.destination_stack?.localeMapping).forEach(([key, value]) => {
450+
if (key.includes("master_locale")) {
451+
master_locale[key.replace("-master_locale", "")] = value;
452+
} else {
453+
locales[key] = value;
454+
}
455+
});
456+
if (
457+
isCompleted &&
458+
!isEmptyString(newMigrationData?.destination_stack?.selectedStack?.value) &&
459+
hasNonEmptyMapping
460+
) {
417461
event?.preventDefault();
418462
//Update Data in backend
419463
await updateDestinationStack(selectedOrganisation?.value, projectId, {
420464
stack_api_key: newMigrationData?.destination_stack?.selectedStack?.value
421465
});
422466

423-
await updateStackDetails(selectedOrganisation?.value, projectId,{
424-
label:newMigrationData?.destination_stack?.selectedStack?.label,
425-
value:newMigrationData?.destination_stack?.selectedStack?.value,
426-
master_locale:newMigrationData?.destination_stack?.selectedStack?.master_locale,
427-
created_at:newMigrationData?.destination_stack?.selectedStack?.created_at,
467+
await updateStackDetails(selectedOrganisation?.value, projectId, {
468+
label: newMigrationData?.destination_stack?.selectedStack?.label,
469+
value: newMigrationData?.destination_stack?.selectedStack?.value,
470+
master_locale: newMigrationData?.destination_stack?.selectedStack?.master_locale,
471+
created_at: newMigrationData?.destination_stack?.selectedStack?.created_at,
428472
isNewStack: newMigrationData?.destination_stack?.selectedStack?.isNewStack
429-
})
473+
});
474+
await updateLocaleMapper(projectId,{'master_locale': master_locale, locales:locales})
430475
const res = await updateCurrentStepData(selectedOrganisation?.value, projectId);
431476
if (res?.status === 200) {
432477
handleStepChange(2);
433478
setIsLoading(false);
434479
const url = `/projects/${projectId}/migration/steps/3`;
435480
navigate(url, { replace: true });
436-
}
437-
else{
481+
} else {
438482
setIsLoading(false);
439483
Notification({
440-
notificationContent: { text: res?.data?.error?.message},
484+
notificationContent: { text: res?.data?.error?.message },
441485
type: 'error'
442486
});
443487
}
444-
} else{
488+
} else if (!isCompleted) {
445489
setIsLoading(false);
446490
Notification({
447491
notificationContent: { text: 'Please select a stack to proceed further' },
448492
type: 'warning'
449493
});
494+
} else if (! hasNonEmptyMapping) {
495+
setIsLoading(false);
496+
Notification({
497+
notificationContent: { text: 'Please complete the language mapping to preceed futher' },
498+
type: 'warning'
499+
});
450500
}
451501
};
452502

‎ui/src/services/api/migration.service.ts‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -330,4 +330,13 @@ export const updateMigrationKey = async (orgId: string, projectId: string) => {
330330
} catch (error) {
331331
return error;
332332
}
333-
};
333+
};
334+
335+
export const updateLocaleMapper = async(projectId: string, data: any) => {
336+
try {
337+
return await postCall(
338+
`${API_VERSION}/migration/updateLocales/${projectId}`, data, options);
339+
} catch (error) {
340+
return error;
341+
}
342+
}

‎ui/src/services/api/stacks.service.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export const getStackStatus = async (orgId: string, data: string) => {
4444
}
4545
};
4646

47-
export const getStackLocales = async(orgId: string, api_key: string) => {
47+
export const getStackLocales = async(orgId: string) => {
4848
try {
4949

5050
const updatedOptions = {

‎ui/src/utilities/functions.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,7 @@ export const getDays = (day: string | number | Date) => {
145145
};
146146

147147
export const isEmptyString = (str: string | undefined) =>
148-
str === undefined || str === null || str.trim().length < 1;
148+
str === undefined || str === null || str?.trim()?.length < 1;
149149

150150
export const shortName = (name: string) => {
151151
if (name && name.length > 25) {

0 commit comments

Comments
 (0)