Features tour highlighting incorrect area on dashboard

[jamesozzie]

Bug Description

If updating from an older version of Site Kit, the feature tour highlights the new unified dashboard menu items. The highlighted area is incorrect when there are errors or notices in the header of a users site, with the navigation menu further down the screen (See screenshot below)

Note: This would impact very few users. I didn't see any incorrectly highlighted feature tours for other upcoming features

1. Access a site using an older version of Site Kit, prior to the Unified dashboard.
2. Switch the connected Google Analytics property, to a new property with no data (so there is a gathering data or other header notice in the Analytics dashboard). Don't dismiss any notice that may appear
3. Update to the latest version of Site Kit

Screenshots

Additional Context

• I encountered this on a couple of sites where I updated the plugin
• Unsure if there are other feature tours other than the Unified Dashboard where this may occur. I couldn't replicate or encounter incorrectly highlighted areas when the Dashboard Sharing feature tour.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Implementation Brief

Test Coverage

QA Brief

Changelog entry

[jamesozzie]

Possibly a non issue, with the menu items highlighted correctly on another site after reconnecting for the first time in a while after being disconnected (Site Kit 1.69.0, the plugin not yet updates).

[aaemnnosttv]

I'm not sure there is a good solution to this one without reworking our notifications infrastructure, which is needed. The underlying issue though is that it seems like Joyride doesn't watch the target of the tour step to see if it has moved. We know that it updates in response to the viewport being resized but in this case that doesn't happen because the header is sticky and does not affect the height of the page/viewport.

Any ideas here @techanvil ?

[techanvil]

Hey @aaemnnosttv, sorry for not replying earlier to this one! Having come across what appears be the same issue during release testing for 1.113.0, already raised separately as #7751, I've revisited this issue and taken a look into it.

Interestingly, despite the viewport not apparently resizing, the dashboard area itself is resized when the notification is added to the page. With that in mind, I've come up with a fix for the issue that involves using a ResizeObserver to listen for the dashboard being resized and dispatching a resize event on the window in response.

diff --git a/assets/js/components/FeatureTours.js b/assets/js/components/FeatureTours.js
index 8f07d0078c..b68ae1a7c4 100644
--- a/assets/js/components/FeatureTours.js
+++ b/assets/js/components/FeatureTours.js
@@ -20,6 +20,7 @@
  * External dependencies
  */
 import { useMount } from 'react-use';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -42,6 +43,26 @@ export default function FeatureTours() {
 		select( CORE_USER ).getCurrentTour()
 	);
 
+	useEffect( () => {
+		if ( ! tour ) {
+			return;
+		}
+
+		const dashboardElement = document.getElementById(
+			'js-googlesitekit-main-dashboard'
+		);
+
+		const observer = new ResizeObserver( () => {
+			global.dispatchEvent( new Event( 'resize' ) );
+		} );
+
+		observer.observe( dashboardElement );
+
+		return () => {
+			observer.disconnect();
+		};
+	}, [ tour ] );
+
 	if ( ! tour ) {
 		return null;
 	}

This is working in my testing for the Key Metrics tour mentioned in #7751, and I think it should be a general fix.

With that in mind I've made this issue a dependency of #7751, added an AC and IB and moved it to IBR.

[eugene-manuilov]

IB ✔️

[mohitwp]

QA Update ✅

• Tested on main environment.
• Verified now feature tour is highlighting correct area on dashboard.
• Note : As you can see in below screencast when user clicks on next for 3rd step then suddenly feature tour gets disappear instead of navigating to 3rd step in tour. I confirmed that this issue is not regression and also exist on latest environment so I will create separate ticket for this.

https://github.com/google/site-kit-wp/assets/94359491/80ca90f4-677e-42b5-9c5f-9abea685d248