Refactor the ZeroDataNotification to use the new lighter Notification component.

[jimmymadon]

Feature Description

This issue focuses on refactoring the ZeroDataNotification using the new Notification wrapper component along with the newly introduced layout component in #9071.

---

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

Acceptance criteria

• Refactor the ZeroDataNotification to use the new Notification wrapper component introduced in Refactor the GatheringDataNotification to use a newly refactored version of the BannerNotification component. #9071.
• The refactoring should use a relevant "layout" component and other "common" components following the pattern introduced in Refactor the GatheringDataNotification to use a newly refactored version of the BannerNotification component. #9071.
• The rendering and behaviour of the ZeroDataNotification should remain the same, i.e. all existing GA events should be fired and the design/links should work as before.

Implementation Brief

• In assets/js/components/notifications/ZeroDataNotification.js
  • Check the assets/js/components/notifications/GatheringDataNotification.js for the example
  • Remove usage of BannerNotification component
  • Include 2 new props - id and Notification
  • Wrap the component with Notification component passed as the prop
  • The existing NotificationWithSmallSVG can be reused. Refactor this notification to allow the usage of only the Dismiss component.
  • Use new components from assets/js/googlesitekit/notifications/components/common/ to assemble the notification using the existing props used to for BannerNotification.
  • A new LearnMoreLink component can append the Learn more link required in the description.

Test Coverage

• No new tests required but ensure the existing stories and tests work.

QA Brief

• Test the Zero Data Notification thoroughly.
  • Test the GA tracking event for view-notification when the notification is rendered.
  • Click on the Learn more link and test the appropriate GA event (click_learn_more) is fired.
  • Click on the Remind me later button and test the dismissal. Ensure the notification is correctly dismissed - a new item will appear in the wp_googlesitekitpersistent_dismissed_items record in wp_usermeta in the database.
• Test when any other notification, say any other SetupSuccessBannerNotification or the GatheringDataNotification is active - they should take precedence over the Zero Data notification.
• Follow the QAB for Refactor the GatheringDataNotification to use a newly refactored version of the BannerNotification component. #9071 as the code for this issue touches the code from that issue as well.

Changelog entry

• Refactor the ZeroDataNotification to use the new lighter Notification component.

[eugene-manuilov]

AC ✔️

[eugene-manuilov]

IB ✔️

[mohitwp]

QA Update ❌

Tested on dev environment.

@jimmymadon

Issue 1: ( Zero data notification is not showing if only SC is in gathering data state and Analytics is in zero date state).
1>Set up SK without Analytics.
2>On main dashboard 'Search console is in gathering data state' notification is showing.
3>Now set up analytics and select account and property which is in zero data ste.
4> After successful setup user navigates to Main dashboard.
5> On main dashboard 'Search console is in gathering data state' notification is showing. Click on 'See more services' or 'may be later' CTA. It will dismiss the gathering data notification.
4> Now refresh the main dashboard and Open entity dashboard in new tab and open one more main dashboard in a new tab and again refresh.
5> In this case Zero data notice for analytics is not showing.
Expected - Zero data notification for analytics should appear when gathering data notification gets dismiss on main dashboard.

Issue 2> If the zero data notification is not dismissed and the user opens the dashboard in a new tab or window, the zero data state notification does not appear on the first load. The user must refresh the page for the notification to appear. This behavior is observed on both the main and entity dashboards. However, this issue does not occur with the gathering data state notification.

Recording.1320.mp4

Issue 3: View only dashboard >If only one module (either SC or Analytics) is shared initially and that module is in either the gathering or zero data state, and if the user dismisses the notice for the gathering or zero data state for that module, then when the second module is shared and it is also in the same data state as the first module, a notification will not appear for the second module because the notice has already been dismissed.

[jimmymadon]

@mohitwp

Issue 1 and Issue 3 are current behaviour already (on the last release). So this behaviour is fine.

Issue 2: I am not able to reproduce this. I tried this when SC is in Zero Data and when Analytics alone is in Zero data, and in both cases, the notification appeared immediately after module set up without requiring a page load or refresh. Could you please create a screencast (with the URL bar present as well always). Even if this was the case, I feel this also won't be a release blocker as it is minor and can be fixed in the next release.

Thank you!

c.c. @aaemnnosttv

[mohitwp]

QA Update ✅

• Thank you @jimmymadon for confirmation on point 1 and 3.

• I'm able to reproduce issue number 2. I shared the screencast also. But, this issue is not a blocker so created a new ticket Zero Data Notification Not Appearing consistently - on First Load in New Tab/Window #9227

• Tested on main environment.

• Verified multiple 'view notification' events are not getting track for 'main-dashboard-zero data notification'.

• Verified zero data notification for both SC and Analytics module.

• Verified the GA tracking event for view-notification when the notification is rendered.

• Verified clicking on the Learn more link open URL in a new tab and the appropriate GA event (click_learn_more) is fired.

• Verified clicking on the Remind me later button dismiss the notification.

• Verified the notification is correctly dismissed - a new item appear in the wp_googlesitekitpersistent_dismissed_items record in wp_usermeta in the database.

• Verified when any other notification, any other SetupSuccessBannerNotification is active - they take precedence over the Gathering Data notification.