From 67d8c1a4b55eac732a46df0655eeff57c5342d4e Mon Sep 17 00:00:00 2001
From: Keith Grant <keithjgrant@redhat.com>
Date: Thu, 30 Jan 2020 10:55:50 -0800
Subject: [PATCH 01/13] delete unused/redundant component

---
 .../Inventory/shared/InventoryHostForm.jsx    | 74 -------------------
 .../shared/InventoryHostForm.test.jsx         | 58 ---------------
 2 files changed, 132 deletions(-)
 delete mode 100644 awx/ui_next/src/screens/Inventory/shared/InventoryHostForm.jsx
 delete mode 100644 awx/ui_next/src/screens/Inventory/shared/InventoryHostForm.test.jsx

diff --git a/awx/ui_next/src/screens/Inventory/shared/InventoryHostForm.jsx b/awx/ui_next/src/screens/Inventory/shared/InventoryHostForm.jsx
deleted file mode 100644
index f51e2abee9..0000000000
--- a/awx/ui_next/src/screens/Inventory/shared/InventoryHostForm.jsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import React from 'react';
-import { func, shape } from 'prop-types';
-import { Formik } from 'formik';
-import { withI18n } from '@lingui/react';
-import { t } from '@lingui/macro';
-import { Form } from '@patternfly/react-core';
-import FormRow from '@components/FormRow';
-import FormField from '@components/FormField';
-import FormActionGroup from '@components/FormActionGroup/FormActionGroup';
-import { VariablesField } from '@components/CodeMirrorInput';
-import { required } from '@util/validators';
-
-function InventoryHostForm({ handleSubmit, handleCancel, host, i18n }) {
-  return (
-    <Formik
-      initialValues={{
-        name: host.name,
-        description: host.description,
-        variables: host.variables,
-      }}
-      onSubmit={handleSubmit}
-    >
-      {formik => (
-        <Form autoComplete="off" onSubmit={formik.handleSubmit}>
-          <FormRow>
-            <FormField
-              id="host-name"
-              name="name"
-              type="text"
-              label={i18n._(t`Name`)}
-              validate={required(null, i18n)}
-              isRequired
-            />
-            <FormField
-              id="host-description"
-              name="description"
-              type="text"
-              label={i18n._(t`Description`)}
-            />
-          </FormRow>
-          <FormRow>
-            <VariablesField
-              id="host-variables"
-              name="variables"
-              label={i18n._(t`Variables`)}
-            />
-          </FormRow>
-          <FormActionGroup
-            onCancel={handleCancel}
-            onSubmit={() => {
-              formik.handleSubmit();
-            }}
-          />
-        </Form>
-      )}
-    </Formik>
-  );
-}
-
-InventoryHostForm.propTypes = {
-  handleSubmit: func.isRequired,
-  handleCancel: func.isRequired,
-  host: shape({}),
-};
-
-InventoryHostForm.defaultProps = {
-  host: {
-    name: '',
-    description: '',
-    variables: '---\n',
-  },
-};
-
-export default withI18n()(InventoryHostForm);
diff --git a/awx/ui_next/src/screens/Inventory/shared/InventoryHostForm.test.jsx b/awx/ui_next/src/screens/Inventory/shared/InventoryHostForm.test.jsx
deleted file mode 100644
index 72a1d3b08e..0000000000
--- a/awx/ui_next/src/screens/Inventory/shared/InventoryHostForm.test.jsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import React from 'react';
-import { act } from 'react-dom/test-utils';
-import { mountWithContexts } from '@testUtils/enzymeHelpers';
-import { sleep } from '@testUtils/testUtils';
-import InventoryHostForm from './InventoryHostForm';
-
-jest.mock('@api');
-
-describe('<InventoryHostform />', () => {
-  let wrapper;
-
-  const handleSubmit = jest.fn();
-  const handleCancel = jest.fn();
-
-  const mockHostData = {
-    name: 'foo',
-    description: 'bar',
-    inventory: 1,
-    variables: '---\nfoo: bar',
-  };
-
-  beforeEach(async () => {
-    await act(async () => {
-      wrapper = mountWithContexts(
-        <InventoryHostForm
-          handleCancel={handleCancel}
-          handleSubmit={handleSubmit}
-          host={mockHostData}
-        />
-      );
-    });
-  });
-
-  afterEach(() => {
-    wrapper.unmount();
-  });
-
-  test('should display form fields', () => {
-    expect(wrapper.find('FormGroup[label="Name"]').length).toBe(1);
-    expect(wrapper.find('FormGroup[label="Description"]').length).toBe(1);
-    expect(wrapper.find('VariablesField').length).toBe(1);
-  });
-
-  test('should call handleSubmit when Submit button is clicked', async () => {
-    expect(handleSubmit).not.toHaveBeenCalled();
-    await act(async () => {
-      wrapper.find('button[aria-label="Save"]').simulate('click');
-    });
-    expect(handleSubmit).toHaveBeenCalled();
-  });
-
-  test('should call handleCancel when Cancel button is clicked', async () => {
-    expect(handleCancel).not.toHaveBeenCalled();
-    wrapper.find('button[aria-label="Cancel"]').simulate('click');
-    await sleep(1);
-    expect(handleCancel).toHaveBeenCalled();
-  });
-});

From b26de8b922568322686e0e276b3b0a7ff1eb43ee Mon Sep 17 00:00:00 2001
From: Keith Grant <keithjgrant@redhat.com>
Date: Thu, 30 Jan 2020 10:56:17 -0800
Subject: [PATCH 02/13] pass Host form API errors back into Formik for display

---
 .../src/screens/Host/HostAdd/HostAdd.jsx      | 23 ++++++++++++++++---
 .../src/screens/Host/HostEdit/HostEdit.jsx    | 23 ++++++++++++++++---
 .../src/screens/Host/shared/HostForm.jsx      |  8 ++++++-
 3 files changed, 47 insertions(+), 7 deletions(-)

diff --git a/awx/ui_next/src/screens/Host/HostAdd/HostAdd.jsx b/awx/ui_next/src/screens/Host/HostAdd/HostAdd.jsx
index f9d78a00e4..43aa5ecec8 100644
--- a/awx/ui_next/src/screens/Host/HostAdd/HostAdd.jsx
+++ b/awx/ui_next/src/screens/Host/HostAdd/HostAdd.jsx
@@ -1,10 +1,14 @@
 import React, { useState } from 'react';
 import { useHistory, useRouteMatch } from 'react-router-dom';
+import { t } from '@lingui/macro';
+import { withI18n } from '@lingui/react';
 import { CardBody } from '@components/Card';
+import ErrorDetail from '@components/ErrorDetail';
+import AlertModal from '@components/AlertModal';
 import { HostsAPI } from '@api';
 import HostForm from '../shared';
 
-function HostAdd() {
+function HostAdd({ i18n }) {
   const [formError, setFormError] = useState(null);
   const history = useHistory();
   const hostsMatch = useRouteMatch('/hosts');
@@ -23,6 +27,9 @@ function HostAdd() {
       const { data: response } = await HostsAPI.create(values);
       history.push(`${url}/${response.id}/details`);
     } catch (error) {
+      if (error.response && error.response.data) {
+        throw error.response.data;
+      }
       setFormError(error);
     }
   };
@@ -34,9 +41,19 @@ function HostAdd() {
   return (
     <CardBody>
       <HostForm handleSubmit={handleSubmit} handleCancel={handleCancel} />
-      {formError ? <div>error</div> : ''}
+      {formError && (
+        <AlertModal
+          variant="danger"
+          title={i18n._(t`Error!`)}
+          isOpen={formError}
+          onClose={() => setFormError(null)}
+        >
+          {i18n._(t`An error occurred when saving Host`)}
+          <ErrorDetail error={formError} />
+        </AlertModal>
+      )}
     </CardBody>
   );
 }
 
-export default HostAdd;
+export default withI18n()(HostAdd);
diff --git a/awx/ui_next/src/screens/Host/HostEdit/HostEdit.jsx b/awx/ui_next/src/screens/Host/HostEdit/HostEdit.jsx
index 529ebbf425..e62fe7268c 100644
--- a/awx/ui_next/src/screens/Host/HostEdit/HostEdit.jsx
+++ b/awx/ui_next/src/screens/Host/HostEdit/HostEdit.jsx
@@ -1,11 +1,15 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { useHistory, useRouteMatch } from 'react-router-dom';
+import { t } from '@lingui/macro';
+import { withI18n } from '@lingui/react';
 import { CardBody } from '@components/Card';
+import ErrorDetail from '@components/ErrorDetail';
+import AlertModal from '@components/AlertModal';
 import { HostsAPI } from '@api';
 import HostForm from '../shared';
 
-function HostEdit({ host }) {
+function HostEdit({ host, i18n }) {
   const [formError, setFormError] = useState(null);
   const hostsMatch = useRouteMatch('/hosts/:id/edit');
   const inventoriesMatch = useRouteMatch(
@@ -31,6 +35,9 @@ function HostEdit({ host }) {
       await HostsAPI.update(host.id, values);
       history.push(detailsUrl);
     } catch (error) {
+      if (error.response && error.response.data) {
+        throw error.response.data;
+      }
       setFormError(error);
     }
   };
@@ -46,7 +53,17 @@ function HostEdit({ host }) {
         handleSubmit={handleSubmit}
         handleCancel={handleCancel}
       />
-      {formError ? <div>error</div> : null}
+      {formError && (
+        <AlertModal
+          variant="danger"
+          title={i18n._(t`Error!`)}
+          isOpen={formError}
+          onClose={() => setFormError(null)}
+        >
+          {i18n._(t`An error occurred when saving Host`)}
+          <ErrorDetail error={formError} />
+        </AlertModal>
+      )}
     </CardBody>
   );
 }
@@ -56,4 +73,4 @@ HostEdit.propTypes = {
 };
 
 export { HostEdit as _HostEdit };
-export default HostEdit;
+export default withI18n()(HostEdit);
diff --git a/awx/ui_next/src/screens/Host/shared/HostForm.jsx b/awx/ui_next/src/screens/Host/shared/HostForm.jsx
index 4c2a1c38b4..e8348dbfc1 100644
--- a/awx/ui_next/src/screens/Host/shared/HostForm.jsx
+++ b/awx/ui_next/src/screens/Host/shared/HostForm.jsx
@@ -30,7 +30,13 @@ function HostForm({ handleSubmit, handleCancel, host, i18n }) {
         inventory: host.inventory || '',
         variables: host.variables,
       }}
-      onSubmit={handleSubmit}
+      onSubmit={async (values, formik) => {
+        try {
+          await handleSubmit(values);
+        } catch (errors) {
+          formik.setErrors(errors);
+        }
+      }}
     >
       {formik => (
         <Form autoComplete="off" onSubmit={formik.handleSubmit}>

From b8226109a75a6420aea5209f0a4cf5472fadc247 Mon Sep 17 00:00:00 2001
From: Keith Grant <keithjgrant@redhat.com>
Date: Fri, 31 Jan 2020 12:28:44 -0800
Subject: [PATCH 03/13] use optional chaining

---
 awx/ui_next/src/screens/Host/HostAdd/HostAdd.jsx   | 2 +-
 awx/ui_next/src/screens/Host/HostEdit/HostEdit.jsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/awx/ui_next/src/screens/Host/HostAdd/HostAdd.jsx b/awx/ui_next/src/screens/Host/HostAdd/HostAdd.jsx
index 43aa5ecec8..b85f1130b2 100644
--- a/awx/ui_next/src/screens/Host/HostAdd/HostAdd.jsx
+++ b/awx/ui_next/src/screens/Host/HostAdd/HostAdd.jsx
@@ -27,7 +27,7 @@ function HostAdd({ i18n }) {
       const { data: response } = await HostsAPI.create(values);
       history.push(`${url}/${response.id}/details`);
     } catch (error) {
-      if (error.response && error.response.data) {
+      if (error.response?.data) {
         throw error.response.data;
       }
       setFormError(error);
diff --git a/awx/ui_next/src/screens/Host/HostEdit/HostEdit.jsx b/awx/ui_next/src/screens/Host/HostEdit/HostEdit.jsx
index e62fe7268c..401586d827 100644
--- a/awx/ui_next/src/screens/Host/HostEdit/HostEdit.jsx
+++ b/awx/ui_next/src/screens/Host/HostEdit/HostEdit.jsx
@@ -35,7 +35,7 @@ function HostEdit({ host, i18n }) {
       await HostsAPI.update(host.id, values);
       history.push(detailsUrl);
     } catch (error) {
-      if (error.response && error.response.data) {
+      if (error.response?.data) {
         throw error.response.data;
       }
       setFormError(error);

From 0f9c906a22094f310ac288198d279dec5ec075dc Mon Sep 17 00:00:00 2001
From: Keith Grant <keithjgrant@redhat.com>
Date: Fri, 31 Jan 2020 14:10:04 -0800
Subject: [PATCH 04/13] add more robust handling of errors thrown by api

---
 awx/ui_next/src/components/ErrorDetail/ErrorDetail.jsx | 9 +++++++--
 awx/ui_next/src/screens/Host/HostAdd/HostAdd.jsx       | 3 ++-
 awx/ui_next/src/screens/Host/HostEdit/HostEdit.jsx     | 3 ++-
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/awx/ui_next/src/components/ErrorDetail/ErrorDetail.jsx b/awx/ui_next/src/components/ErrorDetail/ErrorDetail.jsx
index 25d2c9d035..1ef3cabc99 100644
--- a/awx/ui_next/src/components/ErrorDetail/ErrorDetail.jsx
+++ b/awx/ui_next/src/components/ErrorDetail/ErrorDetail.jsx
@@ -53,8 +53,13 @@ class ErrorDetail extends Component {
     const { error } = this.props;
     const { response } = error;
 
-    const message =
-      typeof response.data === 'string' ? response.data : response.data.detail;
+    let message = '';
+    if (response.data) {
+      message =
+        typeof response.data === 'string'
+          ? response.data
+          : response.data?.detail;
+    }
 
     return (
       <Fragment>
diff --git a/awx/ui_next/src/screens/Host/HostAdd/HostAdd.jsx b/awx/ui_next/src/screens/Host/HostAdd/HostAdd.jsx
index b85f1130b2..b1b1d5e277 100644
--- a/awx/ui_next/src/screens/Host/HostAdd/HostAdd.jsx
+++ b/awx/ui_next/src/screens/Host/HostAdd/HostAdd.jsx
@@ -27,7 +27,8 @@ function HostAdd({ i18n }) {
       const { data: response } = await HostsAPI.create(values);
       history.push(`${url}/${response.id}/details`);
     } catch (error) {
-      if (error.response?.data) {
+      // check for field-specific errors from API
+      if (error.response?.data && typeof error.response.data === 'object') {
         throw error.response.data;
       }
       setFormError(error);
diff --git a/awx/ui_next/src/screens/Host/HostEdit/HostEdit.jsx b/awx/ui_next/src/screens/Host/HostEdit/HostEdit.jsx
index 401586d827..d3fad5fb49 100644
--- a/awx/ui_next/src/screens/Host/HostEdit/HostEdit.jsx
+++ b/awx/ui_next/src/screens/Host/HostEdit/HostEdit.jsx
@@ -35,7 +35,8 @@ function HostEdit({ host, i18n }) {
       await HostsAPI.update(host.id, values);
       history.push(detailsUrl);
     } catch (error) {
-      if (error.response?.data) {
+      // check for field-specific errors from API
+      if (error.response?.data && typeof error.response.data === 'object') {
         throw error.response.data;
       }
       setFormError(error);

From cab25656eb7e9181e728453725fefbc974aa0823 Mon Sep 17 00:00:00 2001
From: Keith Grant <keithjgrant@redhat.com>
Date: Mon, 3 Feb 2020 16:09:35 -0800
Subject: [PATCH 05/13] add JT form error feedback from API errors

---
 .../JobTemplateAdd/JobTemplateAdd.jsx         | 24 ++++++++++++++--
 .../JobTemplateEdit/JobTemplateEdit.jsx       | 28 +++++++++++++++----
 .../Template/shared/JobTemplateForm.jsx       |  9 +++++-
 3 files changed, 52 insertions(+), 9 deletions(-)

diff --git a/awx/ui_next/src/screens/Template/JobTemplateAdd/JobTemplateAdd.jsx b/awx/ui_next/src/screens/Template/JobTemplateAdd/JobTemplateAdd.jsx
index 7aecba1eb2..a4511f4e10 100644
--- a/awx/ui_next/src/screens/Template/JobTemplateAdd/JobTemplateAdd.jsx
+++ b/awx/ui_next/src/screens/Template/JobTemplateAdd/JobTemplateAdd.jsx
@@ -1,11 +1,15 @@
 import React, { useState } from 'react';
 import { useHistory } from 'react-router-dom';
+import { t } from '@lingui/macro';
+import { withI18n } from '@lingui/react';
 import { Card } from '@patternfly/react-core';
 import { CardBody } from '@components/Card';
+import ErrorDetail from '@components/ErrorDetail';
+import AlertModal from '@components/AlertModal';
 import JobTemplateForm from '../shared/JobTemplateForm';
 import { JobTemplatesAPI } from '@api';
 
-function JobTemplateAdd() {
+function JobTemplateAdd({ i18n }) {
   const [formSubmitError, setFormSubmitError] = useState(null);
   const history = useHistory();
 
@@ -31,6 +35,10 @@ function JobTemplateAdd() {
       ]);
       history.push(`/templates/${type}/${id}/details`);
     } catch (error) {
+      // check for field-specific errors from API
+      if (error.response?.data && typeof error.response.data === 'object') {
+        throw error.response.data;
+      }
       setFormSubmitError(error);
     }
   }
@@ -68,9 +76,19 @@ function JobTemplateAdd() {
           handleSubmit={handleSubmit}
         />
       </CardBody>
-      {formSubmitError ? <div>formSubmitError</div> : ''}
+      {formSubmitError && (
+        <AlertModal
+          variant="danger"
+          title={i18n._(t`Error!`)}
+          isOpen={formSubmitError}
+          onClose={() => setFormSubmitError(null)}
+        >
+          {i18n._(t`An error occurred when saving`)}
+          <ErrorDetail error={formSubmitError} />
+        </AlertModal>
+      )}
     </Card>
   );
 }
 
-export default JobTemplateAdd;
+export default withI18n()(JobTemplateAdd);
diff --git a/awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.jsx b/awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.jsx
index 73d90a8a26..07e1085936 100644
--- a/awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.jsx
+++ b/awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.jsx
@@ -1,9 +1,13 @@
 /* eslint react/no-unused-state: 0 */
 import React, { Component } from 'react';
 import { withRouter, Redirect } from 'react-router-dom';
+import { t } from '@lingui/macro';
+import { withI18n } from '@lingui/react';
 import { CardBody } from '@components/Card';
 import ContentError from '@components/ContentError';
 import ContentLoading from '@components/ContentLoading';
+import ErrorDetail from '@components/ErrorDetail';
+import AlertModal from '@components/AlertModal';
 import { JobTemplatesAPI, ProjectsAPI } from '@api';
 import { JobTemplate } from '@types';
 import { getAddedAndRemoved } from '@util/lists';
@@ -113,8 +117,12 @@ class JobTemplateEdit extends Component {
         this.submitCredentials(credentials),
       ]);
       history.push(this.detailsUrl);
-    } catch (formSubmitError) {
-      this.setState({ formSubmitError });
+    } catch (error) {
+      // check for field-specific errors from API
+      if (error.response?.data && typeof error.response.data === 'object') {
+        throw error.response.data;
+      }
+      this.setState({ formSubmitError: error });
     }
   }
 
@@ -173,7 +181,7 @@ class JobTemplateEdit extends Component {
   }
 
   render() {
-    const { template } = this.props;
+    const { template, i18n } = this.props;
     const {
       contentError,
       formSubmitError,
@@ -210,10 +218,20 @@ class JobTemplateEdit extends Component {
           handleSubmit={this.handleSubmit}
           relatedProjectPlaybooks={relatedProjectPlaybooks}
         />
-        {formSubmitError ? <div> error </div> : null}
+        {formSubmitError && (
+          <AlertModal
+            variant="danger"
+            title={i18n._(t`Error!`)}
+            isOpen={formSubmitError}
+            onClose={() => this.setState({ formSubmitError: null })}
+          >
+            {i18n._(t`An error occurred when saving`)}
+            <ErrorDetail error={formSubmitError} />
+          </AlertModal>
+        )}
       </CardBody>
     );
   }
 }
 
-export default withRouter(JobTemplateEdit);
+export default withI18n()(withRouter(JobTemplateEdit));
diff --git a/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx b/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx
index c2f1ca9c4c..19973cfdd5 100644
--- a/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx
+++ b/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx
@@ -163,6 +163,7 @@ class JobTemplateForm extends Component {
       setFieldValue,
       i18n,
       template,
+      formik,
     } = this.props;
 
     const jobTypeOptions = [
@@ -631,7 +632,13 @@ const FormikApp = withFormik({
       credentials: summary_fields.credentials || [],
     };
   },
-  handleSubmit: (values, { props }) => props.handleSubmit(values),
+  handleSubmit: async (values, { props, setErrors }) => {
+    try {
+      await props.handleSubmit(values);
+    } catch (errors) {
+      setErrors(errors);
+    }
+  },
 })(JobTemplateForm);
 
 export { JobTemplateForm as _JobTemplateForm };

From a934e146ee22e2da554ee96136ffa6a9b2d475bd Mon Sep 17 00:00:00 2001
From: Keith Grant <keithjgrant@redhat.com>
Date: Tue, 4 Feb 2020 09:58:22 -0800
Subject: [PATCH 06/13] add FormSubmitError component

---
 .../components/FormField/FormSubmitError.jsx  | 42 +++++++++++++++++++
 awx/ui_next/src/components/FormField/index.js |  1 +
 .../JobTemplateAdd/JobTemplateAdd.jsx         | 24 ++---------
 .../JobTemplateEdit/JobTemplateEdit.jsx       | 24 ++---------
 .../Template/shared/JobTemplateForm.jsx       | 14 +++++--
 5 files changed, 60 insertions(+), 45 deletions(-)
 create mode 100644 awx/ui_next/src/components/FormField/FormSubmitError.jsx

diff --git a/awx/ui_next/src/components/FormField/FormSubmitError.jsx b/awx/ui_next/src/components/FormField/FormSubmitError.jsx
new file mode 100644
index 0000000000..186f17bf7c
--- /dev/null
+++ b/awx/ui_next/src/components/FormField/FormSubmitError.jsx
@@ -0,0 +1,42 @@
+import React, { useState, useEffect } from 'react';
+import { useFormikContext } from 'formik';
+import { t } from '@lingui/macro';
+import { withI18n } from '@lingui/react';
+import ErrorDetail from '@components/ErrorDetail';
+import AlertModal from '@components/AlertModal';
+
+function FormSubmitError({ error, i18n }) {
+  const [formError, setFormError] = useState(null);
+  const { setErrors } = useFormikContext();
+
+  useEffect(() => {
+    if (!error) {
+      return;
+    }
+    // check for field-specific errors from API
+    if (error.response?.data && typeof error.response.data === 'object') {
+      setErrors(error.response.data);
+      setFormError(null);
+    } else {
+      setFormError(error);
+    }
+  }, [error, setErrors]);
+
+  if (!formError) {
+    return null;
+  }
+
+  return (
+    <AlertModal
+      variant="danger"
+      title={i18n._(t`Error!`)}
+      isOpen={formError}
+      onClose={() => setFormError(null)}
+    >
+      {i18n._(t`An error occurred when saving`)}
+      <ErrorDetail error={formError} />
+    </AlertModal>
+  );
+}
+
+export default withI18n()(FormSubmitError);
diff --git a/awx/ui_next/src/components/FormField/index.js b/awx/ui_next/src/components/FormField/index.js
index 2b23e65900..563f8519eb 100644
--- a/awx/ui_next/src/components/FormField/index.js
+++ b/awx/ui_next/src/components/FormField/index.js
@@ -2,3 +2,4 @@ export { default } from './FormField';
 export { default as CheckboxField } from './CheckboxField';
 export { default as FieldTooltip } from './FieldTooltip';
 export { default as PasswordField } from './PasswordField';
+export { default as FormSubmitError } from './FormSubmitError';
diff --git a/awx/ui_next/src/screens/Template/JobTemplateAdd/JobTemplateAdd.jsx b/awx/ui_next/src/screens/Template/JobTemplateAdd/JobTemplateAdd.jsx
index a4511f4e10..69a55550f1 100644
--- a/awx/ui_next/src/screens/Template/JobTemplateAdd/JobTemplateAdd.jsx
+++ b/awx/ui_next/src/screens/Template/JobTemplateAdd/JobTemplateAdd.jsx
@@ -1,15 +1,11 @@
 import React, { useState } from 'react';
 import { useHistory } from 'react-router-dom';
-import { t } from '@lingui/macro';
-import { withI18n } from '@lingui/react';
 import { Card } from '@patternfly/react-core';
 import { CardBody } from '@components/Card';
-import ErrorDetail from '@components/ErrorDetail';
-import AlertModal from '@components/AlertModal';
 import JobTemplateForm from '../shared/JobTemplateForm';
 import { JobTemplatesAPI } from '@api';
 
-function JobTemplateAdd({ i18n }) {
+function JobTemplateAdd() {
   const [formSubmitError, setFormSubmitError] = useState(null);
   const history = useHistory();
 
@@ -35,10 +31,6 @@ function JobTemplateAdd({ i18n }) {
       ]);
       history.push(`/templates/${type}/${id}/details`);
     } catch (error) {
-      // check for field-specific errors from API
-      if (error.response?.data && typeof error.response.data === 'object') {
-        throw error.response.data;
-      }
       setFormSubmitError(error);
     }
   }
@@ -74,21 +66,11 @@ function JobTemplateAdd({ i18n }) {
         <JobTemplateForm
           handleCancel={handleCancel}
           handleSubmit={handleSubmit}
+          submitError={formSubmitError}
         />
       </CardBody>
-      {formSubmitError && (
-        <AlertModal
-          variant="danger"
-          title={i18n._(t`Error!`)}
-          isOpen={formSubmitError}
-          onClose={() => setFormSubmitError(null)}
-        >
-          {i18n._(t`An error occurred when saving`)}
-          <ErrorDetail error={formSubmitError} />
-        </AlertModal>
-      )}
     </Card>
   );
 }
 
-export default withI18n()(JobTemplateAdd);
+export default JobTemplateAdd;
diff --git a/awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.jsx b/awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.jsx
index 07e1085936..1e8efd94d0 100644
--- a/awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.jsx
+++ b/awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.jsx
@@ -1,13 +1,9 @@
 /* eslint react/no-unused-state: 0 */
 import React, { Component } from 'react';
 import { withRouter, Redirect } from 'react-router-dom';
-import { t } from '@lingui/macro';
-import { withI18n } from '@lingui/react';
 import { CardBody } from '@components/Card';
 import ContentError from '@components/ContentError';
 import ContentLoading from '@components/ContentLoading';
-import ErrorDetail from '@components/ErrorDetail';
-import AlertModal from '@components/AlertModal';
 import { JobTemplatesAPI, ProjectsAPI } from '@api';
 import { JobTemplate } from '@types';
 import { getAddedAndRemoved } from '@util/lists';
@@ -118,10 +114,6 @@ class JobTemplateEdit extends Component {
       ]);
       history.push(this.detailsUrl);
     } catch (error) {
-      // check for field-specific errors from API
-      if (error.response?.data && typeof error.response.data === 'object') {
-        throw error.response.data;
-      }
       this.setState({ formSubmitError: error });
     }
   }
@@ -181,7 +173,7 @@ class JobTemplateEdit extends Component {
   }
 
   render() {
-    const { template, i18n } = this.props;
+    const { template } = this.props;
     const {
       contentError,
       formSubmitError,
@@ -217,21 +209,11 @@ class JobTemplateEdit extends Component {
           handleCancel={this.handleCancel}
           handleSubmit={this.handleSubmit}
           relatedProjectPlaybooks={relatedProjectPlaybooks}
+          submitError={formSubmitError}
         />
-        {formSubmitError && (
-          <AlertModal
-            variant="danger"
-            title={i18n._(t`Error!`)}
-            isOpen={formSubmitError}
-            onClose={() => this.setState({ formSubmitError: null })}
-          >
-            {i18n._(t`An error occurred when saving`)}
-            <ErrorDetail error={formSubmitError} />
-          </AlertModal>
-        )}
       </CardBody>
     );
   }
 }
 
-export default withI18n()(withRouter(JobTemplateEdit));
+export default withRouter(JobTemplateEdit);
diff --git a/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx b/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx
index 19973cfdd5..932e610849 100644
--- a/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx
+++ b/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx
@@ -16,7 +16,11 @@ import ContentLoading from '@components/ContentLoading';
 import AnsibleSelect from '@components/AnsibleSelect';
 import { TagMultiSelect } from '@components/MultiSelect';
 import FormActionGroup from '@components/FormActionGroup';
-import FormField, { CheckboxField, FieldTooltip } from '@components/FormField';
+import FormField, {
+  CheckboxField,
+  FieldTooltip,
+  FormSubmitError,
+} from '@components/FormField';
 import FormRow from '@components/FormRow';
 import CollapsibleSection from '@components/CollapsibleSection';
 import { required } from '@util/validators';
@@ -48,6 +52,7 @@ class JobTemplateForm extends Component {
     template: JobTemplate,
     handleCancel: PropTypes.func.isRequired,
     handleSubmit: PropTypes.func.isRequired,
+    submitError: PropTypes.shape({}),
   };
 
   static defaultProps = {
@@ -66,6 +71,7 @@ class JobTemplateForm extends Component {
       },
       isNew: true,
     },
+    submitError: null,
   };
 
   constructor(props) {
@@ -161,9 +167,9 @@ class JobTemplateForm extends Component {
       handleSubmit,
       handleBlur,
       setFieldValue,
-      i18n,
       template,
-      formik,
+      submitError,
+      i18n,
     } = this.props;
 
     const jobTypeOptions = [
@@ -202,6 +208,7 @@ class JobTemplateForm extends Component {
     if (contentError) {
       return <ContentError error={contentError} />;
     }
+
     const AdvancedFieldsWrapper = template.isNew ? CollapsibleSection : 'div';
     return (
       <Form autoComplete="off" onSubmit={handleSubmit}>
@@ -587,6 +594,7 @@ class JobTemplateForm extends Component {
           </div>
         </AdvancedFieldsWrapper>
         <FormActionGroup onCancel={handleCancel} onSubmit={handleSubmit} />
+        <FormSubmitError error={submitError} />
       </Form>
     );
   }

From b7f3852ef9019258a68fe73a3f89a32b3514125f Mon Sep 17 00:00:00 2001
From: Keith Grant <keithjgrant@redhat.com>
Date: Wed, 5 Feb 2020 10:45:32 -0800
Subject: [PATCH 07/13] move FormSubmitError to inline beside form buttons; add
 tests

---
 .../FormActionGroup/FormActionGroup.jsx       | 27 ++++++---
 .../components/FormField/FormSubmitError.jsx  | 22 ++------
 .../FormField/FormSubmitError.test.jsx        | 55 +++++++++++++++++++
 .../Template/shared/JobTemplateForm.jsx       |  7 ++-
 4 files changed, 85 insertions(+), 26 deletions(-)
 create mode 100644 awx/ui_next/src/components/FormField/FormSubmitError.test.jsx

diff --git a/awx/ui_next/src/components/FormActionGroup/FormActionGroup.jsx b/awx/ui_next/src/components/FormActionGroup/FormActionGroup.jsx
index 16c88d8341..7ad011719b 100644
--- a/awx/ui_next/src/components/FormActionGroup/FormActionGroup.jsx
+++ b/awx/ui_next/src/components/FormActionGroup/FormActionGroup.jsx
@@ -1,9 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import styled from 'styled-components';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { ActionGroup as PFActionGroup, Button } from '@patternfly/react-core';
-import styled from 'styled-components';
+
+const ErrorMessage = styled('div')`
+  color: var(--pf-global--danger-color--200);
+  font-weight: var(--pf-global--FontWeight--bold);
+`;
 
 const ActionGroup = styled(PFActionGroup)`
   display: flex;
@@ -11,19 +16,25 @@ const ActionGroup = styled(PFActionGroup)`
   --pf-c-form__group--m-action--MarginTop: 0;
 
   .pf-c-form__actions {
-    display: grid;
-    gap: 24px;
-    grid-template-columns: auto auto;
-    margin: 0;
-
     & > button {
       margin: 0;
     }
+
+    & > :not(:first-child) {
+      margin-left: 24px;
+    }
   }
 `;
 
-const FormActionGroup = ({ onSubmit, submitDisabled, onCancel, i18n }) => (
+const FormActionGroup = ({
+  onSubmit,
+  submitDisabled,
+  onCancel,
+  errorMessage,
+  i18n,
+}) => (
   <ActionGroup>
+    {errorMessage ? <ErrorMessage>{errorMessage}</ErrorMessage> : null}
     <Button
       aria-label={i18n._(t`Save`)}
       variant="primary"
@@ -48,10 +59,12 @@ FormActionGroup.propTypes = {
   onCancel: PropTypes.func.isRequired,
   onSubmit: PropTypes.func.isRequired,
   submitDisabled: PropTypes.bool,
+  errorMessage: PropTypes.node,
 };
 
 FormActionGroup.defaultProps = {
   submitDisabled: false,
+  errorMessage: null,
 };
 
 export default withI18n()(FormActionGroup);
diff --git a/awx/ui_next/src/components/FormField/FormSubmitError.jsx b/awx/ui_next/src/components/FormField/FormSubmitError.jsx
index 186f17bf7c..e9adcc0ca1 100644
--- a/awx/ui_next/src/components/FormField/FormSubmitError.jsx
+++ b/awx/ui_next/src/components/FormField/FormSubmitError.jsx
@@ -1,11 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useFormikContext } from 'formik';
-import { t } from '@lingui/macro';
-import { withI18n } from '@lingui/react';
-import ErrorDetail from '@components/ErrorDetail';
-import AlertModal from '@components/AlertModal';
 
-function FormSubmitError({ error, i18n }) {
+function FormSubmitError({ error }) {
   const [formError, setFormError] = useState(null);
   const { setErrors } = useFormikContext();
 
@@ -18,6 +14,8 @@ function FormSubmitError({ error, i18n }) {
       setErrors(error.response.data);
       setFormError(null);
     } else {
+      /* eslint-disable-next-line no-console */
+      console.error(error);
       setFormError(error);
     }
   }, [error, setErrors]);
@@ -26,17 +24,7 @@ function FormSubmitError({ error, i18n }) {
     return null;
   }
 
-  return (
-    <AlertModal
-      variant="danger"
-      title={i18n._(t`Error!`)}
-      isOpen={formError}
-      onClose={() => setFormError(null)}
-    >
-      {i18n._(t`An error occurred when saving`)}
-      <ErrorDetail error={formError} />
-    </AlertModal>
-  );
+  return <span>{formError.message}</span>;
 }
 
-export default withI18n()(FormSubmitError);
+export default FormSubmitError;
diff --git a/awx/ui_next/src/components/FormField/FormSubmitError.test.jsx b/awx/ui_next/src/components/FormField/FormSubmitError.test.jsx
new file mode 100644
index 0000000000..59a7b7d283
--- /dev/null
+++ b/awx/ui_next/src/components/FormField/FormSubmitError.test.jsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { mountWithContexts } from '@testUtils/enzymeHelpers';
+import { Formik } from 'formik';
+import FormSubmitError from './FormSubmitError';
+
+describe('<FormSubmitError>', () => {
+  test('should render null when no error present', () => {
+    const wrapper = mountWithContexts(
+      <Formik>{() => <FormSubmitError error={null} />}</Formik>
+    );
+    expect(wrapper.find('FormSubmitError').text()).toEqual('');
+  });
+
+  test('should pass field errors to Formik', () => {
+    const error = {
+      response: {
+        data: {
+          name: 'invalid',
+        },
+      },
+    };
+    const wrapper = mountWithContexts(
+      <Formik>
+        {({ errors }) => (
+          <div>
+            <p>{errors.name}</p>
+            <FormSubmitError error={error} />
+          </div>
+        )}
+      </Formik>
+    );
+    expect(wrapper.find('p').text()).toEqual('invalid');
+  });
+
+  test('should display error message if field errors not provided', async () => {
+    const realConsole = global.console;
+    global.console = {
+      error: jest.fn(),
+    };
+    const error = {
+      message: 'There was an error',
+    };
+    let wrapper;
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <Formik>{() => <FormSubmitError error={error} />}</Formik>
+      );
+    });
+    wrapper.update();
+    expect(wrapper.text()).toEqual('There was an error');
+    expect(global.console.error).toHaveBeenCalledWith(error);
+    global.console = realConsole;
+  });
+});
diff --git a/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx b/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx
index 932e610849..06d30cb1e3 100644
--- a/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx
+++ b/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx
@@ -593,8 +593,11 @@ class JobTemplateForm extends Component {
             </FormRow>
           </div>
         </AdvancedFieldsWrapper>
-        <FormActionGroup onCancel={handleCancel} onSubmit={handleSubmit} />
-        <FormSubmitError error={submitError} />
+        <FormActionGroup
+          onCancel={handleCancel}
+          onSubmit={handleSubmit}
+          errorMessage={<FormSubmitError error={submitError} />}
+        />
       </Form>
     );
   }

From 44e4263beefa4e01e6195189e41c0c0bbf4a77c2 Mon Sep 17 00:00:00 2001
From: Keith Grant <keithjgrant@redhat.com>
Date: Wed, 5 Feb 2020 11:26:05 -0800
Subject: [PATCH 08/13] add FormActionGroup error message test

---
 .../components/FormActionGroup/FormActionGroup.jsx  |  7 +------
 .../FormActionGroup/FormActionGroup.test.jsx        | 13 ++++++++++++-
 .../src/components/FormField/FormSubmitError.jsx    |  9 ++++++++-
 3 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/awx/ui_next/src/components/FormActionGroup/FormActionGroup.jsx b/awx/ui_next/src/components/FormActionGroup/FormActionGroup.jsx
index 7ad011719b..4da1191de4 100644
--- a/awx/ui_next/src/components/FormActionGroup/FormActionGroup.jsx
+++ b/awx/ui_next/src/components/FormActionGroup/FormActionGroup.jsx
@@ -5,11 +5,6 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { ActionGroup as PFActionGroup, Button } from '@patternfly/react-core';
 
-const ErrorMessage = styled('div')`
-  color: var(--pf-global--danger-color--200);
-  font-weight: var(--pf-global--FontWeight--bold);
-`;
-
 const ActionGroup = styled(PFActionGroup)`
   display: flex;
   justify-content: flex-end;
@@ -34,7 +29,7 @@ const FormActionGroup = ({
   i18n,
 }) => (
   <ActionGroup>
-    {errorMessage ? <ErrorMessage>{errorMessage}</ErrorMessage> : null}
+    {errorMessage}
     <Button
       aria-label={i18n._(t`Save`)}
       variant="primary"
diff --git a/awx/ui_next/src/components/FormActionGroup/FormActionGroup.test.jsx b/awx/ui_next/src/components/FormActionGroup/FormActionGroup.test.jsx
index 9290e1aa72..3a810aa884 100644
--- a/awx/ui_next/src/components/FormActionGroup/FormActionGroup.test.jsx
+++ b/awx/ui_next/src/components/FormActionGroup/FormActionGroup.test.jsx
@@ -4,10 +4,21 @@ import { mountWithContexts } from '@testUtils/enzymeHelpers';
 import FormActionGroup from './FormActionGroup';
 
 describe('FormActionGroup', () => {
-  test('renders the expected content', () => {
+  test('should render the expected content', () => {
     const wrapper = mountWithContexts(
       <FormActionGroup onSubmit={() => {}} onCancel={() => {}} />
     );
     expect(wrapper).toHaveLength(1);
   });
+
+  test('should display error message if given', () => {
+    const wrapper = mountWithContexts(
+      <FormActionGroup
+        onSubmit={() => {}}
+        onCancel={() => {}}
+        errorMessage={<div className="error">oh noes</div>}
+      />
+    );
+    expect(wrapper.find('.error').text()).toEqual('oh noes');
+  });
 });
diff --git a/awx/ui_next/src/components/FormField/FormSubmitError.jsx b/awx/ui_next/src/components/FormField/FormSubmitError.jsx
index e9adcc0ca1..f59b8a548a 100644
--- a/awx/ui_next/src/components/FormField/FormSubmitError.jsx
+++ b/awx/ui_next/src/components/FormField/FormSubmitError.jsx
@@ -1,5 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import { useFormikContext } from 'formik';
+import styled from 'styled-components';
+
+const ErrorMessage = styled('div')`
+  color: var(--pf-global--danger-color--200);
+  font-weight: var(--pf-global--FontWeight--bold);
+`;
+ErrorMessage.displayName = 'ErrorMessage';
 
 function FormSubmitError({ error }) {
   const [formError, setFormError] = useState(null);
@@ -24,7 +31,7 @@ function FormSubmitError({ error }) {
     return null;
   }
 
-  return <span>{formError.message}</span>;
+  return <ErrorMessage>{formError.message}</ErrorMessage>;
 }
 
 export default FormSubmitError;

From ac376f9c87aecd2b3ef7656879412f886858c131 Mon Sep 17 00:00:00 2001
From: Keith Grant <keithjgrant@redhat.com>
Date: Wed, 5 Feb 2020 16:29:17 -0800
Subject: [PATCH 09/13] handle __all__ error message from server in
 FormSubmitError

---
 .../components/FormField/FormSubmitError.jsx  |  9 ++++--
 .../src/screens/Host/HostAdd/HostAdd.jsx      | 29 +++++------------
 .../src/screens/Host/HostEdit/HostEdit.jsx    | 31 ++++++-------------
 .../src/screens/Host/shared/HostForm.jsx      | 15 ++++-----
 4 files changed, 29 insertions(+), 55 deletions(-)

diff --git a/awx/ui_next/src/components/FormField/FormSubmitError.jsx b/awx/ui_next/src/components/FormField/FormSubmitError.jsx
index f59b8a548a..3a85abfcd3 100644
--- a/awx/ui_next/src/components/FormField/FormSubmitError.jsx
+++ b/awx/ui_next/src/components/FormField/FormSubmitError.jsx
@@ -18,8 +18,13 @@ function FormSubmitError({ error }) {
     }
     // check for field-specific errors from API
     if (error.response?.data && typeof error.response.data === 'object') {
-      setErrors(error.response.data);
-      setFormError(null);
+      const errorMessages = error.response.data;
+      setErrors(errorMessages);
+      if (errorMessages.__all__) {
+        setFormError({ message: errorMessages.__all__ });
+      } else {
+        setFormError(null);
+      }
     } else {
       /* eslint-disable-next-line no-console */
       console.error(error);
diff --git a/awx/ui_next/src/screens/Host/HostAdd/HostAdd.jsx b/awx/ui_next/src/screens/Host/HostAdd/HostAdd.jsx
index b1b1d5e277..422cabb721 100644
--- a/awx/ui_next/src/screens/Host/HostAdd/HostAdd.jsx
+++ b/awx/ui_next/src/screens/Host/HostAdd/HostAdd.jsx
@@ -1,14 +1,10 @@
 import React, { useState } from 'react';
 import { useHistory, useRouteMatch } from 'react-router-dom';
-import { t } from '@lingui/macro';
-import { withI18n } from '@lingui/react';
 import { CardBody } from '@components/Card';
-import ErrorDetail from '@components/ErrorDetail';
-import AlertModal from '@components/AlertModal';
 import { HostsAPI } from '@api';
 import HostForm from '../shared';
 
-function HostAdd({ i18n }) {
+function HostAdd() {
   const [formError, setFormError] = useState(null);
   const history = useHistory();
   const hostsMatch = useRouteMatch('/hosts');
@@ -27,10 +23,6 @@ function HostAdd({ i18n }) {
       const { data: response } = await HostsAPI.create(values);
       history.push(`${url}/${response.id}/details`);
     } catch (error) {
-      // check for field-specific errors from API
-      if (error.response?.data && typeof error.response.data === 'object') {
-        throw error.response.data;
-      }
       setFormError(error);
     }
   };
@@ -41,20 +33,13 @@ function HostAdd({ i18n }) {
 
   return (
     <CardBody>
-      <HostForm handleSubmit={handleSubmit} handleCancel={handleCancel} />
-      {formError && (
-        <AlertModal
-          variant="danger"
-          title={i18n._(t`Error!`)}
-          isOpen={formError}
-          onClose={() => setFormError(null)}
-        >
-          {i18n._(t`An error occurred when saving Host`)}
-          <ErrorDetail error={formError} />
-        </AlertModal>
-      )}
+      <HostForm
+        handleSubmit={handleSubmit}
+        handleCancel={handleCancel}
+        submitError={formError}
+      />
     </CardBody>
   );
 }
 
-export default withI18n()(HostAdd);
+export default HostAdd;
diff --git a/awx/ui_next/src/screens/Host/HostEdit/HostEdit.jsx b/awx/ui_next/src/screens/Host/HostEdit/HostEdit.jsx
index d3fad5fb49..6b6e78313d 100644
--- a/awx/ui_next/src/screens/Host/HostEdit/HostEdit.jsx
+++ b/awx/ui_next/src/screens/Host/HostEdit/HostEdit.jsx
@@ -1,15 +1,11 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { useHistory, useRouteMatch } from 'react-router-dom';
-import { t } from '@lingui/macro';
-import { withI18n } from '@lingui/react';
 import { CardBody } from '@components/Card';
-import ErrorDetail from '@components/ErrorDetail';
-import AlertModal from '@components/AlertModal';
 import { HostsAPI } from '@api';
 import HostForm from '../shared';
 
-function HostEdit({ host, i18n }) {
+function HostEdit({ host }) {
   const [formError, setFormError] = useState(null);
   const hostsMatch = useRouteMatch('/hosts/:id/edit');
   const inventoriesMatch = useRouteMatch(
@@ -35,13 +31,15 @@ function HostEdit({ host, i18n }) {
       await HostsAPI.update(host.id, values);
       history.push(detailsUrl);
     } catch (error) {
-      // check for field-specific errors from API
-      if (error.response?.data && typeof error.response.data === 'object') {
-        throw error.response.data;
-      }
+      console.log('caught:', error);
+      // // check for field-specific errors from API
+      // if (error.response?.data && typeof error.response.data === 'object') {
+      //   throw error.response.data;
+      // }
       setFormError(error);
     }
   };
+  console.log('render:', formError);
 
   const handleCancel = () => {
     history.push(detailsUrl);
@@ -53,18 +51,8 @@ function HostEdit({ host, i18n }) {
         host={host}
         handleSubmit={handleSubmit}
         handleCancel={handleCancel}
+        submitError={formError}
       />
-      {formError && (
-        <AlertModal
-          variant="danger"
-          title={i18n._(t`Error!`)}
-          isOpen={formError}
-          onClose={() => setFormError(null)}
-        >
-          {i18n._(t`An error occurred when saving Host`)}
-          <ErrorDetail error={formError} />
-        </AlertModal>
-      )}
     </CardBody>
   );
 }
@@ -73,5 +61,4 @@ HostEdit.propTypes = {
   host: PropTypes.shape().isRequired,
 };
 
-export { HostEdit as _HostEdit };
-export default withI18n()(HostEdit);
+export default HostEdit;
diff --git a/awx/ui_next/src/screens/Host/shared/HostForm.jsx b/awx/ui_next/src/screens/Host/shared/HostForm.jsx
index e8348dbfc1..7375040b5e 100644
--- a/awx/ui_next/src/screens/Host/shared/HostForm.jsx
+++ b/awx/ui_next/src/screens/Host/shared/HostForm.jsx
@@ -9,13 +9,13 @@ import { t } from '@lingui/macro';
 import { Form } from '@patternfly/react-core';
 
 import FormRow from '@components/FormRow';
-import FormField from '@components/FormField';
+import FormField, { FormSubmitError } from '@components/FormField';
 import FormActionGroup from '@components/FormActionGroup/FormActionGroup';
 import { VariablesField } from '@components/CodeMirrorInput';
 import { required } from '@util/validators';
 import { InventoryLookup } from '@components/Lookup';
 
-function HostForm({ handleSubmit, handleCancel, host, i18n }) {
+function HostForm({ handleSubmit, handleCancel, host, submitError, i18n }) {
   const [inventory, setInventory] = useState(
     host ? host.summary_fields.inventory : ''
   );
@@ -30,13 +30,7 @@ function HostForm({ handleSubmit, handleCancel, host, i18n }) {
         inventory: host.inventory || '',
         variables: host.variables,
       }}
-      onSubmit={async (values, formik) => {
-        try {
-          await handleSubmit(values);
-        } catch (errors) {
-          formik.setErrors(errors);
-        }
-      }}
+      onSubmit={handleSubmit}
     >
       {formik => (
         <Form autoComplete="off" onSubmit={formik.handleSubmit}>
@@ -94,6 +88,7 @@ function HostForm({ handleSubmit, handleCancel, host, i18n }) {
           <FormActionGroup
             onCancel={handleCancel}
             onSubmit={formik.handleSubmit}
+            errorMessage={<FormSubmitError error={submitError} />}
           />
         </Form>
       )}
@@ -105,6 +100,7 @@ HostForm.propTypes = {
   handleSubmit: func.isRequired,
   handleCancel: func.isRequired,
   host: shape({}),
+  submitError: shape({}),
 };
 
 HostForm.defaultProps = {
@@ -117,6 +113,7 @@ HostForm.defaultProps = {
       inventory: null,
     },
   },
+  submitError: null,
 };
 
 export { HostForm as _HostForm };

From 94f21a3464c62f807a1641a16dd11ec0fee060ae Mon Sep 17 00:00:00 2001
From: Keith Grant <keithjgrant@redhat.com>
Date: Thu, 6 Feb 2020 14:06:30 -0800
Subject: [PATCH 10/13] add submit error support to Project form

---
 .../src/components/FormField/FormSubmitError.jsx     | 12 ++++++------
 .../src/screens/Project/ProjectAdd/ProjectAdd.jsx    |  6 +-----
 .../src/screens/Project/ProjectEdit/ProjectEdit.jsx  |  6 +-----
 .../src/screens/Project/shared/ProjectForm.jsx       | 10 ++++++++--
 4 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/awx/ui_next/src/components/FormField/FormSubmitError.jsx b/awx/ui_next/src/components/FormField/FormSubmitError.jsx
index 3a85abfcd3..adc59806fb 100644
--- a/awx/ui_next/src/components/FormField/FormSubmitError.jsx
+++ b/awx/ui_next/src/components/FormField/FormSubmitError.jsx
@@ -9,7 +9,7 @@ const ErrorMessage = styled('div')`
 ErrorMessage.displayName = 'ErrorMessage';
 
 function FormSubmitError({ error }) {
-  const [formError, setFormError] = useState(null);
+  const [errorMessage, setErrorMessage] = useState(null);
   const { setErrors } = useFormikContext();
 
   useEffect(() => {
@@ -21,22 +21,22 @@ function FormSubmitError({ error }) {
       const errorMessages = error.response.data;
       setErrors(errorMessages);
       if (errorMessages.__all__) {
-        setFormError({ message: errorMessages.__all__ });
+        setErrorMessage(errorMessages.__all__);
       } else {
-        setFormError(null);
+        setErrorMessage(null);
       }
     } else {
       /* eslint-disable-next-line no-console */
       console.error(error);
-      setFormError(error);
+      setErrorMessage(error.message);
     }
   }, [error, setErrors]);
 
-  if (!formError) {
+  if (!errorMessage) {
     return null;
   }
 
-  return <ErrorMessage>{formError.message}</ErrorMessage>;
+  return <ErrorMessage>{errorMessage}</ErrorMessage>;
 }
 
 export default FormSubmitError;
diff --git a/awx/ui_next/src/screens/Project/ProjectAdd/ProjectAdd.jsx b/awx/ui_next/src/screens/Project/ProjectAdd/ProjectAdd.jsx
index 919b8b2c71..bb646f53b0 100644
--- a/awx/ui_next/src/screens/Project/ProjectAdd/ProjectAdd.jsx
+++ b/awx/ui_next/src/screens/Project/ProjectAdd/ProjectAdd.jsx
@@ -41,13 +41,9 @@ function ProjectAdd() {
           <ProjectForm
             handleCancel={handleCancel}
             handleSubmit={handleSubmit}
+            submitError={formSubmitError}
           />
         </CardBody>
-        {formSubmitError ? (
-          <div className="formSubmitError">formSubmitError</div>
-        ) : (
-          ''
-        )}
       </Card>
     </PageSection>
   );
diff --git a/awx/ui_next/src/screens/Project/ProjectEdit/ProjectEdit.jsx b/awx/ui_next/src/screens/Project/ProjectEdit/ProjectEdit.jsx
index 6f44ec8ab0..64ebf65c05 100644
--- a/awx/ui_next/src/screens/Project/ProjectEdit/ProjectEdit.jsx
+++ b/awx/ui_next/src/screens/Project/ProjectEdit/ProjectEdit.jsx
@@ -42,13 +42,9 @@ function ProjectEdit({ project }) {
           project={project}
           handleCancel={handleCancel}
           handleSubmit={handleSubmit}
+          submitError={formSubmitError}
         />
       </CardBody>
-      {formSubmitError ? (
-        <div className="formSubmitError">formSubmitError</div>
-      ) : (
-        ''
-      )}
     </Card>
   );
 }
diff --git a/awx/ui_next/src/screens/Project/shared/ProjectForm.jsx b/awx/ui_next/src/screens/Project/shared/ProjectForm.jsx
index ae72bd0896..cf92e518a9 100644
--- a/awx/ui_next/src/screens/Project/shared/ProjectForm.jsx
+++ b/awx/ui_next/src/screens/Project/shared/ProjectForm.jsx
@@ -10,7 +10,10 @@ import AnsibleSelect from '@components/AnsibleSelect';
 import ContentError from '@components/ContentError';
 import ContentLoading from '@components/ContentLoading';
 import FormActionGroup from '@components/FormActionGroup/FormActionGroup';
-import FormField, { FieldTooltip } from '@components/FormField';
+import FormField, {
+  FieldTooltip,
+  FormSubmitError,
+} from '@components/FormField';
 import FormRow from '@components/FormRow';
 import OrganizationLookup from '@components/Lookup/OrganizationLookup';
 import { CredentialTypesAPI, ProjectsAPI } from '@api';
@@ -70,7 +73,7 @@ const fetchCredentials = async credential => {
   };
 };
 
-function ProjectForm({ project, ...props }) {
+function ProjectForm({ project, submitError, ...props }) {
   const { i18n, handleCancel, handleSubmit } = props;
   const { summary_fields = {} } = project;
   const [contentError, setContentError] = useState(null);
@@ -388,6 +391,7 @@ function ProjectForm({ project, ...props }) {
               <FormActionGroup
                 onCancel={handleCancel}
                 onSubmit={formik.handleSubmit}
+                errorMessage={<FormSubmitError error={submitError} />}
               />
             </Form>
           )}
@@ -401,10 +405,12 @@ ProjectForm.propTypes = {
   handleCancel: PropTypes.func.isRequired,
   handleSubmit: PropTypes.func.isRequired,
   project: PropTypes.shape({}),
+  submitError: PropTypes.shape({}),
 };
 
 ProjectForm.defaultProps = {
   project: {},
+  submitError: null,
 };
 
 export default withI18n()(ProjectForm);

From 352c8c3cb1827d245cf620828da19aeba56c4471 Mon Sep 17 00:00:00 2001
From: Keith Grant <keithjgrant@redhat.com>
Date: Fri, 7 Feb 2020 09:57:46 -0800
Subject: [PATCH 11/13] add FormSubmitError to existing forms

---
 .../components/FormActionGroup/FormActionGroup.jsx | 11 +----------
 .../src/components/FormField/FormSubmitError.jsx   | 10 ++--------
 awx/ui_next/src/screens/Host/HostEdit/HostEdit.jsx |  6 ------
 awx/ui_next/src/screens/Host/shared/HostForm.jsx   |  2 +-
 .../Inventory/InventoryAdd/InventoryAdd.jsx        | 12 +-----------
 .../Inventory/InventoryEdit/InventoryEdit.jsx      |  5 +----
 .../src/screens/Inventory/shared/InventoryForm.jsx |  6 +++++-
 .../OrganizationAdd/OrganizationAdd.jsx            |  2 +-
 .../OrganizationEdit/OrganizationEdit.jsx          |  2 +-
 .../Organization/shared/OrganizationForm.jsx       | 14 ++++++++++++--
 .../src/screens/Project/shared/ProjectForm.jsx     |  2 +-
 awx/ui_next/src/screens/Team/TeamAdd/TeamAdd.jsx   |  2 +-
 awx/ui_next/src/screens/Team/TeamEdit/TeamEdit.jsx |  2 +-
 awx/ui_next/src/screens/Team/shared/TeamForm.jsx   |  7 +++++--
 .../screens/Template/shared/JobTemplateForm.jsx    |  7 ++-----
 awx/ui_next/src/screens/User/UserAdd/UserAdd.jsx   | 11 +++++------
 awx/ui_next/src/screens/User/UserEdit/UserEdit.jsx |  2 +-
 awx/ui_next/src/screens/User/shared/UserForm.jsx   |  9 ++++++---
 18 files changed, 47 insertions(+), 65 deletions(-)

diff --git a/awx/ui_next/src/components/FormActionGroup/FormActionGroup.jsx b/awx/ui_next/src/components/FormActionGroup/FormActionGroup.jsx
index 4da1191de4..bae4fe0772 100644
--- a/awx/ui_next/src/components/FormActionGroup/FormActionGroup.jsx
+++ b/awx/ui_next/src/components/FormActionGroup/FormActionGroup.jsx
@@ -21,15 +21,8 @@ const ActionGroup = styled(PFActionGroup)`
   }
 `;
 
-const FormActionGroup = ({
-  onSubmit,
-  submitDisabled,
-  onCancel,
-  errorMessage,
-  i18n,
-}) => (
+const FormActionGroup = ({ onSubmit, submitDisabled, onCancel, i18n }) => (
   <ActionGroup>
-    {errorMessage}
     <Button
       aria-label={i18n._(t`Save`)}
       variant="primary"
@@ -54,12 +47,10 @@ FormActionGroup.propTypes = {
   onCancel: PropTypes.func.isRequired,
   onSubmit: PropTypes.func.isRequired,
   submitDisabled: PropTypes.bool,
-  errorMessage: PropTypes.node,
 };
 
 FormActionGroup.defaultProps = {
   submitDisabled: false,
-  errorMessage: null,
 };
 
 export default withI18n()(FormActionGroup);
diff --git a/awx/ui_next/src/components/FormField/FormSubmitError.jsx b/awx/ui_next/src/components/FormField/FormSubmitError.jsx
index adc59806fb..5e25a7ae50 100644
--- a/awx/ui_next/src/components/FormField/FormSubmitError.jsx
+++ b/awx/ui_next/src/components/FormField/FormSubmitError.jsx
@@ -1,12 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { useFormikContext } from 'formik';
-import styled from 'styled-components';
-
-const ErrorMessage = styled('div')`
-  color: var(--pf-global--danger-color--200);
-  font-weight: var(--pf-global--FontWeight--bold);
-`;
-ErrorMessage.displayName = 'ErrorMessage';
+import { Alert } from '@patternfly/react-core';
 
 function FormSubmitError({ error }) {
   const [errorMessage, setErrorMessage] = useState(null);
@@ -36,7 +30,7 @@ function FormSubmitError({ error }) {
     return null;
   }
 
-  return <ErrorMessage>{errorMessage}</ErrorMessage>;
+  return <Alert variant="danger" isInline title={errorMessage} />;
 }
 
 export default FormSubmitError;
diff --git a/awx/ui_next/src/screens/Host/HostEdit/HostEdit.jsx b/awx/ui_next/src/screens/Host/HostEdit/HostEdit.jsx
index 6b6e78313d..d2ef0252e9 100644
--- a/awx/ui_next/src/screens/Host/HostEdit/HostEdit.jsx
+++ b/awx/ui_next/src/screens/Host/HostEdit/HostEdit.jsx
@@ -31,15 +31,9 @@ function HostEdit({ host }) {
       await HostsAPI.update(host.id, values);
       history.push(detailsUrl);
     } catch (error) {
-      console.log('caught:', error);
-      // // check for field-specific errors from API
-      // if (error.response?.data && typeof error.response.data === 'object') {
-      //   throw error.response.data;
-      // }
       setFormError(error);
     }
   };
-  console.log('render:', formError);
 
   const handleCancel = () => {
     history.push(detailsUrl);
diff --git a/awx/ui_next/src/screens/Host/shared/HostForm.jsx b/awx/ui_next/src/screens/Host/shared/HostForm.jsx
index 7375040b5e..0e1919be58 100644
--- a/awx/ui_next/src/screens/Host/shared/HostForm.jsx
+++ b/awx/ui_next/src/screens/Host/shared/HostForm.jsx
@@ -85,10 +85,10 @@ function HostForm({ handleSubmit, handleCancel, host, submitError, i18n }) {
               label={i18n._(t`Variables`)}
             />
           </FormRow>
+          <FormSubmitError error={submitError} />
           <FormActionGroup
             onCancel={handleCancel}
             onSubmit={formik.handleSubmit}
-            errorMessage={<FormSubmitError error={submitError} />}
           />
         </Form>
       )}
diff --git a/awx/ui_next/src/screens/Inventory/InventoryAdd/InventoryAdd.jsx b/awx/ui_next/src/screens/Inventory/InventoryAdd/InventoryAdd.jsx
index e01a336390..521eef2191 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryAdd/InventoryAdd.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryAdd/InventoryAdd.jsx
@@ -69,17 +69,6 @@ function InventoryAdd() {
     }
   };
 
-  if (error) {
-    return (
-      <PageSection>
-        <Card>
-          <CardBody>
-            <ContentError error={error} />
-          </CardBody>
-        </Card>
-      </PageSection>
-    );
-  }
   if (isLoading) {
     return <ContentLoading />;
   }
@@ -91,6 +80,7 @@ function InventoryAdd() {
             onCancel={handleCancel}
             onSubmit={handleSubmit}
             credentialTypeId={credentialTypeId}
+            submitError={error}
           />
         </CardBody>
       </Card>
diff --git a/awx/ui_next/src/screens/Inventory/InventoryEdit/InventoryEdit.jsx b/awx/ui_next/src/screens/Inventory/InventoryEdit/InventoryEdit.jsx
index f0b82ae943..a86b1ddad5 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryEdit/InventoryEdit.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryEdit/InventoryEdit.jsx
@@ -105,10 +105,6 @@ function InventoryEdit({ inventory }) {
     return <ContentLoading />;
   }
 
-  if (error) {
-    return <ContentError />;
-  }
-
   return (
     <CardBody>
       <InventoryForm
@@ -117,6 +113,7 @@ function InventoryEdit({ inventory }) {
         inventory={inventory}
         instanceGroups={associatedInstanceGroups}
         credentialTypeId={credentialTypeId}
+        submitError={error}
       />
     </CardBody>
   );
diff --git a/awx/ui_next/src/screens/Inventory/shared/InventoryForm.jsx b/awx/ui_next/src/screens/Inventory/shared/InventoryForm.jsx
index 79dd3023bf..6a27f1bd70 100644
--- a/awx/ui_next/src/screens/Inventory/shared/InventoryForm.jsx
+++ b/awx/ui_next/src/screens/Inventory/shared/InventoryForm.jsx
@@ -6,7 +6,7 @@ import { func, number, shape } from 'prop-types';
 
 import { VariablesField } from '@components/CodeMirrorInput';
 import { Form } from '@patternfly/react-core';
-import FormField from '@components/FormField';
+import FormField, { FormSubmitError } from '@components/FormField';
 import FormActionGroup from '@components/FormActionGroup/FormActionGroup';
 import FormRow from '@components/FormRow';
 import { required } from '@util/validators';
@@ -21,6 +21,7 @@ function InventoryForm({
   onSubmit,
   instanceGroups,
   credentialTypeId,
+  submitError,
 }) {
   const initialValues = {
     name: inventory.name || '',
@@ -129,6 +130,7 @@ function InventoryForm({
             />
           </FormRow>
           <FormRow>
+            <FormSubmitError error={submitError} />
             <FormActionGroup
               onCancel={onCancel}
               onSubmit={formik.handleSubmit}
@@ -146,11 +148,13 @@ InventoryForm.proptype = {
   instanceGroups: shape(),
   inventory: shape(),
   credentialTypeId: number.isRequired,
+  submitError: shape(),
 };
 
 InventoryForm.defaultProps = {
   inventory: {},
   instanceGroups: [],
+  submitError: null,
 };
 
 export default withI18n()(InventoryForm);
diff --git a/awx/ui_next/src/screens/Organization/OrganizationAdd/OrganizationAdd.jsx b/awx/ui_next/src/screens/Organization/OrganizationAdd/OrganizationAdd.jsx
index 3d501b2d71..90ffdfccd2 100644
--- a/awx/ui_next/src/screens/Organization/OrganizationAdd/OrganizationAdd.jsx
+++ b/awx/ui_next/src/screens/Organization/OrganizationAdd/OrganizationAdd.jsx
@@ -40,10 +40,10 @@ function OrganizationAdd() {
                 onSubmit={handleSubmit}
                 onCancel={handleCancel}
                 me={me || {}}
+                submitError={formError}
               />
             )}
           </Config>
-          {formError ? <div>error</div> : ''}
         </CardBody>
       </Card>
     </PageSection>
diff --git a/awx/ui_next/src/screens/Organization/OrganizationEdit/OrganizationEdit.jsx b/awx/ui_next/src/screens/Organization/OrganizationEdit/OrganizationEdit.jsx
index d2aec4b182..04c13c8848 100644
--- a/awx/ui_next/src/screens/Organization/OrganizationEdit/OrganizationEdit.jsx
+++ b/awx/ui_next/src/screens/Organization/OrganizationEdit/OrganizationEdit.jsx
@@ -48,10 +48,10 @@ function OrganizationEdit({ organization }) {
             onSubmit={handleSubmit}
             onCancel={handleCancel}
             me={me || {}}
+            submitError={formError}
           />
         )}
       </Config>
-      {formError ? <div>error</div> : null}
     </CardBody>
   );
 }
diff --git a/awx/ui_next/src/screens/Organization/shared/OrganizationForm.jsx b/awx/ui_next/src/screens/Organization/shared/OrganizationForm.jsx
index 2d1cc69347..abbf4eedc1 100644
--- a/awx/ui_next/src/screens/Organization/shared/OrganizationForm.jsx
+++ b/awx/ui_next/src/screens/Organization/shared/OrganizationForm.jsx
@@ -13,13 +13,20 @@ import AnsibleSelect from '@components/AnsibleSelect';
 import ContentError from '@components/ContentError';
 import ContentLoading from '@components/ContentLoading';
 import FormRow from '@components/FormRow';
-import FormField from '@components/FormField';
+import FormField, { FormSubmitError } from '@components/FormField';
 import FormActionGroup from '@components/FormActionGroup/FormActionGroup';
 import { InstanceGroupsLookup } from '@components/Lookup/';
 import { getAddedAndRemoved } from '@util/lists';
 import { required, minMaxValue } from '@util/validators';
 
-function OrganizationForm({ organization, i18n, me, onCancel, onSubmit }) {
+function OrganizationForm({
+  organization,
+  i18n,
+  me,
+  onCancel,
+  onSubmit,
+  submitError,
+}) {
   const defaultVenv = {
     label: i18n._(t`Use Default Ansible Environment`),
     value: '/venv/ansible/',
@@ -161,6 +168,7 @@ function OrganizationForm({ organization, i18n, me, onCancel, onSubmit }) {
               t`Select the Instance Groups for this Organization to run on.`
             )}
           />
+          <FormSubmitError error={submitError} />
           <FormActionGroup
             onCancel={handleCancel}
             onSubmit={formik.handleSubmit}
@@ -179,6 +187,7 @@ OrganizationForm.propTypes = {
   organization: PropTypes.shape(),
   onSubmit: PropTypes.func.isRequired,
   onCancel: PropTypes.func.isRequired,
+  submitError: PropTypes.shape(),
 };
 
 OrganizationForm.defaultProps = {
@@ -188,6 +197,7 @@ OrganizationForm.defaultProps = {
     max_hosts: '0',
     custom_virtualenv: '',
   },
+  submitError: null,
 };
 
 OrganizationForm.contextTypes = {
diff --git a/awx/ui_next/src/screens/Project/shared/ProjectForm.jsx b/awx/ui_next/src/screens/Project/shared/ProjectForm.jsx
index cf92e518a9..768624dc7c 100644
--- a/awx/ui_next/src/screens/Project/shared/ProjectForm.jsx
+++ b/awx/ui_next/src/screens/Project/shared/ProjectForm.jsx
@@ -388,10 +388,10 @@ function ProjectForm({ project, submitError, ...props }) {
                   }
                 </Config>
               </FormRow>
+              <FormSubmitError error={submitError} />
               <FormActionGroup
                 onCancel={handleCancel}
                 onSubmit={formik.handleSubmit}
-                errorMessage={<FormSubmitError error={submitError} />}
               />
             </Form>
           )}
diff --git a/awx/ui_next/src/screens/Team/TeamAdd/TeamAdd.jsx b/awx/ui_next/src/screens/Team/TeamAdd/TeamAdd.jsx
index 9670ed8315..6ef57538a0 100644
--- a/awx/ui_next/src/screens/Team/TeamAdd/TeamAdd.jsx
+++ b/awx/ui_next/src/screens/Team/TeamAdd/TeamAdd.jsx
@@ -43,10 +43,10 @@ class TeamAdd extends React.Component {
                   handleSubmit={this.handleSubmit}
                   handleCancel={this.handleCancel}
                   me={me || {}}
+                  submitError={error}
                 />
               )}
             </Config>
-            {error ? <div>error</div> : ''}
           </CardBody>
         </Card>
       </PageSection>
diff --git a/awx/ui_next/src/screens/Team/TeamEdit/TeamEdit.jsx b/awx/ui_next/src/screens/Team/TeamEdit/TeamEdit.jsx
index e11a014018..19a6ffe03a 100644
--- a/awx/ui_next/src/screens/Team/TeamEdit/TeamEdit.jsx
+++ b/awx/ui_next/src/screens/Team/TeamEdit/TeamEdit.jsx
@@ -34,10 +34,10 @@ function TeamEdit({ team }) {
             handleSubmit={handleSubmit}
             handleCancel={handleCancel}
             me={me || {}}
+            submitError={error}
           />
         )}
       </Config>
-      {error ? <div>error</div> : null}
     </CardBody>
   );
 }
diff --git a/awx/ui_next/src/screens/Team/shared/TeamForm.jsx b/awx/ui_next/src/screens/Team/shared/TeamForm.jsx
index e3414950f2..040d6d4dca 100644
--- a/awx/ui_next/src/screens/Team/shared/TeamForm.jsx
+++ b/awx/ui_next/src/screens/Team/shared/TeamForm.jsx
@@ -5,13 +5,13 @@ import { t } from '@lingui/macro';
 import { Formik, Field } from 'formik';
 import { Form } from '@patternfly/react-core';
 import FormActionGroup from '@components/FormActionGroup/FormActionGroup';
-import FormField from '@components/FormField';
+import FormField, { FormSubmitError } from '@components/FormField';
 import FormRow from '@components/FormRow';
 import OrganizationLookup from '@components/Lookup/OrganizationLookup';
 import { required } from '@util/validators';
 
 function TeamForm(props) {
-  const { team, handleCancel, handleSubmit, i18n } = props;
+  const { team, handleCancel, handleSubmit, submitError, i18n } = props;
   const [organization, setOrganization] = useState(
     team.summary_fields ? team.summary_fields.organization : null
   );
@@ -70,6 +70,7 @@ function TeamForm(props) {
               )}
             </Field>
           </FormRow>
+          <FormSubmitError error={submitError} />
           <FormActionGroup
             onCancel={handleCancel}
             onSubmit={formik.handleSubmit}
@@ -84,10 +85,12 @@ TeamForm.propTypes = {
   handleCancel: PropTypes.func.isRequired,
   handleSubmit: PropTypes.func.isRequired,
   team: PropTypes.shape({}),
+  submitError: PropTypes.shape(),
 };
 
 TeamForm.defaultProps = {
   team: {},
+  submitError: null,
 };
 
 export default withI18n()(TeamForm);
diff --git a/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx b/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx
index 06d30cb1e3..326ae5f389 100644
--- a/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx
+++ b/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx
@@ -593,11 +593,8 @@ class JobTemplateForm extends Component {
             </FormRow>
           </div>
         </AdvancedFieldsWrapper>
-        <FormActionGroup
-          onCancel={handleCancel}
-          onSubmit={handleSubmit}
-          errorMessage={<FormSubmitError error={submitError} />}
-        />
+        <FormSubmitError error={submitError} />
+        <FormActionGroup onCancel={handleCancel} onSubmit={handleSubmit} />
       </Form>
     );
   }
diff --git a/awx/ui_next/src/screens/User/UserAdd/UserAdd.jsx b/awx/ui_next/src/screens/User/UserAdd/UserAdd.jsx
index eb1bf9fff7..0694627815 100644
--- a/awx/ui_next/src/screens/User/UserAdd/UserAdd.jsx
+++ b/awx/ui_next/src/screens/User/UserAdd/UserAdd.jsx
@@ -35,13 +35,12 @@ function UserAdd() {
     <PageSection>
       <Card>
         <CardBody>
-          <UserForm handleCancel={handleCancel} handleSubmit={handleSubmit} />
+          <UserForm
+            handleCancel={handleCancel}
+            handleSubmit={handleSubmit}
+            submitError={formSubmitError}
+          />
         </CardBody>
-        {formSubmitError ? (
-          <div className="formSubmitError">formSubmitError</div>
-        ) : (
-          ''
-        )}
       </Card>
     </PageSection>
   );
diff --git a/awx/ui_next/src/screens/User/UserEdit/UserEdit.jsx b/awx/ui_next/src/screens/User/UserEdit/UserEdit.jsx
index 01f3788647..5cd6f0452b 100644
--- a/awx/ui_next/src/screens/User/UserEdit/UserEdit.jsx
+++ b/awx/ui_next/src/screens/User/UserEdit/UserEdit.jsx
@@ -27,8 +27,8 @@ function UserEdit({ user, history }) {
         user={user}
         handleCancel={handleCancel}
         handleSubmit={handleSubmit}
+        submitError={formSubmitError}
       />
-      {formSubmitError ? <div> error </div> : null}
     </CardBody>
   );
 }
diff --git a/awx/ui_next/src/screens/User/shared/UserForm.jsx b/awx/ui_next/src/screens/User/shared/UserForm.jsx
index 6620049c45..9c1f2d7138 100644
--- a/awx/ui_next/src/screens/User/shared/UserForm.jsx
+++ b/awx/ui_next/src/screens/User/shared/UserForm.jsx
@@ -6,13 +6,15 @@ import { Formik, Field } from 'formik';
 import { Form, FormGroup } from '@patternfly/react-core';
 import AnsibleSelect from '@components/AnsibleSelect';
 import FormActionGroup from '@components/FormActionGroup/FormActionGroup';
-import FormField, { PasswordField } from '@components/FormField';
+import FormField, {
+  PasswordField,
+  FormSubmitError,
+} from '@components/FormField';
 import FormRow from '@components/FormRow';
 import OrganizationLookup from '@components/Lookup/OrganizationLookup';
 import { required, requiredEmail } from '@util/validators';
 
-function UserForm(props) {
-  const { user, handleCancel, handleSubmit, i18n } = props;
+function UserForm({ user, handleCancel, handleSubmit, submitError, i18n }) {
   const [organization, setOrganization] = useState(null);
 
   const userTypeOptions = [
@@ -183,6 +185,7 @@ function UserForm(props) {
               }}
             </Field>
           </FormRow>
+          <FormSubmitError error={submitError} />
           <FormActionGroup
             onCancel={handleCancel}
             onSubmit={formik.handleSubmit}

From d06d4d5a8c5eaf5505b58ab570e7cc0833bb4faa Mon Sep 17 00:00:00 2001
From: Keith Grant <keithjgrant@redhat.com>
Date: Fri, 7 Feb 2020 10:16:07 -0800
Subject: [PATCH 12/13] update tests for form submit errors

---
 .../FormActionGroup/FormActionGroup.test.jsx          | 11 -----------
 .../src/components/FormField/FormSubmitError.test.jsx |  2 +-
 .../screens/Project/ProjectAdd/ProjectAdd.test.jsx    |  5 +++--
 .../screens/Project/ProjectEdit/ProjectEdit.test.jsx  |  8 ++++++--
 4 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/awx/ui_next/src/components/FormActionGroup/FormActionGroup.test.jsx b/awx/ui_next/src/components/FormActionGroup/FormActionGroup.test.jsx
index 3a810aa884..d81d9e9e59 100644
--- a/awx/ui_next/src/components/FormActionGroup/FormActionGroup.test.jsx
+++ b/awx/ui_next/src/components/FormActionGroup/FormActionGroup.test.jsx
@@ -10,15 +10,4 @@ describe('FormActionGroup', () => {
     );
     expect(wrapper).toHaveLength(1);
   });
-
-  test('should display error message if given', () => {
-    const wrapper = mountWithContexts(
-      <FormActionGroup
-        onSubmit={() => {}}
-        onCancel={() => {}}
-        errorMessage={<div className="error">oh noes</div>}
-      />
-    );
-    expect(wrapper.find('.error').text()).toEqual('oh noes');
-  });
 });
diff --git a/awx/ui_next/src/components/FormField/FormSubmitError.test.jsx b/awx/ui_next/src/components/FormField/FormSubmitError.test.jsx
index 59a7b7d283..a52211d667 100644
--- a/awx/ui_next/src/components/FormField/FormSubmitError.test.jsx
+++ b/awx/ui_next/src/components/FormField/FormSubmitError.test.jsx
@@ -48,7 +48,7 @@ describe('<FormSubmitError>', () => {
       );
     });
     wrapper.update();
-    expect(wrapper.text()).toEqual('There was an error');
+    expect(wrapper.find('Alert').prop('title')).toEqual('There was an error');
     expect(global.console.error).toHaveBeenCalledWith(error);
     global.console = realConsole;
   });
diff --git a/awx/ui_next/src/screens/Project/ProjectAdd/ProjectAdd.test.jsx b/awx/ui_next/src/screens/Project/ProjectAdd/ProjectAdd.test.jsx
index e24249a739..b4048ed55c 100644
--- a/awx/ui_next/src/screens/Project/ProjectAdd/ProjectAdd.test.jsx
+++ b/awx/ui_next/src/screens/Project/ProjectAdd/ProjectAdd.test.jsx
@@ -106,7 +106,8 @@ describe('<ProjectAdd />', () => {
       project_local_paths: ['foobar', 'qux'],
       project_base_dir: 'dir/foo/bar',
     };
-    ProjectsAPI.create.mockImplementation(() => Promise.reject(new Error()));
+    const error = new Error('oops');
+    ProjectsAPI.create.mockImplementation(() => Promise.reject(error));
     await act(async () => {
       wrapper = mountWithContexts(<ProjectAdd />, {
         context: { config },
@@ -121,7 +122,7 @@ describe('<ProjectAdd />', () => {
     });
     wrapper.update();
     expect(ProjectsAPI.create).toHaveBeenCalledTimes(1);
-    expect(wrapper.find('ProjectAdd .formSubmitError').length).toBe(1);
+    expect(wrapper.find('ProjectForm').prop('submitError')).toEqual(error);
   });
 
   test('CardBody cancel button should navigate to projects list', async () => {
diff --git a/awx/ui_next/src/screens/Project/ProjectEdit/ProjectEdit.test.jsx b/awx/ui_next/src/screens/Project/ProjectEdit/ProjectEdit.test.jsx
index 6f8ca42945..ceb0e2c5b2 100644
--- a/awx/ui_next/src/screens/Project/ProjectEdit/ProjectEdit.test.jsx
+++ b/awx/ui_next/src/screens/Project/ProjectEdit/ProjectEdit.test.jsx
@@ -120,7 +120,10 @@ describe('<ProjectEdit />', () => {
       project_local_paths: [],
       project_base_dir: 'foo/bar',
     };
-    ProjectsAPI.update.mockImplementation(() => Promise.reject(new Error()));
+    const error = new Error('oops');
+    const realConsoleError = global.console.error;
+    global.console.error = jest.fn();
+    ProjectsAPI.update.mockImplementation(() => Promise.reject(error));
     await act(async () => {
       wrapper = mountWithContexts(
         <ProjectEdit project={{ ...projectData, scm_type: 'manual' }} />,
@@ -135,7 +138,8 @@ describe('<ProjectEdit />', () => {
     });
     wrapper.update();
     expect(ProjectsAPI.update).toHaveBeenCalledTimes(1);
-    expect(wrapper.find('ProjectEdit .formSubmitError').length).toBe(1);
+    expect(wrapper.find('ProjectForm').prop('submitError')).toEqual(error);
+    global.console.error = realConsoleError;
   });
 
   test('CardBody cancel button should navigate to project details', async () => {

From 8f77d15a3135dcc4ceb9114e81ba58c9d8c8006e Mon Sep 17 00:00:00 2001
From: Keith Grant <keithjgrant@redhat.com>
Date: Fri, 7 Feb 2020 11:55:09 -0800
Subject: [PATCH 13/13] fix errors being logged during tests; de-lint

---
 awx/ui_next/src/components/FormField/FormSubmitError.jsx    | 3 +--
 awx/ui_next/src/screens/Host/HostAdd/HostAdd.test.jsx       | 6 ++++++
 .../src/screens/Inventory/InventoryAdd/InventoryAdd.jsx     | 1 -
 .../src/screens/Inventory/InventoryEdit/InventoryEdit.jsx   | 1 -
 .../Organization/OrganizationAdd/OrganizationAdd.test.jsx   | 1 +
 awx/ui_next/src/screens/Team/TeamAdd/TeamAdd.jsx            | 2 +-
 awx/ui_next/src/screens/Team/TeamAdd/TeamAdd.test.jsx       | 1 +
 awx/ui_next/src/screens/User/UserAdd/UserAdd.test.jsx       | 1 +
 8 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/awx/ui_next/src/components/FormField/FormSubmitError.jsx b/awx/ui_next/src/components/FormField/FormSubmitError.jsx
index 5e25a7ae50..6dd5db1c32 100644
--- a/awx/ui_next/src/components/FormField/FormSubmitError.jsx
+++ b/awx/ui_next/src/components/FormField/FormSubmitError.jsx
@@ -10,8 +10,7 @@ function FormSubmitError({ error }) {
     if (!error) {
       return;
     }
-    // check for field-specific errors from API
-    if (error.response?.data && typeof error.response.data === 'object') {
+    if (error?.response?.data && typeof error.response.data === 'object') {
       const errorMessages = error.response.data;
       setErrors(errorMessages);
       if (errorMessages.__all__) {
diff --git a/awx/ui_next/src/screens/Host/HostAdd/HostAdd.test.jsx b/awx/ui_next/src/screens/Host/HostAdd/HostAdd.test.jsx
index 2a0e419675..ebb302fc42 100644
--- a/awx/ui_next/src/screens/Host/HostAdd/HostAdd.test.jsx
+++ b/awx/ui_next/src/screens/Host/HostAdd/HostAdd.test.jsx
@@ -30,6 +30,12 @@ describe('<HostAdd />', () => {
   });
 
   test('handleSubmit should post to api', async () => {
+    HostsAPI.create.mockResolvedValueOnce({
+      data: {
+        ...hostData,
+        id: 5,
+      },
+    });
     await act(async () => {
       wrapper.find('HostForm').prop('handleSubmit')(hostData);
     });
diff --git a/awx/ui_next/src/screens/Inventory/InventoryAdd/InventoryAdd.jsx b/awx/ui_next/src/screens/Inventory/InventoryAdd/InventoryAdd.jsx
index 521eef2191..a0afa8520b 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryAdd/InventoryAdd.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryAdd/InventoryAdd.jsx
@@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
 import { PageSection, Card } from '@patternfly/react-core';
 import { CardBody } from '@components/Card';
-import ContentError from '@components/ContentError';
 import ContentLoading from '@components/ContentLoading';
 
 import { InventoriesAPI, CredentialTypesAPI } from '@api';
diff --git a/awx/ui_next/src/screens/Inventory/InventoryEdit/InventoryEdit.jsx b/awx/ui_next/src/screens/Inventory/InventoryEdit/InventoryEdit.jsx
index a86b1ddad5..cbc1b2126d 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryEdit/InventoryEdit.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryEdit/InventoryEdit.jsx
@@ -5,7 +5,6 @@ import { object } from 'prop-types';
 import { CardBody } from '@components/Card';
 import { InventoriesAPI, CredentialTypesAPI } from '@api';
 import ContentLoading from '@components/ContentLoading';
-import ContentError from '@components/ContentError';
 import InventoryForm from '../shared/InventoryForm';
 import { getAddedAndRemoved } from '../../../util/lists';
 
diff --git a/awx/ui_next/src/screens/Organization/OrganizationAdd/OrganizationAdd.test.jsx b/awx/ui_next/src/screens/Organization/OrganizationAdd/OrganizationAdd.test.jsx
index 0e499e8cda..4618508afc 100644
--- a/awx/ui_next/src/screens/Organization/OrganizationAdd/OrganizationAdd.test.jsx
+++ b/awx/ui_next/src/screens/Organization/OrganizationAdd/OrganizationAdd.test.jsx
@@ -14,6 +14,7 @@ describe('<OrganizationAdd />', () => {
       description: 'new description',
       custom_virtualenv: 'Buzz',
     };
+    OrganizationsAPI.create.mockResolvedValueOnce({ data: {} });
     await act(async () => {
       const wrapper = mountWithContexts(<OrganizationAdd />);
       wrapper.find('OrganizationForm').prop('onSubmit')(updatedOrgData, [], []);
diff --git a/awx/ui_next/src/screens/Team/TeamAdd/TeamAdd.jsx b/awx/ui_next/src/screens/Team/TeamAdd/TeamAdd.jsx
index 6ef57538a0..d9488b39c4 100644
--- a/awx/ui_next/src/screens/Team/TeamAdd/TeamAdd.jsx
+++ b/awx/ui_next/src/screens/Team/TeamAdd/TeamAdd.jsx
@@ -12,7 +12,7 @@ class TeamAdd extends React.Component {
     super(props);
     this.handleSubmit = this.handleSubmit.bind(this);
     this.handleCancel = this.handleCancel.bind(this);
-    this.state = { error: '' };
+    this.state = { error: null };
   }
 
   async handleSubmit(values) {
diff --git a/awx/ui_next/src/screens/Team/TeamAdd/TeamAdd.test.jsx b/awx/ui_next/src/screens/Team/TeamAdd/TeamAdd.test.jsx
index 07aa2382fc..7d1eddeabf 100644
--- a/awx/ui_next/src/screens/Team/TeamAdd/TeamAdd.test.jsx
+++ b/awx/ui_next/src/screens/Team/TeamAdd/TeamAdd.test.jsx
@@ -9,6 +9,7 @@ jest.mock('@api');
 
 describe('<TeamAdd />', () => {
   test('handleSubmit should post to api', async () => {
+    TeamsAPI.create.mockResolvedValueOnce({ data: {} });
     const wrapper = mountWithContexts(<TeamAdd />);
     const updatedTeamData = {
       name: 'new name',
diff --git a/awx/ui_next/src/screens/User/UserAdd/UserAdd.test.jsx b/awx/ui_next/src/screens/User/UserAdd/UserAdd.test.jsx
index 0ea4d56e19..1537855d0e 100644
--- a/awx/ui_next/src/screens/User/UserAdd/UserAdd.test.jsx
+++ b/awx/ui_next/src/screens/User/UserAdd/UserAdd.test.jsx
@@ -13,6 +13,7 @@ describe('<UserAdd />', () => {
     await act(async () => {
       wrapper = mountWithContexts(<UserAdd />);
     });
+    UsersAPI.create.mockResolvedValueOnce({ data: {} });
     const updatedUserData = {
       username: 'sysadmin',
       email: 'sysadmin@ansible.com',