From 95c38b66731fe744653108e774c43c58b7a9e283 Mon Sep 17 00:00:00 2001
From: madhusudhand <madhusudhan.dollu@gmail.com>
Date: Wed, 24 Jan 2024 17:40:36 +0530
Subject: [PATCH] make the notices manually dismisable

---
 .../font-library-modal/font-collection.js          | 12 +-----------
 .../font-library-modal/installed-fonts.js          | 14 ++------------
 .../font-library-modal/local-fonts.js              | 14 ++------------
 3 files changed, 5 insertions(+), 35 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
index 46363365363bb1..d885381efba94b 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
@@ -97,16 +97,6 @@ function FontCollection( { slug } ) {
 		setFontsToInstall( [] );
 	}, [ selectedFont ] );
 
-	// Reset notice after 5 seconds
-	useEffect( () => {
-		if ( notice && notice?.duration !== 0 ) {
-			const timeout = setTimeout( () => {
-				setNotice( null );
-			}, notice.duration ?? 5000 );
-			return () => clearTimeout( timeout );
-		}
-	}, [ notice ] );
-
 	const collectionFonts = useMemo(
 		() => selectedCollection?.font_families ?? [],
 		[ selectedCollection ]
@@ -224,9 +214,9 @@ function FontCollection( { slug } ) {
 					<FlexItem>
 						<Spacer margin={ 2 } />
 						<Notice
-							isDismissible={ false }
 							status={ notice.type }
 							className="font-library-modal__font-collection__notice"
+							onRemove={ () => setNotice( null ) }
 						>
 							{ notice.message }
 						</Notice>
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
index 3a13a720dc7c92..a3e307f1479614 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
@@ -55,7 +55,7 @@ function InstalledFonts() {
 				message: __( 'Font family uninstalled successfully.' ),
 			} );
 
-			// If the font was succesfully uninstalled it is unselected.
+			// If the font was successfully uninstalled it is unselected.
 			handleUnselectFont();
 			setIsConfirmDeleteOpen( false );
 		} catch ( error ) {
@@ -91,16 +91,6 @@ function InstalledFonts() {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
-	// Reset notice after 5 seconds
-	useEffect( () => {
-		if ( notice ) {
-			const timeout = setTimeout( () => {
-				setNotice( null );
-			}, 5000 );
-			return () => clearTimeout( timeout );
-		}
-	}, [ notice ] );
-
 	return (
 		<TabPanelLayout
 			title={ libraryFontSelected?.name || '' }
@@ -125,9 +115,9 @@ function InstalledFonts() {
 					<FlexItem>
 						<Spacer margin={ 2 } />
 						<Notice
-							isDismissible={ false }
 							status={ notice.type }
 							className="font-library-modal__font-collection__notice"
+							onRemove={ () => setNotice( null ) }
 						>
 							{ notice.message }
 						</Notice>
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/local-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/local-fonts.js
index 145f4164a87607..236352a19ad3bf 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/local-fonts.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/local-fonts.js
@@ -13,7 +13,7 @@ import {
 	FlexItem,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
-import { useContext, useState, useEffect } from '@wordpress/element';
+import { useContext, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -44,16 +44,6 @@ function LocalFonts() {
 		handleFilesUpload( event.target.files );
 	};
 
-	// Reset notice after 5 seconds
-	useEffect( () => {
-		if ( notice ) {
-			const timeout = setTimeout( () => {
-				setNotice( null );
-			}, 5000 );
-			return () => clearTimeout( timeout );
-		}
-	}, [ notice ] );
-
 	/**
 	 * Filters the selected files to only allow the ones with the allowed extensions
 	 *
@@ -223,9 +213,9 @@ function LocalFonts() {
 					<FlexItem>
 						<Spacer margin={ 2 } />
 						<Notice
-							isDismissible={ false }
 							status={ notice.type }
 							className="font-library-modal__upload-area__notice"
+							onRemove={ () => setNotice( null ) }
 						>
 							{ notice.message }
 						</Notice>