Refactor GatheringDataNotification to use the new Notifications datastore

[jimmymadon]

Feature Description

This issue is the first of many issues that will "use" the new datastore infrastructure to queue notifications while also creating a new Notification component that will be reused by other notifications.

---

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

Acceptance criteria

• The GatheringDataNotification should be refactored and rendered (queued) using the new core/notifications datastore. This means that the component should not be called directly but via the generic getQueuedNotifications selector.
• The logic to render the GatheringDataNotification should be extracted from the ZeroDataStateNotifications component and moved to the checkRequirements callback when registering this notification.
• The refactored component should be its own standalone component without any business logic that prevents it from rendering. This component should be passed through when registering the new notification.

Implementation Brief

• From the assets/js/components/notifications/ZeroDataStateNotifications.js:
  • Move all logic that computes both, searchConsoleGatheringData and analyticsGatheringData to the checkRequirements(registry) callback function when registering the gathering-data-notification notification within assets/js/googlesitekit/notifications/register-defaults.js. The callback should return true only if either searchConsoleGatheringData or analyticsGatheringData are true.
  • Move the logic to compute the gatheringDataTitle and the gatheringDataWaitTimeInHours to the GatheringDataNotification component. This will include the code to compute searchConsoleGatheringData or analyticsGatheringData. This means that the GatheringDataNotification will not have any props anymore.
  • Move all logic that computes both, searchConsoleZeroData and analyticsZeroData to the assets/js/components/notifications/ZeroDataStateNotifications/ZeroDataNotification.js component.
  • Remove the assets/js/components/notifications/ZeroDataStateNotifications.js eventually.
• Create assets/js/components/notifications/Notifications.js similar to the PoC.
  • This component should have two props: viewContext and areaSlug.
  • Use the getQueuedNotifications(viewContext) selector to fetch the queue of notifications. Check if the first notification in the queue has the same areaSlug as the prop passed, if it does, render this notification's Component, otherwise do not render anything. Do not
• In assets/js/googlesitekit/notifications/register-defaults.js:
  • Modify the registration of the dummy notification by passing the actual GatheringDataNotification component to the Component setting of the gathering-data-notification notification. Currently, set isDismissible to false as all the dismissal logic is still going to be handled by the react component itself.
• In assets/js/components/notifications/BannerNotifications.js:
  • Replace the rendering of ZeroDataStateNotifications with ZeroDataStateNotification.
  • Add the new Notifications component passing the areaSlug as NOTIFICATION_AREAS.BANNERS_ABOVE_NAV and the viewContext to be VIEW_CONTEXT_MAIN_DASHBOARD if the dashboard is normal or VIEW_CONTEXT_MAIN_DASHBOARD_VIEW_ONLY if the dashboard is view only.

Test Coverage

• No new tests required. Existing storybook stories should be updated.

QA Brief

Ideally - WAIT for #8977 to be merged and then QA both the issues together as they are exactly the same pattern in code.

• Thoroughly smoke test the GatheringData and ZeroData notifications:
  • Test when only Search Console is gathering data (and analytics is disconnected).
  • Test when both, Search Console and Analytics is Gathering Data.
  • Test when Search Console has finished gathering data but Analytics is still Gathering Data.
  • Test when either and both, SC and Analytics are in Zero data state.
  • Test all of the above for the Entity Dashboard as well.
• Test when any other notification, say any other SetupSuccessBannerNotification is active - they should take precedence over the Gathering and Zero Data notifications.
• Smoke test the remaining notifications to ensure they still work normally.
• Test the new Storybook stories in Components -> Notifications.

Changelog entry

• Update notifications to use new notifications infrastructure.

[eugene-manuilov]

AC ✔️

[eugene-manuilov]

IB ✔️

[mohitwp]

QA Update ❌

• Tested on dev environment.
• Verified zero data notifications on main, entity and view only dashboard.
• Smoke tested plugin notification and verified that other notifiations - take precedence over the Gathering and Zero Data notifications.
• Tested storybook component >notifications stories.

@jimmymadon
Issue > On View only dashboard zero and gathering data notifications are not showing. On latest environment zero and gathering data state notifications are showing.

Recording.1304.mp4

[jimmymadon]

@eugene-manuilov Assigning you here since you did the original CR/MR for this issue. So it will make sense to do the follow up PR as well. Thanks!

[mohitwp]

QA Update ✅

• Tested on dev environment.
• Verified zero data and gathering data state notifications on main, entity and view only dashboard.
• Smoke tested plugin notification and verified that other notifications - take precedence over the Gathering and Zero Data notifications.
• Tested storybook component >notifications stories.
• Verified that view only dashboard related issue is resolve now. Zero and gathering data notifications are now showing on View only dashboard.
• Note - There are a few additional issues, but these are due to changes introduced in Refactor the ZeroDataNotification to use the new lighter Notification component. #9184 and Refactor the GatheringDataNotification to use a newly refactored version of the BannerNotification component. #9071. They will be addressed in a follow-up pull request

Recording.1324.mp4

Recording.1325.mp4