Merge pull request #3573 from natrim/noti-form

[RFR] Create/Edit allow changing success message
marmelab · Aug 22, 2019 · 905ebb7 · 905ebb7
2 parents 18fcff0 + f02b843
commit 905ebb7
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 7 deletions.
diff --git a/docs/CreateEdit.md b/docs/CreateEdit.md
@@ -20,6 +20,7 @@ Here are all the props accepted by the `<Create>` and `<Edit>` components:
 * [`title`](#page-title)
 * [`actions`](#actions)
 * [`aside`](#aside-component)
+* [`successMessage`](#success-message)
 * [`undoable`](#undoable) (`<Edit>` only)
 
 Here is the minimal code necessary to display a form to create and edit comments:
@@ -177,6 +178,19 @@ const Aside = ({ record }) => (
 
 **Tip**: Always test that the `record` is defined before using it, as react-admin starts rendering the UI before the API call is over.
 
+### Success message
+
+Once the `dataProvider` returns successfully after save, users see a generic notification ("Element created" / "Element updated"). You can customize this message by passing a `successMessage` prop:
+
+```jsx
+const PostEdit = props => (
+    <Edit successMessage="messages.post_saved" {...props}>
+        ...
+    </Edit>
+```
+
+**Tip**: The message will be translated.
+
 ### Undoable
 
 By default, the Save and Delete actions are undoable, i.e. react-admin only sends the related request to the data provider after a short delay, during which the user can cancel the action. This is part of the "optimistic rendering" strategy of react-admin ; it makes the user interactions more reactive.

diff --git a/packages/ra-core/src/controller/useCreateController.ts b/packages/ra-core/src/controller/useCreateController.ts
@@ -35,6 +35,7 @@ export interface CreateProps {
     match: Match;
     record?: Partial<Record>;
     resource: string;
+    successMessage?: string;
 }
 
 /**
@@ -67,6 +68,7 @@ const useCreateController = (props: CreateProps): CreateControllerProps => {
         record = {},
         hasShow,
         hasEdit,
+        successMessage,
     } = props;
 
     const translate = useTranslate();
@@ -90,9 +92,13 @@ const useCreateController = (props: CreateProps): CreateControllerProps => {
                     onSuccess: onSuccess
                         ? onSuccess
                         : ({ data: newRecord }) => {
-                              notify('ra.notification.created', 'info', {
-                                  smart_count: 1,
-                              });
+                              notify(
+                                  successMessage || 'ra.notification.created',
+                                  'info',
+                                  {
+                                      smart_count: 1,
+                                  }
+                              );
                               redirect(
                                   redirectTo,
                                   basePath,
@@ -113,7 +119,7 @@ const useCreateController = (props: CreateProps): CreateControllerProps => {
                           },
                 }
             ),
-        [basePath, create, notify, redirect]
+        [create, notify, successMessage, redirect, basePath]
     );
 
     const resourceName = translate(`resources.${resource}.name`, {

diff --git a/packages/ra-core/src/controller/useEditController.ts b/packages/ra-core/src/controller/useEditController.ts
@@ -34,6 +34,7 @@ export interface EditControllerProps {
     basePath: string;
     record?: Record;
     version: number;
+    successMessage?: string;
 }
 
 /**
@@ -55,7 +56,7 @@ export interface EditControllerProps {
  */
 const useEditController = (props: EditProps): EditControllerProps => {
     useCheckMinimumRequiredProps('Edit', ['basePath', 'resource'], props);
-    const { basePath, id, resource, undoable = true } = props;
+    const { basePath, id, resource, successMessage, undoable = true } = props;
     const translate = useTranslate();
     const notify = useNotify();
     const redirect = useRedirect();
@@ -95,7 +96,7 @@ const useEditController = (props: EditProps): EditControllerProps => {
                 {
                     onSuccess: () => {
                         notify(
-                            'ra.notification.updated',
+                            successMessage || 'ra.notification.updated',
                             'info',
                             {
                                 smart_count: 1,
@@ -114,7 +115,7 @@ const useEditController = (props: EditProps): EditControllerProps => {
                     undoable,
                 }
             ),
-        [basePath, notify, redirect, undoable, update]
+        [basePath, notify, redirect, undoable, update, successMessage]
     );
 
     return {

diff --git a/packages/ra-ui-materialui/src/detail/Create.js b/packages/ra-ui-materialui/src/detail/Create.js
@@ -65,6 +65,7 @@ Create.propTypes = {
     title: PropTypes.node,
     record: PropTypes.object,
     hasList: PropTypes.bool,
+    successMessage: PropTypes.string,
 };
 
 const useStyles = makeStyles({
@@ -99,6 +100,7 @@ const sanitizeRestProps = ({
     options,
     locale,
     permissions,
+    successMessage,
     ...rest
 }) => rest;
 

diff --git a/packages/ra-ui-materialui/src/detail/Edit.js b/packages/ra-ui-materialui/src/detail/Edit.js
@@ -67,6 +67,7 @@ Edit.propTypes = {
     id: PropTypes.any.isRequired,
     resource: PropTypes.string.isRequired,
     title: PropTypes.node,
+    successMessage: PropTypes.string,
 };
 
 export const useStyles = makeStyles({
@@ -101,6 +102,7 @@ const sanitizeRestProps = ({
     locale,
     permissions,
     undoable,
+    successMessage,
     ...rest
 }) => rest;