Refactor key value list component

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

@@ -1,7 +1,6 @@
 import { useFieldApi, useFormApi } from '@@ddf';
 import React from 'react';
-import { Button, TextInput, Checkbox } from 'carbon-components-react';
-import { TrashCan32 } from '@carbon/icons-react';
+import { Button, Checkbox } from 'carbon-components-react';
 import PropTypes from 'prop-types';
 import { TreeViewRedux } from '../tree-view';
 
@@ -153,64 +152,6 @@ TreeViewReduxWrapper.propTypes = {
   roleAllows: PropTypes.bool.isRequired,
 };
 
-/** component used as a mapper to include the key value pairs ofr extra vars */
-export const KeyValueListComponent = (props) => {
-  const {
-    input, label, keyLabel, valueLabel,
-  } = useFieldApi(props);
-  const formOptions = useFormApi();
-
-  const addPair = () => {
-    const newPairs = [...input.value, { key: '', value: '' }];
-    formOptions.change(input.name, newPairs);
-  };
-
-  const deletePair = (index) => {
-    const newPairs = [...input.value];
-    newPairs.splice(index, 1);
-    formOptions.change(input.name, newPairs);
-  };
-
-  const updatePair = (index, key, value) => {
-    const newPairs = [...input.value];
-    newPairs[index] = { key, value };
-    formOptions.change(input.name, newPairs);
-  };
-
-  return (
-    <div className="key-value-list-component-wrapper">
-      <label htmlFor={input.name} className="bx--label">{label}</label>
-      <br />
-      {input.value && input.value.map((pair, index) => (
-        // eslint-disable-next-line react/no-array-index-key
-        <div key={index} className="key-value-list-pair">
-          <TextInput
-            id={`${input.name}.${index}.key`}
-            labelText={keyLabel}
-            value={pair.key}
-            onChange={(event) => updatePair(index, event.target.value, pair.value)}
-          />
-          <TextInput
-            id={`${input.name}.${index}.value`}
-            labelText={valueLabel}
-            value={pair.value}
-            onChange={(event) => updatePair(index, pair.key, event.target.value)}
-          />
-          <Button
-            hasIconOnly
-            kind="danger"
-            className="key-value-delete"
-            renderIcon={TrashCan32}
-            iconDescription="Delete Key-Value Pair"
-            onClick={() => deletePair(index)}
-          />
-        </div>
-      ))}
-      <Button kind="secondary" onClick={addPair}>{__('Add Key-Value Pair')}</Button>
-    </div>
-  );
-};
-
 /** Helper function to prepare the request object for both edit and create */
 export const prepareRequestObject = (values, formId) => {
   const requestObject = { ...values };

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

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import createSchema from './schema';
 import componentMapper from '../../forms/mappers/componentMapper';
 import {
-  KeyValueListComponent,
   CopyFromProvisonButton,
   TreeViewReduxWrapper,
   conditionalCheckbox,
@@ -159,7 +158,6 @@ const AnsiblePlayBookEditCatalogForm = ({ initialData }) => {
 
   const mapper = {
     ...componentMapper,
-    'key-value-list': KeyValueListComponent,
     'copy-from-provisioning': CopyFromProvisonButton,
     'tree-view-redux': TreeViewReduxWrapper,
     'conditional-checkbox': conditionalCheckbox,

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

@@ -0,0 +1,64 @@
+import React from 'react';
+import { useFieldApi, useFormApi } from '@@ddf';
+import { Button, TextInput } from 'carbon-components-react';
+import { TrashCan32 } from '@carbon/icons-react';
+
+/** component used as a mapper to include the key value pairs ofr extra vars */
+const KeyValueListComponent = (props) => {
+  const {
+    input, label, keyLabel, valueLabel,
+  } = useFieldApi(props);
+  const formOptions = useFormApi();
+
+  const addPair = () => {
+    const newPairs = [...input.value, { key: '', value: '' }];
+    formOptions.change(input.name, newPairs);
+  };
+
+  const deletePair = (index) => {
+    const newPairs = [...input.value];
+    newPairs.splice(index, 1);
+    formOptions.change(input.name, newPairs);
+  };
+
+  const updatePair = (index, key, value) => {
+    const newPairs = [...input.value];
+    newPairs[index] = { key, value };
+    formOptions.change(input.name, newPairs);
+  };
+
+  return (
+    <div className="key-value-list-component-wrapper">
+      <label htmlFor={input.name} className="bx--label">{label}</label>
+      <br />
+      {input.value && input.value.map((pair, index) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <div key={index} className="key-value-list-pair">
+          <TextInput
+            id={`${input.name}.${index}.key`}
+            labelText={keyLabel}
+            value={pair.key}
+            onChange={(event) => updatePair(index, event.target.value, pair.value)}
+          />
+          <TextInput
+            id={`${input.name}.${index}.value`}
+            labelText={valueLabel}
+            value={pair.value}
+            onChange={(event) => updatePair(index, pair.key, event.target.value)}
+          />
+          <Button
+            hasIconOnly
+            kind="danger"
+            className="key-value-delete"
+            renderIcon={TrashCan32}
+            iconDescription="Delete Key-Value Pair"
+            onClick={() => deletePair(index)}
+          />
+        </div>
+      ))}
+      <Button kind="secondary" onClick={addPair}>{__('Add Key-Value Pair')}</Button>
+    </div>
+  );
+};
+
+export default KeyValueListComponent;

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

@@ -1,7 +1,6 @@
 import { useFieldApi, useFormApi } from '@@ddf';
 import React from 'react';
-import { Button, TextInput, Checkbox } from 'carbon-components-react';
-import { TrashCan32 } from '@carbon/icons-react';
+import { Checkbox } from 'carbon-components-react';
 import PropTypes from 'prop-types';
 import { TreeViewRedux } from '../tree-view';
 
@@ -154,64 +153,6 @@ TreeViewReduxWrapper.propTypes = {
   roleAllows: PropTypes.bool.isRequired,
 };
 
-/** component used as a mapper to include the key value pairs ofr extra vars */
-export const KeyValueListComponent = (props) => {
-  const {
-    input, label, keyLabel, valueLabel,
-  } = useFieldApi(props);
-  const formOptions = useFormApi();
-
-  const addPair = () => {
-    const newPairs = [...input.value, { key: '', value: '' }];
-    formOptions.change(input.name, newPairs);
-  };
-
-  const deletePair = (index) => {
-    const newPairs = [...input.value];
-    newPairs.splice(index, 1);
-    formOptions.change(input.name, newPairs);
-  };
-
-  const updatePair = (index, key, value) => {
-    const newPairs = [...input.value];
-    newPairs[index] = { key, value };
-    formOptions.change(input.name, newPairs);
-  };
-
-  return (
-    <div className="key-value-list-component-wrapper">
-      <label htmlFor={input.name} className="bx--label">{label}</label>
-      <br />
-      {input.value && input.value.map((pair, index) => (
-        // eslint-disable-next-line react/no-array-index-key
-        <div key={index} className="key-value-list-pair">
-          <TextInput
-            id={`${input.name}.${index}.key`}
-            labelText={keyLabel}
-            value={pair.key}
-            onChange={(event) => updatePair(index, event.target.value, pair.value)}
-          />
-          <TextInput
-            id={`${input.name}.${index}.value`}
-            labelText={valueLabel}
-            value={pair.value}
-            onChange={(event) => updatePair(index, pair.key, event.target.value)}
-          />
-          <Button
-            hasIconOnly
-            kind="danger"
-            className="key-value-delete"
-            renderIcon={TrashCan32}
-            iconDescription="Delete Key-Value Pair"
-            onClick={() => deletePair(index)}
-          />
-        </div>
-      ))}
-      <Button kind="secondary" onClick={addPair}>{__('Add Key-Value Pair')}</Button>
-    </div>
-  );
-};
-
 /** Helper function to prepare the request object for both edit and create */
 export const prepareRequestObject = (values, formId) => {
   const requestObject = { ...values };

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

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import createSchema from './terraform-template-catalog-form.schema';
 import componentMapper from '../../forms/mappers/componentMapper';
 import {
-  KeyValueListComponent,
   //   CopyFromProvisonButton,
   TreeViewReduxWrapper,
   conditionalCheckbox,
@@ -143,7 +142,6 @@ const TerraformTemplateCatalogForm = ({ initialData }) => {
 
   const mapper = {
     ...componentMapper,
-    'key-value-list': KeyValueListComponent,
     // 'copy-from-provisioning': CopyFromProvisonButton,
     'tree-view-redux': TreeViewReduxWrapper,
     'conditional-checkbox': conditionalCheckbox,

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

@@ -212,7 +212,7 @@ const provisionTabSchema = (
         name: 'config_info.provision.dialog_type',
         label: __('Dialog'),
         options: [{ value: 'useExisting', label: __('Use Existing') }, { value: 'createNew', label: __('Create New') }],
-      },      
+      },
       {
         component: componentTypes.SELECT,
         id: 'config_info.provision.dialog_id',

app/javascript/forms/mappers/componentMapper.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { componentMapper } from '@data-driven-forms/carbon-component-mapper';
 import { componentTypes } from '@@ddf';
 import AsyncCredentials from '../../components/async-credentials/async-credentials';
@@ -11,12 +10,14 @@ import { TreeViewField, TreeViewSelector } from '../../components/tree-view';
 import MultiSelectWithSelectAll from '../../components/multiselect-with-selectall';
 import FontIconPicker from '../../components/fonticon-picker';
 import FontIconPickerDdf from '../../components/fonticon-picker/font-icon-picker-ddf';
+import KeyValueListComponent from '../../components/key-value-list';
 
 const mapper = {
   ...componentMapper,
   'code-editor': CodeEditor,
   'edit-password-field': EditPasswordField,
   'file-upload': FileUploadComponent,
+  'key-value-list': KeyValueListComponent,
   'password-field': PasswordField,
   'validate-credentials': AsyncCredentials,
   'tree-view': TreeViewField,

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

@@ -824,6 +824,7 @@ exports[`Action Form Component should render adding a new action 1`] = `
             "file-upload": [Function],
             "font-icon-picker": [Function],
             "font-icon-picker-ddf": [Function],
+            "key-value-list": [Function],
             "multi-select": [Function],
             "password-field": [Function],
             "plain-text": [Function],
@@ -1535,6 +1536,7 @@ exports[`Action Form Component should render adding a new action 1`] = `
               "file-upload": [Function],
               "font-icon-picker": [Function],
               "font-icon-picker-ddf": [Function],
+              "key-value-list": [Function],
               "multi-select": [Function],
               "password-field": [Function],
               "plain-text": [Function],

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

@@ -138,6 +138,7 @@ exports[`Add/remove security groups form component should remove security group
             "file-upload": [Function],
             "font-icon-picker": [Function],
             "font-icon-picker-ddf": [Function],
+            "key-value-list": [Function],
             "multi-select": [Function],
             "password-field": [Function],
             "plain-text": [Function],
@@ -201,6 +202,7 @@ exports[`Add/remove security groups form component should remove security group
               "file-upload": [Function],
               "font-icon-picker": [Function],
               "font-icon-picker-ddf": [Function],
+              "key-value-list": [Function],
               "multi-select": [Function],
               "password-field": [Function],
               "plain-text": [Function],

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

@@ -98,6 +98,7 @@ exports[`Ansible Credential Form Component should render adding a new credential
             "file-upload": [Function],
             "font-icon-picker": [Function],
             "font-icon-picker-ddf": [Function],
+            "key-value-list": [Function],
             "multi-select": [Function],
             "password-field": [Function],
             "plain-text": [Function],
@@ -191,6 +192,7 @@ exports[`Ansible Credential Form Component should render adding a new credential
               "file-upload": [Function],
               "font-icon-picker": [Function],
               "font-icon-picker-ddf": [Function],
+              "key-value-list": [Function],
               "multi-select": [Function],
               "password-field": [Function],
               "plain-text": [Function],
@@ -1581,6 +1583,7 @@ exports[`Ansible Credential Form Component should render editing a credential 1`
             "file-upload": [Function],
             "font-icon-picker": [Function],
             "font-icon-picker-ddf": [Function],
+            "key-value-list": [Function],
             "multi-select": [Function],
             "password-field": [Function],
             "plain-text": [Function],
@@ -1681,6 +1684,7 @@ exports[`Ansible Credential Form Component should render editing a credential 1`
               "file-upload": [Function],
               "font-icon-picker": [Function],
               "font-icon-picker-ddf": [Function],
+              "key-value-list": [Function],
               "multi-select": [Function],
               "password-field": [Function],
               "plain-text": [Function],

app/javascript/spec/c-and-u-collections-form/__snapshots__/c-and-u-collections-form.spec.js.snap

@@ -104,6 +104,7 @@ exports[`DiagnosticsCURepairForm Component Should add a record from DiagnosticsC
             "file-upload": [Function],
             "font-icon-picker": [Function],
             "font-icon-picker-ddf": [Function],
+            "key-value-list": [Function],
             "multi-select": [Function],
             "password-field": [Function],
             "plain-text": [Function],
@@ -213,6 +214,7 @@ exports[`DiagnosticsCURepairForm Component Should add a record from DiagnosticsC
               "file-upload": [Function],
               "font-icon-picker": [Function],
               "font-icon-picker-ddf": [Function],
+              "key-value-list": [Function],
               "multi-select": [Function],
               "password-field": [Function],
               "plain-text": [Function],

app/javascript/spec/cloud-database-form/__snapshots__/cloud-database-form.spec.js.snap

@@ -136,6 +136,7 @@ exports[`Cloud Database form component should render "Edit" form 1`] = `
                     "file-upload": [Function],
                     "font-icon-picker": [Function],
                     "font-icon-picker-ddf": [Function],
+                    "key-value-list": [Function],
                     "multi-select": [Function],
                     "password-field": [Function],
                     "plain-text": [Function],
@@ -218,6 +219,7 @@ exports[`Cloud Database form component should render "Edit" form 1`] = `
                       "file-upload": [Function],
                       "font-icon-picker": [Function],
                       "font-icon-picker-ddf": [Function],
+                      "key-value-list": [Function],
                       "multi-select": [Function],
                       "password-field": [Function],
                       "plain-text": [Function],