From 91a8966a63288cf22c975383b4f98ed1a3108652 Mon Sep 17 00:00:00 2001
From: andrei draganescu <me@andreidraganescu.info>
Date: Fri, 15 May 2020 08:33:05 +0300
Subject: [PATCH] adds notifications to nav screen (#22326)

- adds a sample notification for saving menus
- fixes a empty menu items crashing the menu page
---
 .../src/components/layout/index.js            |  3 ++-
 .../menu-editor/use-navigation-blocks.js      |  7 +++++-
 .../src/components/notices/index.js           | 23 +++++++++++++++++++
 .../src/components/notices/style.scss         |  4 ++++
 packages/edit-navigation/src/index.js         |  1 +
 packages/edit-navigation/src/style.scss       |  1 +
 6 files changed, 37 insertions(+), 2 deletions(-)
 create mode 100644 packages/edit-navigation/src/components/notices/index.js
 create mode 100644 packages/edit-navigation/src/components/notices/style.scss

diff --git a/packages/edit-navigation/src/components/layout/index.js b/packages/edit-navigation/src/components/layout/index.js
index 8459c6d45349f3..fdfcdd0e9b2f29 100644
--- a/packages/edit-navigation/src/components/layout/index.js
+++ b/packages/edit-navigation/src/components/layout/index.js
@@ -13,6 +13,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import Notices from '../notices';
 import MenusEditor from '../menus-editor';
 import MenuLocationsEditor from '../menu-locations-editor';
 
@@ -22,7 +23,7 @@ export default function Layout( { blockEditorSettings } ) {
 			<SlotFillProvider>
 				<DropZoneProvider>
 					<FocusReturnProvider>
-						{ /* <Notices /> */ }
+						<Notices />
 						<TabPanel
 							className="edit-navigation-layout__tab-panel"
 							tabs={ [
diff --git a/packages/edit-navigation/src/components/menu-editor/use-navigation-blocks.js b/packages/edit-navigation/src/components/menu-editor/use-navigation-blocks.js
index 5481dd6cadcd21..b9f7dabe342252 100644
--- a/packages/edit-navigation/src/components/menu-editor/use-navigation-blocks.js
+++ b/packages/edit-navigation/src/components/menu-editor/use-navigation-blocks.js
@@ -9,6 +9,7 @@ import { groupBy, isEqual, difference } from 'lodash';
 import { createBlock } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useState, useRef, useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
 function createBlockFromMenuItem( menuItem, innerBlocks = [] ) {
 	return createBlock(
@@ -37,7 +38,7 @@ export default function useNavigationBlocks( menuId ) {
 	);
 
 	const { saveMenuItem } = useDispatch( 'core' );
-
+	const { createSuccessNotice } = useDispatch( 'core/notices' );
 	const [ blocks, setBlocks ] = useState( [] );
 
 	const menuItemsRef = useRef( {} );
@@ -131,6 +132,10 @@ export default function useNavigationBlocks( menuId ) {
 		for ( const deletedClientId of deletedClientIds ) {
 			// TODO - delete menu items.
 		}
+
+		createSuccessNotice( __( 'Navigation saved.' ), {
+			type: 'snackbar',
+		} );
 	};
 
 	return [ blocks, setBlocks, saveBlocks ];
diff --git a/packages/edit-navigation/src/components/notices/index.js b/packages/edit-navigation/src/components/notices/index.js
new file mode 100644
index 00000000000000..afc9ec12334d9f
--- /dev/null
+++ b/packages/edit-navigation/src/components/notices/index.js
@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { SnackbarList } from '@wordpress/components';
+
+export default function Notices() {
+	const notices = useSelect(
+		( select ) =>
+			select( 'core/notices' )
+				.getNotices()
+				.filter( ( notice ) => notice.type === 'snackbar' ),
+		[]
+	);
+	const { removeNotice } = useDispatch( 'core/notices' );
+	return (
+		<SnackbarList
+			className="edit-navigation-notices"
+			notices={ notices }
+			onRemove={ removeNotice }
+		/>
+	);
+}
diff --git a/packages/edit-navigation/src/components/notices/style.scss b/packages/edit-navigation/src/components/notices/style.scss
new file mode 100644
index 00000000000000..eac75627719b13
--- /dev/null
+++ b/packages/edit-navigation/src/components/notices/style.scss
@@ -0,0 +1,4 @@
+.components-snackbar-list.edit-navigation-notices {
+	position: fixed;
+	bottom: 20px;
+}
diff --git a/packages/edit-navigation/src/index.js b/packages/edit-navigation/src/index.js
index 3c6a8f6aa2baec..106451282e9c16 100644
--- a/packages/edit-navigation/src/index.js
+++ b/packages/edit-navigation/src/index.js
@@ -6,6 +6,7 @@ import { map } from 'lodash';
 /**
  * WordPress dependencies
  */
+import '@wordpress/notices';
 import {
 	registerCoreBlocks,
 	__experimentalRegisterExperimentalCoreBlocks,
diff --git a/packages/edit-navigation/src/style.scss b/packages/edit-navigation/src/style.scss
index 9e999764f9f9c1..dabe0f8472d7ce 100644
--- a/packages/edit-navigation/src/style.scss
+++ b/packages/edit-navigation/src/style.scss
@@ -2,3 +2,4 @@
 @import "./components/menu-editor/style.scss";
 @import "./components/menus-editor/style.scss";
 @import "./components/delete-menu-button/style.scss";
+@import "./components/notices/style.scss";