Enable dismissal of global notice

WordPress · Feb 16, 2023 · bdb867a · bdb867a
1 parent c991412
commit bdb867a
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/settings/src/components/global-notice.js b/settings/src/components/global-notice.js
@@ -4,14 +4,23 @@
 import { Flex, Snackbar } from '@wordpress/components';
 import { check } from '@wordpress/icons';
 
-export default function GlobalNotice( { notice } ) {
+export default function GlobalNotice( { notice, setNotice } ) {
 	if ( ! notice ) {
 		return;
 	}
 
+	const onRemove = () => {
+		setNotice( '' );
+	}
+
 	return (
 		<Flex justify="flex-end">
-			<Snackbar className="wporg-2fa__global-notice" icon={ check }>
+			<Snackbar
+				className="wporg-2fa__global-notice"
+				icon={ check }
+				explicitDismiss
+				onRemove={ onRemove }
+			>
 				{ notice }
 			</Snackbar>
 		</Flex>

diff --git a/settings/src/script.js b/settings/src/script.js
@@ -152,7 +152,7 @@ function Main( { userId } ) {
 
 	return (
 		<GlobalContext.Provider value={ { clickScreenLink, userRecord, setGlobalNotice } }>
-			<GlobalNotice notice={ globalNotice } />
+			<GlobalNotice notice={ globalNotice } setNotice={ setGlobalNotice } />
 			{ screenContent }
 		</GlobalContext.Provider>
 	);