Search: migrate dashboard notices to @wordpress/ui Notice (depends on #48537)

projects/packages/search/changelog/chore-search-notice-action-wp-ui-link

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Search: migrate dashboard notices to the @wordpress/ui Notice component. Removes the local SimpleNotice and NoticeAction wrappers along with their stylesheets.

projects/packages/search/package.json

@@ -59,6 +59,7 @@
 		"@wordpress/icons": "12.2.0",
 		"@wordpress/interactivity": "6.44.0",
 		"@wordpress/server-side-render": "6.20.0",
+		"@wordpress/ui": "0.11.0",
 		"@wordpress/url": "4.44.0",
 		"@wordpress/viewport": "6.44.0",
 		"clsx": "2.1.1",

projects/packages/search/src/dashboard/components/global-notices/index.jsx

@@ -1,8 +1,35 @@
-import SimpleNotice from 'components/notice/index.jsx';
-import NoticeAction from 'components/notice/notice-action';
+import { Notice } from '@wordpress/ui';
+import { useCallback, useEffect } from 'react';
 
 import './style.scss';
 
+const STATUS_TO_INTENT = {
+	'is-success': 'success',
+	'is-error': 'error',
+	'is-warning': 'warning',
+	'is-info': 'info',
+};
+
+const NoticeItem = ( { notice, onDismissNotice } ) => {
+	const { id, duration, showDismiss = true, status, text } = notice;
+
+	const handleDismiss = useCallback( () => onDismissNotice( id ), [ onDismissNotice, id ] );
+
+	useEffect( () => {
+		if ( duration > 0 ) {
+			const timer = setTimeout( handleDismiss, duration );
+			return () => clearTimeout( timer );
+		}
+	}, [ duration, handleDismiss ] );
+
+	return (
+		<Notice.Root intent={ STATUS_TO_INTENT[ status ] ?? 'neutral' } spokenMessage={ text }>
+			{ text && <Notice.Description>{ text }</Notice.Description> }
+			{ showDismiss && <Notice.CloseIcon onClick={ handleDismiss } /> }
+		</Notice.Root>
+	);
+};
+
 /**
  * NoticesList component
  *
@@ -12,36 +39,24 @@ import './style.scss';
 export default function NoticesList(
 	props = { handleLocalNoticeDismissClick: null, notices: Object.freeze( [] ) }
 ) {
-	const noticesList = props.notices.map( function ( notice ) {
-		const onDismissClick = theNotice => () => {
-			theNotice && props.handleLocalNoticeDismissClick( theNotice.id );
-		};
-		return (
-			<SimpleNotice
-				key={ 'notice-' + notice.id }
-				status={ notice.status }
-				duration={ notice.duration || null }
-				text={ notice.text }
-				isCompact={ notice.isCompact }
-				onDismissClick={ onDismissClick( notice ) }
-				showDismiss={ notice.showDismiss }
-			>
-				{ notice.button && (
-					<NoticeAction href={ notice.href } onClick={ onDismissClick( notice ) }>
-						{ notice.button }
-					</NoticeAction>
-				) }
-			</SimpleNotice>
-		);
-	} );
-
-	if ( ! noticesList.length ) {
+	const onDismissNotice = useCallback(
+		noticeId => props.handleLocalNoticeDismissClick?.( noticeId ),
+		[ props ]
+	);
+
+	if ( ! props.notices.length ) {
 		return null;
 	}
 
 	return (
 		<div id={ props.id } className="global-notices">
-			{ noticesList }
+			{ props.notices.map( notice => (
+				<NoticeItem
+					key={ 'notice-' + notice.id }
+					notice={ notice }
+					onDismissNotice={ onDismissNotice }
+				/>
+			) ) }
 		</div>
 	);
 }

projects/packages/search/src/dashboard/components/global-notices/store/actions.js

@@ -18,8 +18,6 @@ export function createNotice( status, text, options = {} ) {
 		id: options.id || ++createNoticeCounter,
 		duration: options.duration ?? 2000,
 		showDismiss: typeof options.showDismiss === 'boolean' ? options.showDismiss : true,
-		isPersistent: options.isPersistent || false,
-		displayOnNextPage: options.displayOnNextPage || false,
 		status: status,
 		text: text,
 	};

projects/packages/search/src/dashboard/components/global-notices/style.scss

@@ -1,5 +1,4 @@
 @use "../../scss/z-index";
-@use "scss/calypso-colors";
 @use "scss/calypso-mixins";
 
 .global-notices {
@@ -38,45 +37,3 @@
 		max-width: calc(100% - 64px - 160px);
 	}
 }
-
-.global-notices .dops-notice {
-	flex-wrap: nowrap;
-	margin-bottom: 0;
-	text-align: left;
-	pointer-events: auto;
-	border-radius: 0;
-	box-shadow:
-		0 2px 5px rgba(0, 0, 0, 0.2),
-		0 0 56px rgba(0, 0, 0, 0.15);
-
-	.dops-notice__icon-wrapper {
-		border-radius: 0;
-	}
-
-	@include calypso-mixins.breakpoint( ">660px" ) {
-		display: flex;
-		overflow: hidden;
-		margin-bottom: 24px;
-		border-radius: 3px;
-
-		.dops-notice__icon-wrapper {
-			border-radius: 3px 0 0 3px;
-		}
-	}
-}
-
-.global-notices .dops-notice a.dops-notice__action {
-
-	@include calypso-mixins.breakpoint( ">660px" ) {
-		font-size: 14px;
-		padding: 13px 16px;
-	}
-}
-
-.global-notices .dops-notice__dismiss {
-	flex-shrink: 0;
-
-	@include calypso-mixins.breakpoint( ">660px" ) {
-		padding: 13px 16px 0;
-	}
-}