From 5078b041e88e7fde795ebe15c3a6f177e7f4b52c Mon Sep 17 00:00:00 2001
From: soupette <cyril@strapi.io>
Date: Tue, 28 Sep 2021 08:33:40 +0200
Subject: [PATCH] Add toast notification in case of error

Signed-off-by: soupette <cyril@strapi.io>
---
 .../Notifications/Notification/index.js        |  8 +++++++-
 .../src/components/Notifications/reducer.js    |  1 +
 .../Notifications/tests/reducer.test.js        |  1 +
 .../EditViewDataManagerProvider/index.js       | 18 +++++++++++++++++-
 4 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/packages/core/admin/admin/src/components/Notifications/Notification/index.js b/packages/core/admin/admin/src/components/Notifications/Notification/index.js
index 75e97d3f2d..ac8b5d619f 100644
--- a/packages/core/admin/admin/src/components/Notifications/Notification/index.js
+++ b/packages/core/admin/admin/src/components/Notifications/Notification/index.js
@@ -6,7 +6,7 @@ import { Link } from '@strapi/parts/Link';
 
 const Notification = ({ dispatch, notification }) => {
   const { formatMessage } = useIntl();
-  const { message, link, type, id, onClose, timeout, blockTransition } = notification;
+  const { message, link, type, id, onClose, timeout, blockTransition, title } = notification;
 
   const formattedMessage = msg => (typeof msg === 'string' ? msg : formatMessage(msg, msg.values));
   const handleClose = useCallback(() => {
@@ -56,6 +56,10 @@ const Notification = ({ dispatch, notification }) => {
     variant = 'success';
   }
 
+  if (title) {
+    alertTitle = title;
+  }
+
   return (
     <Alert
       action={
@@ -93,6 +97,7 @@ Notification.defaultProps = {
     },
     onClose: () => null,
     timeout: 2500,
+    title: null,
     blockTransition: false,
   },
 };
@@ -121,6 +126,7 @@ Notification.propTypes = {
         }),
       ]).isRequired,
     }),
+    title: PropTypes.string,
     type: PropTypes.string,
     onClose: PropTypes.func,
     timeout: PropTypes.number,
diff --git a/packages/core/admin/admin/src/components/Notifications/reducer.js b/packages/core/admin/admin/src/components/Notifications/reducer.js
index 1d67d1696f..b62b8ca840 100644
--- a/packages/core/admin/admin/src/components/Notifications/reducer.js
+++ b/packages/core/admin/admin/src/components/Notifications/reducer.js
@@ -14,6 +14,7 @@ const notificationReducer = (state = initialState, action) =>
         draftState.notifications.push({
           // No action.config spread to limit the notification API and avoid customization
           id: state.notifId,
+          title: action.config.title || null,
           type: get(action, ['config', 'type'], 'success'),
           message: get(action, ['config', 'message'], {
             id: 'notification.success.saved',
diff --git a/packages/core/admin/admin/src/components/Notifications/tests/reducer.test.js b/packages/core/admin/admin/src/components/Notifications/tests/reducer.test.js
index bf3a348814..1cf964b8d4 100644
--- a/packages/core/admin/admin/src/components/Notifications/tests/reducer.test.js
+++ b/packages/core/admin/admin/src/components/Notifications/tests/reducer.test.js
@@ -30,6 +30,7 @@ describe('ADMIN | COMPONENTS | NOTIFICATIONS | reducer', () => {
         notifications: [
           {
             id: 0,
+            title: null,
             type: 'success',
             message: { id: 'notification.message' },
             link: null,
diff --git a/packages/core/admin/admin/src/content-manager/components/EditViewDataManagerProvider/index.js b/packages/core/admin/admin/src/content-manager/components/EditViewDataManagerProvider/index.js
index 76a11a24e5..ecc20a3183 100644
--- a/packages/core/admin/admin/src/content-manager/components/EditViewDataManagerProvider/index.js
+++ b/packages/core/admin/admin/src/content-manager/components/EditViewDataManagerProvider/index.js
@@ -304,6 +304,13 @@ const EditViewDataManagerProvider = ({
         console.error(err);
 
         errors = getYupInnerErrors(err);
+        const firstError = Object.keys(errors)[0];
+
+        toggleNotification({
+          type: 'warning',
+          title: `${firstError}:`,
+          message: errors[firstError],
+        });
       }
 
       dispatch({
@@ -311,7 +318,16 @@ const EditViewDataManagerProvider = ({
         errors,
       });
     },
-    [createFormData, isCreatingEntry, modifiedData, onPost, onPut, trackerProperty, yupSchema]
+    [
+      createFormData,
+      isCreatingEntry,
+      modifiedData,
+      onPost,
+      onPut,
+      toggleNotification,
+      trackerProperty,
+      yupSchema,
+    ]
   );
 
   const handlePublish = useCallback(async () => {