Refactor SetupErrorNotification to use the new Notifications datastore

[zutigrm]

Feature Description

This issue is the first issue to refactor an "Error" notification in Site Kit. It should refactor the SetupErrorNotification 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 #9071.

---

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

Acceptance criteria

• The SetupErrorNotification 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 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

• [ ] Update assets/js/components/notifications/SetupErrorNotification.js
  • 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 transfer the existing check in assets/js/components/notifications/SetupErrorNotification.js - https://github.com/google/site-kit-wp/blob/b6c7c59c9bece36c8b0138d2e3d4f05a2f09479a/assets/js/components/notifications/SetupErrorNotification.js#L51-L54
  • For priority, bump it by 10from the last added error notification (they start from 150)
  • Use NOTIFICATION_AREAS.ERRORS for areaSlug
• [ ] Remove SetupErrorNotification from the assets/js/components/Header.js

Test Coverage

• There are no stories added for this component, you can include a basic stories coverage following the examples of other error notifications. Some could be extracted from assets/js/components/notifications/ErrorNotifications.stories.js

QA Brief

Changelog entry

[eugene-manuilov]

AC ✔️

[eugene-manuilov]

@zutigrm, could you please expand IB to provide more details what exactly needs to be moved to the checkRequirements function, what should be deleted from the component, etc.

[zutigrm]

@eugene-manuilov thanks. It is relatively small and straightforward component, I expanded a bit where possible.

[eugene-manuilov]

Thanks, @zutigrm. IB ✔️