Feature Description

This issue should refactor theWebDataStreamNotAvailableNotification so that it uses the new datastore infrastructure to register and queue the notification. It should also incorporate a new "layout"

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

Acceptance criteria

• The WebDataStreamNotAvailableNotification component should be refactored so that it is registered and rendered (queued) using the new core/notifications datastore.
• This notification component should not be called directly (i.e. in BannerNotifications) but only via the generic getQueuedNotifications selector.
• The refactored component should not contain any business logic that hides it / prevents it from rendering. This logic should be contained in a callback function defined during registration.
• The component should not use the bloated BannerNotification component. Instead, it should be rendered using the new Notification component wrapper and a simpler "layout" component that solely encapsulates its structure and design.

Implementation Brief

• Update WebDataStreamNotAvailableNotification component
  • Check the UnsatisfiedScopesAlert component for an example
  • Include 2 new props - id and Notification
  • Wrap the component with Notification component passed as the prop
  • Remove the ProgressBar and it's condition from notification, as display conditions are handled in checkRequirements of the registration API, so showing progress bar is not needed any more
  • Remove usage of BannerNotification component, and replace it with the new simple layout SimpleNotification, you can start it off from assets/js/googlesitekit/notifications/components/layout/NotificationWithSmallSVG.js and remove this part

    site-kit-wp/assets/js/googlesitekit/notifications/components/layout/NotificationWithSmallSVG.js

    Lines 32 to 37 in b6c7c59

    	<Cell
    	size={ 1 }
    	className="googlesitekit-publisher-win__small-media"
    	>
    	<SmallImageSVG />
    	</Cell>

    if not already present
  • Transfer the dismiss expires logic to the new SimpleNotification as well

    site-kit-wp/assets/js/components/notifications/BannerNotification/index.js

    Lines 142 to 156 in b6c7c59

    	useMount( async () => {
    	if ( dismissExpires > 0 ) {
    	await expireDismiss();
    	}
    	if ( isDismissible ) {
    	const { cacheHit } = await getItem( cacheKeyDismissed );
    	setIsDismissed( cacheHit );
    	}
    	if ( showOnce ) {
    	// Set the dismissed flag in cache without immediately hiding it.
    	await persistDismissal();
    	}
    	} );

    so it can be used in same way it is in BannerNotification if dismissExpires prop is included
• Update assets/js/googlesitekit/notifications/register-defaults.js
  • Register the notification, following the existing patterns already added
  • For checkRequirements use the existing check from

    site-kit-wp/assets/js/components/notifications/BannerNotifications.js

    Line 126 in b6c7c59

    { ga4ModuleConnected && hasGTMScope && isGA4ModuleOwner && (

    • And isWebDataStreamAvailable and if measurementID !== undefined, from the WebDataStreamNotAvailableNotification component itself
  • For priority, bump it by 10 from the last added general notification (not including the error type notification which start from 150)
  • Use NOTIFICATION_AREAS.BANNERS_ABOVE_NAV for areaSlug
• Remove WebDataStreamNotAvailableNotification from the assets/js/components/notifications/BannerNotifications.js

Test Coverage

• Update assets/js/components/notifications/WebDataStreamNotAvailableNotification.stories.js to account for new changes

QA Brief

• Setup up Site Kit with GA4 enabled, but create a new GA4 property as part of setup
• Validate that the main dashboard is loading
• Go to your analytics account via the official GA4 site: https://analytics.google.com/analytics/web/
• Select the newly created account/property
• Navigate to Admin > Data Streams > Web
• Click on the web data stream
• Click the 3 vertical dots menu on the top right and delete the stream
  • Do not accidentally delete a stream belonging to another legit account you have access to
• Return to the Site Kit dashboard, reload
• Confirm that the Web Data Stream Not Available message appears
• Dismiss the message and ensure it no longer shows

Changelog entry

• N/A