Merge pull request #12113 from google/enhancement/11968-dismiss-active-tooltips

Enhancement/11968 dismiss active tooltips

Author: tofumatt

assets/js/components/email-reporting/UserSettingsSelectionPanel/index.js

@@ -20,7 +20,8 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useCallback, useState } from '@wordpress/element';
+import { useCallback, useEffect, useState } from '@wordpress/element';
+import { usePrevious } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -40,6 +41,7 @@ export default function UserSettingsSelectionPanel() {
 	const isOpen = useSelect( ( select ) =>
 		select( CORE_UI ).getValue( USER_SETTINGS_SELECTION_PANEL_OPENED_KEY )
 	);
+	const previousIsOpen = usePrevious( isOpen );
 
 	const onSideSheetOpen = useCallback( () => {
 		trackEvent(
@@ -173,6 +175,12 @@ export default function UserSettingsSelectionPanel() {
 
 	const onNoticeDismiss = useCallback( () => setNotice( null ), [] );
 
+	useEffect( () => {
+		if ( ! previousIsOpen && isOpen ) {
+			setValue( 'admin-screen-tooltip', { isTooltipVisible: false } );
+		}
+	}, [ isOpen, previousIsOpen, setValue ] );
+
 	return (
 		<SelectionPanel
 			className="googlesitekit-user-settings-selection-panel"

assets/js/components/email-reporting/UserSettingsSelectionPanel/index.test.js

@@ -133,6 +133,31 @@ describe( 'UserSettingsSelectionPanel', () => {
 		expect( dialog ).toHaveAttribute( 'aria-hidden', 'false' );
 	} );
 
+	it( 'hides admin screen tooltip when the panel opens', async () => {
+		registry
+			.dispatch( CORE_UI )
+			.setValue( USER_SETTINGS_SELECTION_PANEL_OPENED_KEY, false );
+		registry.dispatch( CORE_UI ).setValue( 'admin-screen-tooltip', {
+			isTooltipVisible: true,
+		} );
+
+		render( <UserSettingsSelectionPanel />, {
+			registry,
+			features,
+			viewContext: VIEW_CONTEXT_MAIN_DASHBOARD,
+		} );
+
+		registry
+			.dispatch( CORE_UI )
+			.setValue( USER_SETTINGS_SELECTION_PANEL_OPENED_KEY, true );
+
+		await waitFor( () =>
+			expect(
+				registry.select( CORE_UI ).getValue( 'admin-screen-tooltip' )
+			).toMatchObject( { isTooltipVisible: false } )
+		);
+	} );
+
 	it( 'calls saveEmailReportingSettings with subscribed true when subscribing', async () => {
 		const coreUserDispatch = registry.dispatch( CORE_USER );
 		const saveSpy = jest

assets/js/hooks/useOpenEmailReportingSelectionPanelEffect.js

@@ -39,6 +39,7 @@ export default function useOpenEmailReportingSelectionPanelEffect() {
 		// If redirected from a pointer CTA or following link from email footer, open the Email Reporting selection panel.
 		if ( emailReportingPanelOpen !== undefined ) {
 			setUIValue( USER_SETTINGS_SELECTION_PANEL_OPENED_KEY, true );
+			setUIValue( 'admin-screen-tooltip', { isTooltipVisible: false } );
 			setEmailReportingPanelOpen( undefined );
 		}
 	} );