feat(pf4): add FormLevel alert

Author: rvsia

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');
+  });
 });