pass Host form API errors back into Formik for display

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);

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);

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}>