Implement context aware global banner

[BwanikaRobert]

Summary of Changes (What does this PR do?)

• Adds centralized banner notification infrastructure to replace floating toasts. Built a BannerContext, useBanner hook, BannerSlot and GlobalBannerContainer. The login page is the first test wrong password now shows an error banner inside the card, this was just for demonstration login page.tsx still uses the old Toast. No new dependencies, the Banner component was already there.

Status of maturity (all need to be checked before merging):

• I've tested this locally
• I consider this code done
• This change ready to hit production in its current state
• The title of the PR states what changed and the related issues number (used for the release note).
• I've included issue number in the "Closes [Vertex: Infrastructure] Implement Context-Aware Global Banner System #3449 " part of the "What are the relevant tickets?" section to link the issue.
• I've updated corresponding documentation for the changes in this PR.
• I have written unit and/or e2e tests for my change(s).

How should this be manually tested?

-Navigate to src/vertex/context/banner-context.tsx.
-This exports banner context provider.
-Navigate to src/vertex/app/providers.tsx.
-The provider is wrapped around the component tree.

What are the relevant tickets?

• Closes [Vertex: Infrastructure] Implement Context-Aware Global Banner System #3449

Screenshots

Expected output after banner implementation

Summary by CodeRabbit

• New Features
  • Added a flexible banner notification system with scoped (page/dialog) and global (application-wide) banners for improved user communication.
  • Banners support severity, titles, messages and dismiss controls for better user control.
  • Integrated global banner rendering into the app's provider tree so global notifications appear consistently across the UI.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 1c62a0ef-d56f-45ba-9170-38d037f066b7

📥 Commits

Reviewing files that changed from the base of the PR and between 0c277aa and 34c6df2.

📒 Files selected for processing (1)

• src/vertex/context/banner-context.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• src/vertex/context/banner-context.tsx

---

📝 Walkthrough

Walkthrough

This PR adds a BannerContext with BannerProvider, a useBanner hook, BannerSlot for scoped banners, and GlobalBannerContainer for page-level banners, then integrates BannerProvider and GlobalBannerContainer into the root Providers tree.

Changes

Banner Context and Provider Integration

Layer / File(s)	Summary
Banner context model and provider src/vertex/context/banner-context.tsx	Defines banner state (severity, message, title, visibility, scoped flag) and implements BannerProvider with showBanner and hideBanner.
Banner hook and rendering components src/vertex/context/banner-context.tsx	Exports useBanner hook, BannerSlot that renders a scoped dismissible banner when active, and GlobalBannerContainer that renders a top-of-page banner when a non-scoped banner is active.
Root provider tree integration src/vertex/app/providers.tsx	Imports BannerProvider and GlobalBannerContainer, wraps app children with BannerProvider, and renders GlobalBannerContainer above children inside ThemeProvider.

Sequence Diagram(s)

sequenceDiagram
  participant Component
  participant useBanner as useBanner Hook
  participant BannerProvider
  participant BannerSlot
  participant GlobalBannerContainer
  participant InfoBanner as Banner UI
  Component->>useBanner: call showBanner(props)
  useBanner->>BannerProvider: forward showBanner
  BannerProvider->>BannerProvider: update state (isVisible, isScoped, props)
  alt isScoped = true
    BannerSlot->>InfoBanner: render scoped banner
  else isScoped = false
    GlobalBannerContainer->>InfoBanner: render global banner
  end
  Component->>useBanner: call hideBanner()
  useBanner->>BannerProvider: forward hideBanner
  BannerProvider->>BannerProvider: reset state (isVisible = false)

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related issues

• #3451: Device management migration needs BannerProvider/useBanner/BannerSlot to show errors inside device dialogs — matches implemented APIs.
• #3450: Authentication page migration requires the banner context and components to replace toasts — provided by this PR.
• #3452: Issue requests BannerProvider, useBanner, BannerSlot, and GlobalBannerContainer to replace toast-based notifications — implemented here.

Poem

Banners wake at top and slot,
Scoped or global, show what's sought,
Hooks and slots now play their part,
Messages find the proper heart,
A quiet banner chorus starts.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: implementing a context-aware global banner system as evidenced by the new BannerContext, BannerProvider, useBanner hook, and related components.
Linked Issues check	✅ Passed	The PR successfully addresses all core coding requirements from issue #3449: BannerContext with state management, useBanner hook with showBanner/hideBanner, BannerSlot, and GlobalBannerContainer are all implemented as specified.
Out of Scope Changes check	✅ Passed	All changes directly support the banner system implementation. Both files (providers.tsx and banner-context.tsx) are essential to the PR's scope and contain no unrelated modifications.
Docstring Coverage	✅ Passed	Docstring coverage is 80.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Warning

Review ran into problems

🔥 Problems

Errors were encountered while retrieving linked issues.

Errors (1)

• JIRA integration encountered authorization issues. Please disconnect and reconnect the integration in the CodeRabbit UI.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/vertex/context/banner-context.tsx`:
- Around line 18-20: ShowBannerOptions currently advertises almost all
BannerProps but showBanner only persists and forwards severity, message and
title (plus scoped); narrow the type to match what is actually used or else
persist all props. Update the ShowBannerOptions declaration to exactly
Pick<BannerProps, 'severity' | 'message' | 'title'> & { scoped?: boolean } (or
include any additional fields you choose to support) and ensure the showBanner
implementation and the Banner render path (the function showBanner and the
Banner props passed where the banner is created) only expect and forward those
declared fields; alternatively if you want full parity, change showBanner to
persist and forward the complete set of BannerProps (except
dismissible/onDismiss) so the declared ShowBannerOptions matches runtime
behavior.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: ba59cd66-0eb8-4bf7-b3d1-2295050bd80e

📥 Commits

Reviewing files that changed from the base of the PR and between c295d3e and 0c277aa.

📒 Files selected for processing (2)

• src/vertex/app/providers.tsx
• src/vertex/context/banner-context.tsx

[Codebmk]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[Codebmk]

Brilliant work! Thank you for cooking. Cannot wait to see how you replace for all the other features @BwanikaRobert