From 16e672dd38cf8a6bc7afefc45e0faac759ac06df Mon Sep 17 00:00:00 2001
From: John Mitchell <jmitchel@Johns-MacBook-Pro-46.local>
Date: Thu, 19 Mar 2020 13:12:58 -0400
Subject: [PATCH] correct form submission errors for credential form

---
 .../src/screens/Credential/CredentialAdd/CredentialAdd.jsx   | 5 ++++-
 .../src/screens/Credential/CredentialEdit/CredentialEdit.jsx | 5 ++++-
 awx/ui_next/src/screens/Credential/shared/CredentialForm.jsx | 4 +++-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/awx/ui_next/src/screens/Credential/CredentialAdd/CredentialAdd.jsx b/awx/ui_next/src/screens/Credential/CredentialAdd/CredentialAdd.jsx
index f72c33943d..cc0d89313f 100644
--- a/awx/ui_next/src/screens/Credential/CredentialAdd/CredentialAdd.jsx
+++ b/awx/ui_next/src/screens/Credential/CredentialAdd/CredentialAdd.jsx
@@ -12,6 +12,7 @@ function CredentialAdd({ me }) {
   const [error, setError] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
   const [credentialTypes, setCredentialTypes] = useState(null);
+  const [formSubmitError, setFormSubmitError] = useState(null);
   const history = useHistory();
 
   useEffect(() => {
@@ -36,6 +37,7 @@ function CredentialAdd({ me }) {
 
   const handleSubmit = async values => {
     const { organization, ...remainingValues } = values;
+    setFormSubmitError(null);
     try {
       const {
         data: { id: credentialId },
@@ -47,7 +49,7 @@ function CredentialAdd({ me }) {
       const url = `/credentials/${credentialId}/details`;
       history.push(`${url}`);
     } catch (err) {
-      setError(err);
+      setFormSubmitError(err);
     }
   };
 
@@ -73,6 +75,7 @@ function CredentialAdd({ me }) {
             onCancel={handleCancel}
             onSubmit={handleSubmit}
             credentialTypes={credentialTypes}
+            submitError={formSubmitError}
           />
         </CardBody>
       </Card>
diff --git a/awx/ui_next/src/screens/Credential/CredentialEdit/CredentialEdit.jsx b/awx/ui_next/src/screens/Credential/CredentialEdit/CredentialEdit.jsx
index e6086f992e..175fd981e1 100644
--- a/awx/ui_next/src/screens/Credential/CredentialEdit/CredentialEdit.jsx
+++ b/awx/ui_next/src/screens/Credential/CredentialEdit/CredentialEdit.jsx
@@ -12,6 +12,7 @@ function CredentialEdit({ credential, me }) {
   const [error, setError] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
   const [credentialTypes, setCredentialTypes] = useState(null);
+  const [formSubmitError, setFormSubmitError] = useState(null);
   const history = useHistory();
 
   useEffect(() => {
@@ -38,6 +39,7 @@ function CredentialEdit({ credential, me }) {
 
   const handleSubmit = async values => {
     const { organization, ...remainingValues } = values;
+    setFormSubmitError(null);
     try {
       const {
         data: { id: credentialId },
@@ -49,7 +51,7 @@ function CredentialEdit({ credential, me }) {
       const url = `/credentials/${credentialId}/details`;
       history.push(`${url}`);
     } catch (err) {
-      setError(err);
+      setFormSubmitError(err);
     }
   };
 
@@ -68,6 +70,7 @@ function CredentialEdit({ credential, me }) {
         onSubmit={handleSubmit}
         credential={credential}
         credentialTypes={credentialTypes}
+        submitError={formSubmitError}
       />
     </CardBody>
   );
diff --git a/awx/ui_next/src/screens/Credential/shared/CredentialForm.jsx b/awx/ui_next/src/screens/Credential/shared/CredentialForm.jsx
index c589d92410..280630c815 100644
--- a/awx/ui_next/src/screens/Credential/shared/CredentialForm.jsx
+++ b/awx/ui_next/src/screens/Credential/shared/CredentialForm.jsx
@@ -4,7 +4,7 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { func, shape } from 'prop-types';
 import { Form, FormGroup, Title } from '@patternfly/react-core';
-import FormField from '@components/FormField';
+import FormField, { FormSubmitError } from '@components/FormField';
 import FormActionGroup from '@components/FormActionGroup/FormActionGroup';
 import AnsibleSelect from '@components/AnsibleSelect';
 import { required } from '@util/validators';
@@ -118,6 +118,7 @@ function CredentialForm({
   credentialTypes,
   onSubmit,
   onCancel,
+  submitError,
   ...rest
 }) {
   const initialValues = {
@@ -193,6 +194,7 @@ function CredentialForm({
               sshCredentialTypeId={sshCredentialTypeId}
               {...rest}
             />
+            <FormSubmitError error={submitError} />
             <FormActionGroup
               onCancel={onCancel}
               onSubmit={formik.handleSubmit}