add submit error support to Project form

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;

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

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

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