Ensure cached audiences are resynced when the No Audiences Banner is shown

[techanvil]

Feature Description

At present, when the conditions are met for showing the No Audiences Banner, the list of cached audiences will no longer be synced periodically. We should ensure they continue to be synced, showing the appropriate loading state while the sync is in progress.

---

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

Acceptance criteria

• When the conditions are present for showing the No Audiences Banner, the user is an an authenticated user, and the list of cached audiences were last synced over an hour ago:
  • The list of cached audiences should be resynced.
  • Two Audience Tiles should be displayed in the loading state while the cached audiences are being resynced.

Implementation Brief

In order to synchronise the display of the No Audiences Banner with the Audience Tiles loading state, we'll remove the registration of NoAudiencesBannerWidget as a standalone widget, and instead render it inline in AudienceTilesWidget.

• Within AudienceTilesWidget:
  • await the call to maybeSyncAvailableAudiences(), ensuring availableAudiencesSynced is not set until the available audiences have completed their sync. This ensures the loading state will persist until the audiences have synced.
    

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

    Lines 52 to 55 in f13fb02

    	if ( ! availableAudiencesSynced && ! isSettingUpAudiences ) {
    	maybeSyncAvailableAudiences();
    	setAvailableAudiencesSynced( true );
    	}

  • Update the block that renders WidgetNull when there is no matching audience:
    

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

    Lines 66 to 68 in f13fb02

    	if ( ! hasMatchingAudience ) {
    	return <WidgetNull />;
    	}

    )
    • Remove the rendering of WidgetNull.
    • If availableAudiencesSynced is true, render NoAudiencesBannerWidget.
    • Otherwise, render two Audience Tiles in the loading state, as seen here:
      

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

      Lines 75 to 84 in f13fb02

      	<Widget className="googlesitekit-widget-audience-tiles" noPadding>
      	<div className="googlesitekit-widget-audience-tiles__body">
      	<Widget noPadding>
      	<AudienceTileLoading />
      	</Widget>
      	<Widget noPadding>
      	<AudienceTileLoading />
      	</Widget>
      	</div>
      	</Widget>

• Within modules/analytics-4/index.js:
  • Remove the registration of the NoAudiencesBannerWidget widget.
  • Update the isActive() condition for the AudienceTilesWidget to be a check for !! configuredAudiences.
    

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

    Lines 138 to 142 in f13fb02

    	isActive: ( select ) => {
    	const configuredAudiences =
    	select( CORE_USER ).getConfiguredAudiences();
    	return configuredAudiences?.length > 0;
    	},

Test Coverage

• Add JS test coverage for the changes to AudienceTilesWidget.

QA Brief

1. Enable audience segmentation feature and enable the visitor groups. Property should have the Site Kit audience created (New visitors and Returning visitors), if not, create them.

2. Add "New Visitors" and "Returning Visitors" tiles in dashboard using audience selection panel.

3. In tester plugin settings, Analytics > Force Analytics Audiences, select has-no-site-kit-created-audiences and save.

4. Go to SK dashboard, there should be a no audience banner displayed in audience tiles area.

5. Install Time Travel extension in chrome.

6. Set the time in extension to more than 1 hour later.

7. Refresh the dashboard and notice in network tab, there should be a request sent to sync-audiences endpoint. When you disable the extension, there should be no request to the endpoint if done within an hour.

8. To verify that two loading tiles are shown when audiences are being synced, set the network throttling in chrome to 3G. Enable Time Travel extension and refresh the SK dashboard. You should see two loading audiences tiles when sync-audiences request is being processed.

Changelog entry

• Ensure cached audiences are resynced when the No Audiences Banner is shown.

[nfmohit]

IB ✅

[mohitwp]

QA Update ✅

• Tested on dev environment.
• Tested using Time Travel extension.

Verified that-

• on refreshing the dashboard , a request sent to sync-audiences endpoint under network tab.
• when we disable the extension, there is no request to the endpoint if done within an hour.
• the list of cached audiences gets resynced.
• Two Audience Tiles display in the loading state while the cached audiences are being resynced.

Recording.1426.mp4