Bug Description

For the disabled scenario,

• We should add loading animation when we click on the CTA. Currently there is none.
• We should deep-link to the actual setting in the settings page rather than just going to the page.

Steps to reproduce

Bug 1

1. Disable Email Reporting from settings and open the Email Reporting User Settings Side Panel.
2. Click on the "Edit Settings" button.
3. The button has no spinner icon.

UPDATE: The spinner is now less needed as the "panel" is quickly closed (which did not happen before) before navigating to the new page. So adding code to track the 'inProgress' state of the "Edit settings" (i.e. if we do add the spinner), does not actually show the spinner icon because the panel immediately closes, causing movement and it is impossible to see the spinner appear even on 3G throttling.

Bug 2

1. Disable Email Reporting from settings and open the Email Reporting User Settings Side Panel.
2. Click on the "Edit Settings" button.
3. The page navigates to settings but does not scroll to the 'Email Reporting' section in settings.

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

Acceptance criteria

• When Email Reporting is disabled and the "Email Reporting Disabled" notice is displayed in the User Setting Panel, clicking on "Edit settings" should navigate to the admin settings page and scroll the "Email Reporting" card into view.

Implementation Brief

The below IB has been implemented in the attached PR.

• In assets/js/components/settings/SettingsCardEmailReporting.js, follow the pattern introduced in assets/js/modules/analytics-4/components/audience-segmentation/settings/SettingsCardVisitorGroups/index.js:
  • Add a useEffect() that checks if there is a query param for scrollTo and navigates to a new ID email-reporting defined for the Layout component.
• Update the usage of all select( CORE_SITE ).getSiteKitAdminSettingsURL() selectors in assets/js/components/email-reporting/UserSettingsSelectionPanel/Header.js and assets/js/components/email-reporting/notices/EmailReportingDisabledNotice.js to add the email-reporting queryArg.
• Instead of copy pasting the useEffect hook, extract the common functionality into a reusable useScrollToID( id) hook.

Test Coverage

• No new tests required.

QA Brief

• Click on the "Settings" link within the User Settings Email Reporting side panel and verify the link scrolls the page to the Email Reporting section IF the section was not already in view.
• Test the same behaviour when clicking on the "Edit settings" button on the Email Reporting Disabled notice that is displayed when email reporting is disabled.
• Also test the Audience Segmentation Visitor Groups "Change Metrics" panel - click on the "Settings" link within it and ensure the behaviour of scrolling to "Visitor groups" section is still working as before.

The PR for this issue also consolidates logic for the scroll behaviour, so please test the "Visitor groups" scroll behaviour originally implemented in #8875 as well:

• Set up Site Kit with Analytics.
• Go to Admin Settings and enable Visitor groups.
• Verify that the following two links navigate to the Admin Settings page and automatically scroll to the "Visitor groups" section:
  • In the dashboard, scroll down and click "Change groups", then click "Settings" in the "Select visitor groups" drawer.
  • In the dashboard, run the following snippet in the console to force-display the "NoAudienceBanner", then click the "Settings" link:

await googlesitekit.data.dispatch('core/user').setConfiguredAudiences(['garbage'])

Changelog entry

• Scroll to Email reporting settings from the "Edit settings" link.