fix(mui): add submit errors

Author: rvsia

packages/mui-component-mapper/src/common/helpers.js

@@ -1,7 +1,7 @@
 export const validationError = (meta, validateOnMount) => {
   if (validateOnMount) {
-    return meta.error;
+    return meta.error || meta.submitError;
   }
 
-  return meta.touched && meta.error;
+  return meta.touched && (meta.error || meta.submitError);
 };

packages/mui-component-mapper/src/files/field-array.js

@@ -133,12 +133,17 @@ const DynamicArray = ({ ...props }) => {
 
   const classes = useFielArrayStyles();
 
-  const { dirty, submitFailed, error } = meta;
+  const { dirty, submitFailed, error, submitError } = meta;
   const isError = (dirty || submitFailed) && error && typeof error === 'string';
 
   return (
     <FormFieldGrid {...FormFieldGridProps} className={clsx(classes.fieldArrayGroup, FormFieldGridProps.classname)}>
-      <FormControl component="fieldset" error={isError} {...FormControlProps} className={clsx(classes.formControl, FormControlProps.className)}>
+      <FormControl
+        component="fieldset"
+        error={isError || submitError}
+        {...FormControlProps}
+        className={clsx(classes.formControl, FormControlProps.className)}
+      >
         <FieldArray key={rest.input.name} name={rest.input.name} validate={arrayValidator}>
           {({ fields: { map, value = [], push, remove } }) => {
             const pushWrapper = () => {
@@ -204,9 +209,9 @@ const DynamicArray = ({ ...props }) => {
                     ))
                   )}
                 </Grid>
-                {isError && (
+                {(isError || submitError) && (
                   <Grid item xs={12}>
-                    <FormHelperText>{error}</FormHelperText>
+                    <FormHelperText>{error || submitError}</FormHelperText>
                   </Grid>
                 )}
               </Grid>

packages/mui-component-mapper/src/tests/form-fields.test.js

@@ -255,6 +255,17 @@ describe('formFields', () => {
             ).toEqual(true);
           }
         });
+
+        it('renders with error', () => {
+          const wrapper = mount(<RendererWrapper schema={schema} onSubmit={() => ({ [field.name]: errorText })} />);
+          wrapper.find('form').simulate('submit');
+          expect(
+            wrapper
+              .find('.Mui-error')
+              .last()
+              .text()
+          ).toEqual(errorText);
+        });
       });
     });
   });