Implement the “Top content” metric handling OAuth flow

[techanvil]

Feature Description

Implement the redirection to OAuth to grant the edit scope for creating the custom dimension from the "Top content" metric section. This includes both the happy and unhappy path.

See audience tiles > "Top content" states and OAuth errors in the design doc.

---

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

Acceptance criteria

• Given that the Update CTA is displayed in the "Top content" section of an Audience Tile (see Implement the “Top content” metric handling for missing custom dimension #8153), and the user does not have the Analytics edit scope:
  • Clicking on Update should trigger the standard OAuth flow used in the plugin.
  • On successful completion, the user should be redirected back to the dashboard where the rest of the flow implemented in Implement the “Top content” metric handling for missing custom dimension #8153 should be continued.
  • If an error is returned from the OAuth flow:
    • The OAuth error variant of the Error Modal should be displayed (see Implement the unhappy paths for the Setup CTA Banner #8134).
    • It should follow the Figma design, with the following copy:
      • Title: Analytics update failed
      • Description: Setup was interrupted because you did not grant the necessary permissions. Get help
    • The Get help link should open the Analytics support page in a new tab, scrolled to the insufficient permissions section.
    • The Retry button should take the user back to the OAuth flow to retry the flow from that point.
    • The Cancel button should close the modal.
    • The default OAuth error notice that Site Kit usually displays when the OAuth flow returns an error should not be shown.

Implementation Brief

In assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceTilesWidget/AudienceTile/AudienceTilePagesMetric.js:

• Get the autoSubmit value for the AUDIENCE_TILE_CUSTOM_DIMENSION_CREATE key using the getValue selector of the CORE_FORMS store.
• Get the error setup code using the getSetupErrorCode selector of the CORE_SITE store.
• Create a boolean variable hasOAuthError that checks if autoSubmit is true and the setup error code equals 'access_denied'.
• Modify the logic that determines whether the AudienceErrorModal component should be rendered.
• Include the hasOAuthError variable as part of the condition to render the AudienceErrorModal component.
• Pass the hasOAuthError variable to the hasOAuthError prop of the AudienceErrorModal component.
• For example, review the implementation in AudienceSegmentationSetupCTAWidget:
  

  site-kit-wp/assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceSegmentationSetupCTAWidget.js

  Line 160 in 29bb9ea

  const hasOAuthError = autoSubmit && setupErrorCode === 'access_denied';

  
  

  site-kit-wp/assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceSegmentationSetupCTAWidget.js

  Lines 296 to 298 in 29bb9ea

  	{ ( showErrorModal || hasOAuthError ) && (
  	<AudienceErrorModal
  	hasOAuthError={ hasOAuthError }

Test Coverage

• Create an AudienceTile/index.test.js file and add AudienceErrorModal error variants tests similar to the ones in AudienceSegmentationSetupCTAWidget.test.js.
• Fix any failing tests.

QA Brief

To simulate the OAuth error:

1. Prepare the Environment:

   • Setup the Analytics module and enable the Audience Segmentation.
   • Delete the wp_googlesitekit_additional_auth_scopes entry from the wp_usermeta table if it exists. This entry contains the https://www.googleapis.com/auth/analytics.edit scope.
   • Delete the googlesitekit_post_type custom dimension from the Analytics console if it exists.
   • Run the following command in the browser console to sync the custom dimensions:

     googlesitekit.data.dispatch( 'modules/analytics-4' ).fetchSyncAvailableCustomDimensions()

   • Refresh the page if necessary.

2. Trigger the OAuth Error:

   • Click on the Update button in the Audience Segmentation widget tile.
   • In the OAuth flow, cancel the flow when prompted to grant permissions.
   • Ensure the OAuth error variant of the Error Modal is displayed.
   • Click the Retry button to trigger the OAuth flow again.
   • Complete the OAuth flow and grant permissions.
   • Ensure the custom dimension creation continues successfully after granting permissions.

Changelog entry

• Redirect to OAuth as needed to grant the scope for creating the required custom dimension from the "Top content" metric section.

[techanvil]

IB ✅

[kelvinballoo]

QA Update ⚠️

Hi @hussain-t , in general the flow is working as described.

Analytics.update.loads.only.when.we.scroll.to.the.section.mov

But I have some UX concerns. ⚠️

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.

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

wait.mov

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.

[hussain-t]

Hi @kelvinballoo, those are valid UX concerns. However, they are out of the scope of the issue. Can you create a new issue to address them? Thanks!

[kelvinballoo]

QA Update ⚠️

Thanks @hussain-t . New ticket raised here : #9350

One thing to clarify from the AC:
The default OAuth error notice that Site Kit usually displays when the OAuth flow returns an error should not be shown.
Do you have a link to a reference of that default OAuth error notice? ⚠️
We are pretty much good, I just need a reference point to properly validate this.

---

Other than that, the following were verified good ✅

Given that the user does not have the Analytics edit scope:

• Clicking on Update triggers the standard OAuth flow used in the plugin. On successful completion, the user is redirected back to the dashboard

  Update.works.mov

• If an error is returned from the OAuth flow:

  • The OAuth error variant of the Error Modal is displayed. It follows the Figma design with the following copy:

    Title: Analytics update failed
    Description: Setup was interrupted because you did not grant the necessary permissions. Get help.

  • The Get help link opens the Analytics support page in a new tab, scrolled to the insufficient permissions section. The Cancel button should close the modal.

    Get.help.+.cancel.mov

    • The Retry button takes the user back to the OAuth flow to retry the flow.

      Analytics.update.loads.only.when.we.scroll.to.the.section.mov

[hussain-t]

Hi @kelvinballoo, the ErrorNotifications banner component will be displayed by default. You can refer to the ErrorNotifications storybook.

[kelvinballoo]

QA Update ✅

Thanks for confirming @hussain-t . I can confirm, based on the AC, that the ErrorNotifications banner does not appear if there is an error.

The following were verified good and it's good to be moved to Approval.

Given that the user does not have the Analytics edit scope:

• Clicking on Update triggers the standard OAuth flow used in the plugin. On successful completion, the user is redirected back to the dashboard ✅

  Update.works.mov

• If an error is returned from the OAuth flow:

  • The OAuth error variant of the Error Modal is displayed. It follows the Figma design with the following copy: ✅

    Title: Analytics update failed
    Description: Setup was interrupted because you did not grant the necessary permissions. Get help.

  • The Get help link opens the Analytics support page in a new tab, scrolled to the insufficient permissions section. The Cancel button should close the modal. ✅

    Get.help.+.cancel.mov

    • The Retry button takes the user back to the OAuth flow to retry the flow. The default OAuth error notice that Site Kit usually displays when the OAuth flow returns an error does not appear. ✅

      Analytics.update.loads.only.when.we.scroll.to.the.section.mov