Skip to content

Commit d1a667f

Browse files
RohitKiniRohitKini
authored
Merge pull request #520 from contentstack/feature/CMG-528
Feature/cmg 528
2 parents 5e30ee3 + ae7ab93 commit d1a667f

File tree

11 files changed

+842
-27
lines changed

11 files changed

+842
-27
lines changed

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

Lines changed: 474 additions & 0 deletions
Large diffs are not rendered by default.

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

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
/* Import React modules */
2+
import React, { useState } from "react";
3+
/* Import other node modules */
4+
import { Select, Tooltip, Icon } from "@contentstack/venus-components";
5+
/* Import our modules */
6+
//import { TypeMultiSelectObj, TypeSingleRowComp } from "../../common/types";
7+
//import localeTexts from "../locale/en-us";
8+
/* Import node module CSS */
9+
/* Import our CSS */
10+
11+
const SingleRowComp: React.FC<any> = function () {
12+
const [contentTypes, setContentTypes] = useState<any[]>();
13+
const [metaFields, setMetaFields] = useState<any[]>();
14+
15+
const saveData = () => {
16+
if (contentTypes?.length && metaFields?.length) {
17+
const contentTypesData = contentTypes.map(
18+
(item: any) => item?.label
19+
);
20+
const metaFieldsData = metaFields.map(
21+
(item: any) => item?.label
22+
);
23+
// setList([
24+
// ...list,
25+
// { content_types: contentTypesData, meta_fields: metaFieldsData },
26+
// ]);
27+
// setContentTypes([]);
28+
// setMetaFields([]);
29+
// removeRowComp();
30+
}
31+
};
32+
33+
return (
34+
<div
35+
className="flex-v-center mb-20"
36+
data-testid="mapper-select-container"
37+
>
38+
<Select
39+
value={contentTypes}
40+
options={[]}
41+
placeholder={'select language'}
42+
isSearchable
43+
isClearable
44+
testId="schemaValue-select"
45+
onChange={setContentTypes}
46+
onBlur={saveData}
47+
multiDisplayLimit={2}
48+
isSelectAll
49+
/>
50+
<span> - </span>
51+
<Select
52+
value={metaFields}
53+
options={[]}
54+
placeholder={'select language'}
55+
isSearchable
56+
isClearable
57+
testId="mapperValue-select"
58+
onChange={setMetaFields}
59+
onBlur={saveData}
60+
multiDisplayLimit={2}
61+
isSelectAll
62+
/>
63+
<Tooltip content="Delete" position="top" showArrow={false}>
64+
<Icon
65+
icon="Trash"
66+
size="mini"
67+
//onClick={removeRowComp}
68+
hover
69+
hoverType="secondary"
70+
shadow="medium"
71+
/>
72+
</Tooltip>
73+
</div>
74+
);
75+
};
76+
77+
export default SingleRowComp;

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
// Importing Library
2+
import { FieldLabel } from "@contentstack/venus-components";
3+
4+
// TableHeader component of language-mapper tabel
5+
const TableHeader = ({cms}:{cms:string}) => {
6+
return (
7+
<div className="flex-v-center">
8+
<FieldLabel
9+
htmlFor="Content Types"
10+
className="contentTypeRows__label field-color field-label"
11+
version="v2"
12+
requiredText="(destination language)"
13+
>
14+
Contentstack
15+
</FieldLabel>
16+
17+
<div style={{ marginLeft: "15px" }}>
18+
<FieldLabel
19+
htmlFor="Fields"
20+
className="contentTypeRows__label field-color field-label"
21+
requiredText="(source language)"
22+
version="v2"
23+
>
24+
{cms}
25+
</FieldLabel>
26+
</div>
27+
</div>
28+
);
29+
}
30+
export default TableHeader;

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

Lines changed: 89 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,13 @@
4545
border-radius: 4px;
4646
}
4747
.destination-stack-container {
48-
padding: 20px;
48+
padding-left: 25px !important;
49+
padding-top: 26px;
50+
padding-right: 30px;
51+
52+
overflow-y: auto;
53+
overflow-x: hidden;
54+
max-height: 80vh;
4955
.migration-vertical-stepper {
5056
padding: 24px 30px;
5157
border: 1px solid $color-brand-secondary-lightest;
@@ -156,8 +162,15 @@
156162
color: $color-brand-warning-medium;
157163
font-size: $size-font-small;
158164
}
159-
160-
165+
.table-content-section {
166+
.Field {
167+
&.Field--full {
168+
.field-content {
169+
border-left: none !important;
170+
}
171+
}
172+
}
173+
}
161174
}
162175
}
163176
.action-summary-wrapper {
@@ -175,11 +188,83 @@
175188
}
176189
}
177190

178-
179191
.locale-container {
180192
display: flex;
181193
background-color: $color-base-white-5;
182194
height: $px-40;
183195
align-items: center;
184196
padding: $px-10;
185197
}
198+
.lang-container {
199+
//display: flex;
200+
//flex-wrap: wrap;
201+
//padding: $px-20;
202+
//padding-bottom: 50px;
203+
}
204+
.language-mapper {
205+
//padding-top:20px;
206+
//margin-top: 20px;
207+
//padding: 24px 30px;
208+
// height: 150px;
209+
border: 1px solid $color-brand-secondary-lightest;
210+
border-radius: 4px;
211+
background-color: $color-brand-white-base;
212+
white-space: nowrap;
213+
//z-index: 999 !important;
214+
// min-height: auto;
215+
// max-height: none;
216+
// overflow: visible;
217+
// flex-grow: 1;
218+
height: auto;
219+
margin-bottom: 120px;
220+
//padding: 24px 30px, 24px, 30px;
221+
gap: 24px;
222+
//margin-bottom: 40px;
223+
//padding: 10px 50px;
224+
.table-content-section {
225+
.Field {
226+
&.Field--full {
227+
.field-content {
228+
width: 100% !important;
229+
//border-left: none !important;
230+
}
231+
}
232+
}
233+
}
234+
.span {
235+
padding: 10px 20px;
236+
}
237+
.field-label {
238+
padding: 10px 10px;
239+
}
240+
}
241+
242+
.language-title {
243+
margin-top: 10px;
244+
//margin-left: 2px;
245+
}
246+
.info-lang {
247+
display: flex;
248+
gap: 10px;
249+
}
250+
.help-text {
251+
margin-top: -5px;
252+
margin-left: 0px;
253+
}
254+
.mini-table {
255+
margin-left: 40px;
256+
margin-top: 10px;
257+
//width: 120px;
258+
}
259+
.lang-container {
260+
margin-bottom: 30px;
261+
margin-left: 10px;
262+
margin-top: 10px;
263+
display: flex;
264+
}
265+
.info-tag {
266+
max-width: 500px;
267+
}
268+
.info-language-mapper {
269+
margin-bottom: 120px;
270+
}

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

Lines changed: 44 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,25 @@ 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 } 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';
1319
import { getCMSDataFromFile } from '../../cmsData/cmsSelector';
1420
import { RootState } from '../../store';
1521
import { updateMigrationData } from '../../store/slice/migrationDataSlice';
1622
import { AutoVerticalStepperRef } from '../LegacyCms';
23+
import LanguageMapper from './Actions/LoadLanguageMapper';
1724

1825
type DestinationStackComponentProps = {
1926
isCompleted: boolean;
@@ -103,7 +110,9 @@ const DestinationStackComponent = ({
103110
) : (
104111
<div className="destination-stack-container">
105112
<div className='stackTitle'>{migrationData?.destinationStackData?.title}</div>
106-
<AutoVerticalStepper
113+
<div className="row">
114+
<div className="col-12">
115+
<AutoVerticalStepper
107116
key={stepperKey}
108117
steps={getDestinationStackSteps(
109118
isCompleted,
@@ -116,10 +125,41 @@ const DestinationStackComponent = ({
116125
isRequired={false}
117126
handleOnAllStepsComplete={handleAllStepsComplete}
118127
/>
128+
129+
</div>
130+
</div>
131+
132+
<div className="col-12 info-lang">
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>
139+
</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+
) : (
151+
<Info
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+
)}
119159
</div>
120160
)}
121161
</>
122162
);
123163
};
124164

125-
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 = {

0 commit comments

Comments
 (0)