Enhancement/8976 Refactor Gathering Data Notification

assets/js/components/notifications/BannerNotifications.js

@@ -38,16 +38,20 @@ import ModuleRecoveryAlert from '../dashboard-sharing/ModuleRecoveryAlert';
 import AdSenseAlerts from './AdSenseAlerts';
 import EnhancedMeasurementActivationBanner from '../../modules/analytics-4/components/dashboard/EnhancedMeasurementActivationBanner';
 import useViewOnly from '../../hooks/useViewOnly';
-import ZeroDataStateNotifications from './ZeroDataStateNotifications';
+import useViewContext from '../../hooks/useViewContext';
+import ZeroDataNotification from './ZeroDataNotification';
 import EnableAutoUpdateBannerNotification from './EnableAutoUpdateBannerNotification';
 import GoogleTagIDMismatchNotification from './GoogleTagIDMismatchNotification';
 import WebDataStreamNotAvailableNotification from './WebDataStreamNotAvailableNotification';
 import AdBlockingRecoverySetupSuccessBannerNotification from './AdBlockingRecoverySetupSuccessBannerNotification';
 import { CORE_UI } from '../../googlesitekit/datastore/ui/constants';
 import { UI_KEY_KEY_METRICS_SETUP_CTA_RENDERED } from '../KeyMetrics/KeyMetricsSetupCTARenderedEffect';
+import { NOTIFICATION_AREAS } from '../../googlesitekit/notifications/datastore/constants';
+import Notifications from './Notifications';
 
 export default function BannerNotifications() {
 	const viewOnly = useViewOnly();
+	const viewContext = useViewContext();
 
 	const isAuthenticated = useSelect( ( select ) =>
 		select( CORE_USER ).isAuthenticated()
@@ -90,7 +94,15 @@ export default function BannerNotifications() {
 	const [ slug ] = useQueryArg( 'slug' );
 
 	if ( viewOnly ) {
-		return <ZeroDataStateNotifications />;
+		return (
+			<Fragment>
+				<ZeroDataNotification />
+				<Notifications
+					viewContext={ viewContext }
+					areaSlug={ NOTIFICATION_AREAS.BANNERS_ABOVE_NAV }
+				/>
+			</Fragment>
+		);
 	}
 
 	return (
@@ -117,7 +129,15 @@ export default function BannerNotifications() {
 					<WebDataStreamNotAvailableNotification />
 				</Fragment>
 			) }
-			<ZeroDataStateNotifications />
+			<Notifications
+				viewContext={ viewContext }
+				areaSlug={ NOTIFICATION_AREAS.BANNERS_ABOVE_NAV }
+			/>
+			{ /* Temporary hack to give priority to the `GatheringDataNotification` component queued by `Notifications`.
+			This happens because `hasZeroData` selectors return true within `ZeroDataNotification` even if a module is
+			still gathering data. `ZeroDataNotification` should be refactored next which will make `Notifications`
+			the last component to be rendered. */ }
+			<ZeroDataNotification />
 		</Fragment>
 	);
 }

assets/js/components/notifications/BannerNotifications.test.js

@@ -20,6 +20,7 @@
  * Internal dependencies
  */
 import {
+	act,
 	createTestRegistry,
 	muteFetch,
 	provideModules,
@@ -37,6 +38,11 @@ import { mockLocation } from '../../../../tests/js/mock-browser-utils';
 import BannerNotifications from './BannerNotifications';
 import Header from '../Header';
 import { MODULES_ANALYTICS_4 } from '../../modules/analytics-4/datastore/constants';
+import { VIEW_CONTEXT_MAIN_DASHBOARD } from '../../googlesitekit/constants';
+import {
+	CORE_NOTIFICATIONS,
+	NOTIFICATION_AREAS,
+} from '../../googlesitekit/notifications/datastore/constants';
 
 describe( 'BannerNotifications', () => {
 	mockLocation();
@@ -94,6 +100,7 @@ describe( 'BannerNotifications', () => {
 		registry.dispatch( CORE_USER ).receiveGetSurvey( { survey: null } );
 		registry.dispatch( CORE_SITE ).receiveGetNotifications( [] );
 		registry.dispatch( CORE_USER ).receiveNonces( [] );
+		registry.dispatch( MODULES_ANALYTICS_4 ).receiveGetSettings( [] );
 		registry
 			.dispatch( MODULES_ANALYTICS_4 )
 			.receiveHasMismatchGoogleTagID( false );
@@ -107,6 +114,7 @@ describe( 'BannerNotifications', () => {
 			<BannerNotifications />,
 			{
 				registry,
+				viewContext: VIEW_CONTEXT_MAIN_DASHBOARD,
 			}
 		);
 
@@ -127,6 +135,7 @@ describe( 'BannerNotifications', () => {
 			<BannerNotifications />,
 			{
 				registry,
+				viewContext: VIEW_CONTEXT_MAIN_DASHBOARD,
 			}
 		);
 
@@ -138,6 +147,23 @@ describe( 'BannerNotifications', () => {
 	} );
 
 	it( 'prioritizes errors over alerts and regular notifications', async () => {
+		// Trigger the gathering data notification using the new registration process
+		act( () => {
+			registry
+				.dispatch( CORE_NOTIFICATIONS )
+				.registerNotification( 'gathering-data-notification', {
+					Component() {
+						return (
+							<div className="googlesitekit-publisher-win">
+								Test notification!
+							</div>
+						);
+					},
+					areaSlug: NOTIFICATION_AREAS.BANNERS_ABOVE_NAV,
+					viewContexts: [ VIEW_CONTEXT_MAIN_DASHBOARD ],
+				} );
+		} );
+
 		// Trigger the error notification.
 		provideUserAuthentication( registry, {
 			unsatisfiedScopes: [
@@ -157,6 +183,7 @@ describe( 'BannerNotifications', () => {
 			<Header subHeader={ <BannerNotifications /> } />,
 			{
 				registry,
+				viewContext: VIEW_CONTEXT_MAIN_DASHBOARD,
 			}
 		);
 
@@ -178,6 +205,23 @@ describe( 'BannerNotifications', () => {
 	} );
 
 	it( 'prioritizes alerts over regular notifications', async () => {
+		// Trigger the gathering data notification using the new registration process
+		act( () => {
+			registry
+				.dispatch( CORE_NOTIFICATIONS )
+				.registerNotification( 'gathering-data-notification', {
+					Component() {
+						return (
+							<div className="googlesitekit-publisher-win">
+								Test notification!
+							</div>
+						);
+					},
+					areaSlug: NOTIFICATION_AREAS.BANNERS_ABOVE_NAV,
+					viewContexts: [ VIEW_CONTEXT_MAIN_DASHBOARD ],
+				} );
+		} );
+
 		// Ensure setup completed notification is added.
 		global.location.href =
 			'http://example.com/wp-admin/admin.php?notification=authentication_success';
@@ -193,6 +237,7 @@ describe( 'BannerNotifications', () => {
 			<BannerNotifications />,
 			{
 				registry,
+				viewContext: VIEW_CONTEXT_MAIN_DASHBOARD,
 			}
 		);
 

assets/js/components/notifications/EntityBannerNotifications.js

@@ -24,12 +24,25 @@ import { Fragment } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import ZeroDataNotifications from './ZeroDataStateNotifications';
+import ZeroDataNotification from './ZeroDataNotification';
+import Notifications from './Notifications';
+import useViewContext from '../../hooks/useViewContext';
+import { NOTIFICATION_AREAS } from '../../googlesitekit/notifications/datastore/constants';
 
 export default function EntityBannerNotifications() {
+	const viewContext = useViewContext();
+
 	return (
 		<Fragment>
-			<ZeroDataNotifications />
+			<Notifications
+				viewContext={ viewContext }
+				areaSlug={ NOTIFICATION_AREAS.BANNERS_ABOVE_NAV }
+			/>
+			{ /* Temporary hack to give priority to the `GatheringDataNotification` component queued by `Notifications`.
+			This happens because `hasZeroData` selectors return true within `ZeroDataNotification` even if a module is
+			still gathering data. `ZeroDataNotification` should be refactored next which will make `Notifications`
+			the last component to be rendered. */ }
+			<ZeroDataNotification />
 		</Fragment>
 	);
 }

assets/js/components/notifications/ZeroDataStateNotifications/GatheringDataNotification.js → assets/js/components/notifications/GatheringDataNotification.js

@@ -16,11 +16,6 @@
  * limitations under the License.
  */
 
-/**
- * External dependencies
- */
-import PropTypes from 'prop-types';
-
 /**
  * WordPress dependencies
  */
@@ -31,16 +26,14 @@ import { useCallback } from '@wordpress/element';
  * Internal dependencies
  */
 import { useSelect } from 'googlesitekit-data';
-import BannerNotification from '../BannerNotification';
-import GatheringDataIcon from '../../../../svg/graphics/zero-state-red.svg';
-import { CORE_SITE } from '../../../googlesitekit/datastore/site/constants';
-import { DAY_IN_SECONDS, trackEvent } from '../../../util';
-import useViewContext from '../../../hooks/useViewContext';
+import BannerNotification from './BannerNotification';
+import GatheringDataIcon from '../../../svg/graphics/zero-state-red.svg';
+import { CORE_SITE } from '../../googlesitekit/datastore/site/constants';
+import { DAY_IN_SECONDS, trackEvent } from '../../util';
+import useViewContext from '../../hooks/useViewContext';
+import useModuleGatheringZeroData from '../../hooks/useModuleGatheringZeroData';
 
-export default function GatheringDataNotification( {
-	title,
-	gatheringDataWaitTimeInHours,
-} ) {
+export default function GatheringDataNotification() {
 	const viewContext = useViewContext();
 	const eventCategory = `${ viewContext }_gathering-data-notification`;
 	const handleOnView = useCallback( () => {
@@ -57,14 +50,40 @@ export default function GatheringDataNotification( {
 		select( CORE_SITE ).getAdminURL( 'googlesitekit-settings' )
 	);
 
+	const { analyticsGatheringData, searchConsoleGatheringData } =
+		useModuleGatheringZeroData();
+
+	let gatheringDataTitle;
+	// Analytics requires up to 72 hours to gather data.
+	let gatheringDataWaitTimeInHours = 72;
+	if ( analyticsGatheringData && searchConsoleGatheringData ) {
+		gatheringDataTitle = __(
+			'Search Console and Analytics are gathering data',
+			'google-site-kit'
+		);
+	} else if ( analyticsGatheringData ) {
+		gatheringDataTitle = __(
+			'Analytics is gathering data',
+			'google-site-kit'
+		);
+	} else if ( searchConsoleGatheringData ) {
+		// If only Search Console is gathering data, show a lower wait
+		// time, since it only requires 48 hours.
+		gatheringDataWaitTimeInHours = 48;
+		gatheringDataTitle = __(
+			'Search Console is gathering data',
+			'google-site-kit'
+		);
+	}
+
 	if ( ! gatheringDataWaitTimeInHours ) {
 		return null;
 	}
 
 	return (
 		<BannerNotification
 			id="gathering-data-notification"
-			title={ title }
+			title={ gatheringDataTitle }
 			description={ sprintf(
 				/* translators: %s: the number of hours the site can be in a gathering data state */
 				_n(
@@ -88,8 +107,3 @@ export default function GatheringDataNotification( {
 		/>
 	);
 }
-
-GatheringDataNotification.propTypes = {
-	title: PropTypes.string,
-	gatheringDataWaitTimeInHours: PropTypes.number,
-};

assets/js/components/notifications/GatheringDataNotification.stories.js

@@ -0,0 +1,101 @@
+/**
+ * GatheringDataNotification Component Stories.
+ *
+ * Site Kit by Google, Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Internal dependencies
+ */
+import { provideModules } from '../../../../tests/js/utils';
+import WithRegistrySetup from '../../../../tests/js/WithRegistrySetup';
+import { MODULES_ANALYTICS_4 } from '../../modules/analytics-4/datastore/constants';
+import { MODULES_SEARCH_CONSOLE } from '../../modules/search-console/datastore/constants';
+import GatheringDataNotification from './GatheringDataNotification';
+
+function Template( { setupRegistry } ) {
+	return (
+		<WithRegistrySetup func={ setupRegistry }>
+			<GatheringDataNotification />
+		</WithRegistrySetup>
+	);
+}
+
+export const AnalyticsGatheringData = Template.bind( {} );
+AnalyticsGatheringData.storyName = 'Analytics Gathering Data';
+AnalyticsGatheringData.args = {
+	setupRegistry: ( registry ) => {
+		registry
+			.dispatch( MODULES_SEARCH_CONSOLE )
+			.receiveIsGatheringData( false );
+		registry.dispatch( MODULES_ANALYTICS_4 ).receiveIsGatheringData( true );
+	},
+};
+
+export const SearchConsoleGatheringData = Template.bind( {} );
+SearchConsoleGatheringData.storyName = 'Search Console Gathering Data';
+SearchConsoleGatheringData.args = {
+	setupRegistry: ( registry ) => {
+		registry
+			.dispatch( MODULES_SEARCH_CONSOLE )
+			.receiveIsGatheringData( true );
+		registry
+			.dispatch( MODULES_ANALYTICS_4 )
+			.receiveIsGatheringData( false );
+	},
+};
+
+export const SearchConsoleAndAnalyticsGatheringData = Template.bind( {} );
+SearchConsoleAndAnalyticsGatheringData.storyName =
+	'Search Console And Analytics Gathering Data';
+SearchConsoleAndAnalyticsGatheringData.args = {
+	setupRegistry: ( registry ) => {
+		registry
+			.dispatch( MODULES_SEARCH_CONSOLE )
+			.receiveIsGatheringData( true );
+		registry.dispatch( MODULES_ANALYTICS_4 ).receiveIsGatheringData( true );
+	},
+};
+
+export default {
+	title: 'Components/Notifications/GatheringDataNotification',
+	decorators: [
+		( Story, { args } ) => {
+			const setupRegistry = ( registry ) => {
+				provideModules( registry, [
+					{
+						active: true,
+						connected: true,
+						slug: 'search-console',
+					},
+					{
+						active: true,
+						connected: true,
+						slug: 'analytics-4',
+					},
+				] );
+
+				// Call story-specific setup.
+				args.setupRegistry( registry );
+			};
+
+			return (
+				<WithRegistrySetup func={ setupRegistry }>
+					<Story />
+				</WithRegistrySetup>
+			);
+		},
+	],
+};