Skip to content

Commit a4713cf

Browse files
FryguyFryguy
authored
Merge pull request #9306 from GilbertCherrie/refactor_keyvaluelist
Refactor key value list component
2 parents 7899daa + 15ea384 commit a4713cf

File tree

39 files changed

+235
-126
lines changed

39 files changed

+235
-126
lines changed

‎app/javascript/components/ansible-playbook-edit-catalog-form/helper.js

Lines changed: 1 addition & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { useFieldApi, useFormApi } from '@@ddf';
22
import React from 'react';
3-
import { Button, TextInput, Checkbox } from 'carbon-components-react';
4-
import { TrashCan32 } from '@carbon/icons-react';
3+
import { Button, Checkbox } from 'carbon-components-react';
54
import PropTypes from 'prop-types';
65
import { TreeViewRedux } from '../tree-view';
76

@@ -153,64 +152,6 @@ TreeViewReduxWrapper.propTypes = {
153152
roleAllows: PropTypes.bool.isRequired,
154153
};
155154

156-
/** component used as a mapper to include the key value pairs ofr extra vars */
157-
export const KeyValueListComponent = (props) => {
158-
const {
159-
input, label, keyLabel, valueLabel,
160-
} = useFieldApi(props);
161-
const formOptions = useFormApi();
162-
163-
const addPair = () => {
164-
const newPairs = [...input.value, { key: '', value: '' }];
165-
formOptions.change(input.name, newPairs);
166-
};
167-
168-
const deletePair = (index) => {
169-
const newPairs = [...input.value];
170-
newPairs.splice(index, 1);
171-
formOptions.change(input.name, newPairs);
172-
};
173-
174-
const updatePair = (index, key, value) => {
175-
const newPairs = [...input.value];
176-
newPairs[index] = { key, value };
177-
formOptions.change(input.name, newPairs);
178-
};
179-
180-
return (
181-
<div className="key-value-list-component-wrapper">
182-
<label htmlFor={input.name} className="bx--label">{label}</label>
183-
<br />
184-
{input.value && input.value.map((pair, index) => (
185-
// eslint-disable-next-line react/no-array-index-key
186-
<div key={index} className="key-value-list-pair">
187-
<TextInput
188-
id={`${input.name}.${index}.key`}
189-
labelText={keyLabel}
190-
value={pair.key}
191-
onChange={(event) => updatePair(index, event.target.value, pair.value)}
192-
/>
193-
<TextInput
194-
id={`${input.name}.${index}.value`}
195-
labelText={valueLabel}
196-
value={pair.value}
197-
onChange={(event) => updatePair(index, pair.key, event.target.value)}
198-
/>
199-
<Button
200-
hasIconOnly
201-
kind="danger"
202-
className="key-value-delete"
203-
renderIcon={TrashCan32}
204-
iconDescription="Delete Key-Value Pair"
205-
onClick={() => deletePair(index)}
206-
/>
207-
</div>
208-
))}
209-
<Button kind="secondary" onClick={addPair}>{__('Add Key-Value Pair')}</Button>
210-
</div>
211-
);
212-
};
213-
214155
/** Helper function to prepare the request object for both edit and create */
215156
export const prepareRequestObject = (values, formId) => {
216157
const requestObject = { ...values };

‎app/javascript/components/ansible-playbook-edit-catalog-form/index.jsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
44
import createSchema from './schema';
55
import componentMapper from '../../forms/mappers/componentMapper';
66
import {
7-
KeyValueListComponent,
87
CopyFromProvisonButton,
98
TreeViewReduxWrapper,
109
conditionalCheckbox,
@@ -159,7 +158,6 @@ const AnsiblePlayBookEditCatalogForm = ({ initialData }) => {
159158

160159
const mapper = {
161160
...componentMapper,
162-
'key-value-list': KeyValueListComponent,
163161
'copy-from-provisioning': CopyFromProvisonButton,
164162
'tree-view-redux': TreeViewReduxWrapper,
165163
'conditional-checkbox': conditionalCheckbox,

‎app/javascript/components/key-value-list/index.jsx

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import React from 'react';
2+
import { useFieldApi, useFormApi } from '@@ddf';
3+
import { Button, TextInput } from 'carbon-components-react';
4+
import { TrashCan32 } from '@carbon/icons-react';
5+
6+
/** component used as a mapper to include the key value pairs ofr extra vars */
7+
const KeyValueListComponent = (props) => {
8+
const {
9+
input, label, keyLabel, valueLabel,
10+
} = useFieldApi(props);
11+
const formOptions = useFormApi();
12+
13+
const addPair = () => {
14+
const newPairs = [...input.value, { key: '', value: '' }];
15+
formOptions.change(input.name, newPairs);
16+
};
17+
18+
const deletePair = (index) => {
19+
const newPairs = [...input.value];
20+
newPairs.splice(index, 1);
21+
formOptions.change(input.name, newPairs);
22+
};
23+
24+
const updatePair = (index, key, value) => {
25+
const newPairs = [...input.value];
26+
newPairs[index] = { key, value };
27+
formOptions.change(input.name, newPairs);
28+
};
29+
30+
return (
31+
<div className="key-value-list-component-wrapper">
32+
<label htmlFor={input.name} className="bx--label">{label}</label>
33+
<br />
34+
{input.value && input.value.map((pair, index) => (
35+
// eslint-disable-next-line react/no-array-index-key
36+
<div key={index} className="key-value-list-pair">
37+
<TextInput
38+
id={`${input.name}.${index}.key`}
39+
labelText={keyLabel}
40+
value={pair.key}
41+
onChange={(event) => updatePair(index, event.target.value, pair.value)}
42+
/>
43+
<TextInput
44+
id={`${input.name}.${index}.value`}
45+
labelText={valueLabel}
46+
value={pair.value}
47+
onChange={(event) => updatePair(index, pair.key, event.target.value)}
48+
/>
49+
<Button
50+
hasIconOnly
51+
kind="danger"
52+
className="key-value-delete"
53+
renderIcon={TrashCan32}
54+
iconDescription="Delete Key-Value Pair"
55+
onClick={() => deletePair(index)}
56+
/>
57+
</div>
58+
))}
59+
<Button kind="secondary" onClick={addPair}>{__('Add Key-Value Pair')}</Button>
60+
</div>
61+
);
62+
};
63+
64+
export default KeyValueListComponent;

‎app/javascript/components/terraform-template-catalog-form/helper.js

Lines changed: 1 addition & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { useFieldApi, useFormApi } from '@@ddf';
22
import React from 'react';
3-
import { Button, TextInput, Checkbox } from 'carbon-components-react';
4-
import { TrashCan32 } from '@carbon/icons-react';
3+
import { Checkbox } from 'carbon-components-react';
54
import PropTypes from 'prop-types';
65
import { TreeViewRedux } from '../tree-view';
76

@@ -154,64 +153,6 @@ TreeViewReduxWrapper.propTypes = {
154153
roleAllows: PropTypes.bool.isRequired,
155154
};
156155

157-
/** component used as a mapper to include the key value pairs ofr extra vars */
158-
export const KeyValueListComponent = (props) => {
159-
const {
160-
input, label, keyLabel, valueLabel,
161-
} = useFieldApi(props);
162-
const formOptions = useFormApi();
163-
164-
const addPair = () => {
165-
const newPairs = [...input.value, { key: '', value: '' }];
166-
formOptions.change(input.name, newPairs);
167-
};
168-
169-
const deletePair = (index) => {
170-
const newPairs = [...input.value];
171-
newPairs.splice(index, 1);
172-
formOptions.change(input.name, newPairs);
173-
};
174-
175-
const updatePair = (index, key, value) => {
176-
const newPairs = [...input.value];
177-
newPairs[index] = { key, value };
178-
formOptions.change(input.name, newPairs);
179-
};
180-
181-
return (
182-
<div className="key-value-list-component-wrapper">
183-
<label htmlFor={input.name} className="bx--label">{label}</label>
184-
<br />
185-
{input.value && input.value.map((pair, index) => (
186-
// eslint-disable-next-line react/no-array-index-key
187-
<div key={index} className="key-value-list-pair">
188-
<TextInput
189-
id={`${input.name}.${index}.key`}
190-
labelText={keyLabel}
191-
value={pair.key}
192-
onChange={(event) => updatePair(index, event.target.value, pair.value)}
193-
/>
194-
<TextInput
195-
id={`${input.name}.${index}.value`}
196-
labelText={valueLabel}
197-
value={pair.value}
198-
onChange={(event) => updatePair(index, pair.key, event.target.value)}
199-
/>
200-
<Button
201-
hasIconOnly
202-
kind="danger"
203-
className="key-value-delete"
204-
renderIcon={TrashCan32}
205-
iconDescription="Delete Key-Value Pair"
206-
onClick={() => deletePair(index)}
207-
/>
208-
</div>
209-
))}
210-
<Button kind="secondary" onClick={addPair}>{__('Add Key-Value Pair')}</Button>
211-
</div>
212-
);
213-
};
214-
215156
/** Helper function to prepare the request object for both edit and create */
216157
export const prepareRequestObject = (values, formId) => {
217158
const requestObject = { ...values };

‎app/javascript/components/terraform-template-catalog-form/index.jsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
44
import createSchema from './terraform-template-catalog-form.schema';
55
import componentMapper from '../../forms/mappers/componentMapper';
66
import {
7-
KeyValueListComponent,
87
// CopyFromProvisonButton,
98
TreeViewReduxWrapper,
109
conditionalCheckbox,
@@ -143,7 +142,6 @@ const TerraformTemplateCatalogForm = ({ initialData }) => {
143142

144143
const mapper = {
145144
...componentMapper,
146-
'key-value-list': KeyValueListComponent,
147145
// 'copy-from-provisioning': CopyFromProvisonButton,
148146
'tree-view-redux': TreeViewReduxWrapper,
149147
'conditional-checkbox': conditionalCheckbox,

‎app/javascript/components/terraform-template-catalog-form/terraform-template-catalog-form.schema.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -212,7 +212,7 @@ const provisionTabSchema = (
212212
name: 'config_info.provision.dialog_type',
213213
label: __('Dialog'),
214214
options: [{ value: 'useExisting', label: __('Use Existing') }, { value: 'createNew', label: __('Create New') }],
215-
},
215+
},
216216
{
217217
component: componentTypes.SELECT,
218218
id: 'config_info.provision.dialog_id',

‎app/javascript/forms/mappers/componentMapper.jsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import React from 'react';
21
import { componentMapper } from '@data-driven-forms/carbon-component-mapper';
32
import { componentTypes } from '@@ddf';
43
import AsyncCredentials from '../../components/async-credentials/async-credentials';
@@ -11,12 +10,14 @@ import { TreeViewField, TreeViewSelector } from '../../components/tree-view';
1110
import MultiSelectWithSelectAll from '../../components/multiselect-with-selectall';
1211
import FontIconPicker from '../../components/fonticon-picker';
1312
import FontIconPickerDdf from '../../components/fonticon-picker/font-icon-picker-ddf';
13+
import KeyValueListComponent from '../../components/key-value-list';
1414

1515
const mapper = {
1616
...componentMapper,
1717
'code-editor': CodeEditor,
1818
'edit-password-field': EditPasswordField,
1919
'file-upload': FileUploadComponent,
20+
'key-value-list': KeyValueListComponent,
2021
'password-field': PasswordField,
2122
'validate-credentials': AsyncCredentials,
2223
'tree-view': TreeViewField,

‎app/javascript/spec/action-form/__snapshots__/action-form.spec.js.snap

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -824,6 +824,7 @@ exports[`Action Form Component should render adding a new action 1`] = `
824824
"file-upload": [Function],
825825
"font-icon-picker": [Function],
826826
"font-icon-picker-ddf": [Function],
827+
"key-value-list": [Function],
827828
"multi-select": [Function],
828829
"password-field": [Function],
829830
"plain-text": [Function],
@@ -1535,6 +1536,7 @@ exports[`Action Form Component should render adding a new action 1`] = `
15351536
"file-upload": [Function],
15361537
"font-icon-picker": [Function],
15371538
"font-icon-picker-ddf": [Function],
1539+
"key-value-list": [Function],
15381540
"multi-select": [Function],
15391541
"password-field": [Function],
15401542
"plain-text": [Function],

‎app/javascript/spec/add-remove-security-groups-form/__snapshots__/add-remove-security-groups-form.spec.js.snap

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,7 @@ exports[`Add/remove security groups form component should remove security group
138138
"file-upload": [Function],
139139
"font-icon-picker": [Function],
140140
"font-icon-picker-ddf": [Function],
141+
"key-value-list": [Function],
141142
"multi-select": [Function],
142143
"password-field": [Function],
143144
"plain-text": [Function],
@@ -201,6 +202,7 @@ exports[`Add/remove security groups form component should remove security group
201202
"file-upload": [Function],
202203
"font-icon-picker": [Function],
203204
"font-icon-picker-ddf": [Function],
205+
"key-value-list": [Function],
204206
"multi-select": [Function],
205207
"password-field": [Function],
206208
"plain-text": [Function],

‎app/javascript/spec/ansible-credentials-form/__snapshots__/ansible-credentials-form.spec.js.snap

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,7 @@ exports[`Ansible Credential Form Component should render adding a new credential
9898
"file-upload": [Function],
9999
"font-icon-picker": [Function],
100100
"font-icon-picker-ddf": [Function],
101+
"key-value-list": [Function],
101102
"multi-select": [Function],
102103
"password-field": [Function],
103104
"plain-text": [Function],
@@ -191,6 +192,7 @@ exports[`Ansible Credential Form Component should render adding a new credential
191192
"file-upload": [Function],
192193
"font-icon-picker": [Function],
193194
"font-icon-picker-ddf": [Function],
195+
"key-value-list": [Function],
194196
"multi-select": [Function],
195197
"password-field": [Function],
196198
"plain-text": [Function],
@@ -1581,6 +1583,7 @@ exports[`Ansible Credential Form Component should render editing a credential 1`
15811583
"file-upload": [Function],
15821584
"font-icon-picker": [Function],
15831585
"font-icon-picker-ddf": [Function],
1586+
"key-value-list": [Function],
15841587
"multi-select": [Function],
15851588
"password-field": [Function],
15861589
"plain-text": [Function],
@@ -1681,6 +1684,7 @@ exports[`Ansible Credential Form Component should render editing a credential 1`
16811684
"file-upload": [Function],
16821685
"font-icon-picker": [Function],
16831686
"font-icon-picker-ddf": [Function],
1687+
"key-value-list": [Function],
16841688
"multi-select": [Function],
16851689
"password-field": [Function],
16861690
"plain-text": [Function],

0 commit comments

Comments
 (0)