Navigation Screen: Use response messages returned from API for notices

packages/edit-navigation/src/components/add-menu/index.js

@@ -1,26 +1,27 @@
 /**
  * External dependencies
  */
-import { some } from 'lodash';
 import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
-import { useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { useState, useEffect } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { Button, TextControl, withNotices } from '@wordpress/components';
 import { useFocusOnMount } from '@wordpress/compose';
-import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as coreStore } from '@wordpress/core-data';
 
-const menuNameMatches = ( menuName ) => ( menu ) =>
-	menu.name.toLowerCase() === menuName.toLowerCase();
+/**
+ * Internal dependencies
+ */
+import { MENU_POST_TYPE, MENU_KIND } from '../../constants';
+import { stripHTML } from '../../utils';
 
 function AddMenu( {
 	className,
-	menus,
 	onCreate,
 	titleText,
 	helpText,
@@ -36,6 +37,19 @@ function AddMenu( {
 
 	const { createErrorNotice, removeAllNotices } = noticeOperations;
 
+	const lastSaveError = useSelect( ( select ) => {
+		return select( coreStore ).getLastEntitySaveError(
+			MENU_KIND,
+			MENU_POST_TYPE
+		);
+	}, [] );
+
+	useEffect( () => {
+		if ( lastSaveError ) {
+			createErrorNotice( stripHTML( lastSaveError?.message ) );
+		}
+	}, [ lastSaveError ] );
+
 	const createMenu = async ( event ) => {
 		event.preventDefault();
 
@@ -45,19 +59,6 @@ function AddMenu( {
 
 		// Remove any existing notices.
 		removeAllNotices();
-
-		if ( some( menus, menuNameMatches( menuName ) ) ) {
-			const message = sprintf(
-				// translators: %s: the name of a menu.
-				__(
-					'The menu name %s conflicts with another menu name. Please try another.'
-				),
-				menuName
-			);
-			createErrorNotice( message );
-			return;
-		}
-
 		setIsCreatingMenu( true );
 
 		const menu = await saveMenu( { name: menuName } );

packages/edit-navigation/src/components/add-menu/style.scss

@@ -15,10 +15,6 @@
 		.components-notice__content {
 			margin: 0;
 		}
-
-		.components-notice__dismiss {
-			align-self: center;
-		}
 	}
 }
 

packages/edit-navigation/src/components/header/index.js

@@ -62,7 +62,7 @@ export default function Header( {
 			<MenuActions menus={ menus } isLoading={ isPending } />
 
 			<div className="edit-navigation-header__actions">
-				{ isMediumViewport && <NewButton menus={ menus } /> }
+				{ isMediumViewport && <NewButton /> }
 				<SaveButton navigationPost={ navigationPost } />
 				<PinnedItems.Slot scope="core/edit-navigation" />
 			</div>

packages/edit-navigation/src/components/header/new-button.js

@@ -11,7 +11,7 @@ import { useState } from '@wordpress/element';
 import AddMenu from '../add-menu';
 import { useSelectedMenuId } from '../../hooks';
 
-export default function NewButton( { menus } ) {
+export default function NewButton() {
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const [ , setSelectedMenuId ] = useSelectedMenuId();
 
@@ -27,7 +27,6 @@ export default function NewButton( { menus } ) {
 					onRequestClose={ () => setIsModalOpen( false ) }
 				>
 					<AddMenu
-						menus={ menus }
 						helpText={ __(
 							'A short descriptive name for your menu.'
 						) }

packages/edit-navigation/src/components/menu-switcher/index.js

@@ -61,7 +61,6 @@ export default function MenuSwitcher( {
 						onRequestClose={ closeModal }
 					>
 						<AddMenu
-							menus={ menus }
 							onCreate={ ( menuId ) => {
 								closeModal();
 								onSelectMenu( menuId );

packages/edit-navigation/src/hooks/use-menu-notifications.js

@@ -5,47 +5,31 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as coreStore } from '@wordpress/core-data';
+
 /**
  * Internal dependencies
  */
 import { MENU_POST_TYPE, MENU_KIND } from '../constants';
+import { stripHTML } from '../utils';
 
 export default function useMenuNotifications( menuId ) {
-	const { lastSaveError, lastDeleteError } = useSelect(
-		( select ) => ( {
-			lastSaveError: select( coreStore ).getLastEntitySaveError(
-				MENU_KIND,
-				MENU_POST_TYPE
-			),
-			lastDeleteError: select( coreStore ).getLastEntityDeleteError(
+	const { createErrorNotice } = useDispatch( noticesStore );
+	const lastDeleteError = useSelect(
+		( select ) => {
+			return select( coreStore ).getLastEntityDeleteError(
 				MENU_KIND,
 				MENU_POST_TYPE,
 				menuId
-			),
-		} ),
+			);
+		},
 		[ menuId ]
 	);
 
-	const { createErrorNotice } = useDispatch( noticesStore );
-
-	const processError = ( error ) => {
-		const document = new window.DOMParser().parseFromString(
-			error.message,
-			'text/html'
-		);
-		const errorText = document.body.textContent || '';
-		createErrorNotice( errorText, { id: 'edit-navigation-error' } );
-	};
-
-	useEffect( () => {
-		if ( lastSaveError ) {
-			processError( lastSaveError );
-		}
-	}, [ lastSaveError ] );
-
 	useEffect( () => {
 		if ( lastDeleteError ) {
-			processError( lastDeleteError );
+			createErrorNotice( stripHTML( lastDeleteError?.message ), {
+				id: 'edit-navigation-error',
+			} );
 		}
 	}, [ lastDeleteError ] );
 }

packages/edit-navigation/src/utils/index.js

@@ -0,0 +1,18 @@
+/**
+ * Removes any HTML tags from the provided string.
+ *
+ * @todo Use `stripHTML` from `@wordpress/dom` package
+ * after https://github.com/WordPress/gutenberg/issues/33424
+ * is resolved.
+ *
+ * @param {string} html The string containing html.
+ *
+ * @return {string} The text content with any html removed.
+ */
+export function stripHTML( html ) {
+	const document = new window.DOMParser().parseFromString(
+		html,
+		'text/html'
+	);
+	return document.body.textContent || '';
+}