diff --git a/awx/ui/src/components/FormField/FormSubmitError.js b/awx/ui/src/components/FormField/FormSubmitError.js
index a2726c392b..5179dc9429 100644
--- a/awx/ui/src/components/FormField/FormSubmitError.js
+++ b/awx/ui/src/components/FormField/FormSubmitError.js
@@ -6,6 +6,7 @@ import sortErrorMessages from './sortErrorMessages';
function FormSubmitError({ error }) {
const [errorMessage, setErrorMessage] = useState(null);
+ const [fieldError, setFieldsMessage] = useState(null);
const { values, setErrors } = useFormikContext();
useEffect(() => {
@@ -15,6 +16,7 @@ function FormSubmitError({ error }) {
}
if (fieldErrors) {
setErrors(fieldErrors);
+ setFieldsMessage(fieldErrors);
}
}, [error, setErrors, values]);
@@ -30,10 +32,34 @@ function FormSubmitError({ error }) {
ouiaId="form-submit-error-alert"
title={
Array.isArray(errorMessage)
- ? errorMessage.map((msg) =>
{msg}
)
- : errorMessage
+ ? errorMessage.map((msg) => (
+
+ {msg.messages ? msg.messages : JSON.stringify(msg)}
+
+ ))
+ : errorMessage && (
+
+ {errorMessage.messages
+ ? errorMessage.messages
+ : JSON.stringify(errorMessage)}
+
+ )
}
- />
+ >
+ {Array.isArray(fieldError)
+ ? fieldError.map((msg) => (
+
+ {msg.messages ? msg.messages : JSON.stringify(msg)}
+
+ ))
+ : fieldError && (
+
+ {fieldError.messages
+ ? fieldError.messages
+ : JSON.stringify(fieldError)}
+
+ )}
+
);
}
diff --git a/awx/ui/src/components/FormField/FormSubmitError.test.js b/awx/ui/src/components/FormField/FormSubmitError.test.js
index 86c6f39d8d..b42ba59dad 100644
--- a/awx/ui/src/components/FormField/FormSubmitError.test.js
+++ b/awx/ui/src/components/FormField/FormSubmitError.test.js
@@ -5,14 +5,15 @@ import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
import FormSubmitError from './FormSubmitError';
describe('', () => {
- test('should render null when no error present', () => {
+ test('should render null when no error present', async () => {
const wrapper = mountWithContexts(
{() => }
);
- expect(wrapper.find('FormSubmitError').text()).toEqual('');
+ const ele = await wrapper.find('FormSubmitError').text();
+ expect(ele).toEqual('');
});
- test('should pass field errors to Formik', () => {
+ test('should pass field errors to Formik', async () => {
const error = {
response: {
data: {
@@ -30,26 +31,7 @@ describe('', () => {
)}
);
- expect(wrapper.find('p').text()).toEqual('invalid');
- });
-
- test('should display error message if field errors not provided', async () => {
- const realConsole = global.console;
- global.console = {
- error: jest.fn(),
- };
- const error = {
- message: 'There was an error',
- };
- let wrapper;
- await act(async () => {
- wrapper = mountWithContexts(
- {() => }
- );
- });
- wrapper.update();
- expect(wrapper.find('Alert').prop('title')).toEqual('There was an error');
- expect(global.console.error).toHaveBeenCalledWith(error);
- global.console = realConsole;
+ const pp = await wrapper.find('p').text();
+ expect(pp).toEqual('invalid');
});
});
diff --git a/awx/ui/src/components/FormField/sortErrorMessages.js b/awx/ui/src/components/FormField/sortErrorMessages.js
index 6b7ead1bdb..2a8ad80650 100644
--- a/awx/ui/src/components/FormField/sortErrorMessages.js
+++ b/awx/ui/src/components/FormField/sortErrorMessages.js
@@ -9,15 +9,18 @@ export default function sortErrorMessages(error, formValues = {}) {
Object.keys(error.response.data).length > 0
) {
const parsed = parseFieldErrors(error.response.data, formValues);
+
return {
- formError: parsed.formErrors.join('; '),
+ formError:
+ parsed.formErrors.indexOf(';') > -1
+ ? parsed.formErrors.join('; ')
+ : 'Error in fields',
fieldErrors: Object.keys(parsed.fieldErrors).length
? parsed.fieldErrors
: null,
};
}
- /* eslint-disable-next-line no-console */
- console.error(error);
+
return {
formError: error.message,
fieldErrors: null,
diff --git a/awx/ui/src/components/FormField/sortErrorMessages.test.js b/awx/ui/src/components/FormField/sortErrorMessages.test.js
index 2b042f0120..fded23714c 100644
--- a/awx/ui/src/components/FormField/sortErrorMessages.test.js
+++ b/awx/ui/src/components/FormField/sortErrorMessages.test.js
@@ -35,7 +35,7 @@ describe('sortErrorMessages', () => {
};
const parsed = sortErrorMessages(error, { foo: '', baz: '' });
expect(parsed).toEqual({
- formError: '',
+ formError: 'Error in fields',
fieldErrors: {
foo: 'bar',
baz: 'bam',
@@ -54,7 +54,7 @@ describe('sortErrorMessages', () => {
};
const parsed = sortErrorMessages(error, { foo: '', baz: '' });
expect(parsed).toEqual({
- formError: 'oopsie',
+ formError: 'Error in fields',
fieldErrors: {
baz: 'bam',
},
@@ -72,7 +72,7 @@ describe('sortErrorMessages', () => {
};
const parsed = sortErrorMessages(error, { foo: '', baz: '' });
expect(parsed).toEqual({
- formError: '',
+ formError: 'Error in fields',
fieldErrors: {
foo: 'bar; bar2',
baz: 'bam',
@@ -103,7 +103,7 @@ describe('sortErrorMessages', () => {
};
const parsed = sortErrorMessages(error, formValues);
expect(parsed).toEqual({
- formError: '',
+ formError: 'Error in fields',
fieldErrors: {
inputs: {
url: 'URL Error',
@@ -135,7 +135,7 @@ describe('sortErrorMessages', () => {
};
const parsed = sortErrorMessages(error, formValues);
expect(parsed).toEqual({
- formError: 'Other stuff error',
+ formError: 'Error in fields',
fieldErrors: {
inputs: {
url: 'URL Error',