Connect modules briefly shows another module connected.

[ivankruchkoff]

Bug Description

When I click connect service, it always shows the right mode service as connected before redirecting to Google for auth.

Steps to reproduce

1. Go to /wp-admin/admin.php?page=googlesitekit-dashboard&notification=authentication_success
2. Search Console = "Connected", AdSense, Analytics and PageSpeed Insights = "Connect Service"
3. Click on any Connect Service
4. Prior to redirect for auth, PageSpeed Insights shows as Connected.

Screenshots

Added a video repro, intentionally not showing the Google Auth part:

connected-bug.mp4

---

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

Acceptance criteria

• When activating a module from the "Congrats" notification (which shows up after connecting Site Kit or a module), every module should remain in its current UI state all the way until the user is redirected to OAuth (i.e. it should not visually change to looking as connected before then).

Implementation Brief

• Comment out the automatic fetching of getModules when toggling module activation

  site-kit-wp/assets/js/googlesitekit/modules/datastore/modules.js

  Lines 219 to 222 in 47b723d

  	const { response, error } = yield fetchSetModuleActivationStore.actions.fetchSetModuleActivation( slug, active );
  	if ( response?.success === true ) {
  	// Fetch (or re-fetch) all modules, with their updated status.
  	yield fetchGetModulesStore.actions.fetchGetModules();

  • This will leave the module in the same state within the App until the page is refreshed, which is often needed anyways for the change to take effect to being setup, etc
  • Add a TODO comment to clarify that this should be restored later when Site Kit no longer relies on page reloads between module activation changes
• Remove localized workarounds added to fix this in module settings

  • site-kit-wp/assets/js/components/settings/SettingsActiveModules.js

    Lines 34 to 36 in 47b723d

    	// We store `initialActiveSlugs` separately to avoid
    	// layout shifts when deactivating a module as it would otherwise
    	// cause the module to be removed upon deactivation.

  • site-kit-wp/assets/js/components/settings/SettingsInactiveModules.js

    Lines 38 to 40 in 47b723d

    	// We store `initialInactiveSlugs` separately to avoid
    	// layout shifts when activating a module as it would otherwise
    	// cause the activated module to be removed upon activation.

• Finish and merge Receive module state on page load only #4141
  • Mostly just updates to tests left

Test Coverage

• Update tests for module activation to not refetch all modules (and thus update state)
• Add tests if not covered by the last point to ensure activating or deactivating a module does not immediately change its active/connected state

QA Brief

• Activate or deactivate a module in the settings and make sure that the list of modules doesn't change until the page is refreshed or after navigating back to the settings page.
• Activate a module from the congrats notification banner and verify that modules do not change their statuses until the page is refreshed.

Changelog entry

• Fix a bug that could cause the wrong module to show that it's being connected during module setup.

[abdullah1908]

@ivankruchkoff I am unable to reproduce this issue at my end. Would you mind to share more information so we can try to setup same environment & can replicate at our end.
cc: @jamesozzie

[mxbclang]

@ivankruchkoff Just checking in here – are you able to share some more details so that @abdullah1908 can try to run some more tests? Thanks!

[wpdarren]

@abdullah1908 @bethanylang An interesting issue that I have recreated, but the steps are not what you would expect a user to go through. That said, I will leave it up to the engineers to make the decision if we fix this.

Here are the steps I took to recreate:

1. Disconnect and reset Site Kit if you are using a site that has previously had the plugin activated.
2. Use this zip file (this was from 1.26.0 pre-release) google-site-kit.zip
3. Connect your Google account to Site Kit and go through the setup for Search Console.
4. You should be redirected to the Site Kit Dashboard ( /wp-admin/admin.php?page=googlesitekit-dashboard&notification=authentication_success)
5. Click on the Connect Service link for Google Analytics (or Adsense)
6. The Google authorisation page should appear. Don't authorise, instead click back on your browser.
7. You are then taken back to the Site Kit Dashboard. Click on the Connect Service link for PageSpeed Insights.
8. The Google authorisation page should appear. Don't authorise, instead click back on your browser.
9. You are then taken back to the Site Kit Dashboard. Click on the Connect Service link for Analytics.
10. What you will then see is the connect icon appears under PageSpeed Insights even though you clicked Analytics.

It then gets caught up in a bit of a loop.

Please note even when you use the latest version of Site Kit this issue still occurs.

Here's a screencast in case this helps:

Screen.Capture.on.2021-03-17.at.00-20-33.mov

[mxbclang]

@felixarntz Reassigning to you for triage. As Darren noted, this looks like a pretty isolated edge case, so probably not a priority.

[ivankruchkoff]

So the easier way to resolve this particular issue is a cache invalidation param in the selector causing it to fire again in:
https://github.com/google/site-kit-wp/blob/d8e741b/assets/js/components/ModulesList.js#L51

const cacheBust = +new Date;
const modulesData = useSelect( ( select ) => select( CORE_MODULES ).getModules( cacheBust ) );

The better solution here is to think of modules as having three states rather than two, currently we have a boolean active in assets/js/googlesitekit/modules/datastore/modules.js

site-kit-wp/assets/js/googlesitekit/modules/datastore/modules.js

Line 211 in d8e741b

*setModuleActivation( slug, active ) {

What we really need is active, inactive, and pending activation when activation is in progress, otherwise we go from inactive to active, before we've finished activation and we get unintended UI updates such as the following:

2796-2.mp4

After the UI update in the video, we are redirected to Google for auth to get permissions to activate Analytics, so any component that depends on whether or not the analytics module is active would behave the same.

What are your thoughts @felixarntz and @aaemnnosttv?