rework org edit form to use 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;