Auto-submit the Setup Component form having returned from the OAuth flow

Feature Description

Making use of the state persistence implemented in #5278, ensure the create/connect property execution is automatically continued when returning from the OAuth flow.

An example of this can be seen in the usage of the autoSubmit value in the Analytics SetupForm component.

• 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

• Having initiated the OAuth flow to grant the edit scope, via pressing the Create property CTA on the Setup Component, upon returning from the the OAuth flow the Setup Component should be displayed and the property creation should automatically continue, without the user having to press Create property again.
• The effect should be as though the user has pressed Create property i.e. the activity spinner will be shown in the button while the property and measurement ID are created and connected.

Implementation Brief

The Setup Component is being Implemented in #5270 and #5275. Add the following logic to the Setup Component:

• When the user returns from the OAuth flow, the Setup Component should be displayed using an autoSubmit state.
• Get autoSubmit state of CORE_FORMS store by passing FORM_SETUP and 'autoSubmit' as a string.
• Create a submitForm async callback using the useCallback hook with the following:
  • It receives the event as an argument and prevents the event’s default behavior.
  • It should submit the changes by dispatching the submitChanges() action of the modules/analytics-4 store.
  • Check for permission scope error using isPermissionScopeError helper and pass the error object returned from the submitChanges() action.
  • If there that returns true, dispatch the setValues action of the CORE_FORMS store with autoSubmit set to true.
  • If there is no error, dispatch the setValues action of the CORE_FORMS store with autoSubmit set to false.
  • If there is no error, call the finishSetup callback.
• Using the useEffect hook, call the submitForm callback when the autoSubmit state changes and is true.
• If hasEditScope was already available, the condition in the useEffect hook should check for autoSubmit AND hasEditScope to call the submitForm callback.
• Pass preventDefault as an empty method within an object as the event argument to the submitForm callback.
• It should be similar to the autoSubmit logic in the Analytics SetupForm component. See: https://github.com/google/site-kit-wp/blob/ebbe2b8ab57ee87215f28f0395da1268fdf667f2/assets/js/modules/analytics/components/setup/SetupForm.js#L60-L90

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.
• 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.
• Ensure the form is auto-submitted after returning from the OAuth flow.
• Ensure the spinner is displayed while auto-submitting the form.
• Ensure either error or the property was created after the form auto-submit.

Update

• As a follow-up fix for observation #2 from this comment, ensure after setting up the GA4 from the activation banner, the Connect Google Analytics 4 button doesn’t appear.

Changelog entry

• Automatically continue creating/connecting a GA4 property on the GA4 Activation Banner upon return from the OAuth flow.

[techanvil]

Hi @wpdarren, thanks for spotting this.

The problem here is that the “Congrats on completing the setup for Site Kit!” success notification is presently hard wired to show up when returning from the OAuth flow, regardless of where it was initiated. This notification can be dismissed and will then not show up next time OAuth is transited. Once it’s dismissed, or if it doesn’t display due to a previous dismissal, the GA4 Activation Banner flow will continue as expected.

What we need to do is to prevent this notification from showing up at all when OAuth is initiated from the GA4 Activation Banner. However the solution for this should go through the usual review process. As such I have created a separate issue to fix it - https://github.com/google/site-kit-wp/issues/5837.

I would suggest that this current issue could be QA’d taking into account the success notification as described (i.e. it should essentially work when dismissing the notification, and also it should work without interruption having previously dismissed it). Alternatively, we can hold off until #5837 has been done.

Hopefully that all makes sense, please let me know what you think or if anything could do with a bit more clarification.

[wpdarren]

QA Update: ✅

Verified:

• Upon clicking the Create property CTA, the user is redirected to the OAuth flow and grant access upon the return.
  • The user lands on the same setup after the successful OAuth flow and grant access.
  • The form is auto-submitted after returning from the OAuth flow.
  • The spinner is displayed while auto-submitting the form.
  • The property was created after the form auto-submit.
  • The issue above is fixed. GA4 property is created and connected successfully.

https://user-images.githubusercontent.com/73545194/191232611-31de7e5a-deeb-4608-9f8c-f3ad05fe3198.mp4