Skip to content

Commit 09a86d9

Browse files
nuwan-samarasinghenuwan-samarasinghe
authored
FS-4875: When component added in the designer and when we put the field as optional as it is not working and had intermittent issues in the optional feature in a component also disabled few fields from the multi input since there is no usage and fixed optional feature in multi input field (#90)
1 parent 3adcaf9 commit 09a86d9

File tree

4 files changed

+152
-126
lines changed

4 files changed

+152
-126
lines changed

‎designer/client/components/component-create/AdapterComponentCreate.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -120,11 +120,16 @@ export const AdapterComponentCreate = (props) => {
120120
handleSubmit,
121121
handleTypeChange,
122122
reset,
123+
//@ts-ignore
123124
hasErrors,
125+
//@ts-ignore
124126
errors,
125127
component,
128+
//@ts-ignore
126129
isSaving,
127130
renderTypeEdit,
131+
//@ts-ignore
132+
page
128133
} = useComponentCreate(props);
129134

130135
const type = component?.type;
@@ -146,7 +151,7 @@ export const AdapterComponentCreate = (props) => {
146151
{!type && <AdapterComponentCreateList onSelectComponent={handleTypeChange}/>}
147152
{type && renderTypeEdit && (
148153
<form onSubmit={handleSubmit}>
149-
{type && <AdapterComponentEdit/>}
154+
{type && <AdapterComponentEdit page={props.page}/>}
150155
</form>
151156
)}
152157
</div>

‎designer/client/components/component-edit/AdapterFieldEdit.tsx‎

Lines changed: 134 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@ export const renderFieldEdit = (
130130
}}
131131
/>
132132
</div>
133-
{!isContentField && (
133+
{!isContentField && type != "MultiInputField" && (
134134
<div className="govuk-checkboxes govuk-form-group">
135135
<div className="govuk-checkboxes__item">
136136
<input
@@ -165,165 +165,177 @@ export const renderFieldEdit = (
165165
</div>
166166
</div>
167167
)}
168-
<div
169-
className="govuk-checkboxes govuk-form-group"
170-
data-test-id="field-options.optionalText-wrapper"
171-
hidden={required}
172-
>
173-
<div className="govuk-checkboxes__item">
174-
<input
175-
className="govuk-checkboxes__input"
176-
id="field-options-optionalText"
177-
name="options.optionalText"
178-
type="checkbox"
179-
checked={optionalText}
180-
onChange={(e) =>
181-
dispatch({
182-
type: Actions.EDIT_OPTIONS_HIDE_OPTIONAL,
183-
payload: e.target.checked,
184-
})
185-
}
186-
/>
187-
<label
188-
className="govuk-label govuk-checkboxes__label"
189-
htmlFor="field-options-optionalText"
190-
>
191-
{i18n("common.hideOptionalTextOption.title")}
192-
</label>
193-
<span className="govuk-hint govuk-checkboxes__hint">
194-
{i18n("common.hideOptionalTextOption.helpText")}
195-
</span>
196-
</div>
197-
</div>
198-
<div
199-
className="govuk-checkboxes govuk-form-group"
200-
data-test-id="field-options.exposeToContext-wrapper"
201-
>
202-
<div className="govuk-checkboxes__item">
203-
<input
204-
className="govuk-checkboxes__input"
205-
id="field-options-exposeToContext"
206-
name="options.exposeToContext"
207-
type="checkbox"
208-
checked={exposeToContext}
209-
onChange={(e) =>
210-
dispatch({
211-
type: Actions.EDIT_OPTIONS_EXPOSE_TO_CONTEXT,
212-
payload: e.target.checked,
213-
})
214-
}
215-
/>
216-
<label
217-
className="govuk-label govuk-checkboxes__label"
218-
htmlFor="field-options-exposeToContext"
219-
>
220-
{i18n("common.exposeToContextOption.title")}
221-
</label>
222-
<span className="govuk-hint govuk-checkboxes__hint">
223-
{i18n("common.exposeToContextOption.helpText")}
224-
</span>
225-
</div>
226-
</div>
227-
{isListField && (
168+
169+
{type != "MultiInputField" && (
170+
228171
<>
229-
<div className="govuk-checkboxes govuk-form-group">
172+
<div
173+
className="govuk-checkboxes govuk-form-group"
174+
data-test-id="field-options.optionalText-wrapper"
175+
hidden={required}
176+
>
230177
<div className="govuk-checkboxes__item">
231178
<input
179+
className="govuk-checkboxes__input"
180+
id="field-options-optionalText"
181+
name="options.optionalText"
232182
type="checkbox"
233-
id="field-options-allow-pre-population"
234-
className={`govuk-checkboxes__input`}
235-
name="options.allowPrePopulation"
236-
checked={allowPrePopulation}
183+
checked={!optionalText}
237184
onChange={(e) =>
238185
dispatch({
239-
type: Actions.EDIT_OPTIONS_ALLOW_PRE_POPULATION,
240-
payload: e.target.checked,
186+
type: Actions.EDIT_OPTIONS_HIDE_OPTIONAL,
187+
payload: !e.target.checked,
241188
})
242189
}
243190
/>
244191
<label
245192
className="govuk-label govuk-checkboxes__label"
246-
htmlFor="field-options-allow-pre-population"
193+
htmlFor="field-options-optionalText"
247194
>
248-
{i18n("common.allowPrePopulationOption.title", {
249-
component:
250-
AdapterComponentTypes.find(
251-
(componentType) => componentType.name === type
252-
)?.title ?? "",
253-
})}
195+
{i18n("common.hideOptionalTextOption.title")}
254196
</label>
255197
<span className="govuk-hint govuk-checkboxes__hint">
256-
{i18n("common.allowPrePopulationOption.helpText")}
257-
</span>
198+
{i18n("common.hideOptionalTextOption.helpText")}
199+
</span>
258200
</div>
259201
</div>
260-
<div className="govuk-checkboxes govuk-form-group">
202+
<div
203+
className="govuk-checkboxes govuk-form-group"
204+
data-test-id="field-options.exposeToContext-wrapper"
205+
>
261206
<div className="govuk-checkboxes__item">
262207
<input
208+
className="govuk-checkboxes__input"
209+
id="field-options-exposeToContext"
210+
name="options.exposeToContext"
263211
type="checkbox"
264-
id="field-options-allow-overwrite-from-query-param"
265-
className={`govuk-checkboxes__input`}
266-
name="options.allowPrePopulationOverwrite"
267-
checked={allowPrePopulationOverwrite}
212+
checked={exposeToContext}
268213
onChange={(e) =>
269214
dispatch({
270-
type:
271-
//@ts-ignore
272-
Actions.EDIT_OPTIONS_ALLOW_OVERWRITE_FROM_QUERY_PARAM,
215+
type: Actions.EDIT_OPTIONS_EXPOSE_TO_CONTEXT,
273216
payload: e.target.checked,
274217
})
275218
}
276219
/>
277220
<label
278221
className="govuk-label govuk-checkboxes__label"
279-
htmlFor="field-options-allow-pre-population"
222+
htmlFor="field-options-exposeToContext"
280223
>
281-
{i18n("common.allowPrePopulationOverwriteOption.title", {
282-
component:
283-
AdapterComponentTypes.find(
284-
(componentType) => componentType.name === type
285-
)?.title ?? "",
286-
})}
224+
{i18n("common.exposeToContextOption.title")}
287225
</label>
288226
<span className="govuk-hint govuk-checkboxes__hint">
289-
{i18n("common.allowPrePopulationOverwriteOption.helpText")}
290-
</span>
227+
{i18n("common.exposeToContextOption.helpText")}
228+
</span>
291229
</div>
292230
</div>
293231
</>
232+
294233
)}
295-
<div
296-
className="govuk-checkboxes govuk-form-group"
297-
data-test-id="field-options.disableChangingFromSummary-wrapper"
298-
>
299-
<div className="govuk-checkboxes__item">
300-
<input
301-
className="govuk-checkboxes__input"
302-
id="field-options-disableChangingFromSummary"
303-
name="options.disableChangingFromSummary"
304-
type="checkbox"
305-
checked={disableChangingFromSummary}
306-
onChange={(e) =>
307-
dispatch({
308-
type: Actions.EDIT_OPTIONS_DISABLE_CHANGING_FROM_SUMMARY,
309-
payload: e.target.checked,
310-
})
311-
}
312-
/>
313-
<label
314-
className="govuk-label govuk-checkboxes__label"
315-
htmlFor="field-options-disableChangingFromSummary"
316-
>
317-
{i18n("common.disableChangingFromSummaryOption.title")}
318-
</label>
319-
<span className="govuk-hint govuk-checkboxes__hint">
234+
{
235+
isListField && type != "MultiInputField" && (
236+
<>
237+
<div className="govuk-checkboxes govuk-form-group">
238+
<div className="govuk-checkboxes__item">
239+
<input
240+
type="checkbox"
241+
id="field-options-allow-pre-population"
242+
className={`govuk-checkboxes__input`}
243+
name="options.allowPrePopulation"
244+
checked={allowPrePopulation}
245+
onChange={(e) =>
246+
dispatch({
247+
type: Actions.EDIT_OPTIONS_ALLOW_PRE_POPULATION,
248+
payload: e.target.checked,
249+
})
250+
}
251+
/>
252+
<label
253+
className="govuk-label govuk-checkboxes__label"
254+
htmlFor="field-options-allow-pre-population"
255+
>
256+
{i18n("common.allowPrePopulationOption.title", {
257+
component:
258+
AdapterComponentTypes.find(
259+
(componentType) => componentType.name === type
260+
)?.title ?? "",
261+
})}
262+
</label>
263+
<span className="govuk-hint govuk-checkboxes__hint">
264+
{i18n("common.allowPrePopulationOption.helpText")}
265+
</span>
266+
</div>
267+
</div>
268+
<div className="govuk-checkboxes govuk-form-group">
269+
<div className="govuk-checkboxes__item">
270+
<input
271+
type="checkbox"
272+
id="field-options-allow-overwrite-from-query-param"
273+
className={`govuk-checkboxes__input`}
274+
name="options.allowPrePopulationOverwrite"
275+
checked={allowPrePopulationOverwrite}
276+
onChange={(e) =>
277+
dispatch({
278+
type:
279+
//@ts-ignore
280+
Actions.EDIT_OPTIONS_ALLOW_OVERWRITE_FROM_QUERY_PARAM,
281+
payload: e.target.checked,
282+
})
283+
}
284+
/>
285+
<label
286+
className="govuk-label govuk-checkboxes__label"
287+
htmlFor="field-options-allow-pre-population"
288+
>
289+
{i18n("common.allowPrePopulationOverwriteOption.title", {
290+
component:
291+
AdapterComponentTypes.find(
292+
(componentType) => componentType.name === type
293+
)?.title ?? "",
294+
})}
295+
</label>
296+
<span className="govuk-hint govuk-checkboxes__hint">
297+
{i18n("common.allowPrePopulationOverwriteOption.helpText")}
298+
</span>
299+
</div>
300+
</div>
301+
</>
302+
)
303+
}
304+
{type != "MultiInputField" && (
305+
<div
306+
className="govuk-checkboxes govuk-form-group"
307+
data-test-id="field-options.disableChangingFromSummary-wrapper"
308+
>
309+
<div className="govuk-checkboxes__item">
310+
<input
311+
className="govuk-checkboxes__input"
312+
id="field-options-disableChangingFromSummary"
313+
name="options.disableChangingFromSummary"
314+
type="checkbox"
315+
checked={disableChangingFromSummary}
316+
onChange={(e) =>
317+
dispatch({
318+
type: Actions.EDIT_OPTIONS_DISABLE_CHANGING_FROM_SUMMARY,
319+
payload: e.target.checked,
320+
})
321+
}
322+
/>
323+
<label
324+
className="govuk-label govuk-checkboxes__label"
325+
htmlFor="field-options-disableChangingFromSummary"
326+
>
327+
{i18n("common.disableChangingFromSummaryOption.title")}
328+
</label>
329+
<span className="govuk-hint govuk-checkboxes__hint">
320330
{i18n("common.disableChangingFromSummaryOption.helpText")}
321331
</span>
332+
</div>
322333
</div>
323-
</div>
334+
)}
324335
</div>
325336
</div>
326-
);
337+
)
338+
;
327339
}
328340

329341
export function AdapterFieldEdit({isContentField = false, isListField = false}: Props) {
@@ -336,7 +348,7 @@ export function AdapterFieldEdit({isContentField = false, isListField = false}:
336348
//@ts-ignore
337349
hideTitle = false,
338350
//@ts-ignore
339-
optionalText = false,
351+
optionalText = true,
340352
//@ts-ignore
341353
required = true,
342354
//@ts-ignore

‎designer/client/components/multiinput-field-edit/MultiInputFieldBaseEdit.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export const MultiInputFieldBaseEdit = React.forwardRef((props, ref: any) => {
2424
//@ts-ignore
2525
hideTitle = false,
2626
//@ts-ignore
27-
optionalText = false,
27+
optionalText = true,
2828
//@ts-ignore
2929
required = true,
3030
exposeToContext = false,
@@ -55,6 +55,16 @@ export const MultiInputFieldBaseEdit = React.forwardRef((props, ref: any) => {
5555
...selectedSubComponentEdit,
5656
title: event.payload
5757
})
58+
} else if (event.type === Actions.EDIT_OPTIONS_HIDE_OPTIONAL) {
59+
setSelectedSubComponentEdit({
60+
...selectedSubComponentEdit,
61+
//@ts-ignore
62+
options: {
63+
...options,
64+
//@ts-ignore
65+
optionalText: event.payload
66+
}
67+
})
5868
} else if (event.type === Actions.EDIT_HELP) {
5969
setSelectedSubComponentEdit({
6070
...selectedSubComponentEdit,

‎designer/client/components/multiinput-field-edit/MultiInputFieldEdit.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,6 @@ export const MultiInputFieldEdit: any = ({context = AdapterComponentContext}) =>
5151
//@ts-ignore
5252
const {options = {}} = selectedComponent;
5353
//@ts-ignore
54-
options.required = true
55-
//@ts-ignore
5654
selectedComponent.schema = !selectedComponent.schema ? {} : {
5755
...selectedComponent.schema
5856
}
@@ -100,6 +98,7 @@ export const MultiInputFieldEdit: any = ({context = AdapterComponentContext}) =>
10098
setShowEditor(!showEditor);
10199
if (showEditor) {
102100
setSelectedComponentType("Clear")
101+
setSelectedSubComponent(undefined)
103102
}
104103
};
105104

0 commit comments

Comments
 (0)