Add toast notification in case of error

Signed-off-by: soupette <cyril@strapi.io>

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,

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',

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,

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 () => {