Add announcement banner system to home page by Mbeaulne · Pull Request #1901 · TangleML/tangle-ui

Mbeaulne · 2026-03-05T15:20:42Z

Description

Added an announcement banner system to display important notifications to users on the home page. The system includes a configurable announcements configuration file and a reusable AnnouncementBanners component that renders announcements using the existing InfoBox component. Currently displays a warning about upcoming GPU quota enforcement for Tangle workloads.

Related Issue and Pull requests

Type of Change

Checklist

I have tested this does not break current pipelines / runs functionality
I have tested the changes on staging

Screenshots (if applicable)

Test Instructions

Navigate to the home page
Verify that the GPU quota enforcement announcement banner appears at the top of the page
Confirm the banner displays with a warning variant styling
Test that the page functions normally with the banner present
Verify that removing all announcements from the config file hides the banner component

Additional Comments

The announcement system is designed to be easily configurable through the src/config/announcements.ts file. New announcements can be added by updating the array with the required id, title, body, and optional variant properties. The configuration file has been added to the knip ignore list to prevent unused export warnings when no announcements are active.

github-actions · 2026-03-05T15:20:54Z

🎩 To tophat this PR:

You can add the following URL parameter to your browser to tophat this PR:

`?tophat_location=03-05-add_announcment_banner_to_tangle_homepage/6e65be0`

Mbeaulne · 2026-03-05T15:20:56Z

Add test announcement to window for testing only #1905
Add announcement banner system to home page #1901 👈 (View in Graphite)
master

This stack of pull requests is managed by Graphite. Learn more about stacking.

maxy-shpfy · 2026-03-05T17:02:00Z

src/components/shared/AnnouncementBanners.tsx

+function getDismissedIds(): string[] {
+  try {
+    return JSON.parse(localStorage.getItem(DISMISSED_KEY) ?? "[]");
+  } catch {
+    return [];
+  }
+}


Please use typedStorage for access to localStorage

maxy-shpfy · 2026-03-05T17:02:58Z

src/components/shared/AnnouncementBanners.tsx

+  const handleDismiss = (id: string) => {
+    const updated = [...dismissedIds, id];
+    localStorage.setItem(DISMISSED_KEY, JSON.stringify(updated));
+    setDismissedIds(updated);
+  };


Use typedStorage to access localStorage. This should be abstracted into hook or smth

maxy-shpfy · 2026-03-05T17:03:48Z

src/components/shared/AnnouncementBanners.tsx

+          onDismiss={
+            announcement.dismissible
+              ? () => handleDismiss(announcement.id)
+              : undefined
+          }


NIT: extract handle as function

maxy-shpfy · 2026-03-05T17:04:13Z

src/components/shared/AnnouncementBanners.tsx

Add to react-compiler

maxy-shpfy · 2026-03-05T17:05:52Z

src/config/announcements.ts

Just thinking outloud. Maybe we can use it as "json" similar to other files in config?

json would make sense to me - like the launcher annotation schema.

would allow us to also put it in the shopify-overlay and thus do shopify-specific announcements

add comment

maxy-shpfy

LGTM! Left some suggestions - would be nice to have it implemented before merge

camielvs · 2026-03-05T17:41:59Z

src/components/shared/AnnouncementBanners.tsx

+          <InfoBox
+            key={announcement.id}
+            title={announcement.title}
+            variant={announcement.variant ?? "warning"}


announcements are informative - would info variant be a better default?

camielvs · 2026-03-05T17:44:55Z

src/components/shared/AnnouncementBanners.tsx

+      {visible.map((announcement) => {
+        const onDismiss = announcement.dismissible
+          ? () => handleDismiss(announcement.id)
+          : undefined;


Announcement expiry date is optional. It's entirely possible we forget to set them and thus we could end up with many announcements at the same time, all the way down the page.

Do we want to limit the number of announcements we show at once? Or maybe put them all into a carousal system within the banner?

Mbeaulne · 2026-03-05T18:00:36Z

Merge activity

Mar 5, 6:00 PM UTC: A user started a stack merge that includes this pull request via Graphite.
Mar 5, 6:01 PM UTC: Graphite rebased this pull request as part of a merge.
Mar 5, 6:05 PM UTC: Graphite couldn't merge this PR because it had merge conflicts.
Mar 5, 9:52 PM UTC: A user started a stack merge that includes this pull request via Graphite.
Mar 5, 9:52 PM UTC: Graphite rebased this pull request as part of a merge.
Mar 5, 9:54 PM UTC: @Mbeaulne merged this pull request with Graphite.

morgan-wowk · 2026-03-05T20:53:59Z

src/config/announcements.ts

+  {
+    id: "gpu-quota-enforcement-march-2026",
+    title: "Upcoming: GPU Quota Enforcement for Tangle Workloads",
+    body: "GPU workloads will soon require registered project quotas. Please ensure your quota groups are configured before enforcement begins. For any questions, reach out in the #tangle Slack channel.",


This is a Shopify-specific problem and shouldn't belong in our OSS :thinking_face:

Let's build an API to pull announcements from the backend instead?

For a faster turn around, you can have it read from the window and we can add to index.html in oasis-frontend.

Mbeaulne changed the title ~~Add announcment banner to tangle homepage~~ Add announcement banner system to home page Mar 5, 2026

Mbeaulne marked this pull request as ready for review March 5, 2026 15:21

Mbeaulne requested a review from a team as a code owner March 5, 2026 15:21

Mbeaulne force-pushed the 03-05-add_announcment_banner_to_tangle_homepage branch 3 times, most recently from 0113e28 to a13639f Compare March 5, 2026 16:13

maxy-shpfy previously approved these changes Mar 5, 2026

View reviewed changes

maxy-shpfy reviewed Mar 5, 2026

View reviewed changes

src/components/shared/AnnouncementBanners.tsx

Copy link

Collaborator

maxy-shpfy Mar 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add to react-compiler

Mbeaulne reacted with thumbs up emoji

maxy-shpfy reviewed Mar 5, 2026

View reviewed changes

maxy-shpfy approved these changes Mar 5, 2026

View reviewed changes

Mbeaulne force-pushed the 03-05-add_announcment_banner_to_tangle_homepage branch from a13639f to 32370db Compare March 5, 2026 17:39

camielvs reviewed Mar 5, 2026

View reviewed changes

Mbeaulne force-pushed the 03-05-add_announcment_banner_to_tangle_homepage branch from 32370db to e594a86 Compare March 5, 2026 17:44

camielvs reviewed Mar 5, 2026

View reviewed changes

Mbeaulne force-pushed the 03-05-add_announcment_banner_to_tangle_homepage branch 2 times, most recently from e3ea61f to 1a75c52 Compare March 5, 2026 17:51

Mbeaulne force-pushed the 03-05-add_announcment_banner_to_tangle_homepage branch from 1a75c52 to 1a7fc4d Compare March 5, 2026 18:00

morgan-wowk reviewed Mar 5, 2026

View reviewed changes

Mbeaulne force-pushed the 03-05-add_announcment_banner_to_tangle_homepage branch 2 times, most recently from a5fb570 to b3709c7 Compare March 5, 2026 21:38

morgan-wowk approved these changes Mar 5, 2026

View reviewed changes

Mbeaulne mentioned this pull request Mar 5, 2026

Add test announcement to window for testing only #1905

Draft

8 tasks

Mbeaulne force-pushed the 03-05-add_announcment_banner_to_tangle_homepage branch from b3709c7 to d9fbdd8 Compare March 5, 2026 21:41

Add announcment banner to tangle homepage

6e65be0

Mbeaulne force-pushed the 03-05-add_announcment_banner_to_tangle_homepage branch from d9fbdd8 to 6e65be0 Compare March 5, 2026 21:52

Mbeaulne merged commit 7148ec9 into master Mar 5, 2026
17 checks passed

Mbeaulne deleted the 03-05-add_announcment_banner_to_tangle_homepage branch March 5, 2026 21:54

Conversation

Mbeaulne commented Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related Issue and Pull requests

Type of Change

Checklist

Screenshots (if applicable)

Test Instructions

Additional Comments

Uh oh!

github-actions bot commented Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎩 To tophat this PR:

Uh oh!

Mbeaulne commented Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

maxy-shpfy left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Mbeaulne commented Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merge activity

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Mbeaulne commented Mar 5, 2026 •

edited

Loading

github-actions bot commented Mar 5, 2026 •

edited

Loading

Mbeaulne commented Mar 5, 2026 •

edited

Loading

Mbeaulne commented Mar 5, 2026 •

edited

Loading