"Top content” OAuth flow UX experience

[kelvinballoo]

Feature Description

This came up when testing #8154
The QA brief for that issue can be used as steps to reproduce.

ITEM 1:
After I click cancel, the OAuth error variant of the Error Modal does not display straightaway. It will not load until I scroll down to the tiles section.
Refer to as from 1 minute mark in the video in the Details section.

wait.mov

I think we possibly need to anchor the scroll to that tile section so that the error modal appears straightaway.

ITEM 2:

This is linked to number 1. When I cancelled the flow, I go to the page where I see a 'Success' message. Again, you can refer to the 1 minute mark in the video above.
This is due to the success message initially but it just feels weird but maybe this will not be a concern if we auto scroll to the tiles section, if we decide to fix it that way for item 1.

---

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

Acceptance criteria

• If an OAuth error occurs when attempting to create the custom dimension from the "Top content" metric area in an audience tile, upon returning to Site Kit:
  • The page should scroll down to the Audiences Widget Area.
  • The Error Modal for the OAuth error should appear.

Implementation Brief

• Once Enhance/8179 audience settings unhappy setup path #9327 is merged:
  • Create an errorRedirectURL constant, the value of which is global.location.href with the query arg widgetArea appended. The value of the widgetArea arg should be AREA_MAIN_DASHBOARD_TRAFFIC_AUDIENCE_SEGMENTATION.
  • Include errorRedirectURL in the options passed to setPermissionScopeError() in the AudienceTilePagesMetric component, at the same level as redirectURL:
    

    site-kit-wp/assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceTilesWidget/AudienceTile/AudienceTilePagesMetric.js

    Lines 142 to 155 in 10394a1

    	setPermissionScopeError( {
    	code: ERROR_CODE_MISSING_REQUIRED_SCOPE,
    	message: __(
    	'Additional permissions are required to create new audiences in Analytics.',
    	'google-site-kit'
    	),
    	data: {
    	status: 403,
    	scopes: [ EDIT_SCOPE ],
    	skipModal: true,
    	skipDefaultErrorNotifications: true,
    	redirectURL,
    	},
    	} );

Test Coverage

• Update/fix any failing tests.

QA Brief

• Setup your audiences then set up a missing required scope error like so:
  • Remove the ...additional_auth_scopes row from your wp_usermeta
  • Archive the WordPress Post Type custom dimension from your Analytics property
  • Sync the custom dimensions by running googlesitekit.data.dispatch( 'modules/analytics-4' ).fetchSyncAvailableCustomDimensions() in the developer console
• After refreshing you should now see the "No data to show" error state in the Top content section of the Audience tiles.
• Click the "Update" button to start the OAuth flow
• Select your user but click "Cancel" to simulate an OAuth error
• When you return to the plugin the app should scroll down to the Visitor Groups section and you should immediately see the error modal
  Note: these steps can be seen in the video in this ticket description above.

Changelog entry

[nfmohit]

IB ✅