[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 \

UPGRADE.md

@@ -219,4 +219,57 @@ const App = () => (
         // ...
     </Admin>
 );
-```
+```
+
+## Validators Should Return Non-Translated Messages
+
+Form validators used to return translated error messages - that's why they received the field `props` as argument, including the `translate` function. They don't receive these props anymore, and they must return unstranslated messages instead - react-admin translates validation messages afterwards.
+
+```diff
+// in validators/required.js
+-const required = () => (value, allValues, props) =>
++const required = () => (value, allValues) =>
+    value
+        ? undefined
+-       : props.translate('myroot.validation.required');
++       : 'myroot.validation.required';
+```
+
+In case the error message depends on a variable, you can return an object `{ message, args }` instead of a message string:
+
+```diff
+-const minLength = (min) => (value, allValues, props) => 
++const minLength = (min) => (value, allValues) => 
+    value.length >= min
+        ? undefined
+-       : props.translate('myroot.validation.minLength', { min });
++       : { message: 'myroot.validation.minLength', args: { min } };
+```
+
+React-admin core validators have been modified so you don't have to change anything when using them.
+
+```jsx
+import {
+    required,
+    minLength,
+    maxLength,
+    minValue,
+    number,
+    email,
+} from 'react-admin';
+
+// no change vs 2.x
+const validateFirstName = [required(), minLength(2), maxLength(15)];
+const validateEmail = email();
+const validateAge = [number(), minValue(18)];
+
+export const UserCreate = (props) => (
+    <Create {...props}>
+        <SimpleForm>
+            <TextInput label="First Name" source="firstName" validate={validateFirstName} />
+            <TextInput label="Email" source="email" validate={validateEmail} />
+            <TextInput label="Age" source="age" validate={validateAge}/>
+        </SimpleForm>
+    </Create>
+);
+```

docs/CreateEdit.md

@@ -565,13 +565,46 @@ React-admin will combine all the input-level functions into a single function lo
 
 Input validation functions receive the current field value, and the values of all fields of the current record. This allows for complex validation scenarios (e.g. validate that two passwords are the same).
 
-**Tip**: Validator functions receive the form `props` as third parameter, including the `translate` function. This lets you build internationalized validators:
+**Tip**: If your admin has multi-language support, validator functions should return message *identifiers* rather than messages themselves. React-admin automatically passes these identifiers to the translation function: 
 
 ```jsx
-const required = (message = 'myroot.validation.required') =>
-    (value, allValues, props) => value ? undefined : props.translate(message);
+// in validators/required.js
+const required = () => (value, allValues, props) =>
+    value
+        ? undefined
+        : 'myroot.validation.required';
+
+// in i18n/en.json
+export default {
+    myroot: {
+        validation: {
+            required: 'Required field',
+        }
+    }
+}
 ```
 
+If the translation depends on a variable, the validator can return an object rather than a translation identifier:
+
+```jsx
+// in validators/minLength.js
+const minLength = (min) => (value, allValues, props) => 
+    value.length >= min
+        ? undefined
+        : { message: 'myroot.validation.minLength', args: { min } };
+
+// in i18n/en.js
+export default {
+    myroot: {
+        validation: {
+            minLength: 'Must be %{min} characters at least',
+        }
+    }
+}
+```
+
+See the [Translation documentation](Translation.md#translating-error-messages) for details.
+
 **Tip**: Make sure to define validation functions or array of functions in a variable, instead of defining them directly in JSX. This can result in a new function or array at every render, and trigger infinite rerender.
 
 {% raw %}

docs/Translation.md

@@ -276,6 +276,46 @@ const App = () => (
 );
 ```
 
+## Translating Error Messages
+
+In Create and Edit views, forms can use custom validators. These validator functions should return translation keys rather than translated messages. React-admin automatically passes these identifiers to the translation function: 
+
+```jsx
+// in validators/required.js
+const required = () => (value, allValues, props) =>
+    value
+        ? undefined
+        : 'myroot.validation.required';
+
+// in i18n/en.json
+export default {
+    myroot: {
+        validation: {
+            required: 'Required field',
+        }
+    }
+}
+```
+
+If the translation depends on a variable, the validator can return an object rather than a translation identifier:
+
+```jsx
+// in validators/minLength.js
+const minLength = (min) => (value, allValues, props) => 
+    value.length >= min
+        ? undefined
+        : { message: 'myroot.validation.minLength', args: { min } };
+
+// in i18n/en.js
+export default {
+    myroot: {
+        validation: {
+            minLength: 'Must be %{min} characters at least',
+        }
+    }
+}
+```
+
 ## `useTranslate` Hook
 
 If you need to translate messages in your own components, React-admin provides a `useTranslate` hook, which returns the `translate` function:

examples/simple/src/comments/PostReferenceInput.js

@@ -49,28 +49,37 @@ const PostReferenceInput = props => {
         );
     }, [dispatch, newPostId]);
 
-    const handleNewClick = useCallback(event => {
-        event.preventDefault();
-        setShowCreateDialog(true);
-    }, []);
+    const handleNewClick = useCallback(
+        event => {
+            event.preventDefault();
+            setShowCreateDialog(true);
+        },
+        [setShowCreateDialog]
+    );
 
-    const handleShowClick = useCallback(event => {
-        event.preventDefault();
-        setShowPreviewDialog(true);
-    }, []);
+    const handleShowClick = useCallback(
+        event => {
+            event.preventDefault();
+            setShowPreviewDialog(true);
+        },
+        [setShowPreviewDialog]
+    );
 
     const handleCloseCreate = useCallback(() => {
         setShowCreateDialog(false);
-    }, []);
+    }, [setShowCreateDialog]);
 
     const handleCloseShow = useCallback(() => {
         setShowPreviewDialog(false);
-    }, []);
+    }, [setShowPreviewDialog]);
 
-    const handleSave = useCallback(post => {
-        setShowCreateDialog(false);
-        setNewPostId(post.id);
-    }, []);
+    const handleSave = useCallback(
+        post => {
+            setShowCreateDialog(false);
+            setNewPostId(post.id);
+        },
+        [setShowCreateDialog, setNewPostId]
+    );
 
     return (
         <Fragment>

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;