Redirect to OAuth flow from the Setup Component to provide the edit scope when needed

[techanvil]

Feature Description

The Analytics edit scope is required in order to set up a property and measurement ID. When displaying the Setup Component in one of the "no existing GA4 property" variants, check if the user has the edit scope. An example of checking for the edit scope can be found in the Analytics SetupForm component. If the edit scope is not present then the following should happen.

Show an informative message in the component:

You will need to give Site Kit permission to create an Analytics property on your behalf.

When the Setup Component CTA is pressed, the OAuth flow should be initiated to allow the user to grant permission for the edit scope. For an example of navigating to the OAuth flow, see the onConfirm callback in the AuthenticatedPermissionsModal.

Upon return from the OAuth flow, ensure the Setup Component is still displayed. To enable this, a persistent stateful value should be set prior to redirecting to OAuth, which can be queried upon return to determine the local state and thus to show the Setup Component again.

To persist/retrieve the state, use setValues / getValue from the core/forms store in conjunction with calling snapshotAllStores prior to redirecting to the OAuth flow.

• Design Doc: https://docs.google.com/document/d/1DeWo38lcV7lvLFfcmt-mQ0iaxzB4qfiPArs_yZzYkIM/edit#heading=h.2g0r7ejoqctz
• Figma: https://www.figma.com/file/vMaCWwr6lpk4PrJWb7jIpz/GA4-Banner-Input?node-id=1082%3A1526

---

Acceptance criteria

• When displaying the Setup Component in one of the "no existing GA4 property" variants, and the Analytics edit scope is not present:
  • An informative message should be shown in the component:
    • You will need to give Site Kit permission to create an Analytics property on your behalf.
  • The OAuth flow to grant the edit scope should be initiated when the Create property CTA is clicked.
  • Upon returning from the the OAuth flow, the Setup Component should be displayed in the same state as it last was in.

Implementation Brief

In assets/js/modules/analytics-4/components/dashboard/ActivationBanner/index.js, add the following logic for the "no existing GA4 property" variants:

• Get the user has edit scope using the hasScope selector of CORE_USER store by passing the EDIT_SCOPE constant from assets/js/modules/analytics/datastore/constants.
• If the user does not have the edit scope, show an informative message below the CTA:
  • You will need to give Site Kit permission to create an Analytics property on your behalf.
• Get the permissions error using the getPermissionScopeError selector of CORE_USER store.
• Get the connect URL to navigate using the getConnectURL selector of the CORE_USER store.
• Pass an object to the getConnectURL selector with the following properties:
  • additionalScopes with the value scopes obtained from the getPermissionScopeError selector.
  • redirectURL with value global.location.href.
• Modify the handleCTAClick to async callback using the useCallback hook and add the following:
  • Set a global state using the setValues action of the CORE_FORMS store with the key GA4_ACTIVATION_BANNER_STATE and the value as an object containing property returnToSetupStep to the value true.
  • Call the snapshotAllStores function from the assets/js/googlesitekit/data/create-snapshot-store.js and pass the registry using the useRegistry hook.
  • Dispatch the navigateTo action of the CORE_LOCATION store and pass the connectURL obtained from the getConnectURL selector. See:
    

    site-kit-wp/assets/js/components/PermissionsModal/AuthenticatedPermissionsModal.js

    Lines 55 to 60 in fa5b156

    	const onConfirm = useCallback( async () => {
    	// If we have a datastores to snapshot before navigating away to the
    	// authorization page, do that first.
    	await snapshotAllStores( registry );
    	navigateTo( connectURL );
    	}, [ registry, connectURL, navigateTo ] );

• Upon returning from the OAuth flow, to display the Setup component in the same state, get the step state using the getValues selector of the CORE_FORMS store (which was stored before calling snapshotAllStores).
• After returning from the OAuth flow, add the following logic in a useEffect if the returnToSetupStep is true:
  • Set ACTIVATION_STEP_SUCCESS to the local state setStep.
  • Set returnToSetupStep to false using setValues with the key GA4_ACTIVATION_BANNER_STATE.
  • Call the snapshotAllStores function.

Test Coverage

• No new tests are to be added.

QA Brief

• Ensure ga4ActivationBanner feature flag is enabled.
• Ensure UA is connected, but GA4 is not connected in your SK setup.
• To get the "no existing GA4 property" variant, ensure there are no GA4 properties available in your Google account.
• Ensure the Google use doesn't have an edit scope. If this is impossible to achieve via the Analytics dashboard console, we can trick SK into thinking it isn't granted even if it is by deleting the wp_googlesitekit_additional_auth_scopes meta key for your user from the wp_usermeta table.
• Ensure an informative message is displayed below the Create property CTA as per the AC.
• Upon clicking the Create property CTA, ensure the user is redirected to the OAuth flow and grant access upon the return.
• Ensure the user is landed on the same setup after the successful OAuth flow and grant access.
• For CR, ensure this new story displays the informative message as per the AC.
• For QA, ensure this new story displays the informative message as per the AC.

Changelog entry

• Redirect to the OAuth flow from the GA4 Activation Banner to provide the Analytics edit scope when needed.

[techanvil]

IB ✅