improve notification badge ux

[gally47]

/nocl

Description

Cluster health and notifications are separate signals with separate destinations, so combining them made the count ambiguous. The badges share size, spacing, and interaction for consistency, while distinct colors, icons, and count meanings make each purpose immediately clear without adding visual noise.

Motivation and Context

fixes https://github.com/Graylog2/graylog-plugin-enterprise/issues/15030

Screenshots (if appropriate):

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Refactoring (non-breaking change)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have requested a documentation update.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.

[Copilot]

Pull request overview

This PR refactors the header notification badge so system notifications are always visible (even when plugin navigation badges are active) and improves UX by showing an icon-only badge when there are zero unread notifications, with a capped displayed count for large numbers.

Changes:

• Refactors NotificationBadge to use a shared NavBadgeItem, adds icon-only state for zero unread, and caps the displayed count at 99+.
• Updates navigation rendering so plugin badges no longer replace the built-in notification badge.
• Extends/adjusts unit tests to cover the new rendering, labeling, and capping behavior.

Reviewed changes

Copilot reviewed 6 out of 7 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
graylog2-web-interface/src/components/navigation/NotificationBadge.tsx	Refactors badge rendering (icon, accessible label, capped count) and switches to NavBadgeItem.
graylog2-web-interface/src/components/navigation/NotificationBadge.test.tsx	Updates tests for new label/count behavior and polling updates.
graylog2-web-interface/src/components/navigation/Navigation.tsx	Always renders the notification badge, even when plugin badges are present.
graylog2-web-interface/src/components/navigation/Navigation.test.tsx	Updates expectations to match always-visible badge behavior.
graylog2-web-interface/src/components/navigation/NavBadgeItem.tsx	Introduces shared wrapper for nav badge sizing/spacing/interaction.
graylog2-web-interface/src/components/bootstrap/Badge.tsx	Adds support for passing Mantine variant through the wrapped badge component.
graylog2-web-interface/src/@types/graylog-web-plugin/index.d.ts	Updates plugin badge contract comment to reflect new “render alongside” behavior.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.