Fix formsubmiterror not showing

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) => <div key={msg}>{msg}</div>)
-            : errorMessage
+            ? errorMessage.map((msg) => (
+                <div key={msg}>
+                  {msg.messages ? msg.messages : JSON.stringify(msg)}
+                </div>
+              ))
+            : errorMessage && (
+                <div>
+                  {errorMessage.messages
+                    ? errorMessage.messages
+                    : JSON.stringify(errorMessage)}
+                </div>
+              )
         }
-      />
+      >
+        {Array.isArray(fieldError)
+          ? fieldError.map((msg) => (
+              <div key={msg}>
+                {msg.messages ? msg.messages : JSON.stringify(msg)}
+              </div>
+            ))
+          : fieldError && (
+              <div>
+                {fieldError.messages
+                  ? fieldError.messages
+                  : JSON.stringify(fieldError)}
+              </div>
+            )}
+      </Alert>
     </FormFullWidthLayout>
   );
 }

awx/ui/src/components/FormField/FormSubmitError.test.js

@@ -5,14 +5,15 @@ import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
 import FormSubmitError from './FormSubmitError';
 
 describe('<FormSubmitError>', () => {
-  test('should render null when no error present', () => {
+  test('should render null when no error present', async () => {
     const wrapper = mountWithContexts(
       <Formik>{() => <FormSubmitError error={null} />}</Formik>
     );
-    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('<FormSubmitError>', () => {
         )}
       </Formik>
     );
-    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(
-        <Formik>{() => <FormSubmitError error={error} />}</Formik>
-      );
-    });
-    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');
   });
 });

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,

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',