feat(mui): add form error alert

Author: rvsia

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

@@ -2,8 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Grid, Button as MUIButton, Typography } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
+import Alert from '@material-ui/lab/Alert';
+import AlertTitle from '@material-ui/lab/AlertTitle';
 
 import FormTemplate from '@data-driven-forms/common/form-template';
+import clsx from 'clsx';
 
 const useStyles = makeStyles(() => ({
   buttonGroup: {
@@ -86,8 +89,53 @@ Button.propTypes = {
   buttonType: PropTypes.string
 };
 
+const useAlertStyles = makeStyles(() => ({
+  alert: {
+    width: '100%',
+    margin: 8
+  }
+}));
+
+export const FormError = ({ formError, alertProps }) => {
+  const { alert } = useAlertStyles();
+
+  if (typeof formError === 'object' && (formError.title || formError.title)) {
+    const { title, description, TitleProps, className, ...props } = formError;
+
+    return (
+      <Alert severity="error" {...props} {...alertProps} className={clsx(alert, alertProps?.className, className)}>
+        {title && <AlertTitle {...TitleProps}>{title}</AlertTitle>}
+        {description}
+      </Alert>
+    );
+  }
+
+  if (formError) {
+    return (
+      <Alert severity="error" {...alertProps} className={clsx(alert, alertProps?.className)}>
+        {formError}
+      </Alert>
+    );
+  }
+
+  return null;
+};
+
+FormError.propTypes = {
+  formError: PropTypes.any,
+  alertProps: PropTypes.object
+};
+
 const MuiFormTemplate = (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 MuiFormTemplate;

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

@@ -1,7 +1,10 @@
 import React from 'react';
-import { FormRenderer } from '@data-driven-forms/react-form-renderer';
+import { act } from 'react-dom/test-utils';
+import { FormRenderer, FormError } from '@data-driven-forms/react-form-renderer';
 import { mount } from 'enzyme';
 import { Typography } from '@material-ui/core';
+import Alert from '@material-ui/lab/Alert';
+import AlertTitle from '@material-ui/lab/AlertTitle';
 
 import { componentMapper, FormTemplate } from '../';
 
@@ -26,4 +29,85 @@ describe('<FormTemplate />', () => {
 
     expect(wrapper.find(Typography).text()).toEqual('Some title');
   });
+
+  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).text()).toEqual('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(AlertTitle).text()).toEqual('some error title');
+    expect(wrapper.find(Alert).text()).toEqual('some error titlesome description');
+  });
 });