Limit all banners shown in the header to only one visible at a time and consolidate placement

[aaemnnosttv]

Feature Description

In #4689, we updated our handling of notifications to prevent showing more than one notice in the header at a time, even when multiple are present. However, this only applies to each group of notifications rather than all, and since there are separate placements for persistent alerts and notices, there can be up to two notices showing simultaneously.

---

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

Acceptance criteria

• All notifications that are shown in the Site Kit header should be combined into a single placement, between the top of the header where menus are and the dashboard navigation (i.e. where most notifications are today)
• The order of all notifications shown should be updated so that all higher-severity alerts take priority over informational notices
  • This means that if an alert and a notice were both present, the alert would take precedence and be the only one visible
• In all cases, only one banner notice/warning/error/alert should be visible in the Site Kit header at a time

Implementation Brief

• Adjust the order of notifications in assets/js/components/notifications/BannerNotifications.js, to prioritize certain alerts.
  • Reorder AdSenseAlerts and ModuleRecoveryAlert to appear above other notifications in the return statement. This ensures these alerts always have precedence.
  • Position the ActivationBanner immediately after the aforementioned alerts, so critical notifications (like setup errors) retain higher visibility.
  • Retain the order of all other notifications.
• In the assets/js/components/Header.js
  • Relocate the <ErrorNotifications /> component to share the same container as other alerts/notifications. However, it should display above the subHeader that renders the remaining alerts/notifications, ensuring its priority.
• This will keep order to: error -> alert -> notification

Test Coverage

• Test case for priority can be added, either in one the existing tests (maybe header, or assets/js/components/notifications/ErrorNotifications.test.js), confirming priority - error -> alert -> notification

QA Brief

• Setup site kit, and connect adSense module
• Go to dashboard and include query arg in the url notification=authentication_success
• This will show the regular notification about setup completed. Then open dev tools and paste this into the console:

  googlesitekit.data.dispatch('modules/adsense').receiveGetNotifications([
        {
              id: 'test-notification-id',
              title: 'Test notification title',
              content: 'Test notification content',
              ctaURL: '',
              ctaLabel: '',
              ctaTarget: '',
              dismissible: true,
              dismissLabel: 'test dismiss site notification',
              learnMoreURL: '',
              learnMoreLabel: '',
        },
  ])

• Verify you see adSense alert over the notification.
• Add this to the console:

  googlesitekit.data.dispatch('core/user').receiveGetAuthentication({
      authenticated: true,
      requiredScopes: [],
      grantedScopes: [],
  unsatisfiedScopes: [],
  needsReauthentication: false,
  disconnectedReason: '',
       unsatisfiedScopes: [
      'https://www.googleapis.com/auth/tagmanager.readonly',
      'https://www.googleapis.com/auth/analytics.readonly',
  ],
  })

• It will add additional permissions error, which should take precedence over previous notification and alert

Changelog entry

• Improve logic for which banner is displayed in the header when multiple banners exist.

[aaemnnosttv]

@marrrmarrr let me know if this sounds like what we discussed today or if there are any changes you would like to make to the AC 👍

[marrrmarrr]

@aaemnnosttv thanks for creating this issue! The only comment I have is if we need to add an extra instruction for when two higher-severity alerts are somehow triggered by the same site (you mentioned there's 3-4 of them altogether, not sure if it would be ever possible that the same site has two?) If that is possible, how about we show the one which was triggered earlier? And once the user resolves that one, then show the next one.

[aaemnnosttv]

@marrrmarrr it is possible multiple notifications/alerts could be triggered simultaneously which is somewhat what this issue is about. Currently we have a rather simple way of limiting the display which just shows the first one. When that one is dismissed/actioned, it will disappear causing the next one to appear if there is one. In this case, priority is set ahead of time in the order the elements are rendered, which is not the same as which is triggered first. So currently it is actually possible for a higher priority alert to appear after you see another notice if there was some amount of latency which prevented it from "knowing" that it should be shown or not until later in the page load. This is pretty rare but possible. For the most part, everything we need to determine if a notification should be shown or not is available nearly right away so it's rarely an issue.

Solving this requires rearchitecting the way we handle notifications (which will need to be done for the new Notifications work anyways) so it's out of scope here, but is something we can work on in preparation for the other notifications-related work we'll have.

[aaemnnosttv]

Moved forward after discussing together earlier today 👍

[eugene-manuilov]

IB ✔️

[wpdarren]

QA Update: ✅

Verified:

• The AdSense alert appears over the success notification.
• The permissions error takes precedence over previous notification and alert.

Screenshots