Respect validationMode in React material table cells

packages/examples-react/src/App.css

@@ -31,6 +31,7 @@ body {
   justify-content: center;
   align-items: center;
   margin-top: 20px;
+  gap: 20px;
 }
 .tools .example-selector h4 {
   margin: 0 10px 0 0;

packages/examples-react/src/App.tsx

@@ -29,6 +29,7 @@ import { ExampleDescription } from '@jsonforms/examples';
 import {
   JsonFormsCellRendererRegistryEntry,
   JsonFormsRendererRegistryEntry,
+  ValidationMode,
 } from '@jsonforms/core';
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 import Highlight from 'react-highlight';
@@ -85,6 +86,9 @@ const App = ({
     getProps(currentExample, cells, renderers)
   );
   const [showPanel, setShowPanel] = useState<boolean>(true);
+  const [validationMode, setValidationMode] = useState<
+    ValidationMode | undefined
+  >(undefined);
   const schemaAsString = useMemo(
     () => JSON.stringify(exampleProps.schema, null, 2),
     [exampleProps.schema]
@@ -145,6 +149,28 @@ const App = ({
                   )
                 )}
               </select>
+              <h4>Select ValidationMode:</h4>
+              <select
+                value={validationMode}
+                onChange={(ev) =>
+                  setValidationMode(
+                    ev.currentTarget.value as ValidationMode | undefined
+                  )
+                }
+              >
+                <option value={undefined} label='Default'>
+                  Default
+                </option>
+                <option value='NoValidation' label='NoValidation'>
+                  NoValidation
+                </option>
+                <option value='ValidateAndHide' label='ValidateAndHide'>
+                  ValidateAndHide
+                </option>
+                <option value='ValidateAndShow' label='ValidateAndShow'>
+                  ValidateAndShow
+                </option>
+              </select>
             </div>
             <div className='toggle-panel'>
               <input
@@ -202,6 +228,7 @@ const App = ({
                   <JsonForms
                     key={currentIndex}
                     {...exampleProps}
+                    validationMode={validationMode}
                     onChange={({ data }) => changeData(data)}
                   />
                 </Wrapper>

packages/material-renderers/src/complex/MaterialTableControl.tsx

@@ -47,7 +47,7 @@ import {
 import {
   ArrayLayoutProps,
   ControlElement,
-  errorsAt,
+  errorAt,
   formatErrorMessage,
   JsonSchema,
   Paths,
@@ -177,11 +177,10 @@ const ctxToNonEmptyCellProps = (
     (ownProps.schema.type === 'object' ? '.' + ownProps.propName : '');
   const errors = formatErrorMessage(
     union(
-      errorsAt(
+      errorAt(
         path,
-        ownProps.schema,
-        (p) => p === path
-      )(ctx.core.errors).map((error: ErrorObject) => error.message)
+        ownProps.schema
+      )(ctx.core).map((error: ErrorObject) => error.message)
     )
   );
   return {

packages/material-renderers/test/renderers/MaterialTableControl.test.tsx

@@ -0,0 +1,228 @@
+/*
+  The MIT License
+
+  Copyright (c) 2017-2019 EclipseSource Munich
+  https://github.com/eclipsesource/jsonforms
+
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  THE SOFTWARE.
+*/
+import { JsonSchema7 } from '@jsonforms/core';
+import * as React from 'react';
+
+import { materialCells, materialRenderers } from '../../src';
+import Enzyme, { mount, ReactWrapper } from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import { JsonForms } from '@jsonforms/react';
+import { FormHelperText } from '@mui/material';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+const dataWithEmptyMessage = {
+  nested: [
+    {
+      message: '',
+    },
+  ],
+};
+
+const dataWithNullMessage = {
+  nested: [
+    {
+      message: null as string | null,
+    },
+  ],
+};
+
+const dataWithUndefinedMessage = {
+  nested: [
+    {
+      message: undefined as string | undefined,
+    },
+  ],
+};
+
+const schemaWithMinLength: JsonSchema7 = {
+  type: 'object',
+  properties: {
+    nested: {
+      type: 'array',
+      items: {
+        type: 'object',
+        properties: {
+          message: { type: 'string', minLength: 3 },
+          done: { type: 'boolean' },
+        },
+      },
+    },
+  },
+};
+
+const schemaWithRequired: JsonSchema7 = {
+  type: 'object',
+  properties: {
+    nested: {
+      type: 'array',
+      items: {
+        type: 'object',
+        properties: {
+          message: { type: 'string' },
+          done: { type: 'boolean' },
+        },
+        required: ['message'],
+      },
+    },
+  },
+};
+
+const uischema = {
+  type: 'VerticalLayout',
+  elements: [
+    {
+      type: 'Control',
+      scope: '#/properties/nested',
+    },
+  ],
+};
+
+describe('Material table control', () => {
+  let wrapper: ReactWrapper;
+
+  const validSchemaDataPairs = [
+    {
+      schema: schemaWithRequired,
+      data: dataWithEmptyMessage,
+    },
+    {
+      schema: schemaWithMinLength,
+      data: dataWithUndefinedMessage,
+    },
+  ];
+
+  const invalidSchemaDataPairs = [
+    {
+      schema: schemaWithRequired,
+      data: dataWithNullMessage,
+      message: 'must be string',
+    },
+    {
+      schema: schemaWithRequired,
+      data: dataWithUndefinedMessage,
+      message: "must have required property 'message'",
+    },
+    {
+      schema: schemaWithMinLength,
+      data: dataWithEmptyMessage,
+      message: 'must NOT have fewer than 3 characters',
+    },
+  ];
+
+  afterEach(() => wrapper.unmount());
+
+  it.each(invalidSchemaDataPairs)(
+    'should show error message for invalid property with validation mode ValidateAndShow',
+    ({ schema, data, message }) => {
+      wrapper = mount(
+        <JsonForms
+          data={data}
+          schema={schema}
+          uischema={uischema}
+          renderers={materialRenderers}
+          cells={materialCells}
+          validationMode='ValidateAndShow'
+        />
+      );
+      const messageFormHelperText = wrapper.find(FormHelperText).at(0);
+      expect(messageFormHelperText.text()).toBe(message);
+      expect(messageFormHelperText.props().error).toBe(true);
+
+      const doneFormHelperText = wrapper.find(FormHelperText).at(1);
+      expect(doneFormHelperText.text()).toBe('');
+      expect(doneFormHelperText.props().error).toBe(false);
+    }
+  );
+
+  it.each(invalidSchemaDataPairs)(
+    'should not show error message for invalid property with validation mode ValidateAndHide',
+    ({ schema, data }) => {
+      wrapper = mount(
+        <JsonForms
+          data={data}
+          schema={schema}
+          uischema={uischema}
+          renderers={materialRenderers}
+          cells={materialCells}
+          validationMode='ValidateAndHide'
+        />
+      );
+      const messageFormHelperText = wrapper.find(FormHelperText).at(0);
+      expect(messageFormHelperText.text()).toBe('');
+      expect(messageFormHelperText.props().error).toBe(false);
+
+      const doneFormHelperText = wrapper.find(FormHelperText).at(1);
+      expect(doneFormHelperText.text()).toBe('');
+      expect(doneFormHelperText.props().error).toBe(false);
+    }
+  );
+
+  it.each(invalidSchemaDataPairs)(
+    'should not show error message for invalid property with validation mode NoValidation',
+    ({ schema, data }) => {
+      wrapper = mount(
+        <JsonForms
+          data={data}
+          schema={schema}
+          uischema={uischema}
+          renderers={materialRenderers}
+          cells={materialCells}
+          validationMode='NoValidation'
+        />
+      );
+      const messageFormHelperText = wrapper.find(FormHelperText).at(0);
+      expect(messageFormHelperText.text()).toBe('');
+      expect(messageFormHelperText.props().error).toBe(false);
+
+      const doneFormHelperText = wrapper.find(FormHelperText).at(1);
+      expect(doneFormHelperText.text()).toBe('');
+      expect(doneFormHelperText.props().error).toBe(false);
+    }
+  );
+
+  it.each(validSchemaDataPairs)(
+    'should not show error message for valid property',
+    ({ schema, data }) => {
+      wrapper = mount(
+        <JsonForms
+          data={data}
+          schema={schema}
+          uischema={uischema}
+          renderers={materialRenderers}
+          cells={materialCells}
+          validationMode='ValidateAndShow'
+        />
+      );
+      const messageFormHelperText = wrapper.find(FormHelperText).at(0);
+      expect(messageFormHelperText.text()).toBe('');
+      expect(messageFormHelperText.props().error).toBe(false);
+
+      const doneFormHelperText = wrapper.find(FormHelperText).at(1);
+      expect(doneFormHelperText.text()).toBe('');
+      expect(doneFormHelperText.props().error).toBe(false);
+    }
+  );
+});

packages/material-renderers/test/renderers/util.ts

@@ -25,6 +25,7 @@
 
 import {
   createAjv,
+  JsonFormsCore,
   JsonSchema,
   TesterContext,
   Translator,
@@ -37,7 +38,7 @@ export const initCore = (
   schema: JsonSchema,
   uischema: UISchemaElement,
   data?: any
-) => {
+): JsonFormsCore => {
   return { schema, uischema, data, ajv: createAjv() };
 };