Merge pull request #1059 from rvsia/addFormAlerts

Add form alerts and add implementation for PF4

Author: rvsia

packages/common/src/form-template/form-template.js

@@ -121,6 +121,8 @@ const FormTemplate = ({
   descriptionProps,
   buttonGroupProps,
   buttonsProps,
+  alertProps,
+  BeforeError,
   ...rest
 }) => {
   const {
@@ -137,6 +139,14 @@ const FormTemplate = ({
           {description && <Description {...descriptionProps}>{description}</Description>}
         </Header>
       )}
+      {BeforeError && (
+        <FormSpy subscription={{ submitError: true, error: true }}>
+          {() => {
+            const state = getState();
+            return <BeforeError formError={state.error || state.submitError} formSpyProps={state} alertProps={alertProps} />;
+          }}
+        </FormSpy>
+      )}
       {formFields}
       {showFormControls && (
         <FormSpy>
@@ -174,7 +184,9 @@ FormTemplate.propTypes = {
   titleProps: PropTypes.object,
   descriptionProps: PropTypes.object,
   buttonGroupProps: PropTypes.object,
-  buttonsProps: PropTypes.object
+  buttonsProps: PropTypes.object,
+  BeforeError: PropTypes.elementType,
+  alertProps: PropTypes.object
 };
 
 FormTemplate.defaultProps = {

packages/pf4-component-mapper/src/form-template/form-template.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import FormTemplate from '@data-driven-forms/common/form-template';
 
-import { Button as PF4Button, ActionGroup, Form, TextContent, Text, TextVariants } from '@patternfly/react-core';
+import { Button as PF4Button, ActionGroup, Form, TextContent, Text, TextVariants, Alert } from '@patternfly/react-core';
 
 export const Button = ({ label, bsStyle, children, disabled, buttonType, ...props }) => (
   <PF4Button variant={buttonType === 'cancel' ? 'link' : bsStyle || 'secondary'} isDisabled={disabled} {...props}>
@@ -50,8 +50,39 @@ Description.propTypes = {
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
 };
 
+export const FormError = ({ formError, alertProps }) => {
+  if (typeof formError === 'object' && formError.title) {
+    const { title, description, ...props } = formError;
+
+    return (
+      <Alert variant="danger" isInline title={title} {...props} {...alertProps}>
+        {description}
+      </Alert>
+    );
+  }
+
+  if (typeof formError === 'string') {
+    return <Alert variant="danger" isInline title={formError} {...alertProps} />;
+  }
+
+  return null;
+};
+
+FormError.propTypes = {
+  formError: PropTypes.any,
+  alertProps: PropTypes.object
+};
+
 const PF4FormTemplate = (props) => (
-  <FormTemplate FormWrapper={Form} Button={Button} ButtonGroup={ButtonGroup} Title={Title} Description={Description} {...props} />
+  <FormTemplate
+    BeforeError={FormError}
+    FormWrapper={Form}
+    Button={Button}
+    ButtonGroup={ButtonGroup}
+    Title={Title}
+    Description={Description}
+    {...props}
+  />
 );
 
 export default PF4FormTemplate;

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

@@ -1,16 +1,27 @@
 import React from 'react';
-import { FormRenderer, Form, FormSpy } from '@data-driven-forms/react-form-renderer';
+import { act } from 'react-dom/test-utils';
+import { FormRenderer, Form, FormSpy, FormError } from '@data-driven-forms/react-form-renderer';
 import { mount } from 'enzyme';
+import { Alert } from '@patternfly/react-core';
+
 import FormTemplate, { Title, Description, Button } from '../form-template';
 import RenderWithProvider from '../../../../__mocks__/with-provider';
+import componentMapper from '../component-mapper';
 
 describe('FormTemplate PF4 Common', () => {
   let initialProps;
   let ContextWrapper;
   let formOptions;
 
   beforeEach(() => {
-    formOptions = { onSubmit: jest.fn(), onReset: jest.fn(), onCancel: jest.fn(), canReset: true, pristine: true };
+    formOptions = {
+      onSubmit: jest.fn(),
+      onReset: jest.fn(),
+      onCancel: jest.fn(),
+      canReset: true,
+      pristine: true,
+      getState: jest.fn().mockImplementation(() => ({}))
+    };
     ContextWrapper = ({ children, ...props }) => (
       <RenderWithProvider value={{ formOptions }}>
         <Form onSubmit={jest.fn()}>{() => children}</Form>
@@ -37,7 +48,7 @@ describe('FormTemplate PF4 Common', () => {
     expect(wrapper.find(Title)).toHaveLength(1);
     expect(wrapper.find(Description)).toHaveLength(0);
     expect(wrapper.find(Button)).toHaveLength(2);
-    expect(wrapper.find(FormSpy)).toHaveLength(1);
+    expect(wrapper.find(FormSpy)).toHaveLength(2);
   });
 
   it('should hide buttons', () => {
@@ -48,7 +59,7 @@ describe('FormTemplate PF4 Common', () => {
     );
 
     expect(wrapper.find(Button)).toHaveLength(0);
-    expect(wrapper.find(FormSpy)).toHaveLength(0);
+    expect(wrapper.find(FormSpy)).toHaveLength(1);
   });
 
   it('should render description', () => {
@@ -158,4 +169,86 @@ describe('FormTemplate PF4 Common', () => {
 
     expect(onCancel).toHaveBeenCalledWith(expectedValues);
   });
+
+  it('show form alert message', async () => {
+    const wrapper = mount(
+      <FormRenderer
+        schema={{
+          fields: [
+            {
+              component: 'text-field',
+              name: 'field'
+            }
+          ]
+        }}
+        validate={({ field }) => {
+          if (field) {
+            return { [FormError]: 'some error title' };
+          }
+        }}
+        onSubmit={jest.fn()}
+        FormTemplate={FormTemplate}
+        componentMapper={componentMapper}
+      />
+    );
+
+    expect(wrapper.find(Alert)).toHaveLength(0);
+
+    await act(async () => {
+      wrapper
+        .find('input')
+        .first()
+        .instance().value = 'cats';
+      wrapper
+        .find('input')
+        .first()
+        .simulate('change');
+    });
+    wrapper.update();
+
+    expect(wrapper.find(Alert)).toHaveLength(1);
+    expect(wrapper.find(Alert).props().title).toEqual('some error title');
+    expect(wrapper.find(Alert).text()).toEqual('Danger alert:some error title');
+  });
+
+  it('show form alert message as object', async () => {
+    const wrapper = mount(
+      <FormRenderer
+        schema={{
+          fields: [
+            {
+              component: 'text-field',
+              name: 'field'
+            }
+          ]
+        }}
+        validate={({ field }) => {
+          if (field) {
+            return { [FormError]: { title: 'some error title', description: 'some description' } };
+          }
+        }}
+        onSubmit={jest.fn()}
+        FormTemplate={FormTemplate}
+        componentMapper={componentMapper}
+      />
+    );
+
+    expect(wrapper.find(Alert)).toHaveLength(0);
+
+    await act(async () => {
+      wrapper
+        .find('input')
+        .first()
+        .instance().value = 'cats';
+      wrapper
+        .find('input')
+        .first()
+        .simulate('change');
+    });
+    wrapper.update();
+
+    expect(wrapper.find(Alert)).toHaveLength(1);
+    expect(wrapper.find(Alert).props().title).toEqual('some error title');
+    expect(wrapper.find(Alert).text()).toEqual('Danger alert:some error titlesome description');
+  });
 });

packages/pf4-component-mapper/src/tests/wizard/step-buttons.test.js

@@ -328,7 +328,7 @@ describe('<WizardSTepButtons', () => {
     });
   });
 
-  it.only('conditional submit step', () => {
+  it('conditional submit step', () => {
     const submit = jest.fn();
     const schema = {
       fields: [

packages/react-form-renderer/src/form-error/form-error.d.ts

@@ -0,0 +1,3 @@
+export const FormError: 'FINAL_FORM/form-error'
+
+export default FormError;

packages/react-form-renderer/src/form-error/form-error.js

@@ -0,0 +1,3 @@
+import { FORM_ERROR } from 'final-form';
+
+export default FORM_ERROR;

packages/react-form-renderer/src/form-error/index.d.ts

@@ -0,0 +1 @@
+export { default } from './form-error';

packages/react-form-renderer/src/form-error/index.js

@@ -0,0 +1 @@
+export { default } from './form-error';

packages/react-form-renderer/src/index.js

@@ -8,6 +8,7 @@ export { default as FieldProvider } from './field-provider';
 export { default as FormRenderer } from './form-renderer';
 export { default as FormSpy } from './form-spy';
 export { default as Form } from './form';
+export { default as FormError } from './form-error';
 export { default as parseCondition } from './parse-condition';
 export { default as RendererContext } from './renderer-context';
 export { default as schemaErrors } from './schema-errors';

packages/react-renderer-demo/src/pages/components/form-template.md

@@ -56,6 +56,14 @@ import { FormTemplate } from '@data-driven-forms/pf4-component-mapper'
 
 ### Props
 
+#### alertProps
+
+*object*
+
+Props passed to `FormError` alert component.
+
+---
+
 #### buttonClassName
 
 *string*