add FormSubmitError to existing forms

awx/ui_next/src/components/FormActionGroup/FormActionGroup.jsx

@@ -21,15 +21,8 @@ const ActionGroup = styled(PFActionGroup)`
   }
 `;
 
-const FormActionGroup = ({
+const FormActionGroup = ({ onSubmit, submitDisabled, onCancel, i18n }) => (
-  onSubmit,
-  submitDisabled,
-  onCancel,
-  errorMessage,
-  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);

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';
+import { Alert } from '@patternfly/react-core';
-
-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 [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;

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

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

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>

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

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

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>

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

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 = {

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

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>

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

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

awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx

@@ -593,11 +593,8 @@ class JobTemplateForm extends Component {
             </FormRow>
           </div>
         </AdvancedFieldsWrapper>
-        <FormActionGroup
+        <FormSubmitError error={submitError} />
-          onCancel={handleCancel}
+        <FormActionGroup onCancel={handleCancel} onSubmit={handleSubmit} />
-          onSubmit={handleSubmit}
-          errorMessage={<FormSubmitError error={submitError} />}
-        />
       </Form>
     );
   }

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

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

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) {
+function UserForm({ user, handleCancel, handleSubmit, submitError, i18n }) {
-  const { user, handleCancel, handleSubmit, i18n } = props;
   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}