Merge pull request #144 from keithjgrant/120-add-org-form-cleanup

Refactor org add/edit forms with Formik

src/components/AnsibleSelect/AnsibleSelect.jsx

@@ -16,7 +16,7 @@ class AnsibleSelect extends React.Component {
   onSelectChange (val, event) {
     const { onChange, name } = this.props;
     event.target.name = name;
-    onChange(val, event);
+    onChange(event, val);
   }
 
   render () {
@@ -24,10 +24,22 @@ class AnsibleSelect extends React.Component {
     return (
       <I18n>
         {({ i18n }) => (
-          <FormSelect value={value} onChange={this.onSelectChange} aria-label={i18n._(t`Select Input`)}>
-            {data.map((datum) => (datum === defaultSelected
-              ? (<FormSelectOption key="" value="" label={i18n._(t`Use Default ${label}`)} />) : (<FormSelectOption key={datum} value={datum} label={datum} />)))
-            }
+          <FormSelect
+            value={value}
+            onChange={this.onSelectChange}
+            aria-label={i18n._(t`Select Input`)}
+          >
+            {data.map((datum) => (
+              datum === defaultSelected ? (
+                <FormSelectOption
+                  key=""
+                  value=""
+                  label={i18n._(t`Use Default ${label}`)}
+                />
+              ) : (
+                <FormSelectOption key={datum} value={datum} label={datum} />
+              )
+            ))}
           </FormSelect>
         )}
       </I18n>

src/components/FormActionGroup.jsx

@@ -28,10 +28,10 @@ const FormActionGroup = ({ onSubmit, submitDisabled, onCancel }) => (
       <ActionGroup style={formActionGroupStyle}>
         <Toolbar>
           <ToolbarGroup style={buttonGroupStyle}>
-            <Button aria-label={i18n._(t`Save`)} variant="primary" onClick={onSubmit} isDisabled={submitDisabled}>{i18n._(t`Save`)}</Button>
+            <Button aria-label={i18n._(t`Save`)} variant="primary" type="submit" onClick={onSubmit} isDisabled={submitDisabled}>{i18n._(t`Save`)}</Button>
           </ToolbarGroup>
           <ToolbarGroup>
-            <Button aria-label={i18n._(t`Cancel`)} variant="secondary" onClick={onCancel}>{i18n._(t`Cancel`)}</Button>
+            <Button aria-label={i18n._(t`Cancel`)} variant="secondary" type="button" onClick={onCancel}>{i18n._(t`Cancel`)}</Button>
           </ToolbarGroup>
         </Toolbar>
       </ActionGroup>

src/components/FormField.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Field } from 'formik';
+import { FormGroup, TextInput } from '@patternfly/react-core';
+
+function FormField (props) {
+  const { id, name, label, validate, isRequired, ...rest } = props;
+
+  return (
+    <Field
+      name={name}
+      validate={validate}
+      render={({ field, form }) => {
+        const isValid = !form.touched[field.name] || !form.errors[field.name];
+
+        return (
+          <FormGroup
+            fieldId={id}
+            helperTextInvalid={form.errors[field.name]}
+            isRequired={isRequired}
+            isValid={isValid}
+            label={label}
+          >
+            <TextInput
+              id={id}
+              isRequired={isRequired}
+              isValid={isValid}
+              {...rest}
+              {...field}
+              onChange={(value, event) => {
+                field.onChange(event);
+              }}
+            />
+          </FormGroup>
+        );
+      }}
+    />
+  );
+}
+
+FormField.propTypes = {
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  type: PropTypes.string,
+  validate: PropTypes.func,
+  isRequired: PropTypes.bool,
+};
+
+FormField.defaultProps = {
+  type: 'text',
+  validate: () => {},
+  isRequired: false,
+};
+
+export default FormField;

src/components/FormRow.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+export default function FormRow ({ children }) {
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gridGap: '20px',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))'
+      }}
+    >
+      {children}
+    </div>
+  );
+}

src/components/Lookup/Lookup.jsx

@@ -157,7 +157,7 @@ class Lookup extends React.Component {
       sortedColumnKey,
       sortOrder
     } = this.state;
-    const { lookupHeader = 'items', value, columns } = this.props;
+    const { id, lookupHeader = 'items', value, columns } = this.props;
 
     const chips = value ? (
       <div className="pf-c-chip-group">
@@ -173,7 +173,12 @@ class Lookup extends React.Component {
       <I18n>
         {({ i18n }) => (
           <div className="pf-c-input-group awx-lookup">
-            <Button className="pf-c-input-group__text" aria-label="search" id="search" onClick={this.handleModalToggle}>
+            <Button
+              className="pf-c-input-group__text"
+              aria-label="search"
+              id={id}
+              onClick={this.handleModalToggle}
+            >
               <SearchIcon />
             </Button>
             <div className="pf-c-form-control">{chips}</div>
@@ -248,6 +253,7 @@ class Lookup extends React.Component {
 }
 
 Lookup.propTypes = {
+  id: PropTypes.string,
   getItems: PropTypes.func.isRequired,
   lookupHeader: PropTypes.string,
   name: PropTypes.string,
@@ -256,6 +262,7 @@ Lookup.propTypes = {
 };
 
 Lookup.defaultProps = {
+  id: 'lookup-search',
   lookupHeader: 'items',
   name: null,
 };