Added a new toast${listKey}Saved hook for customizing Success toast…

… notifications (#2817)

Co-authored-by: Mike <mike@madebymike.com.au>
Co-authored-by: Tim Leslie <timl@thinkmill.com.au>

.changeset/strong-candles-film.md

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

packages/app-admin-ui/README.md

@@ -65,6 +65,7 @@ The following hooks are available. Each is a function that takes no arguments.
 export default {
   logo,
   pages,
+  [toast${listKey}Saved],
 };
 ```
 
@@ -124,6 +125,23 @@ export default {
 };
 ```
 
+#### `toast${listKey}Saved`
+
+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`.
+
+Unlike most hooks, this takes a single argument containing the newly-saved item data. It should return a React component.
+
+```javascript
+export default {
+  toastMyListSaved: itemData => (
+    <div>
+      <strong>My custom toast notification!</strong>
+      <span>{itemData._label_}</span>
+    </div>
+  ),
+};
+```
+
 ### `isAccessAllowed`
 
 This function takes the same arguments as a [shorthand imperative boolean](https://www.keystonejs.com/api/access-control#shorthand-imperative-boolean) access control. It must return either true or false.

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

@@ -36,6 +36,7 @@ import {
 import { ItemTitle } from './ItemTitle';
 import { ItemProvider } from '../../providers/Item';
 import { useList } from '../../providers/List';
+import { useUIHooks } from '../../providers/Hooks';
 
 const Render = ({ children }) => children();
 
@@ -69,6 +70,7 @@ const ItemDetails = ({ list, item: initialData, itemErrors, onUpdate }) => {
 
   const history = useHistory();
   const { addToast } = useToasts();
+  const { [`toast${list.key}Saved`]: customToast } = useUIHooks();
 
   const [updateItem, { loading: updateInProgress }] = useMutation(list.updateMutation, {
     errorPolicy: 'all',
@@ -214,7 +216,7 @@ 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 }, savedItem, 'Saved successfully');
+    toastItemSuccess({ addToast, customToast }, savedItem, 'Saved successfully');
 
     // 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,8 +28,10 @@ export const deconstructErrorsToDataShape = ({ graphQLErrors = [] } = {}) => {
 // Toast Formatters
 // ==============================
 
-export function toastItemSuccess({ addToast }, item, message = 'Success') {
-  const toastContent = (
+export function toastItemSuccess({ addToast, customToast }, item, message = 'Success') {
+  const toastContent = customToast ? (
+    customToast(item)
+  ) : (
     <div>
       {item && item._label_ ? <strong>{item._label_}</strong> : null}
       <div>{message}</div>