Refactor Setup Error Banner Notification to use the new Notifications datastore

[zutigrm]

Feature Description

This issue is for the refactoring an "Error" notification in Site Kit. It should refactor the setup error notification https://github.com/google/site-kit-wp/blob/d90ac7abb002c20a2de9d79abfd08b0fc52ccc86/assets/js/components/notifications/ErrorNotifications.js#L110-L122 so that it uses the new datastore infrastructure to register and queue the notification. It should also use newer lighter "layout" and "common" components that replace the bloated BannerNotification component as per the pattern introduced in https://github.com/google/site-kit-wp/issues/9071.

---

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

Acceptance criteria

• The Setup error notification component https://github.com/google/site-kit-wp/blob/d90ac7abb002c20a2de9d79abfd08b0fc52ccc86/assets/js/components/notifications/ErrorNotifications.js#L110 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 ErrorNotifications) 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

• [ ] Move setup error banner (https://github.com/google/site-kit-wp/blob/d90ac7abb002c20a2de9d79abfd08b0fc52ccc86/assets/js/components/notifications/ErrorNotifications.js#L110 to it's own component assets/js/components/notifications/SetupErrorMessageNotification.js (name should differ from existing SetupErrorNotification which has more generic data)
  • 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 usage of BannerNotification component, and replace it with the new assets/js/googlesitekit/notifications/components/layout/NotificationError.js layout using the existing props used to for BannerNotification
• [ ] Update assets/js/googlesitekit/notifications/register-defaults.js
  • Register the notification, following the existing patterns already added
  • For checkRequirements use the existing checks from assets/js/components/notifications/ErrorNotifications.js - the setupErrorMessage variable and it's logic to determine if notification should be shown or not
  • For priority, bump it by 10from the last added error notification (they start from 150)
  • Use NOTIFICATION_AREAS.ERRORS for areaSlug
• [ ] Remove BannerNotification from the assets/js/components/notifications/ErrorNotifications.js

Test Coverage

• Extract the setup error related stories from assets/js/components/notifications/ErrorNotifications.stories.js

QA Brief

Changelog entry

[eugene-manuilov]

AC ✔️

[eugene-manuilov]

@zutigrm, could you please add more details as to what should be done there? Also, I think it is worth moving that setup error notification to its own component, no?

[zutigrm]

@eugene-manuilov Thanks, good point, I suggested moving it into new component, and expanded a bit on IB where possible

[eugene-manuilov]

Thanks, IB ✔️