Merge pull request #924 from rvsia/addSubmitErrorsToPF4

feat(pf4): add support for submit errors

Author: Hyperkid123

packages/pf4-component-mapper/src/common/form-group.js

@@ -10,7 +10,7 @@ const FormGroup = ({ label, isRequired, helperText, meta, description, hideLabel
     label={!hideLabel && label}
     fieldId={id}
     helperText={(meta.touched && meta.warning) || helperText}
-    helperTextInvalid={meta.error}
+    helperTextInvalid={meta.error || meta.submitError}
     {...showError(meta)}
     {...FormGroupProps}
   >

packages/pf4-component-mapper/src/common/show-error.js

@@ -1,8 +1,12 @@
-const showError = ({ error, touched, warning }) => {
+const showError = ({ error, touched, warning, submitError }) => {
   if (touched && error) {
     return { validated: 'error' };
   }
 
+  if (touched && submitError) {
+    return { validated: 'error' };
+  }
+
   if (touched && warning) {
     return { validated: 'warning' };
   }

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

@@ -75,8 +75,8 @@ const DynamicArray = ({ ...props }) => {
   const { arrayValidator, label, description, fields: formFields, defaultItem, meta, minItems, maxItems, noItemsMessage, ...rest } = useFieldApi(
     props
   );
-  const { dirty, submitFailed, error } = meta;
-  const isError = (dirty || submitFailed) && error && typeof error === 'string';
+  const { dirty, submitFailed, error, submitError } = meta;
+  const isError = (dirty || submitFailed) && (error || submitError) && (typeof error === 'string' || typeof submitError === 'string');
 
   return (
     <FieldArray key={rest.input.name} name={rest.input.name} validate={arrayValidator}>
@@ -104,7 +104,7 @@ const DynamicArray = ({ ...props }) => {
             <GridItem sm={11}>
               {isError && (
                 <FormHelperText isHidden={false} isError={true}>
-                  {error}
+                  {error || submitError}
                 </FormHelperText>
               )}
             </GridItem>

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

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