Refactor customToast

.changeset/chilled-eagles-compete.md

@@ -13,7 +13,7 @@ new AdminUIApp({
 });
 ```
 
-The index file in the `admin-ui` directory should export a hooks which will be packaged for use in the Admin UI during the Keystone build:
+The index file in the `admin-ui` directory should export hooks which will be packaged for use in the Admin UI during the Keystone build:
 
 ```js
 // ./admin-ui/index.js

.changeset/real-pots-joke.md

@@ -13,7 +13,7 @@ new AdminUIApp({
 });
 ```
 
-The index file in the `admin-ui` directory should export a hooks which will be packaged for use in the Admin UI during the Keystone build:
+The index file in the `admin-ui` directory should export hooks which will be packaged for use in the Admin UI during the Keystone build:
 
 ```js
 // ./admin-ui/index.js

.changeset/strong-candles-film.md

@@ -2,4 +2,4 @@
 '@keystonejs/app-admin-ui': minor
 ---
 
-Added a new `toast${listKey}Saved` hook for customizing Success toast notifications.
+Added a new `customToast` hook for customising toast notifications.

docs/guides/hooks.md

@@ -45,7 +45,7 @@ See the [Hook API docs](/docs/api/hooks.md) for specifics.
 
 ### Hook type
 
-A hooks _type_ is defined by where it is attached.
+A hook _type_ is defined by where it is attached.
 Keystone recognises three _types_ of hook:
 
 - [Field Type hooks](/docs/api/hooks.md#field-type-hooks) -

packages/app-admin-ui/README.md

@@ -65,7 +65,7 @@ The following hooks are available. Each is a function that takes no arguments.
 export default {
   logo,
   pages,
-  [toast${listKey}Saved],
+  customToast,
 };
 ```
 
@@ -167,20 +167,32 @@ export default {
 };
 ```
 
-#### `toast${listKey}Saved`
+#### `customToast`
 
-Allows customizing the content of the Success toast notification when an item is saved. These may be specified on a per-list basis. For example, to customize the Success toast for a list called `MyList`, use `toastMyListSaved`.
+Allows customising the content of toast notification when an item is updated or deleted.
 
-Unlike most hooks, this takes a single argument containing the newly-saved item data. It should return a React component.
+The hook function receives a context variable containing an `item` key with the original item data, a `list` key that can be used to limit the scope of the hook, the original `message` as well as a `toastAction` that will be either 'update' or 'delete'. The function should return a React component.
 
 ```javascript
 export default {
-  toastMyListSaved: itemData => (
-    <div>
-      <strong>My custom toast notification!</strong>
-      <span>{itemData._label_}</span>
-    </div>
-  ),
+  customToast: ({ item, list, message }) => {
+    // custom Toast for MyList
+    if (list.key === 'MyList') {
+      return (
+        <div>
+          <strong>My custom toast notification!</strong>
+          {item && item._label_ ? <strong>{item._label_}</strong> : null}
+        </div>
+      );
+    }
+    // Default toast
+    return (
+      <div>
+        {item && item._label_ ? <strong>{item._label_}</strong> : null}
+        <div>{message}</div>
+      </div>
+    );
+  },
 };
 ```
 

packages/app-admin-ui/client/pages/Item/index.js

@@ -70,7 +70,7 @@ const ItemDetails = ({ list, item: initialData, itemErrors, onUpdate }) => {
 
   const history = useHistory();
   const { addToast } = useToasts();
-  const { [`toast${list.key}Saved`]: customToast } = useUIHooks();
+  const { customToast } = useUIHooks();
 
   const [updateItem, { loading: updateInProgress }] = useMutation(list.updateMutation, {
     errorPolicy: 'all',
@@ -117,7 +117,12 @@ const ItemDetails = ({ list, item: initialData, itemErrors, onUpdate }) => {
       setShowDeleteModal(false);
     }
 
-    toastItemSuccess({ addToast }, initialData, 'Deleted successfully');
+    toastItemSuccess(
+      { addToast, customToast },
+      { item: initialData, list },
+      'Deleted successfully',
+      'delete'
+    );
     history.replace(list.getFullPersistentPath());
   };
 
@@ -216,7 +221,12 @@ const ItemDetails = ({ list, item: initialData, itemErrors, onUpdate }) => {
     const savedItem = await onUpdate();
 
     // Defer the toast to this point since it ensures up-to-date data, such as for _label_.
-    toastItemSuccess({ addToast, customToast }, savedItem, 'Saved successfully');
+    toastItemSuccess(
+      { addToast, customToast },
+      { item: savedItem, list },
+      'Saved successfully',
+      'update'
+    );
 
     // No changes since we kicked off the item saving.
     // Then reset the state to the current server value

packages/app-admin-ui/client/util.js

@@ -28,9 +28,14 @@ export const deconstructErrorsToDataShape = ({ graphQLErrors = [] } = {}) => {
 // Toast Formatters
 // ==============================
 
-export function toastItemSuccess({ addToast, customToast }, item, message = 'Success') {
+export function toastItemSuccess(
+  { addToast, customToast },
+  { item, list },
+  message = 'Success',
+  toastAction
+) {
   const toastContent = customToast ? (
-    customToast(item)
+    customToast({ item, toastAction, list, message })
   ) : (
     <div>
       {item && item._label_ ? <strong>{item._label_}</strong> : null}