Fix Toaster in Plugin in Edge UI

[jscheffl]

With hints from @bbovenzi this PR now fixes the Toaster display in Edge Executor UI! Thanks! That was a longer endeavor.

This is how it looks now after the fix... toaster content/logic was in all the time already...

edge-toaster-fix-2026-03-01_21.59.59.mp4

---

Previous PR Intro:

There is a teething problem that the Chakra "Toast" component is not working in Edge React UI. I need some React Expertise to fix it seems.

@shubhamraj-git / @bbovenzi / @pierrejeambrun HELP :-D

To make this reprodicible I made two toasters:
1 in the Navbar and one in te Edge UI plugin.

How to see the error:

1. Take this branch
2. Run it locally via breeze start-airflow --python 3.12 --backend postgres --executor EdgeExecutor --load-example-dags
3. Open the Web UI and after login on the start page, click on the "Toast" button in the Navbar - all OK
4. Navifate to "Admin" -> "Edge Worker Hosts" (Which is the React Plugin)
5. Click the same button --> Does not respond. See JavaScript console that logs are written and no errors
6. Attempt to click on the Toaster Test button in the Plugin itself, also not working
7. Same if you use the IFrame plugin in "Docs" -> "Edge API Docs", also there the Toaster in Navbar is not working

Is this a limitation of the plugin concept or a bug in my Plugin? How can the Toaster be made working?

[github-actions]

This pull request has been automatically marked as stale because it has not had recent activity. It will be closed in 5 days if no further activity occurs. Thank you for your contributions.

[pierrejeambrun]

Up

[jscheffl]

up for ~1200 commits :-D

[jscheffl]

up for ~720 commits :-D (again)

[jscheffl]

@pierrejeambrun Interesting, still do not understand the root cause why a toaster is not working on Plugins pages but what I noticed in the browser is that there is a <div> element rendered for all pages which seems to hold the toaster below the root div element with the id="toast-group":

This one is missing on the Plugins page - and don't know if this helps in trigaing - but noticed when navigating to Admin -> Configs (url: /config) which is raising a forbidden error via HTTP 403, there also the toaster is not working with the explicit ybutton in the Nav.

[pierrejeambrun]

I would have to investigate. But my guess is that Chakra UI handles the toaster via 'portals' into a specific unique dom element that is global. So basically any toaster will render in that shared toast-group element.

Then there might be some sort of conflict, the plugin toast can't find the proper host element to portal the toast to.

I'm sorry for the delay and not finding time to look at this yet.

[jscheffl]

up by 700 commits

[bbovenzi]

I gave you pseudo code. Here is exactly what you need:

toaster.tsx:

import { Toaster as ChakraToaster, Portal, Spinner, Stack, Toast, createToaster } from "@chakra-ui/react";
import type { RefObject } from "react";

export const toaster = createToaster({
  pauseOnPageIdle: true,
  placement: "bottom-end",
});

export const Toaster = ({ containerRef }: { containerRef: RefObject<HTMLDivElement | null> }) => (
  <Portal container={containerRef}>
    <ChakraToaster toaster={toaster} insetInline={{ mdDown: "4" }}>
      {(toast) => (
        <Toast.Root width={{ md: "sm" }}>
          {toast.type === "loading" ? <Spinner size="sm" color="blue.solid" /> : <Toast.Indicator />}
          <Stack gap="1" flex="1" maxWidth="100%">
            {toast.title && <Toast.Title>{toast.title}</Toast.Title>}
            {toast.description && <Toast.Description>{toast.description}</Toast.Description>}
          </Stack>
          {toast.action && <Toast.ActionTrigger>{toast.action.label}</Toast.ActionTrigger>}
          {toast.closable && <Toast.CloseTrigger />}
        </Toast.Root>
      )}
    </ChakraToaster>
  </Portal>
);

EdgeLayout.tsx:

import { Box } from "@chakra-ui/react";
import { useRef } from "react";
import { Navigate, Route, Routes } from "react-router-dom";

import { Toaster } from "src/components/ui";
import { JobsPage } from "src/pages/JobsPage";
import { WorkerPage } from "src/pages/WorkerPage";

import { NavTabs } from "./NavTabs";

export const EdgeLayout = () => {
  const containerRef = useRef<HTMLDivElement>(null);
  const tabs = [
    { label: "Edge Worker", value: "worker" },
    { label: "Edge Jobs", value: "jobs" },
  ];

  return (
    <Box ref={containerRef} p={2} /* Compensate for parent padding from ExternalView */>
      <NavTabs tabs={tabs} />
      <Routes>
        <Route index element={<Navigate to="worker" replace />} />
        <Route path="worker" element={<WorkerPage />} />
        <Route path="jobs" element={<JobsPage />} />
      </Routes>
      <Toaster containerRef={containerRef} />
    </Box>
  );
};