Skip to content

Commit 2879ebe

Browse files
RohitKiniRohitKini
authored
Merge pull request #574 from contentstack/feature/content-mapper
Feature/content mapper
2 parents da5f736 + e2154f0 commit 2879ebe

File tree

11 files changed

+293
-319
lines changed

11 files changed

+293
-319
lines changed

‎ui/src/cmsData/content_mapping.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@
143143
"_version": 3
144144
},
145145
"table_search_placeholder": "Search fields",
146-
"search_placeholder": "Search content models",
146+
"search_placeholder": "Search...",
147147
"tags": [],
148148
"title": "Content Mapping",
149149
"updated_at": "2024-01-25T12:13:32.967Z",

‎ui/src/components/Common/AddStack/addStack.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import '../../../scss/App.scss';
2+
13
/**
24
* Styles for the ReactModal__add-stack class.
35
*/
@@ -26,3 +28,12 @@
2628
.ReactModal__Overlay .ReactModal__Content .ReactModal__Content__body.selectWrapperBody {
2729
overflow: visible;
2830
}
31+
.stack-creation-warning {
32+
color: $color-font-base;
33+
font-size: $size-font-large;
34+
margin-left: .5rem;
35+
margin-top: .5rem;
36+
.imp-text {
37+
font-weight: $font-weight-semi-bold;
38+
}
39+
}

‎ui/src/components/Common/AddStack/addStack.tsx‎

Lines changed: 137 additions & 138 deletions
Original file line numberDiff line numberDiff line change
@@ -150,163 +150,162 @@ const AddStack = (props: any): JSX.Element => {
150150
}}
151151
render={({ handleSubmit }): JSX.Element => {
152152
return (
153-
<>
154-
<div className="ReactModal__add-stack">
155-
<form onSubmit={handleSubmit}>
156-
<ModalHeader title={addStackCMSData?.title} closeModal={props?.closeModal} />
157-
<ModalBody className="no-scroll selectWrapperBody">
158-
<Field>
159-
<ReactFinalField name="name" type="input">
160-
{({ input, meta }): JSX.Element => {
161-
return (
162-
<>
153+
<div className="ReactModal__add-stack">
154+
<form onSubmit={handleSubmit}>
155+
<ModalHeader title={addStackCMSData?.title} closeModal={props?.closeModal} />
156+
<ModalBody className="no-scroll selectWrapperBody">
157+
<Field>
158+
<ReactFinalField name="name" type="input">
159+
{({ input, meta }): JSX.Element => {
160+
return (
161+
<>
162+
<FieldLabel
163+
required
164+
testId="cs-stack-create-title"
165+
version="v2"
166+
error={meta?.error && meta?.touched && true}
167+
htmlFor="name"
168+
>
169+
{addStackCMSData?.stack_name}
170+
</FieldLabel>
171+
<TextInput
172+
testId="cs-stack-create-title-input"
173+
version="v2"
174+
{...input}
175+
onChange={(event: React.ChangeEvent<HTMLInputElement>): void => {
176+
input?.onChange(event);
177+
}}
178+
name="name"
179+
autoComplete="off"
180+
type="text"
181+
placeholder={addStackCMSData?.stack_name_placeholder}
182+
error={(meta?.error || meta?.submitError) && meta?.touched}
183+
/>
184+
{meta?.error && meta?.touched && (
185+
<ValidationMessage
186+
version="v2"
187+
testId="cs-stack-create-title-validation"
188+
>
189+
{meta?.error}
190+
</ValidationMessage>
191+
)}
192+
</>
193+
);
194+
}}
195+
</ReactFinalField>
196+
</Field>
197+
<Field>
198+
<ReactFinalField name={'description'} type="textarea">
199+
{({ input, meta }): JSX.Element => {
200+
return (
201+
<div className="input-description">
202+
<Field>
163203
<FieldLabel
164-
required
165-
testId="cs-stack-create-title"
204+
testId="cs-stack-create-description"
166205
version="v2"
167-
error={meta?.error && meta?.touched && true}
168-
htmlFor="name"
206+
htmlFor="description"
169207
>
170-
{addStackCMSData?.stack_name}
208+
{addStackCMSData?.stack_description}
171209
</FieldLabel>
172-
<TextInput
173-
testId="cs-stack-create-title-input"
210+
<Textarea
211+
testId="cs-stack-create-description-input"
174212
version="v2"
213+
className="Description-field"
175214
{...input}
176-
onChange={(event: React.ChangeEvent<HTMLInputElement>): void => {
215+
name="description"
216+
onChange={(
217+
event: React.ChangeEvent<HTMLInputElement>
218+
): void => {
177219
input?.onChange(event);
178220
}}
179-
name="name"
180-
autoComplete="off"
181-
type="text"
182-
placeholder={addStackCMSData?.stack_name_placeholder}
221+
placeholder={addStackCMSData?.stack_description_placeholder}
183222
error={(meta?.error || meta?.submitError) && meta?.touched}
184223
/>
185224
{meta?.error && meta?.touched && (
186225
<ValidationMessage
187226
version="v2"
188-
testId="cs-stack-create-title-validation"
227+
testId="cs-stack-create-description-validation"
189228
>
190229
{meta?.error}
191230
</ValidationMessage>
192231
)}
193-
</>
194-
);
195-
}}
196-
</ReactFinalField>
197-
</Field>
198-
<Field>
199-
<ReactFinalField name={'description'} type="textarea">
200-
{({ input, meta }): JSX.Element => {
201-
return (
202-
<div className="input-description">
203-
<Field>
204-
<FieldLabel
205-
testId="cs-stack-create-description"
206-
version="v2"
207-
htmlFor="description"
208-
>
209-
{addStackCMSData?.stack_description}
210-
</FieldLabel>
211-
<Textarea
212-
testId="cs-stack-create-description-input"
213-
version="v2"
214-
className="Description-field"
215-
{...input}
216-
name="description"
217-
onChange={(
218-
event: React.ChangeEvent<HTMLInputElement>
219-
): void => {
220-
input?.onChange(event);
221-
}}
222-
placeholder={addStackCMSData?.stack_description_placeholder}
223-
error={(meta?.error || meta?.submitError) && meta?.touched}
224-
/>
225-
{meta?.error && meta?.touched && (
226-
<ValidationMessage
227-
version="v2"
228-
testId="cs-stack-create-description-validation"
229-
>
230-
{meta?.error}
231-
</ValidationMessage>
232-
)}
233-
</Field>
234-
</div>
235-
);
236-
}}
237-
</ReactFinalField>
238-
</Field>
239-
<Field>
240-
<ReactFinalField name={'locale'}>
241-
{({ input, meta }): JSX.Element => {
242-
return (
243-
<>
244-
<FieldLabel
245-
required
246-
testId="cs-stack-create-language"
232+
</Field>
233+
</div>
234+
);
235+
}}
236+
</ReactFinalField>
237+
</Field>
238+
<Field>
239+
<ReactFinalField name={'locale'}>
240+
{({ input, meta }): JSX.Element => {
241+
return (
242+
<>
243+
<FieldLabel
244+
required
245+
testId="cs-stack-create-language"
246+
version="v2"
247+
error={meta?.error && meta?.touched && true}
248+
htmlFor="locale"
249+
>
250+
{addStackCMSData?.stack_locales}
251+
</FieldLabel>
252+
<Select
253+
value={input?.value}
254+
isSearchable={true}
255+
onChange={(event: React.ChangeEvent<HTMLInputElement>): void => {
256+
input?.onChange(event);
257+
}}
258+
name="locale"
259+
width="300px"
260+
options={allLocales}
261+
maxMenuHeight={200}
262+
isClearable={true}
263+
version={'v2'}
264+
placeholder={addStackCMSData?.stack_locale_description}
265+
/>
266+
<div className="stack-creation-warning"><span className='imp-text'>Important:</span> The master language cannot be changed after the stack has been created.</div>
267+
{meta?.error && meta?.touched && (
268+
<ValidationMessage
269+
testId="cs-stack-create-language-validation"
247270
version="v2"
248-
error={meta?.error && meta?.touched && true}
249-
htmlFor="locale"
250271
>
251-
{addStackCMSData?.stack_locales}
252-
</FieldLabel>
253-
<Select
254-
value={input?.value}
255-
isSearchable={true}
256-
onChange={(event: React.ChangeEvent<HTMLInputElement>): void => {
257-
input?.onChange(event);
258-
}}
259-
name="locale"
260-
width="300px"
261-
options={allLocales}
262-
maxMenuHeight={200}
263-
isClearable={true}
264-
version={'v2'}
265-
placeholder={addStackCMSData?.stack_locale_description}
266-
/>
267-
{meta?.error && meta?.touched && (
268-
<ValidationMessage
269-
testId="cs-stack-create-language-validation"
270-
version="v2"
271-
>
272-
{meta?.error}
273-
</ValidationMessage>
274-
)}
275-
</>
276-
);
277-
}}
278-
</ReactFinalField>
279-
</Field>
280-
</ModalBody>
281-
<ModalFooter>
282-
<ButtonGroup>
283-
<Button
284-
aria-label="Cancel"
285-
version="v2"
286-
testId="cs-cancel-create-stack"
287-
buttonType="tertiary"
288-
onClick={(): any => {
289-
props?.closeModal();
290-
}}
291-
>
292-
{addStackCMSData?.secondary_cta?.title}
293-
</Button>
294-
<Button
295-
aria-label="Create New Stack"
296-
version="v2"
297-
testId="cs-create-stack"
298-
buttonType="primary"
299-
name="submit"
300-
type="submit"
301-
loading={isProcessing}
302-
>
303-
{addStackCMSData?.primary_cta?.title}
304-
</Button>
305-
</ButtonGroup>
306-
</ModalFooter>
307-
</form>
308-
</div>
309-
</>
272+
{meta?.error}
273+
</ValidationMessage>
274+
)}
275+
</>
276+
);
277+
}}
278+
</ReactFinalField>
279+
</Field>
280+
</ModalBody>
281+
<ModalFooter>
282+
<ButtonGroup>
283+
<Button
284+
aria-label="Cancel"
285+
version="v2"
286+
testId="cs-cancel-create-stack"
287+
buttonType="tertiary"
288+
onClick={(): any => {
289+
props?.closeModal();
290+
}}
291+
>
292+
{addStackCMSData?.secondary_cta?.title}
293+
</Button>
294+
<Button
295+
aria-label="Create New Stack"
296+
version="v2"
297+
testId="cs-create-stack"
298+
buttonType="primary"
299+
name="submit"
300+
type="submit"
301+
loading={isProcessing}
302+
>
303+
{addStackCMSData?.primary_cta?.title}
304+
</Button>
305+
</ButtonGroup>
306+
</ModalFooter>
307+
</form>
308+
</div>
310309
);
311310
}}
312311
/>

‎ui/src/components/ContentMapper/index.scss‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -156,11 +156,17 @@
156156
padding: 0 1.25rem;
157157
}
158158
.cms-field {
159-
text-transform: capitalize;
159+
// text-transform: capitalize;
160+
// overflow: hidden;
161+
// text-overflow: ellipsis;
162+
// white-space: nowrap;
163+
// width: 445px;
164+
165+
display: -webkit-box;
166+
-webkit-box-orient: vertical;
167+
-webkit-line-clamp: 1;
160168
overflow: hidden;
161169
text-overflow: ellipsis;
162-
white-space: nowrap;
163-
width: 445px;
164170
}
165171
.InstructionText {
166172
font-size: $size-font-small;

0 commit comments

Comments
 (0)