Skip to content

feat(announcement-banner): support multiple banners with carousel nav…#2587

Merged
RemiBonnet merged 7 commits intostagingfrom
feat/multi-announcement-banners
Apr 10, 2026
Merged

feat(announcement-banner): support multiple banners with carousel nav…#2587
RemiBonnet merged 7 commits intostagingfrom
feat/multi-announcement-banners

Conversation

@jul-dan
Copy link
Copy Markdown
Contributor

@jul-dan jul-dan commented Apr 9, 2026

This PR introduces support for displaying multiple banners in the product instead of being limited to a single banner at a time.

Changes Included:

  • Updated the PostHog banner payload structure to accept multiple banners.
  • Added frontend support for rendering multiple banners in a carousel.
  • Implemented banner prioritization order:
    • Error
    • Warning
    • Info
  • Updated local storage logic to manage dismissal state individually for each banner.
  • Added conditional carousel behavior:
    • If multiple banners are present, they are displayed in the carousel.
    • If only one banner is present, it is displayed as a standard standalone banner without carousel navigation

Summary

Issue: QOV-1822

Screenshots / Recordings

Before After
image image

Testing

  • Changes tested locally in the relevant Console's pages and Storybooks
  • yarn test or yarn test -u (if you need to regenerate snapshots)
  • yarn format
  • yarn lint

PR Checklist

  • I followed naming, styling, and TypeScript rules (see .cursor/rules)
  • I performed a self-review (diff inspected, dead code removed)
  • I titled the PR using Conventional Commits with a scope when possible (e.g. feat(service): add new Terraform service) - required for semantic-release
  • I only kept necessary comments, written in English (watch for useless AI comments)
  • I involved a designer to validate UI changes if I am not a designer
  • I covered new business logic with tests (unit)
  • I confirmed CI is green (Codecov red can be accepted)
  • I reviewed and executed locally any AI-assisted code

jul-dan and others added 3 commits April 9, 2026 16:58
…igation

- Replace single banner with carousel supporting multiple banners from PostHog
- Parse JSON string payloads returned by PostHog
- Sort banners by priority (error > warning > info)
- Persist dismissed banners by id (or message) in localStorage
- Preserve backwards compatibility with legacy dismissed key

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@codecov
Copy link
Copy Markdown

codecov Bot commented Apr 9, 2026

Codecov Report

❌ Patch coverage is 86.84211% with 10 lines in your changes missing coverage. Please review.
✅ Project coverage is 47.31%. Comparing base (9aaab7e) to head (bfcdf07).
⚠️ Report is 1 commits behind head on staging.

Files with missing lines Patch % Lines
...rc/lib/announcement-banner/announcement-banner.tsx 79.16% 4 Missing and 6 partials ⚠️
Additional details and impacted files
@@             Coverage Diff             @@
##           staging    #2587      +/-   ##
===========================================
- Coverage    47.67%   47.31%   -0.37%     
===========================================
  Files         1281     1233      -48     
  Lines        23858    23348     -510     
  Branches      7053     6956      -97     
===========================================
- Hits         11374    11046     -328     
+ Misses       10324    10213     -111     
+ Partials      2160     2089      -71     
Flag Coverage Δ
unittests 47.31% <86.84%> (-0.37%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@jul-dan jul-dan marked this pull request as ready for review April 9, 2026 15:23
jul-dan and others added 4 commits April 10, 2026 09:28
- Move navigation arrows next to dismiss button on the right
- Add subtle vertical separator between arrows and dismiss
- Unify button sizes and vertical alignment in a single absolute container

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…functionality

- Replace currentIndex state with selectedBannerKey for improved banner selection logic
- Update navigation handlers to set selectedBannerKey based on the current banner
- Refactor button class names to utilize new BANNER_ICON_BUTTON_CLASSNAME and bannerButtonVariants for consistency
- Simplify dismiss logic to handle single and multiple banners more effectively
…rove structure

- Remove redundant BANNER_ICON_BUTTON_CLASSNAME export from banner component
- Integrate button class names directly into the Button component for clarity
- Maintain consistent styling across announcement banner and button components
@RemiBonnet RemiBonnet self-requested a review April 10, 2026 09:02
@RemiBonnet RemiBonnet merged commit 7767b90 into staging Apr 10, 2026
11 checks passed
@RemiBonnet RemiBonnet deleted the feat/multi-announcement-banners branch April 10, 2026 09:02
@RemiBonnet
Copy link
Copy Markdown
Member

🎉 This PR is included in version 1.301.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants