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