From 97af74b4f569f142f18cf4c1727ff8c4ef26340a Mon Sep 17 00:00:00 2001
From: Gildas Garcia <gildas.garcia@gmail.com>
Date: Tue, 8 Jan 2019 10:13:30 +0100
Subject: [PATCH] [RFR] Make Confirm translatable

---
 docs/List.md                                  |  4 ++++
 packages/ra-language-english/index.js         |  1 +
 packages/ra-language-french/index.js          |  1 +
 .../ra-ui-materialui/src/layout/Confirm.js    | 21 ++++++++++++-------
 4 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/docs/List.md b/docs/List.md
index 39f877ccbc8..96f1d74b36c 100644
--- a/docs/List.md
+++ b/docs/List.md
@@ -338,6 +338,10 @@ export default connect(undefined, { crudUpdateMany })(ResetViewsButton);
 
 **Tip**: `<Confirm>` leverages material-ui's `<Dialog>` component to implement a confirmation popup. Feel free to use it in your admins!
 
+**Tip**: `<Confirm>` text props such as `title` and `content` are translatable. You can pass them translation keys.
+
+**Tip**: You can customize the text of the two `<Confirm>` component buttons using the `cancel` and `confirm` prop which accepts translation keys too.
+
 **Tip**: React-admin doesn't use the `<Confirm>` component internally, because deletes and updates are applied locally immediately, then dispatched to the server after a few seconds, unless the user chooses to undo the modification. That's what we call optimistic rendering. You can do the same for the `ResetViewsButton` by wrapping the `crudUpdateMany()` action creator inside a `startUndoable()` action creator, as follows:
 
 ```jsx
diff --git a/packages/ra-language-english/index.js b/packages/ra-language-english/index.js
index 27f1bfc753d..e1d23492ca4 100644
--- a/packages/ra-language-english/index.js
+++ b/packages/ra-language-english/index.js
@@ -8,6 +8,7 @@ module.exports = {
             cancel: 'Cancel',
             clear_input_value: 'Clear value',
             clone: 'Clone',
+            confirm: 'Confirm',
             create: 'Create',
             delete: 'Delete',
             edit: 'Edit',
diff --git a/packages/ra-language-french/index.js b/packages/ra-language-french/index.js
index 530b30a2be2..134a601147c 100644
--- a/packages/ra-language-french/index.js
+++ b/packages/ra-language-french/index.js
@@ -9,6 +9,7 @@ module.exports = {
             cancel: 'Annuler',
             clear_input_value: 'Vider le champ',
             clone: 'Dupliquer',
+            confirm: 'Confirmer',
             create: 'Créer',
             delete: 'Supprimer',
             edit: 'Éditer',
diff --git a/packages/ra-ui-materialui/src/layout/Confirm.js b/packages/ra-ui-materialui/src/layout/Confirm.js
index 95f8afd3da5..8e615833522 100644
--- a/packages/ra-ui-materialui/src/layout/Confirm.js
+++ b/packages/ra-ui-materialui/src/layout/Confirm.js
@@ -11,6 +11,8 @@ import { fade } from '@material-ui/core/styles/colorManipulator';
 import ActionCheck from '@material-ui/icons/CheckCircle';
 import AlertError from '@material-ui/icons/ErrorOutline';
 import classnames from 'classnames';
+import compose from 'recompose/compose';
+import { translate } from 'ra-core';
 
 const styles = theme => ({
     confirmPrimary: {
@@ -56,20 +58,21 @@ const Confirm = ({
     onConfirm,
     onClose,
     classes,
+    translate,
 }) => (
     <Dialog
         open={isOpen}
         onClose={onClose}
         aria-labelledby="alert-dialog-title"
     >
-        <DialogTitle id="alert-dialog-title">{title}</DialogTitle>
+        <DialogTitle id="alert-dialog-title">{translate(title, { _: title })}</DialogTitle>
         <DialogContent>
-            <DialogContentText>{content}</DialogContentText>
+            <DialogContentText>{translate(content, { _: content })}</DialogContentText>
         </DialogContent>
         <DialogActions>
             <Button onClick={onClose}>
                 <AlertError className={classes.iconPaddingStyle} />
-                {cancel}
+                {translate(cancel, { _: cancel })}
             </Button>
             <Button
                 onClick={onConfirm}
@@ -80,7 +83,7 @@ const Confirm = ({
                 autoFocus
             >
                 <ActionCheck className={classes.iconPaddingStyle} />
-                {confirm}
+                {translate(confirm, { _: confirm })}
             </Button>
         </DialogActions>
     </Dialog>
@@ -96,14 +99,18 @@ Confirm.propTypes = {
     onClose: PropTypes.func.isRequired,
     onConfirm: PropTypes.func.isRequired,
     title: PropTypes.string.isRequired,
+    translate: PropTypes.func.isRequired,
 };
 
 Confirm.defaultProps = {
-    cancel: 'Cancel',
+    cancel: 'ra.action.cancel',
     classes: {},
-    confirm: 'Confirm',
+    confirm: 'ra.action.confirm',
     confirmColor: 'primary',
     isOpen: false,
 };
 
-export default withStyles(styles)(Confirm);
+export default compose(
+    withStyles(styles),
+    translate
+)(Confirm);