(airflow) branch v3-2-test updated: [v3-2-test] fix(ui): prevent duplicate nav sidebar when iframe navigates away from auth pages (#63873) (#64854)

[bbovenzi]

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

bbovenzi pushed a commit to branch v3-2-test
in repository https://gitbox.apache.org/repos/asf/airflow.git


The following commit(s) were added to refs/heads/v3-2-test by this push:
     new 11db4670712 [v3-2-test] fix(ui): prevent duplicate nav sidebar when 
iframe navigates away from auth pages (#63873) (#64854)
11db4670712 is described below

commit 11db4670712e56418700c7b482b019faf436fe09
Author: github-actions[bot] 
<41898282+github-actions[bot]@users.noreply.github.com>
AuthorDate: Tue Apr 7 16:01:50 2026 -0400

    [v3-2-test] fix(ui): prevent duplicate nav sidebar when iframe navigates 
away from auth pages (#63873) (#64854)
    
    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
    (cherry picked from commit 545baf44bae1774fa950f7c9d368f0d6c5c6fabb)
    
    Co-authored-by: nagasrisai <59650078+nagasri...@users.noreply.github.com>
---
 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("/");
       }
     }