Check for gathering data state in Search Console and Analytics before showing User Input notification.

.storybook/fetch-mocks.js

@@ -25,20 +25,21 @@ export function bootstrapFetchMocks() {
 	// Reset first to prevent errors when hot reloading.
 	fetchMock.reset();
 	fetchMockSaveSettings();
+	fetchMockSaveDataAvailable();
 	fetchMockGetModules();
 	fetchMockCatchAll();
 }
 
 export function fetchMockGetModules() {
-	fetchMock.get( /\/google-site-kit\/v1\/core\/modules\/data\/list/, {
+	fetchMock.get( new RegExp( '/google-site-kit/v1/core/modules/data/list' ), {
 		body: [],
 		status: 200,
 	} );
 }
 
 export function fetchMockSaveSettings() {
 	fetchMock.post(
-		/\/google-site-kit\/v1\/modules\/[\w-]+\/data\/settings/,
+		new RegExp( '/google-site-kit/v1/modules/[\\w-]+/data/settings' ),
 		( url, opts ) => {
 			const { data } = JSON.parse( opts.body );
 			return {
@@ -49,6 +50,18 @@ export function fetchMockSaveSettings() {
 	);
 }
 
+export function fetchMockSaveDataAvailable() {
+	fetchMock.post(
+		new RegExp( '/google-site-kit/v1/modules/[\\w-]+/data/data-available' ),
+		() => {
+			return {
+				status: 200,
+				body: true,
+			};
+		}
+	);
+}
+
 // Catch-all mock to log any other requests.
 export function fetchMockCatchAll() {
 	fetchMock.catch( ( url, opts ) => {

assets/js/components/KeyMetrics/KeyMetricsSetupCTAWidget.js

@@ -35,6 +35,8 @@ import { Cell, Grid, Row } from '../../material-components';
 import GhostCardsSVG from './GhostCards';
 import { CORE_MODULES } from '../../googlesitekit/modules/datastore/constants';
 import { CORE_USER } from '../../googlesitekit/datastore/user/constants';
+import { MODULES_SEARCH_CONSOLE } from '../../modules/search-console/datastore/constants';
+import { MODULES_ANALYTICS_4 } from '../../modules/analytics-4/datastore/constants';
 import { useFeature } from '../../hooks/useFeature';
 import Link from '../Link';
 import { CORE_SITE } from '../../googlesitekit/datastore/site/constants';
@@ -56,6 +58,16 @@ function KeyMetricsSetupCTAWidget( { Widget, WidgetNull } ) {
 	const ctaLink = useSelect( ( select ) =>
 		select( CORE_SITE ).getAdminURL( 'googlesitekit-user-input' )
 	);
+	const searchConsoleIsGatheringData = useSelect(
+		( select ) =>
+			searchConsoleModuleConnected &&
+			select( MODULES_SEARCH_CONSOLE ).isGatheringData()
+	);
+	const analyticsIsGatheringData = useSelect(
+		( select ) =>
+			analyticsModuleConnected &&
+			select( MODULES_ANALYTICS_4 ).isGatheringData()
+	);
 
 	const breakpoint = useBreakpoint();
 	const isMobileBreakpoint = breakpoint === BREAKPOINT_SMALL;
@@ -65,7 +77,9 @@ function KeyMetricsSetupCTAWidget( { Widget, WidgetNull } ) {
 		isUserInputCompleted === undefined ||
 		isUserInputCompleted ||
 		! analyticsModuleConnected ||
-		! searchConsoleModuleConnected
+		! searchConsoleModuleConnected ||
+		analyticsIsGatheringData !== false ||
+		searchConsoleIsGatheringData !== false
 	) {
 		return <WidgetNull />;
 	}

assets/js/components/KeyMetrics/KeyMetricsSetupCTAWidget.stories.js

@@ -19,9 +19,17 @@
 /**
  * Internal dependencies
  */
-import { provideModules } from '../../../../tests/js/utils';
-import { withWidgetComponentProps } from '../../googlesitekit/widgets/util';
+import {
+	provideModules,
+	provideUserAuthentication,
+} from '../../../../tests/js/test-utils';
 import WithRegistrySetup from '../../../../tests/js/WithRegistrySetup';
+import { getSearchConsoleMockResponse } from '../../modules/search-console/util/data-mock';
+import { getAnalytics4MockResponse } from '../../modules/analytics-4/utils/data-mock';
+import { CORE_USER } from '../../googlesitekit/datastore/user/constants';
+import { MODULES_ANALYTICS_4 } from '../../modules/analytics-4/datastore/constants';
+import { MODULES_SEARCH_CONSOLE } from '../../modules/search-console/datastore/constants';
+import { withWidgetComponentProps } from '../../googlesitekit/widgets/util';
 import KeyMetricsSetupCTAWidget from './KeyMetricsSetupCTAWidget';
 
 const WidgetWithComponentProps = withWidgetComponentProps(
@@ -30,6 +38,19 @@ const WidgetWithComponentProps = withWidgetComponentProps(
 
 const Template = () => <WidgetWithComponentProps />;
 
+const searchConsoleReportOptions = {
+	dimensions: 'date',
+	startDate: '2020-07-14',
+	endDate: '2020-09-07',
+};
+
+const analytics4ReportOptions = {
+	dimensions: [ 'date' ],
+	metrics: [ { name: 'totalUsers' } ],
+	startDate: '2020-08-11',
+	endDate: '2020-09-07',
+};
+
 export const Default = Template.bind( {} );
 Default.storyName = 'SetupCTAWidget';
 Default.scenario = {
@@ -53,6 +74,29 @@ export default {
 						connected: true,
 					},
 				] );
+				provideUserAuthentication( registry );
+
+				registry.dispatch( CORE_USER ).setReferenceDate( '2020-09-08' );
+
+				// Provide reports to ensure "gathering data" is false for Analytics 4 and Search Console modules.
+				registry
+					.dispatch( MODULES_ANALYTICS_4 )
+					.receiveGetReport(
+						getAnalytics4MockResponse( analytics4ReportOptions ),
+						{
+							options: analytics4ReportOptions,
+						}
+					);
+				registry
+					.dispatch( MODULES_SEARCH_CONSOLE )
+					.receiveGetReport(
+						getSearchConsoleMockResponse(
+							searchConsoleReportOptions
+						),
+						{
+							options: searchConsoleReportOptions,
+						}
+					);
 			};
 
 			return (

assets/js/components/KeyMetrics/KeyMetricsSetupCTAWidget.test.js

@@ -21,15 +21,34 @@
  */
 import KeyMetricsSetupCTAWidget from './KeyMetricsSetupCTAWidget';
 import { CORE_USER } from '../../googlesitekit/datastore/user/constants';
+import { MODULES_ANALYTICS_4 } from '../../modules/analytics-4/datastore/constants';
+import { MODULES_SEARCH_CONSOLE } from '../../modules/search-console/datastore/constants';
+import { getAnalytics4MockResponse } from '../../modules/analytics-4/utils/data-mock';
+import { getSearchConsoleMockResponse } from '../../modules/search-console/util/data-mock';
 import {
 	render,
 	createTestRegistry,
 	provideModules,
 	provideSiteInfo,
+	muteFetch,
 } from '../../../../tests/js/test-utils';
 
 describe( 'KeyMetricsSetupCTAWidget', () => {
 	let registry;
+
+	const searchConsoleReportOptions = {
+		dimensions: 'date',
+		startDate: '2020-07-14',
+		endDate: '2020-09-07',
+	};
+
+	const analytics4ReportOptions = {
+		dimensions: [ 'date' ],
+		metrics: [ { name: 'totalUsers' } ],
+		startDate: '2020-08-11',
+		endDate: '2020-09-07',
+	};
+
 	beforeEach( async () => {
 		registry = createTestRegistry();
 
@@ -39,12 +58,26 @@ describe( 'KeyMetricsSetupCTAWidget', () => {
 			.dispatch( CORE_USER )
 			.receiveIsUserInputCompleted( true );
 
+		registry.dispatch( CORE_USER ).setReferenceDate( '2020-09-08' );
+
 		fetchMock.getOnce(
 			new RegExp( '^/google-site-kit/v1/core/user/data/authentication' ),
 			{
 				authenticated: true,
 			}
 		);
+
+		muteFetch(
+			new RegExp(
+				'^/google-site-kit/v1/modules/analytics-4/data/data-available'
+			)
+		);
+
+		muteFetch(
+			new RegExp(
+				'^/google-site-kit/v1/modules/search-console/data/data-available'
+			)
+		);
 	} );
 
 	it( 'does not render when SC is not connected', async () => {
@@ -82,6 +115,16 @@ describe( 'KeyMetricsSetupCTAWidget', () => {
 			},
 		] );
 
+		// Provide reports to ensure "gathering data" is false for the Search Console module.
+		registry
+			.dispatch( MODULES_SEARCH_CONSOLE )
+			.receiveGetReport(
+				getSearchConsoleMockResponse( searchConsoleReportOptions ),
+				{
+					options: searchConsoleReportOptions,
+				}
+			);
+
 		const Widget = ( { children } ) => <div>{ children }</div>;
 		const WidgetNull = () => <div>NULL</div>;
 
@@ -118,6 +161,24 @@ describe( 'KeyMetricsSetupCTAWidget', () => {
 			},
 		] );
 
+		// Provide reports to ensure "gathering data" is false for Analytics 4 and Search Console modules.
+		registry
+			.dispatch( MODULES_ANALYTICS_4 )
+			.receiveGetReport(
+				getAnalytics4MockResponse( analytics4ReportOptions ),
+				{
+					options: analytics4ReportOptions,
+				}
+			);
+		registry
+			.dispatch( MODULES_SEARCH_CONSOLE )
+			.receiveGetReport(
+				getSearchConsoleMockResponse( searchConsoleReportOptions ),
+				{
+					options: searchConsoleReportOptions,
+				}
+			);
+
 		const Widget = ( { children } ) => <div>{ children }</div>;
 		const WidgetNull = () => <div>NULL</div>;
 

tests/e2e/specs/user-input-questions.test.js

@@ -16,6 +16,11 @@
  * limitations under the License.
  */
 
+/**
+ * External dependencies
+ */
+import { set } from 'lodash';
+
 /**
  * WordPress dependencies
  */
@@ -37,6 +42,8 @@ import {
 	setupAnalytics,
 	setupAnalytics4,
 } from '../utils';
+import { getAnalytics4MockResponse } from '../../../assets/js/modules/analytics-4/utils/data-mock';
+import { getSearchConsoleMockResponse } from '../../../assets/js/modules/search-console/util/data-mock';
 
 describe( 'User Input Settings', () => {
 	async function fillInInputSettings() {
@@ -95,13 +102,50 @@ describe( 'User Input Settings', () => {
 		);
 	}
 
+	function getMultiDimensionalObjectFromParams( params ) {
+		return Object.entries( params ).reduce( ( acc, [ key, value ] ) => {
+			set( acc, key, value );
+			return acc;
+		}, {} );
+	}
+
 	beforeAll( async () => {
 		await page.setRequestInterception( true );
 
 		useRequestInterception( ( request ) => {
 			const url = request.url();
 
-			if ( url.match( '/google-site-kit/v1/modules' ) ) {
+			const paramsObject = Object.fromEntries(
+				new URL( url ).searchParams.entries()
+			);
+
+			// Provide mock data for Analytics 4 and Search Console requests to ensure they are not in the "gathering data" state.
+			if (
+				url.match(
+					'/google-site-kit/v1/modules/analytics-4/data/report?'
+				)
+			) {
+				request.respond( {
+					status: 200,
+					body: JSON.stringify(
+						getAnalytics4MockResponse(
+							// Some of the keys are nested paths e.g. `metrics[0][name]`, so we need to convert the search params to a multi-dimensional object.
+							getMultiDimensionalObjectFromParams( paramsObject )
+						)
+					),
+				} );
+			} else if (
+				url.match(
+					'/google-site-kit/v1/modules/search-console/data/searchanalytics?'
+				)
+			) {
+				request.respond( {
+					status: 200,
+					body: JSON.stringify(
+						getSearchConsoleMockResponse( paramsObject )
+					),
+				} );
+			} else if ( url.match( '/google-site-kit/v1/modules' ) ) {
 				request.respond( { status: 200 } );
 			} else {
 				request.continue();