[RFR] Add Notification multiLine prop

.eslintrc

@@ -23,9 +23,9 @@
             {
                 "paths": [
                     {
-                        "name": "@material-ui/core",
+                        "name": "@mui/material",
                         "importNames": ["makeStyles", "createMuiTheme"],
-                        "message": "Please import from @material-ui/core/styles instead. See https://material-ui.com/guides/minimizing-bundle-size/#option-2 for more information"
+                        "message": "Please import from @mui/material/styles instead. See https://material-ui.com/guides/minimizing-bundle-size/#option-2 for more information"
                     }
                 ]
             }

UPGRADE.md

@@ -118,12 +118,11 @@ Here's how to migrate the *Altering the Form Values before Submitting* example f
 import * as React from 'react';
 import { useCallback } from 'react';
 import { useForm } from 'react-final-form';
-import { SaveButton, Toolbar, useCreate, useRedirect, useNotify } from 'react-admin';
+import { SaveButton, Toolbar, useCreate, useRedirect } from 'react-admin';
 
 const SaveWithNoteButton = ({ handleSubmit, handleSubmitWithRedirect, ...props }) => {
     const [create] = useCreate('posts');
     const redirectTo = useRedirect();
-    const notify = useNotify();
     const { basePath, redirect } = props;
 
     const form = useForm();
@@ -171,9 +170,7 @@ const SaveWithNoteButton = props => {
                 },
                 {
                     onSuccess: ({ data: newRecord }) => {
-                        notify('ra.notification.created', 'info', {
-                            smart_count: 1,
-                        });
+                        notify('ra.notification.created', { messageArgs: { smart_count: 1 } });
                         redirectTo(redirect, basePath, newRecord.id, newRecord);
                     },
                 }

__mocks__/@popperjs/core.ts

@@ -0,0 +1,15 @@
+const mock = () => {
+    const PopperJS = jest.requireActual('@popperjs/core');
+    return {
+        placements: PopperJS.placements,
+        destroy: () => {},
+        scheduleUpdate: () => {},
+        forceUpdate: () => {},
+        render: function (this: any) {
+            return this.$options._renderChildren;
+        },
+    };
+};
+
+export default mock;
+export { mock as createPopper };

cypress/support/CreatePage.js

@@ -21,7 +21,7 @@ export default url => ({
         descInput: '.ql-editor',
         tab: index => `.form-tab:nth-of-type(${index})`,
         title: '#react-admin-title',
-        userMenu: 'button[title="Profile"]',
+        userMenu: 'button[aria-label="Profile"]',
         logout: '.logout',
     },
 

cypress/support/EditPage.js

@@ -11,7 +11,7 @@ export default url => ({
                 return `.ra-input-${name} label`;
             }
             if (type === 'reference-array-input') {
-                return `.ra-input div[role=combobox]`;
+                return `.ra-input div[role=combobox] input`;
             }
             return `.edit-page [name='${name}']`;
         },
@@ -22,7 +22,7 @@ export default url => ({
         cloneButton: '.button-clone',
         tab: index => `.form-tab:nth-of-type(${index})`,
         title: '#react-admin-title',
-        userMenu: 'button[title="Profile"]',
+        userMenu: 'button[aria-label="Profile"]',
         logout: '.logout',
     },
 

cypress/support/ListPage.js

@@ -29,7 +29,7 @@ export default url => ({
         selectAll: '.select-all',
         selectedItem: '.select-item input:checked',
         selectItem: '.select-item input',
-        userMenu: 'button[title="Profile"]',
+        userMenu: 'button[aria-label="Profile"]',
         title: '#react-admin-title',
         headroomUnfixed: '.headroom--unfixed',
         headroomUnpinned: '.headroom--unpinned',

cypress/support/ShowPage.js

@@ -6,7 +6,7 @@ export default (url, initialField = 'title') => ({
         snackbar: 'div[role="alertdialog"]',
         tabs: `.show-tab`,
         tab: index => `.show-tab:nth-of-type(${index})`,
-        userMenu: 'button[title="Profile"]',
+        userMenu: 'button[aria-label="Profile"]',
         logout: '.logout',
     },
 

docs/Actions.md

@@ -641,16 +641,17 @@ const NotifyButton = () => {
 };
 ```
 
-The callback takes 5 arguments:
- - the message to display
- - the level of the notification (`info`, `success` or `warning` - the default is `info`)
- - an `options` object to pass to the `translate` function (because notification messages are translated if your admin has an `i18nProvider`). It is useful for inserting variables into the translation.
- - an `undoable` boolean. Set it to `true` if the notification should contain an "undo" button
- - a `duration` number. Set it to `0` if the notification should not be dismissible.
+The callback takes 6 arguments:
+- The message to display
+- The level of the notification (`info`, `success` or `warning` - the default is `info`)
+- An `options` object to pass to the `translate` function (because notification messages are translated if your admin has an `i18nProvider`). It is useful for inserting variables into the translation.
+- An `undoable` boolean. Set it to `true` if the notification should contain an "undo" button
+- A `duration` number. Set it to `0` if the notification should not be dismissible.
+- A `multiLine` boolean. Set it to `true` if the notification message should be shown in more than one line.
 
 Here are more examples of `useNotify` calls: 
 
-```jsx
+```js
 // notify a warning
 notify(`This is a warning`, 'warning');
 // pass translation arguments
@@ -659,6 +660,17 @@ notify('item.created', 'info', { resource: 'post' });
 notify('Element updated', 'info', undefined, true);
 ```
 
+**Tip**: The callback also allows a signature with only 2 arguments, the message to display and an object with the rest of the arguments
+
+```js
+// notify an undoable success message, with translation arguments
+notify('Element deleted', {
+    type: 'success',
+    undoable: true,
+    messageArgs: { resource: 'post' }
+});
+```
+
 **Tip**: When using `useNotify` as a side effect for an `undoable` Edit form, you MUST set the fourth argument to `true`, otherwise the "undo" button will not appear, and the actual update will never occur.
 
 ```jsx
@@ -669,7 +681,7 @@ const PostEdit = props => {
     const notify = useNotify();
 
     const onSuccess = () => {
-        notify(`Changes saved`, undefined, undefined, true);
+        notify('Changes saved`', { undoable: true });
     };
 
     return (
@@ -841,7 +853,7 @@ const ApproveButton = ({ record }) => {
 +           onSuccess: () => {
                 redirect('/comments');
 -               notify('Comment approved');
-+               notify('Comment approved', 'info', {}, true);
++               notify('Comment approved', { undoable: true });
             },
             onFailure: (error) => notify(`Error: ${error.message}`, 'warning'),
         }
@@ -870,7 +882,7 @@ const ApproveButton = ({ record }) => {
             mutationMode: 'undoable',
             onSuccess: () => {
                 redirect('/comments');
-                notify('Comment approved', 'info', {}, true);
+                notify('Comment approved', { undoable: true });
             },
             onFailure: (error) => notify(`Error: ${error.message}`, 'warning'),
         }
@@ -905,7 +917,7 @@ const ApproveButton = ({ record }) => {
             mutationMode: 'undoable',
             onSuccess: ({ data }) => {
                 redirect('/comments');
-                notify('Comment approved', 'info', {}, true);
+                notify('Comment approved', { undoable: true });
             },
             onFailure: (error) => notify(`Error: ${error.message}`, 'warning'),
         }
@@ -987,7 +999,7 @@ const ApproveButton = ({ record }) => {
     const options = {
         mutationMode: 'undoable',
         onSuccess: ({ data }) => {
-            notify('Comment approved', 'info', {}, true);
+            notify('Comment approved', { undoable: true });
             redirect('/comments');
         },
         onFailure: (error) => notify(`Error: ${error.message}`, 'warning'),

docs/CreateEdit.md

@@ -401,7 +401,7 @@ const PostEdit = props => {
     const redirect = useRedirect();
 
     const onSuccess = () => {
-        notify(`Changes saved`)
+        notify(`Changes saved`);
         redirect('/posts');
         refresh();
     };
@@ -423,13 +423,16 @@ The default `onSuccess` function is:
 ```jsx
 // for the <Create> component:
 () => {
-    notify('ra.notification.created', 'info', { smart_count: 1 });
+    notify('ra.notification.created', { messageArgs: { smart_count: 1 } });
     redirect('edit', basePath, data.id, data);
 }
 
 // for the <Edit> component: 
 () => {
-    notify('ra.notification.updated', 'info', { smart_count: 1 }, mutationMode === 'undoable');
+    notify('ra.notification.created', {
+        messageArgs: { smart_count: 1 },
+        undoable: mutationMode === 'undoable'
+    });
     redirect('list', basePath, data.id, data);
 }
 ```
@@ -448,7 +451,7 @@ const PostEdit = props => {
     const redirect = useRedirect();
 
   const onSuccess = ({ data }) => {
-        notify(`Changes to post "${data.title}" saved`)
+        notify(`Changes to post "${data.title}" saved`);
         redirect('/posts');
         refresh();
     };
@@ -483,7 +486,7 @@ const PostEdit = props => {
     const redirect = useRedirect();
 
     const onFailure = (error) => {
-        notify(`Could not edit post: ${error.message}`)
+        notify(`Could not edit post: ${error.message}`);
         redirect('/posts');
         refresh();
     };
@@ -2225,7 +2228,7 @@ const PostEdit = props => {
         if (error.code == 123) {
             notify('Could not save changes: concurrent edition in progress', 'warning');
         } else {
-            notify('ra.notification.http_error', 'warning')
+            notify('ra.notification.http_error', 'warning');
         }
         redirect('list', props.basePath);
     }

docs/List.md

@@ -489,7 +489,7 @@ const CustomResetViewsButton = ({ selectedIds }) => {
             onSuccess: () => {
                 refresh();
 -               notify('Posts updated');
-+               notify('Posts updated', 'info', '{}, true); // the last argument forces the display of 'undo' in the notification
++               notify('Posts updated', { undoable: true }); // the last argument forces the display of 'undo' in the notification
                 unselectAll('posts');
             },
             onFailure: error => notify('Error: posts not updated', 'warning'),

docs/Theming.md

@@ -999,6 +999,20 @@ export default MyNotification;
 
 **Tip**: if you use the `showNotification` action, then you can define `autoHideDuration` per message as the third parameter of the `showNotification` action creator.
 
+You can also decide to customize the displaing of the message in a single line or in multiple lines by using the `multiLine` prop.
+
+```diff
+// in src/MyNotification.js
+  import { Notification } from 'react-admin';
+
+-  const MyNotification = props => <Notification {...props} autoHideDuration={5000} />;
++  const MyNotification = props => <Notification {...props} autoHideDuration={5000} multiLine />;
+
+  export default MyNotification;
+```
+
+**Tip**: if you use the `showNotification` action, then you can define `multiLine` per message as the fourth parameter of the `showNotification` action creator.
+
 To use this custom notification component, pass it to a custom Layout, as explained above:
 
 ```jsx

examples/crm/package.json

@@ -1,56 +1,56 @@
 {
-  "name": "react-admin-crm",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@material-ui/core": "^4.12.1",
-    "@material-ui/icons": "^4.11.2",
-    "@nivo/bar": "^0.67.0",
-    "@nivo/core": "^0.67.0",
-    "date-fns": "^2.19.0",
-    "faker": "~5.4.0",
-    "lodash": "~4.17.5",
-    "prop-types": "^15.7.2",
-    "ra-data-fakerest": "^3.13.4",
-    "react": "^17.0.0",
-    "react-admin": "^3.15.0",
-    "react-beautiful-dnd": "^13.0.0",
-    "react-dom": "^17.0.0",
-    "react-scripts": "^4.0.1"
-  },
-  "devDependencies": {
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "@types/classnames": "^2.2.9",
-    "@types/faker": "^5.1.7",
-    "@types/jest": "^26.0.19",
-    "@types/lodash": "~4.14.168",
-    "@types/react": "^17.0.20",
-    "@types/react-beautiful-dnd": "^13.0.0",
-    "@types/react-dom": "^17.0.9",
-    "rewire": "^5.0.0",
-    "source-map-explorer": "^2.0.0",
-    "typescript": "^4.4.0",
-    "web-vitals": "^1.0.1"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "node ./build.js",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "homepage": ".",
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
+    "name": "react-admin-crm",
+    "version": "0.1.0",
+    "private": true,
+    "dependencies": {
+        "@mui/material": "^5.0.2",
+        "@mui/icons-material": "^5.0.1",
+        "@nivo/bar": "^0.67.0",
+        "@nivo/core": "^0.67.0",
+        "date-fns": "^2.19.0",
+        "faker": "~5.4.0",
+        "lodash": "~4.17.5",
+        "prop-types": "^15.7.2",
+        "ra-data-fakerest": "^3.13.4",
+        "react": "^17.0.0",
+        "react-admin": "^3.15.0",
+        "react-beautiful-dnd": "^13.0.0",
+        "react-dom": "^17.0.0",
+        "react-scripts": "^4.0.1"
+    },
+    "devDependencies": {
+        "@testing-library/jest-dom": "^5.11.4",
+        "@testing-library/react": "^11.1.0",
+        "@testing-library/user-event": "^12.1.10",
+        "@types/classnames": "^2.2.9",
+        "@types/faker": "^5.1.7",
+        "@types/jest": "^26.0.19",
+        "@types/lodash": "~4.14.168",
+        "@types/react": "^17.0.20",
+        "@types/react-beautiful-dnd": "^13.0.0",
+        "@types/react-dom": "^17.0.9",
+        "rewire": "^5.0.0",
+        "source-map-explorer": "^2.0.0",
+        "typescript": "^4.4.0",
+        "web-vitals": "^1.0.1"
+    },
+    "scripts": {
+        "start": "react-scripts start",
+        "build": "node ./build.js",
+        "test": "react-scripts test",
+        "eject": "react-scripts eject"
+    },
+    "homepage": ".",
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    }
 }