fix(suir): add submitErrors

Author: rvsia

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

@@ -1,9 +1,9 @@
 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);
 };
 
 export const validationWarning = (meta, validateOnMount) => {

packages/suir-component-mapper/src/common/multiple-choice-list.js

@@ -59,7 +59,7 @@ const Wrapper = ({ label, isRequired, children, meta, validateOnMount, helperTex
         {...FormFieldProps}
         {...(invalid && {
           error: {
-            content: meta.error,
+            content: meta.error || meta.submitError,
             pointing: 'left'
           }
         })}

packages/suir-component-mapper/src/files/checkbox.js

@@ -40,7 +40,7 @@ export const SingleCheckbox = (props) => {
         label={label}
         error={
           invalid && {
-            content: meta.error,
+            content: meta.error || meta.submitError,
             pointing: 'left'
           }
         }

packages/suir-component-mapper/src/files/date-picker.js

@@ -32,7 +32,7 @@ const DatePicker = (props) => {
         required={isRequired}
         error={
           invalid && {
-            content: meta.error
+            content: meta.error || meta.submitError
           }
         }
         {...rest}

packages/suir-component-mapper/src/files/dual-list-select.js

@@ -186,7 +186,7 @@ const DualList = ({
         required={isRequired}
         error={
           invalid && {
-            content: meta.error,
+            content: meta.error || meta.submitError,
             pointing: 'left',
             ...labelError
           }

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

@@ -167,7 +167,7 @@ const DynamicArray = ({ ...props }) => {
     ...buttonLabels
   };
 
-  const { dirty, submitFailed, error } = meta;
+  const { dirty, submitFailed, error, submitError } = meta;
   const isError = (dirty || submitFailed) && error && typeof error === 'string';
 
   return (
@@ -277,9 +277,9 @@ const DynamicArray = ({ ...props }) => {
                 ))
               )}
             </div>
-            {isError && (
+            {(isError || submitError) && (
               <div className="ddorg__suir__mapper__field-array-error">
-                <p>{error}</p>
+                <p>{error || submitError}</p>
               </div>
             )}
           </div>

packages/suir-component-mapper/src/files/radio.js

@@ -52,7 +52,13 @@ const Radio = ({ name, ...props }) => {
   const invalid = validationError(meta, validateOnMount);
   return (
     <FormFieldGrid helperText={validationWarning(meta, validateOnMount) || helperText} HelperTextProps={HelperTextProps} {...FormFieldGridProps}>
-      <FormField {...FormFieldProps} disabled={isDisabled} required={isRequired} error={invalid && { content: meta.error }} label={label} />
+      <FormField
+        {...FormFieldProps}
+        disabled={isDisabled}
+        required={isRequired}
+        error={invalid && { content: meta.error || meta.submitError }}
+        label={label}
+      />
       {options.map((option) => (
         <RadioOption key={option.value} name={name} option={option} isDisabled={isDisabled} isReadOnly={isReadOnly} {...rest} />
       ))}

packages/suir-component-mapper/src/files/select.js

@@ -65,7 +65,7 @@ const SuirSelect = ({
         fluid
         multiple={isMulti}
         label={label}
-        error={invalid && { content: meta.error }}
+        error={invalid && { content: meta.error || meta.submitError }}
         control={Dropdown}
         value={internalValue}
         {...rest}

packages/suir-component-mapper/src/files/switch.js

@@ -53,7 +53,7 @@ export const Switch = (props) => {
       <FormField
         required={isRequired}
         className={clsx(classes.root, className)}
-        error={invalid && { content: meta.error, pointing: 'left' }}
+        error={invalid && { content: meta.error || meta.submitError, pointing: 'left' }}
         {...rest}
         label={
           <FormCheckbox

packages/suir-component-mapper/src/files/text-field.js

@@ -37,7 +37,7 @@ const TextField = (props) => {
         {...input}
         error={
           invalid && {
-            content: meta.error
+            content: meta.error || meta.submitError
           }
         }
       />