[RFR] Refactor validators to not return translated errors

Makefile

@@ -118,7 +118,7 @@ test-unit: ## launch unit tests
 
 test-unit-watch: ## launch unit tests and watch for changes
 	echo "Running unit tests..."; \
-	yarn -s test-unit; \
+	yarn -s test-unit --watch; \
 
 test-e2e: ## launch end-to-end tests
 	@if [ "$(build)" != "false" ]; then \

examples/simple/src/posts/PostCreate.js

@@ -79,12 +79,12 @@ const PostCreate = ({ permissions, ...props }) => (
                 const errors = {};
                 ['title', 'teaser'].forEach(field => {
                     if (!values[field]) {
-                        errors[field] = ['Required field'];
+                        errors[field] = 'Required field';
                     }
                 });
 
                 if (values.average_note < 0 || values.average_note > 5) {
-                    errors.average_note = ['Should be between 0 and 5'];
+                    errors.average_note = 'Should be between 0 and 5';
                 }
 
                 return errors;

packages/ra-core/src/form/ValidationError.spec.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { render, cleanup } from 'react-testing-library';
+
+import ValidationError from './ValidationError';
+
+const translate = jest.fn(key => key);
+
+jest.mock('../i18n', () => ({
+    useTranslate: () => translate,
+}));
+
+describe('ValidationError', () => {
+    afterEach(() => {
+        cleanup();
+        translate.mockClear();
+    });
+
+    it('It renders the error message translated if it is a string', () => {
+        const { getByText } = render(
+            <ValidationError error="ra.validation.required" />
+        );
+
+        expect(getByText('ra.validation.required')).toBeTruthy();
+        expect(translate).toHaveBeenCalledWith('ra.validation.required', {
+            _: 'ra.validation.required',
+        });
+    });
+
+    it('It renders the error message translated if it is an object, with all its arguments translated as well', () => {
+        const { getByText } = render(
+            <ValidationError
+                error={{
+                    message: 'ra.validation.minValue',
+                    args: { value: 10 },
+                }}
+            />
+        );
+
+        expect(getByText('ra.validation.minValue')).toBeDefined();
+        expect(translate).toHaveBeenCalledWith('ra.validation.minValue', {
+            value: '10',
+        });
+        expect(translate).toHaveBeenCalledWith('10', { _: '10' });
+    });
+});

packages/ra-core/src/form/ValidationError.tsx

@@ -0,0 +1,50 @@
+import React, { FunctionComponent } from 'react';
+import {
+    ValidationErrorMessage,
+    ValidationErrorMessageWithArgs,
+} from './validate';
+import { useTranslate } from '../i18n';
+import { Translate } from '../types';
+
+interface Props {
+    error: ValidationErrorMessage;
+}
+
+const translateArrayArgValue = (translate: Translate, values: any[]) =>
+    values
+        .map(value => translate(value.toString(), { _: value.toString() }))
+        .join(', ');
+
+const translateArgValue = (translate: Translate, argValue: any) => {
+    if (Array.isArray(argValue)) {
+        return translateArrayArgValue(translate, argValue);
+    }
+
+    return translate(argValue.toString(), { _: argValue.toString() });
+};
+
+const translateArgs = (translate: Translate, args: { [key: string]: any }) =>
+    Object.keys(args).reduce(
+        (acc, key) => ({
+            ...acc,
+            [key]: translateArgValue(translate, args[key]),
+        }),
+        {}
+    );
+
+const ValidationError: FunctionComponent<Props> = ({ error }) => {
+    const translate = useTranslate();
+
+    if ((error as ValidationErrorMessageWithArgs).message) {
+        const { message, args } = error as ValidationErrorMessageWithArgs;
+        const { _, ...allArgsButDefault } = args;
+
+        const translatedArgs = translateArgs(translate, allArgsButDefault);
+
+        return <>{translate(message, translatedArgs)}</>;
+    }
+
+    return <>{translate(error as string, { _: error })}</>;
+};
+
+export default ValidationError;

packages/ra-core/src/form/index.ts

@@ -4,6 +4,7 @@ import FormField from './FormField';
 import formMiddleware from './formMiddleware';
 import getDefaultValues from './getDefaultValues';
 import withDefaultValue from './withDefaultValue';
+import ValidationError from './ValidationError';
 
 export {
     addField,
@@ -12,6 +13,7 @@ export {
     formMiddleware,
     getDefaultValues,
     withDefaultValue,
+    ValidationError,
 };
 export { isRequired } from './FormField';
 export * from './validate';

packages/ra-core/src/form/validate.spec.ts

@@ -1,4 +1,5 @@
 import assert from 'assert';
+
 import {
     required,
     minLength,
@@ -12,12 +13,12 @@ import {
 } from './validate';
 
 describe('Validators', () => {
-    const translate = x => x;
     const test = (validator, inputs, message) =>
         assert.deepEqual(
             inputs
-                .map(input => validator(input, null, { translate }))
-                .filter(m => m === message),
+                .map(input => validator(input, null))
+                .filter(error => error === message || error.message === message)
+                .map(error => (error && error.message ? error.message : error)),
             Array(...Array(inputs.length)).map(() => message)
         );
     describe('required', () => {
@@ -42,7 +43,6 @@ describe('Validators', () => {
                 args: undefined,
                 value: null,
                 values: null,
-                translate,
             });
         });
     });
@@ -71,7 +71,6 @@ describe('Validators', () => {
                 args: { min: 5 },
                 value: '12',
                 values: null,
-                translate,
             });
         });
     });
@@ -100,7 +99,6 @@ describe('Validators', () => {
                 args: { max: 10 },
                 value: '12345678901',
                 values: null,
-                translate,
             });
         });
     });
@@ -125,7 +123,6 @@ describe('Validators', () => {
                 args: { min: 10 },
                 value: 0,
                 values: null,
-                translate,
             });
         });
     });
@@ -154,7 +151,6 @@ describe('Validators', () => {
                 args: { max: 10 },
                 value: '11',
                 values: null,
-                translate,
             });
         });
     });
@@ -176,7 +172,6 @@ describe('Validators', () => {
                 args: undefined,
                 value: 'foo',
                 values: null,
-                translate,
             });
         });
     });