Use the carbon component mapper for our DDF forms

app/assets/stylesheets/data_driven_forms_overrides.scss

@@ -6,3 +6,13 @@
 .ddorg__pf3-component-mapper__select__menu {
   z-index: 100 !important;
 }
+
+/*
+ * HelperTextBlock error text
+ * these colors need to be set explicitly in order to use them in custom components
+ */
+.ddorg__carbon-error-helper-text {
+    color: #da1e28;
+    display: block;
+    overflow: initial;
+}

app/javascript/components/ansible-credentials-form/ansible-credentials-form.schema.js

@@ -34,6 +34,7 @@ const createSchema = (fields, promise, edit, loadSchema) => ({
       validate: [{ type: validatorTypes.REQUIRED }],
       isRequired: true,
       isDisabled: edit,
+      includeEmpty: true,
       onChange: value => promise.then(loadSchema(value)),
       loadOptions: () =>
         promise.then(

app/javascript/components/async-credentials/async-credentials.jsx

@@ -1,9 +1,10 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { isEqual, flatMap, get, set } from 'lodash';
+import { Button, InlineLoading } from 'carbon-components-react';
+
 import { useFormApi, useFieldApi, validatorTypes, FormSpy } from '@@ddf';
-import { Button, FormGroup, HelpBlock } from 'patternfly-react';
-import ButtonSpinner from '../../forms/button-spinner';
+import HelperTextBlock from '../../forms/helper-text-block';
 
 const extractNames = (schema) => {
   const childFields = schema.fields ? flatMap(schema.fields, field => extractNames(field)) : [];
@@ -77,7 +78,7 @@ const AsyncCredentials = ({
         ...(field.component === 'password-field' ? { parent: name, edit } : undefined),
         isDisabled: field.isDisabled,
       })), formOptions)}
-      <FormGroup validationState={meta.error ? 'error' : null}>
+      <>
         <input type="hidden" {...input} />
 
         <FormSpy subscription={{ values: true, dirtyFields: true }}>
@@ -101,17 +102,20 @@ const AsyncCredentials = ({
 
             return (
               <>
-                <Button bsSize="small" bsStyle="primary" onClick={onClick} disabled={isValid || !depsValid || validating}>
+                <Button size="small" kind="tertiary" onClick={onClick} disabled={isValid || !depsValid || validating}>
+                  {validating && <InlineLoading /> }
                   {validating ? validationProgressLabel : validateLabel}
-                  {validating && <ButtonSpinner /> }
                 </Button>
-                { !meta.error && isEqual(currentValues, lastValid) && <HelpBlock>{ validationSuccessLabel }</HelpBlock> }
-                { meta.error && !validating && <HelpBlock>{ errorMessage || validateDefaultError }</HelpBlock> }
+
+                <HelperTextBlock
+                  helperText={!meta.error && isEqual(currentValues, lastValid) && validationSuccessLabel}
+                  errorText={meta.error && !validating && (errorMessage || validateDefaultError)}
+                />
               </>
             );
           }}
         </FormSpy>
-      </FormGroup>
+      </>
     </>
   );
 };

app/javascript/components/async-credentials/edit-password-field.jsx

@@ -1,56 +1,46 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  Button,
-  ControlLabel,
-  FieldLevelHelp,
-  FormControl,
-  FormGroup,
-  HelpBlock,
-  InputGroup,
-} from 'patternfly-react';
+import { FormGroup, TextInput, Button } from 'carbon-components-react';
+import { prepareProps } from '@data-driven-forms/carbon-component-mapper';
+import { EditOff16 } from '@carbon/icons-react';
 
 import { useFieldApi } from '@@ddf';
-import RequiredLabel from '../../forms/required-label';
 
 const EditPasswordField = ({ ...props }) => {
   const {
-    input,
-    meta,
-    label,
-    setEditMode,
-    dataType, // eslint-disable-line no-unused-vars
-    validateOnMount, // eslint-disable-line no-unused-vars
-    editMode,
-    isDisabled,
-    buttonLabel,
-    isRequired,
-    helperText,
-    ...rest
-  } = useFieldApi(props);
+    labelText, validateOnMount, isDisabled, editMode, setEditMode, buttonLabel, input, meta, ...rest
+  } = useFieldApi(prepareProps(props));
+
+  const invalid = (meta.touched || validateOnMount) && meta.error;
+  const warn = (meta.touched || validateOnMount) && meta.warning;
 
   return (
-    <FormGroup validationState={meta.error ? 'error' : null}>
-      <ControlLabel>
-        {isRequired ? <RequiredLabel label={label} /> : label }
-        {helperText && <FieldLevelHelp content={helperText} />}
-      </ControlLabel>
-      <InputGroup>
-        <FormControl
-          style={{ zIndex: 'initial' }}
-          {...input}
-          id={`${input.name}-input`}
-          autoFocus
-          {...rest}
-          disabled={editMode || isDisabled}
-          type="password"
-          autoComplete="new-password"
-        />
-        <InputGroup.Button>
-          <Button type="button" onClick={setEditMode}>{buttonLabel}</Button>
-        </InputGroup.Button>
-      </InputGroup>
-      {meta.error && <HelpBlock>{ meta.error }</HelpBlock>}
+    <FormGroup legendText={labelText}>
+      <div className="bx--grid" style={{ paddingLeft: 0, marginLeft: 0 }}>
+        <div className="bx--row">
+          <div className="bx--col-lg-15 bx--col-md-7 bx--col-sm-3">
+            <TextInput
+              {...input}
+              key={input.name}
+              labelText=""
+              invalid={Boolean(invalid)}
+              invalidText={invalid || ''}
+              warn={Boolean(warn)}
+              warnText={warn || ''}
+              style={{ zIndex: 'initial' }}
+              id={`${input.name}-input`}
+              autoFocus
+              disabled={editMode || isDisabled}
+              type="password"
+              autoComplete="new-password"
+              {...rest}
+            />
+          </div>
+          <div className="bx--col-sm-1 bx--col-md-1 bx--col-lg-1">
+            <Button hasIconOnly kind="secondary" size="field" onClick={setEditMode} iconDescription={buttonLabel} renderIcon={EditOff16} />
+          </div>
+        </div>
+      </div>
     </FormGroup>
   );
 };

app/javascript/components/async-credentials/password-field.jsx

@@ -1,17 +1,10 @@
 import React, { useState, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import {
-  Button,
-  ControlLabel,
-  FieldLevelHelp,
-  FormControl,
-  FormGroup,
-  HelpBlock,
-  InputGroup,
-} from 'patternfly-react';
+import { FormGroup, TextInput, Button } from 'carbon-components-react';
+import { Edit16 } from '@carbon/icons-react';
+
 import { componentTypes, useFormApi } from '@@ddf';
 import { checkValidState } from './helper';
-import RequiredLabel from '../../forms/required-label';
 
 const PasswordField = ({
   cancelEditLabel,
@@ -33,7 +26,7 @@ const PasswordField = ({
   };
 
   return (
-    <Fragment>
+    <>
       {edit && editMode && formOptions.renderForm([{
         ...secretField,
         editMode: !editMode,
@@ -43,32 +36,41 @@ const PasswordField = ({
           if (parent && checkValidState(formOptions, parent)) {
             formOptions.change(parent, formOptions.getFieldState(parent).initial);
           }
-          setEditMode(editMode => !editMode); // reset edit mode
+          setEditMode((editMode) => !editMode); // reset edit mode
         },
       }], formOptions) }
+
       {edit && !editMode && (
-        <FormGroup>
-          <ControlLabel>
-            {rest.isRequired ? <RequiredLabel label={rest.label} /> : rest.label }
-            {helperText && <FieldLevelHelp content={helperText} />}
-          </ControlLabel>
-          <InputGroup>
-            <FormControl
-              id={`${rest.name}-password-placeholder`}
-              autoFocus
-              placeholder="●●●●●●●●"
-              disabled
-              type="password"
-              autoComplete="new-password"
-            />
-            <InputGroup.Button>
-              <Button type="button" onClick={() => setEditMode(editMode => !editMode)}>{changeEditLabel}</Button>
-            </InputGroup.Button>
-          </InputGroup>
+        <FormGroup legendText={rest.label}>
+          <div className="bx--grid" style={{ paddingLeft: 0, marginLeft: 0 }}>
+            <div className="bx--row">
+              <div className="bx--col-lg-15 bx--col-md-7 bx--col-sm-3">
+                <TextInput
+                  labelText=""
+                  id={`${rest.name}-password-placeholder`}
+                  placeholder="●●●●●●●●"
+                  disabled
+                  type="password"
+                  autoComplete="new-password"
+                />
+              </div>
+              <div className="bx--col-sm-1 bx--col-md-1 bx--col-lg-1">
+                <Button
+                  hasIconOnly
+                  kind="primary"
+                  size="field"
+                  onClick={() => setEditMode((editMode) => !editMode)}
+                  iconDescription={changeEditLabel}
+                  renderIcon={Edit16}
+                />
+              </div>
+            </div>
+          </div>
         </FormGroup>
       )}
+
       {!edit && formOptions.renderForm([secretField], formOptions)}
-    </Fragment>
+    </>
   );
 };
 

app/javascript/components/catalog-form/catalog-form.jsx

@@ -3,9 +3,14 @@ import PropTypes from 'prop-types';
 import { Grid } from 'patternfly-react';
 import MiqFormRenderer from '../../forms/data-driven-form';
 import createSchema from './catalog-form.schema';
-import { filterOptions, filterValues } from '../dual-list-select/helpers';
 import { API } from '../../http_api';
 
+/* Returns array of options excluding value options */
+export const filterOptions = (options = [], item = []) => options.filter(({ value }) => !item.includes(value));
+
+/* Returns items from newValue which are not in value */
+export const filterValues = (newValue = [], values = []) => newValue.filter((item) => !values.includes(item));
+
 class CatalogForm extends Component {
   constructor(props) {
     super(props);
@@ -22,14 +27,14 @@ class CatalogForm extends Component {
         API.get('/api/service_templates?expand=resources&filter[]=service_template_catalog_id=null'),
         API.get(`/api/service_catalogs/${catalogId}?expand=service_templates`)])
         .then(([{ resources }, { name, description, service_templates }]) => {
-          const rightValues = service_templates.resources.map(({ href, name }) => ({ key: href, label: name }));
-          const options = resources.map(({ href, name }) => ({ key: href, label: name })).concat(rightValues);
+          const rightValues = service_templates.resources.map(({ href, name }) => ({ value: href, label: name }));
+          const options = resources.map(({ href, name }) => ({ value: href, label: name })).concat(rightValues);
           this.setState(() => ({
             schema: createSchema(options, catalogId),
             initialValues: {
               name,
               description: description === null ? undefined : description,
-              service_templates: rightValues.map(({ key }) => key),
+              service_templates: rightValues.map(({ value }) => value),
             },
             originalRightValues: rightValues,
             isLoaded: true,
@@ -39,7 +44,7 @@ class CatalogForm extends Component {
     } else {
       API.get('/api/service_templates?expand=resources&filter[]=service_template_catalog_id=null').then(
         ({ resources }) => this.setState({
-          schema: createSchema(resources.map(({ href, name }) => ({ key: href, label: name }))),
+          schema: createSchema(resources.map(({ href, name }) => ({ value: href, label: name }))),
           isLoaded: true,
         }, miqSparkleOff),
       )
@@ -63,7 +68,7 @@ class CatalogForm extends Component {
         action: 'create',
         resource: {
           ...values,
-          service_templates: service_templates.map(key => ({ href: `${key}` })),
+          service_templates: service_templates.map((value) => ({ href: `${value}` })),
         },
       }, {
         skipErrors: [400],
@@ -72,7 +77,7 @@ class CatalogForm extends Component {
         .catch(error => add_flash(this.handleError(error), 'error'));
     }
 
-    const unassignedRightValues = filterValues(values.service_templates, originalRightValues.map(({ key }) => key));
+    const unassignedRightValues = filterValues(values.service_templates, originalRightValues.map(({ value }) => value));
     const unassignedLeftValues = filterOptions(originalRightValues, values.service_templates);
     const promises = [
       API.post(apiBase, {
@@ -90,15 +95,15 @@ class CatalogForm extends Component {
       promises.push(
         API.post(`${apiBase}/service_templates`, {
           action: 'assign',
-          resources: unassignedRightValues.map(key => ({ href: key })),
+          resources: unassignedRightValues.map(value => ({ href: value })),
         }),
       );
     }
     if (unassignedLeftValues.length > 0) {
       promises.push(
         API.post(`${apiBase}/service_templates`, {
           action: 'unassign',
-          resources: unassignedLeftValues.map(({ key }) => ({ href: key })),
+          resources: unassignedLeftValues.map(({ value }) => ({ href: value })),
         }),
       );
     }