Feature Description

This issue refactors another (the second) "Error" notification in Site Kit as part of Phase 1 of the Banner Notifications Refactoring epic. It should refactor the UnsatisfiedScopesAlert 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 UnsatisfiedScopesAlertGTE 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/UnsatisfiedScopesAlertGTE.js
  • Check the assets/js/components/notifications/UnsatisfiedScopesAlert.js for the example/starting point
  • Remove usage of BannerNotification component
  • Include 2 new props - id and Notification
  • Wrap the component with Notification component passed as the prop
  • Use new components from assets/js/googlesitekit/notifications/components/common/ and layout to assemble the notification 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 - you can re-use the one used for UnsatisfiedScopesAlert
  • For checkRequirements transfer the existing checks from assets/js/components/notifications/ErrorNotifications.js
  • For priority, keep it the same as the one added for UnsatisfiedScopesAlert notification
• Remove UnsatisfiedScopesAlertGTE from the assets/js/components/notifications/ErrorNotifications.js

Test Coverage

• Add stories for new notification. You can use stories added for UnsatisfiedScopesAlert as an example

QA Brief

• Follow the QAB for Refactor the UnsatisfiedScopesAlert to use the new Notifications datastore and layout components #8978 and test the UnsatisfiedScopesAlertGTE message.
• To trigger the GTE error alert, make sure to ONLY remove the https://www.googleapis.com/auth/tagmanager.readonly from the list of wp_googlesitekit_authscopes and to Connect GA4. Try using the following snippet within your database for this record.

a:8:{i:0;s:46:"https://www.googleapis.com/auth/supportcontent";i:1;s:46:"https://www.googleapis.com/auth/userinfo.email";i:2;s:42:"https://www.googleapis.com/auth/webmasters";i:3;s:50:"https://www.googleapis.com/auth/analytics.readonly";i:4;s:48:"https://www.googleapis.com/auth/siteverification";i:5;s:6:"openid";i:6;s:39:"https://www.googleapis.com/auth/adwords";i:7;s:48:"https://www.googleapis.com/auth/userinfo.profile";}

• Also ensure the wp_googlesitekit_additional_auth_scopes record for the user is also deleted or removed if it exists.

Changelog entry

• Update Google Tag scope notifications to use new notifications infrastructure.