(airflow) branch main updated: fix(ui): prevent duplicate nav sidebar when iframe navigates away from auth pages (#63873)

[bbovenzi]

This is an automated email from the ASF dual-hosted git repository.

bbovenzi pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow.git


The following commit(s) were added to refs/heads/main by this push:
     new 545baf44bae fix(ui): prevent duplicate nav sidebar when iframe 
navigates away from auth pages (#63873)
545baf44bae is described below

commit 545baf44bae1774fa950f7c9d368f0d6c5c6fabb
Author: nagasrisai <59650078+nagasri...@users.noreply.github.com>
AuthorDate: Tue Apr 7 22:34:57 2026 +0530

    fix(ui): prevent duplicate nav sidebar when iframe navigates away from auth 
pages (#63873)
    
    When a user opens a Security panel (e.g. Users) and clicks the Airflow
    logo inside the embedded FAB iframe, the iframe navigates to '/' which
    causes the React SPA to render inside the iframe, including its own Nav
    sidebar. This produces a duplicate navigation bar alongside the outer
    app's sidebar.
    
    Fix: before calling navigate('/'), set iframe.src = 'about:blank' to
    immediately clear the iframe content so the inner React app has no
    chance to render its Nav. A isRedirecting ref guards against the extra
    onLoad event that setting src to about:blank would otherwise trigger.
    
    Closes #63805
---
 airflow-core/src/airflow/ui/src/pages/Security.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/airflow-core/src/airflow/ui/src/pages/Security.tsx 
b/airflow-core/src/airflow/ui/src/pages/Security.tsx
index c3b0fb89309..9a56996dcbc 100644
--- a/airflow-core/src/airflow/ui/src/pages/Security.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Security.tsx
@@ -17,6 +17,7 @@
  * under the License.
  */
 import { Box } from "@chakra-ui/react";
+import { useRef } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 
 import { useAuthLinksServiceGetAuthMenus } from "openapi/queries";
@@ -38,14 +39,25 @@ export const Security = () => {
   const link = authLinks?.extra_menu_items.find((mi) => 
mi.text.toLowerCase().replace(" ", "-") === page);
 
   const navigate = useNavigate();
+  // Track when we are already redirecting so that setting iframe.src = 
"about:blank"
+  // (which fires another onLoad event) does not trigger a second navigate 
call.
+  const isRedirecting = useRef(false);
 
   const onLoad = () => {
+    if (isRedirecting.current) {
+      return;
+    }
+
     const iframe: HTMLIFrameElement | null = 
document.querySelector("#security-iframe");
 
     if (iframe?.contentWindow) {
       const base = new URL(document.baseURI).pathname.replace(/\/$/u, ""); // 
Remove trailing slash if exists
 
       if (!iframe.contentWindow.location.pathname.startsWith(`${base}/auth/`)) 
{
+        // Clear the iframe immediately so that the React app does not render 
its own
+        // navigation sidebar inside the iframe, which would produce a 
duplicate nav bar.
+        isRedirecting.current = true;
+        iframe.src = "about:blank";
         void navigate("/");
       }
     }