Merge pull request #925 from rvsia/submitErrors

Hyperkid123 · web-flow · commit 3276b80ff7ce · 2020-12-15T14:14:53.000+01:00
fix(all): add support for submit errors
diff --git a/packages/ant-component-mapper/src/common/helpers.js b/packages/ant-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);
 };
diff --git a/packages/ant-component-mapper/src/files/field-array.js b/packages/ant-component-mapper/src/files/field-array.js
@@ -134,7 +134,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 (
     <AntForm
@@ -228,10 +228,10 @@ const DynamicArray = ({ ...props }) => {
                   )}
                 </Row>
               </Col>
-              {isError && (
+              {(isError || submitError) && (
                 <Col span={12}>
                   <Typography.Text type="danger" {...ErrorMessageProps}>
-                    {typeof error === 'object' ? error.name : error}
+                    {typeof error === 'object' ? error.name : error || submitError}
                   </Typography.Text>
                 </Col>
               )}
diff --git a/packages/ant-component-mapper/src/tests/components.test.js b/packages/ant-component-mapper/src/tests/components.test.js
@@ -289,6 +289,21 @@ describe('formFields generated tests', () => {
             ).toEqual(true);
           }
         });
+
+        it('renders with submitError', async () => {
+          const wrapper = mount(<RendererWrapper schema={schema} onSubmit={() => ({ [field.name]: errorText })} />);
+          await act(async () => {
+            wrapper.find('form').simulate('submit');
+          });
+          wrapper.update();
+          expect(
+            wrapper
+              .find('.ant-form-item-explain')
+              .last()
+              .text()
+          ).toEqual(errorText);
+          expect(wrapper.find('.ant-form-item-has-error').length).toBeGreaterThanOrEqual(1);
+        });
       });
     });
   });
diff --git a/packages/blueprint-component-mapper/src/files/field-array.js b/packages/blueprint-component-mapper/src/files/field-array.js
@@ -68,8 +68,8 @@ const FieldArray = (props) => {
 
   const { required } = useContext(BlueprintContext);
 
-  const { error, touched } = meta;
-  const showError = (validateOnMount || touched) && error;
+  const { error, touched, submitError } = meta;
+  const showError = (validateOnMount || touched) && (error || submitError);
 
   const text = showError ? error : helperText || description;
 
diff --git a/packages/blueprint-component-mapper/src/files/form-group.js b/packages/blueprint-component-mapper/src/files/form-group.js
@@ -22,8 +22,8 @@ export const FormGroupInternal = ({
 }) => {
   const { required } = useContext(BlueprintContext);
 
-  const { error, touched, warning } = meta;
-  const showError = (validateOnMount || touched) && error;
+  const { error, touched, warning, submitError } = meta;
+  const showError = (validateOnMount || touched) && (error || submitError);
   const showWarning = (validateOnMount || touched) && warning;
 
   const text = showError || showWarning || helperText || description;
diff --git a/packages/blueprint-component-mapper/src/tests/components.test.js b/packages/blueprint-component-mapper/src/tests/components.test.js
@@ -264,6 +264,18 @@ describe('formFields generated tests', () => {
             }
           }
         });
+
+        it('renders with error', () => {
+          const wrapper = mount(<RendererWrapper schema={schema} onSubmit={() => ({ [field.name]: errorText })} />);
+          wrapper.find('form').simulate('submit');
+          expect(
+            wrapper
+              .find('.bp3-form-helper-text')
+              .last()
+              .text()
+          ).toEqual(errorText);
+          expect(wrapper.find('.bp3-intent-danger').length).toBeGreaterThanOrEqual(1);
+        });
       });
     });
   });
diff --git a/packages/carbon-component-mapper/src/files/checkbox.js b/packages/carbon-component-mapper/src/files/checkbox.js
@@ -31,7 +31,7 @@ Wrapper.propTypes = {
 const SingleCheckbox = (props) => {
   const { input, meta, validateOnMount, helperText, WrapperProps, ...rest } = useFieldApi(prepareProps({ ...props, type: 'checkbox' }));
 
-  const invalid = (meta.touched || validateOnMount) && meta.error;
+  const invalid = (meta.touched || validateOnMount) && (meta.error || meta.submitError);
 
   const warnText = (meta.touched || validateOnMount) && meta.warning;
 
diff --git a/packages/carbon-component-mapper/src/files/date-picker.js b/packages/carbon-component-mapper/src/files/date-picker.js
@@ -10,7 +10,7 @@ import HelperTextBlock from '../common/helper-text-block';
 const DatePicker = (props) => {
   const { input, datePickerType, meta, DatePickerProps, validateOnMount, helperText, WrapperProps, ...rest } = useFieldApi(prepareProps(props));
 
-  const invalid = (meta.touched || validateOnMount) && meta.error;
+  const invalid = (meta.touched || validateOnMount) && (meta.error || meta.submitError);
   const warnText = (meta.touched || validateOnMount) && meta.warning;
 
   return (
diff --git a/packages/carbon-component-mapper/src/files/field-array.js b/packages/carbon-component-mapper/src/files/field-array.js
@@ -79,7 +79,7 @@ const FieldArray = (props) => {
     ...buttonLabels
   };
 
-  const invalid = (meta.touched || validateOnMount) && !Array.isArray(meta.error) && meta.error;
+  const invalid = (meta.touched || validateOnMount) && !Array.isArray(meta.error) && (meta.error || meta.submitError);
 
   return (
     <FormGroup
diff --git a/packages/carbon-component-mapper/src/files/radio.js b/packages/carbon-component-mapper/src/files/radio.js
@@ -12,7 +12,7 @@ const Radio = (props) => {
     prepareProps({ type: 'radio', ...props })
   );
 
-  const invalid = (meta.touched || validateOnMount) && meta.error;
+  const invalid = (meta.touched || validateOnMount) && (meta.error || meta.submitError);
   const warnText = (meta.touched || validateOnMount) && meta.warning;
 
   return (
diff --git a/packages/carbon-component-mapper/src/files/select.js b/packages/carbon-component-mapper/src/files/select.js
@@ -236,7 +236,7 @@ const Select = (props) => {
   const Component =
     isMulti && isSearchClear ? ClearedMultiSelectFilterable : isMulti ? ClearedMultiSelect : isSearchClear ? ClearedSelectSearchable : ClearedSelect;
 
-  const invalidText = ((meta.touched || validateOnMount) && meta.error) || '';
+  const invalidText = ((meta.touched || validateOnMount) && (meta.error || meta.submitError)) || '';
   const text = ((meta.touched || validateOnMount) && meta.warning) || helperText;
 
   return (
diff --git a/packages/carbon-component-mapper/src/files/slider.js b/packages/carbon-component-mapper/src/files/slider.js
@@ -10,7 +10,7 @@ import HelperTextBlock from '../common/helper-text-block';
 const Slider = (props) => {
   const { input, meta, isRequired, validateOnMount, helperText, WrapperProps, ...rest } = useFieldApi(prepareProps(props));
 
-  const invalid = (meta.touched || validateOnMount) && meta.error;
+  const invalid = (meta.touched || validateOnMount) && (meta.error || meta.submitError);
   const warnText = (meta.touched || validateOnMount) && meta.warning;
 
   return (
diff --git a/packages/carbon-component-mapper/src/files/switch.js b/packages/carbon-component-mapper/src/files/switch.js
@@ -10,7 +10,7 @@ import HelperTextBlock from '../common/helper-text-block';
 const Switch = (props) => {
   const { input, meta, onText, offText, validateOnMount, helperText, WrapperProps, ...rest } = useFieldApi(prepareProps(props));
 
-  const invalid = (meta.touched || validateOnMount) && meta.error;
+  const invalid = (meta.touched || validateOnMount) && (meta.error || meta.submitError);
   const warnText = (meta.touched || validateOnMount) && meta.warning;
 
   return (
diff --git a/packages/carbon-component-mapper/src/files/text-field.js b/packages/carbon-component-mapper/src/files/text-field.js
@@ -9,7 +9,7 @@ import prepareProps from './prepare-props';
 const TextField = (props) => {
   const { input, meta, validateOnMount, ...rest } = useFieldApi(prepareProps(props));
 
-  const invalid = (meta.touched || validateOnMount) && meta.error;
+  const invalid = (meta.touched || validateOnMount) && (meta.error || meta.submitError);
   const warn = (meta.touched || validateOnMount) && meta.warning;
 
   return (
diff --git a/packages/carbon-component-mapper/src/files/textarea.js b/packages/carbon-component-mapper/src/files/textarea.js
@@ -9,7 +9,7 @@ import prepareProps from './prepare-props';
 const Textarea = (props) => {
   const { input, meta, validateOnMount, helperText, ...rest } = useFieldApi(prepareProps(props));
 
-  const invalid = (meta.touched || validateOnMount) && meta.error;
+  const invalid = (meta.touched || validateOnMount) && (meta.error || meta.submitError);
   const text = ((meta.touched || validateOnMount) && meta.warning) || helperText;
 
   return <TextArea {...input} key={input.name} id={input.name} invalid={Boolean(invalid)} invalidText={invalid || ''} helperText={text} {...rest} />;
diff --git a/packages/carbon-component-mapper/src/files/time-picker.js b/packages/carbon-component-mapper/src/files/time-picker.js
@@ -14,7 +14,7 @@ const TimePicker = (props) => {
   const [format, selectFormat] = useState('AM');
   const isMounted = useRef(false);
 
-  const invalid = (meta.touched || validateOnMount) && meta.error;
+  const invalid = (meta.touched || validateOnMount) && (meta.error || meta.submitError);
   const warnText = (meta.touched || validateOnMount) && meta.warning;
 
   let finalValue = input.value;
diff --git a/packages/carbon-component-mapper/src/tests/components.test.js b/packages/carbon-component-mapper/src/tests/components.test.js
@@ -209,6 +209,20 @@ describe('component tests', () => {
           const wrapper = mount(<RendererWrapper schema={{ fields: [requiredField] }} />);
           expect(wrapper.find('.ddorg__carbon-component-mapper_is-required').text()).toEqual('*');
         });
+
+        it('renders with submitError', () => {
+          const wrapper = mount(<RendererWrapper schema={schema} onSubmit={() => ({ [field.name]: errorText })} />);
+          wrapper.find('form').simulate('submit');
+
+          if (wrapper.find('#field-name-error-msg').length) {
+            expect(wrapper.find('#field-name-error-msg').text()).toEqual(errorText);
+            expect(wrapper.find('[invalid=true]').length).toBeGreaterThanOrEqual(1);
+          }
+
+          if (wrapper.find('.ddorg__carbon-error-helper-text').length) {
+            expect(wrapper.find('.ddorg__carbon-error-helper-text').text()).toEqual(errorText);
+          }
+        });
       });
     });
   });
diff --git a/packages/common/src/multiple-choice-list.js b/packages/common/src/multiple-choice-list.js
@@ -13,8 +13,8 @@ const SingleCheckbox = (props) => {
 const MultipleChoiceList = (props) => {
   const { Wrapper, Checkbox, label, isRequired, helperText, meta, input, options, isDisabled, isReadOnly, description, ...rest } = useFieldApi(props);
 
-  const { error, touched } = meta;
-  const showError = touched && error;
+  const { error, touched, submitError } = meta;
+  const showError = touched && (error || submitError);
 
   return (
     <Wrapper
@@ -25,7 +25,7 @@ const MultipleChoiceList = (props) => {
       meta={meta}
       description={description}
       rest={rest}
-      error={error}
+      error={error || submitError}
       name={input.name}
     >
       {options.map((option) => (
diff --git a/packages/mui-component-mapper/src/common/helpers.js b/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);
 };
diff --git a/packages/mui-component-mapper/src/files/field-array.js b/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>
diff --git a/packages/mui-component-mapper/src/tests/form-fields.test.js b/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);
+        });
       });
     });
   });
diff --git a/packages/suir-component-mapper/src/common/helpers.js b/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) => {
diff --git a/packages/suir-component-mapper/src/common/multiple-choice-list.js b/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'
           }
         })}
diff --git a/packages/suir-component-mapper/src/files/checkbox.js b/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'
           }
         }
diff --git a/packages/suir-component-mapper/src/files/date-picker.js b/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}
diff --git a/packages/suir-component-mapper/src/files/dual-list-select.js b/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
           }
diff --git a/packages/suir-component-mapper/src/files/field-array.js b/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>
diff --git a/packages/suir-component-mapper/src/files/radio.js b/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} />
       ))}
diff --git a/packages/suir-component-mapper/src/files/select.js b/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}
diff --git a/packages/suir-component-mapper/src/files/switch.js b/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
diff --git a/packages/suir-component-mapper/src/files/text-field.js b/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
           }
         }
       />
diff --git a/packages/suir-component-mapper/src/files/textarea.js b/packages/suir-component-mapper/src/files/textarea.js
diff --git a/packages/suir-component-mapper/src/files/time-picker.js b/packages/suir-component-mapper/src/files/time-picker.js
diff --git a/packages/suir-component-mapper/src/tests/form-fields.test.js b/packages/suir-component-mapper/src/tests/form-fields.test.js

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`export const validationError = (meta, validateOnMount) => {`
`2`	`2`	`if (validateOnMount) {`
`3`		`- return meta.error;`
	`3`	`+ return meta.error \|\| meta.submitError;`
`4`	`4`	`}`
`5`	`5`
`6`		`- return meta.touched && meta.error;`
	`6`	`+ return meta.touched && (meta.error \|\| meta.submitError);`
`7`	`7`	`};`