Implement the OAuth flow for the Setup CTA Banner

[techanvil]

Feature Description

Implement the redirection to OAuth to grant the edit scope for the Setup CTA Banner.

Note that this issue only covers the happy path, the unhappy path will be implemented separately via #8134.

See setup CTA banner > setup logic in the design doc.

---

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

Acceptance criteria

• If the user does not have the Analytics Admin Edit scope, then clicking on Enable groups in the Setup CTA 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 happy path implemented in Implement the happy path for creating audiences and the custom dimension via the Setup CTA Banner #8131 should be followed.

Implementation Brief

• Update assets/js/modules/analytics-4/components/dashboard/AudienceSegmentation/AudienceSegmentationSetupCTAWidget.js
  • Add a callback function for Enable groups CTA:
    • Check if user does not has Analytics 4 Edit scope, to trigger the setPermissionScopeError for ANALYTICS_EDIT_SCOPE. You can see an example here
    • Append query argument notification with value, say audience_segmentation, to bypass authentication_success banner. You can see an example here
    • Set autoSubmit value on CORE_FORMS, by dispatching setValues action, and assign it to, say, AUDIENCE_SEGMENTATION_SETUP_FORM. You can see an example here
• Update the setup component implemented in Implement the happy path for creating audiences and the custom dimension via the Setup CTA Banner #8131 to proceed with the setup step (when user has the ANALYTICS_EDIT_SCOPE) if query argument autoSubmit is true

Test Coverage

• Update jest tests to verify this scenario of jumping to the setup step after OAuth redirection. You can see example of mocking the redirect url here

QA Brief

1. Setup Site Kit with the audienceSegmentation feature flag enabled.
2. Connect an Analytics property which is not in the "gathering data" state - preferably a property which already has enhanced measurement enabled, so it's not necessary to grant the edit scope during setup.
3. If it was necessary to grant the edit scope during setup, disconnect and then reconnect Site Kit to clear the granted scope.
4. Refresh the dashboard, as the Audience Segmentation Setup CTA won't show up on the first page load while the gathering data state is being resolved.
5. Click on the Enable groups button - this should navigate to the OAuth flow. Proceed through the OAuth flow and grant the requested permissions, upon which the browser should navigate back to the Site Kit dashboard. The CTA should now be in its loading state with the text "Enabling groups" and a spinner showing in the button.
6. Once the operation is completed, the CTA banner will disappear and a success notice will be displayed with the heading:

Success! Visitor groups added to your dashboard

Changelog entry

• Navigate to the OAuth flow as needed when setting up Audience Segmentation from the Setup CTA Banner.

[tofumatt]

ACs sound good 👍🏻

[techanvil]

Hi @zutigrm, the IB is looking good, however I am not sure we should use the notification query param as the condition for reshowing the banner and continuing to the next step.

It's not an approach we have taken to date, rather we have a pattern of setting an autoSubmit form value, which is persisted via the store snapshot mechanism and restored on the next page load. For example:

site-kit-wp/assets/js/modules/analytics-4/components/common/AccountCreate/index.js

Lines 151 to 163 in efdd75e

	setValues( FORM_ACCOUNT_CREATE, { autoSubmit: true } );
	setPermissionScopeError( {
	code: ERROR_CODE_MISSING_REQUIRED_SCOPE,
	message: __(
	'Additional permissions are required to create a new Analytics account.',
	'google-site-kit'
	),
	data: {
	status: 403,
	scopes,
	skipModal: true,
	},
	} );

We then use the autoSubmit value in the conditions for restoring the previous UI state and continuing.

I'd suggest we take the same approach here, in part for consistency, but also because it will be useful for the unhappy path too. We can use it for showing the error modal - the notification param may not be present in this scenario.

[zutigrm]

@techanvil Thank you for the feedback, I forgot about autoSubmit 🤦 . I updated the IB

[techanvil]

Thanks @zutigrm! IB LGTM. ✅

[ankitrox]

Adding "Blocked by" #8707 because some logic inside the component AudienceSegmentationSetupCTAWidget will get changed in 8707 because of which tests for this issue needs to accommodate the change.

[techanvil]

Hey @ankitrox, I've left a few comments on the PR.

With regard to the QAB - although it could be enough to give the QA team sufficient direction, it would be useful to provide a bit more detail.

I've gone ahead and rewritten it a bit myself, please review the changes and make sure you are happy with them. Note that I've completely omitted the point about visiting https://myaccount.google.com/connections to remove permissions - we don't generally need to do that, in the scenario here simply disconnecting and reconnecting Site Kit is sufficient.

[ankitrox]

Hi @techanvil ,

We can discuss about the use of mocks for the actions later when @aaemnnosttv is available. However; I have changed the tests to make use of assertions for enableAudienceGroups action so that those are more of the integration in nature as per the convention.

Please note that I have made the use of muteFetch for reports endpoint as this is not really specific to the tests being performed and to keep the tests readable.

Also, updated these tests so that this ticket can be moved ahead because there are some other tickets which are dependent on this one.

Assigning this to you for re-review.

Thank you

[techanvil]

Thanks @ankitrox! As per my review comment, I am not seeing the updated version of the tests. Maybe you need to push a recent change?

[ankitrox]

@techanvil Sorry, that was my bad! I committed the changes, but missed to push them.

I have pushed the changes and those should be available. Please refer to this commit where I have removed mock's implementation just to stick to our convention.

[techanvil]

No worries, thanks @ankitrox! As per my latest review this needs one more pass, please take a look.

[ankitrox]

@techanvil Thank you.

Tests updated as per suggestions.