Unusual UX/UI behaviour of the callout tooltip when editing Site Kit settings

[wpdarren]

Bug Description

While testing #5621 I had this observation:

My test site only has a UA property set up on the site, but has a GA4 property within Analytics account.

When I go to Settings, and click on the Connect Google Analytics 4 button, I am sent to the settings in edit mode as expected. The GA4 property on the account appears in the dropdown. The callout tooltip appears, but rather than closing it, I save the change. Analytics goes through the process and is connected.

The issue is when you go back into edit Analytics settings, the callout tooltip appears against the GA4 property.

I am assuming that this is because I didn't close it. I do not feel that the callout tooltip should appear in this scenario.

https://user-images.githubusercontent.com/73545194/192534417-950aa218-a052-426a-bcfb-abcc9d47e863.mp4

---

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

Acceptance criteria

• The "Set up your GA4 Analytics..." tooltip on the Analytics Settings page should NOT be displayed when GA4 is connected, even if the tooltip, which was displayed before GA4 was connected, was not dismissed then.

Implementation Brief

In assets/js/modules/analytics/components/settings/GA4SettingsControls.js:

• Add a new useEffect hook that will set the enableGA4PropertyTooltip value to false when the enableGA4PropertyTooltip is true AND propertyID value is available.

Test Coverage

• No new tests are to be added.

QA Brief

• Connect Analytics without GA4.
• To mimic that, delete googlesitekit_analytics-4_settings from the wp_options table.
• Go to the settings page and click the Connect Google Analytics 4 CTA.
• Ensure the tooltip disappears once the property is selected in the dropdown, even if it is auto-selected.
• Refer to the screen recording attached in the description and ensure that issue is fixed.

Changelog entry

• Hide help tooltip in GA4 settings screen after a property is selected.

[eclarke1]

Please can we add a priority label to this issue cc @FlicHollis

[eugene-manuilov]

IB ✔️

[wpdarren]

QA Update: ✅

Verified:

• The tooltip disappears once the property is selected in the dropdown, even if it is auto-selected.
• The issue reported is fixed. When I edit the GA settings, the feature tour no longer appears.

https://user-images.githubusercontent.com/73545194/196569340-06e9e2d3-186b-4f12-b1bb-f7729f96bd2a.mp4