Fix Toaster in Plugin in Edge UI by jscheffl · Pull Request #55641 · apache/airflow

jscheffl · 2025-09-13T22:02:58Z

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:

Take this branch
Run it locally via breeze start-airflow --python 3.12 --backend postgres --executor EdgeExecutor --load-example-dags
Open the Web UI and after login on the start page, click on the "Toast" button in the Navbar - all OK
Navifate to "Admin" -> "Edge Worker Hosts" (Which is the React Plugin)
Click the same button --> Does not respond. See JavaScript console that logs are written and no errors
Attempt to click on the Toaster Test button in the Plugin itself, also not working
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 · 2025-10-30T00:18:03Z

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 · 2025-10-30T14:17:15Z

Up

jscheffl · 2025-11-11T20:49:53Z

up for ~1200 commits :-D

jscheffl · 2025-12-23T18:07:39Z

up for ~720 commits :-D (again)

jscheffl · 2025-12-23T20:00:59Z

@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 · 2026-01-31T20:17:13Z

up by 700 commits

…in-plugin

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>
);
};

…in-plugin

* Attempt to fix Toaster in Plugin * Attempt to fix via proposal * Revert testing of toaster open * Fix toaster using hints from Brent

jscheffl · 2025-09-13T22:02:58Z

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:

Take this branch
Run it locally via breeze start-airflow --python 3.12 --backend postgres --executor EdgeExecutor --load-example-dags
Open the Web UI and after login on the start page, click on the "Toast" button in the Navbar - all OK
Navifate to "Admin" -> "Edge Worker Hosts" (Which is the React Plugin)
Click the same button --> Does not respond. See JavaScript console that logs are written and no errors
Attempt to click on the Toaster Test button in the Plugin itself, also not working
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 · 2025-10-30T00:18:03Z

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 · 2025-10-30T14:17:15Z

Up

jscheffl · 2025-11-11T20:49:53Z

up for ~1200 commits :-D

jscheffl · 2025-12-23T18:07:39Z

up for ~720 commits :-D (again)

jscheffl · 2025-12-23T20:00:59Z

@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 · 2026-01-31T20:17:13Z

up by 700 commits

…in-plugin

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>
);
};

…in-plugin

* Attempt to fix Toaster in Plugin * Attempt to fix via proposal * Revert testing of toaster open * Fix toaster using hints from Brent

jscheffl · 2025-09-13T22:02:58Z

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:

Take this branch
Run it locally via breeze start-airflow --python 3.12 --backend postgres --executor EdgeExecutor --load-example-dags
Open the Web UI and after login on the start page, click on the "Toast" button in the Navbar - all OK
Navifate to "Admin" -> "Edge Worker Hosts" (Which is the React Plugin)
Click the same button --> Does not respond. See JavaScript console that logs are written and no errors
Attempt to click on the Toaster Test button in the Plugin itself, also not working
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 · 2025-10-30T00:18:03Z

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 · 2025-10-30T14:17:15Z

Up

jscheffl · 2025-11-11T20:49:53Z

up for ~1200 commits :-D

jscheffl · 2025-12-23T18:07:39Z

up for ~720 commits :-D (again)

jscheffl · 2025-12-23T20:00:59Z

@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 · 2026-01-31T20:17:13Z

up by 700 commits

…in-plugin

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>
);
};

…in-plugin

* Attempt to fix Toaster in Plugin * Attempt to fix via proposal * Revert testing of toaster open * Fix toaster using hints from Brent

jscheffl · 2025-09-13T22:02:58Z

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:

Take this branch
Run it locally via breeze start-airflow --python 3.12 --backend postgres --executor EdgeExecutor --load-example-dags
Open the Web UI and after login on the start page, click on the "Toast" button in the Navbar - all OK
Navifate to "Admin" -> "Edge Worker Hosts" (Which is the React Plugin)
Click the same button --> Does not respond. See JavaScript console that logs are written and no errors
Attempt to click on the Toaster Test button in the Plugin itself, also not working
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 · 2025-10-30T00:18:03Z

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 · 2025-10-30T14:17:15Z

Up

jscheffl · 2025-11-11T20:49:53Z

up for ~1200 commits :-D

jscheffl · 2025-12-23T18:07:39Z

up for ~720 commits :-D (again)

jscheffl · 2025-12-23T20:00:59Z

@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 · 2026-01-31T20:17:13Z

up by 700 commits

…in-plugin

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>
);
};

…in-plugin

* Attempt to fix Toaster in Plugin * Attempt to fix via proposal * Revert testing of toaster open * Fix toaster using hints from Brent

jscheffl · 2025-09-13T22:02:58Z

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:

Take this branch
Run it locally via breeze start-airflow --python 3.12 --backend postgres --executor EdgeExecutor --load-example-dags
Open the Web UI and after login on the start page, click on the "Toast" button in the Navbar - all OK
Navifate to "Admin" -> "Edge Worker Hosts" (Which is the React Plugin)
Click the same button --> Does not respond. See JavaScript console that logs are written and no errors
Attempt to click on the Toaster Test button in the Plugin itself, also not working
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 · 2025-10-30T00:18:03Z

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 · 2025-10-30T14:17:15Z

Up

jscheffl · 2025-11-11T20:49:53Z

up for ~1200 commits :-D

jscheffl · 2025-12-23T18:07:39Z

up for ~720 commits :-D (again)

jscheffl · 2025-12-23T20:00:59Z

@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 · 2026-01-31T20:17:13Z

up by 700 commits

…in-plugin

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>
);
};

…in-plugin

* Attempt to fix Toaster in Plugin * Attempt to fix via proposal * Revert testing of toaster open * Fix toaster using hints from Brent

jscheffl · 2025-09-13T22:02:58Z

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:

Take this branch
Run it locally via breeze start-airflow --python 3.12 --backend postgres --executor EdgeExecutor --load-example-dags
Open the Web UI and after login on the start page, click on the "Toast" button in the Navbar - all OK
Navifate to "Admin" -> "Edge Worker Hosts" (Which is the React Plugin)
Click the same button --> Does not respond. See JavaScript console that logs are written and no errors
Attempt to click on the Toaster Test button in the Plugin itself, also not working
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 · 2025-10-30T00:18:03Z

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 · 2025-10-30T14:17:15Z

Up

jscheffl · 2025-11-11T20:49:53Z

up for ~1200 commits :-D

jscheffl · 2025-12-23T18:07:39Z

up for ~720 commits :-D (again)

jscheffl · 2025-12-23T20:00:59Z

@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 · 2026-01-31T20:17:13Z

up by 700 commits

…in-plugin

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>
);
};

…in-plugin

* Attempt to fix Toaster in Plugin * Attempt to fix via proposal * Revert testing of toaster open * Fix toaster using hints from Brent

jscheffl · 2025-09-13T22:02:58Z

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:

Take this branch
Run it locally via breeze start-airflow --python 3.12 --backend postgres --executor EdgeExecutor --load-example-dags
Open the Web UI and after login on the start page, click on the "Toast" button in the Navbar - all OK
Navifate to "Admin" -> "Edge Worker Hosts" (Which is the React Plugin)
Click the same button --> Does not respond. See JavaScript console that logs are written and no errors
Attempt to click on the Toaster Test button in the Plugin itself, also not working
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 · 2025-10-30T00:18:03Z

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 · 2025-10-30T14:17:15Z

Up

jscheffl · 2025-11-11T20:49:53Z

up for ~1200 commits :-D

jscheffl · 2025-12-23T18:07:39Z

up for ~720 commits :-D (again)

jscheffl · 2025-12-23T20:00:59Z

@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 · 2026-01-31T20:17:13Z

up by 700 commits

…in-plugin

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>
);
};

…in-plugin

* Attempt to fix Toaster in Plugin * Attempt to fix via proposal * Revert testing of toaster open * Fix toaster using hints from Brent

jscheffl · 2025-09-13T22:02:58Z

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:

Take this branch
Run it locally via breeze start-airflow --python 3.12 --backend postgres --executor EdgeExecutor --load-example-dags
Open the Web UI and after login on the start page, click on the "Toast" button in the Navbar - all OK
Navifate to "Admin" -> "Edge Worker Hosts" (Which is the React Plugin)
Click the same button --> Does not respond. See JavaScript console that logs are written and no errors
Attempt to click on the Toaster Test button in the Plugin itself, also not working
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 · 2025-10-30T00:18:03Z

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 · 2025-10-30T14:17:15Z

Up

jscheffl · 2025-11-11T20:49:53Z

up for ~1200 commits :-D

jscheffl · 2025-12-23T18:07:39Z

up for ~720 commits :-D (again)

jscheffl · 2025-12-23T20:00:59Z

@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 · 2026-01-31T20:17:13Z

up by 700 commits

…in-plugin

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>
);
};

…in-plugin

* Attempt to fix Toaster in Plugin * Attempt to fix via proposal * Revert testing of toaster open * Fix toaster using hints from Brent

boring-cyborgBot added area:providers area:UI Related to UI/UX. For Frontend Developers. provider:edge Edge Executor / Worker (AIP-69) / edge3 labels Sep 13, 2025

jscheffl mentioned this pull request Sep 13, 2025
Fix Link to Dag in Plugin #55642
Merged

jscheffl force-pushed the bugfix/fix-toaster-in-plugin branch from 0e30e30 to 104551aCompare September 14, 2025 20:44

eladkal mentioned this pull request Oct 27, 2025
Status of testing Providers that were prepared on October 27, 2025 #57329
Closed
2 tasks

github-actionsBot added the stale Stale PRs per the .github/workflows/stale.yml policy file label Oct 30, 2025

pierrejeambrun removed the stale Stale PRs per the .github/workflows/stale.yml policy file label Oct 30, 2025

eladkal mentioned this pull request Nov 3, 2025
Status of testing Providers that were prepared on November 03, 2025 #57739
Closed
5 tasks

jscheffl force-pushed the bugfix/fix-toaster-in-plugin branch from 104551a to 770c74fCompare November 11, 2025 20:19

jscheffl force-pushed the bugfix/fix-toaster-in-plugin branch from 770c74f to f976a86Compare December 23, 2025 18:07

pierrejeambrun reviewed Jan 6, 2026
View reviewed changes

Attempt to fix Toaster in Plugin
525a1cb

jscheffl force-pushed the bugfix/fix-toaster-in-plugin branch from f976a86 to 525a1cbCompare January 31, 2026 20:16

bbovenzi reviewed Feb 19, 2026
View reviewed changes

Comment threadproviders/edge3/src/airflow/providers/edge3/plugins/www/src/components/ui/toaster.tsx Outdated

jscheffl added 2 commits February 25, 2026 23:51

Merge remote-tracking branch 'upstream/main' into bugfix/fix-toaster-…
139a9c0
…in-plugin

Attempt to fix via proposal
ef80856

jscheffl commented Feb 25, 2026
View reviewed changes

Comment threadproviders/edge3/src/airflow/providers/edge3/plugins/www/src/components/ui/toaster.tsx Outdated

bbovenzi reviewed Feb 26, 2026
View reviewed changes

jscheffl added 3 commits March 1, 2026 21:42

Merge remote-tracking branch 'upstream/main' into bugfix/fix-toaster-…
cca214f
…in-plugin

Revert testing of toaster open
ba99798

Fix toaster using hints from Brent
840002a

jscheffl changed the title ~~[DO NOT MERGE] Attempt to fix Toaster in Plugin~~Fix Toaster in Plugin in Edge UIMar 1, 2026

jscheffl marked this pull request as ready for review March 1, 2026 21:02

jscheffl requested a review from dheerajturaga as a code owner March 1, 2026 21:02

jscheffl added the type:bug-fix Changelog: Bug Fixes label Mar 1, 2026

bbovenzi approved these changes Mar 2, 2026
View reviewed changes

bbovenzi merged commit 3161a80 into apache:mainMar 2, 2026
120 of 123 checks passed

potiuk mentioned this pull request Mar 3, 2026
Status of testing Providers that were prepared on March 03, 2026 #62794
Closed
55 tasks

dominikhei pushed a commit to dominikhei/airflow that referenced this pull request Mar 11, 2026
Fix Toaster in Plugin in Edge UI (apache#55641)
f83b6ef
* Attempt to fix Toaster in Plugin * Attempt to fix via proposal * Revert testing of toaster open * Fix toaster using hints from Brent