fix: mapStateToCellProps should use translated error messages

mapStateToCellProps is now also able to translate error messages, enabling
localized error messages in cells.

Co-authored-by: Stefan Dirix <[email protected]>

Author: codefactor

packages/core/src/util/cell.ts

@@ -24,8 +24,7 @@
 */
 
 import isEmpty from 'lodash/isEmpty';
-import union from 'lodash/union';
-import type { JsonFormsCellRendererRegistryEntry } from '../reducers';
+import { getErrorTranslator, JsonFormsCellRendererRegistryEntry } from '../reducers';
 import {
   getAjv,
   getConfig,
@@ -35,10 +34,7 @@ import {
   getTranslator,
 } from '../reducers';
 import type { AnyAction, Dispatch } from './type';
-import {
-  formatErrorMessage,
-  Resolve,
-} from './util';
+import { Resolve } from './util';
 import {
   isInherentlyEnabled,
   isVisible,
@@ -53,9 +49,12 @@ import {
   OwnPropsOfEnum,
   StatePropsOfScopedRenderer,
 } from './renderer';
+import {
+  getCombinedErrorMessage,
+  getI18nKeyPrefix,
+} from '../i18n';
 import type { JsonFormsState } from '../store';
 import type { JsonSchema } from '../models';
-import { getI18nKeyPrefix } from '../i18n';
 
 export type { JsonFormsCellRendererRegistryEntry };
 
@@ -148,9 +147,9 @@ export const mapStateToCellProps = (
     );
   }
 
-  const errors = formatErrorMessage(
-    union(getErrorAt(path, schema)(state).map(error => error.message))
-  );
+  const t = getTranslator()(state);
+  const te = getErrorTranslator()(state);
+  const errors = getCombinedErrorMessage(getErrorAt(path, schema)(state), te, t, schema, uischema, path);
   const isValid = isEmpty(errors);
 
   return {

packages/core/test/util/cell.test.ts

@@ -36,9 +36,12 @@ import { UPDATE_DATA, UpdateAction } from '../../src/actions';
 import configureStore from 'redux-mock-store';
 import {
   ControlElement,
+  createAjv,
   JsonFormsState,
+  JsonSchema,
   RuleEffect,
-  UISchemaElement
+  UISchemaElement,
+  validate,
 } from '../../src';
 import { enumToEnumOptionMapper } from '../../src/util/renderer';
 
@@ -270,6 +273,29 @@ test('mapStateToCellProps - id', t => {
   t.is(props.id, '#/properties/firstName');
 });
 
+test('mapStateToCellProps - translated error', t => {
+  const ownProps = {
+    uischema: coreUISchema,
+    id: '#/properties/firstName',
+    path: 'firstName'
+  };
+  const state = createState(coreUISchema);
+  const schema = state.jsonforms.core?.schema as JsonSchema;
+  const data = state.jsonforms.core?.data as any;
+  // mark firstName as required, delete the value from data, then get errors from ajv from the compiled schema
+  schema.required = ["firstName"];
+  delete data.firstName;
+  const ajv = createAjv();
+  const v = ajv.compile(schema);
+  state.jsonforms.core!.errors = validate(v, data);
+  // add a mock i18n state to verify that the error gets translated
+  state.jsonforms.i18n = {
+    translateError: error => `i18n-error:${error.keyword}`
+  };
+  const props = mapStateToCellProps(state, ownProps);
+  t.is(props.errors, 'i18n-error:required');
+});
+
 test('mapStateToEnumCellProps - set default options for dropdown list', t => {
   const uischema: ControlElement = {
     type: 'Control',