Fix Edge3 provider navigation with webserver base_url configuration (apache#56189)

* Fix Edge3 provider navigation with webserver base_url configuration

  The Edge3 provider's BrowserRouter was not respecting the Airflow
  webserver.base_url configuration, causing navigation links to generate
  absolute paths from root instead of properly prefixed paths. This
  resulted in 404 errors when Airflow is deployed with a base URL prefix
  (e.g., my_company.com/airflow).

  **Problem:**
  - Edge3 provider pages were navigating to /plugin/edge_worker instead
    of /airflow/plugin/edge_worker
  - This broke navigation in deployments where nginx redirects traffic
    from my_company.com/airflow to localhost:8080
  - The issue was in JobsPage.tsx:94 where RouterLink generated links
    without the base URL prefix

* Fix: Added _get_base_url_path() helper function and updated all URLs to use it

* Fix Edge3 provider frontend API calls with webserver base_url configuration

  The Edge3 provider's frontend was not respecting Airflow's webserver
  base_url configuration, causing API calls to fail when the webserver
  was configured with a subpath (e.g., localhost:8080/airflow).

  The OpenAPI-generated client was using an empty BASE configuration,
  resulting in API calls to /edge_worker/ui/jobs instead of
  /airflow/edge_worker/ui/jobs when base_url was set.

  This fix initializes OpenAPI.BASE from the HTML <base> tag, following
  the same pattern used in Airflow core, ensuring all API calls are
  correctly prefixed with the configured base URL path

* Update providers/edge3/src/airflow/providers/edge3/plugins/edge_executor_plugin.py

Co-authored-by: Jens Scheffler <95105677+jscheffl@users.noreply.github.com>

---------

Co-authored-by: Jens Scheffler <95105677+jscheffl@users.noreply.github.com>

Author: dheerajturaga

providers/edge3/src/airflow/providers/edge3/plugins/edge_executor_plugin.py

@@ -227,6 +227,22 @@ def change_maintenance_comment(self, worker_name: str):
     RUNNING_ON_APISERVER = "gunicorn" in sys.argv[0] and "airflow-webserver" in sys.argv
 
 
+def _get_base_url_path(path: str) -> str:
+    """Construct URL path with webserver base_url prefix."""
+    base_url = conf.get("api", "base_url", fallback="/")
+    # Extract pathname from base_url (handles both full URLs and path-only)
+    if base_url.startswith(("http://", "https://")):
+        from urllib.parse import urlparse
+
+        base_path = urlparse(base_url).path
+    else:
+        base_path = base_url
+
+    # Normalize paths: remove trailing slash from base, ensure leading slash on path
+    base_path = base_path.rstrip("/")
+    return base_path + path
+
+
 class EdgeExecutorPlugin(AirflowPlugin):
     """EdgeExecutor Plugin - provides API endpoints for Edge Workers in Webserver."""
 
@@ -237,30 +253,30 @@ class EdgeExecutorPlugin(AirflowPlugin):
             react_apps = [
                 {
                     "name": "Edge Worker",
-                    "bundle_url": "/edge_worker/static/main.umd.cjs",
+                    "bundle_url": _get_base_url_path("/edge_worker/static/main.umd.cjs"),
                     "destination": "nav",
                     "url_route": "edge_worker",
                     "category": "admin",
-                    "icon": "/edge_worker/res/cloud-computer.svg",
-                    "icon_dark_mode": "/edge_worker/res/cloud-computer-dark.svg",
+                    "icon": _get_base_url_path("/edge_worker/res/cloud-computer.svg"),
+                    "icon_dark_mode": _get_base_url_path("/edge_worker/res/cloud-computer-dark.svg"),
                 },
                 {
                     "name": "Edge Worker Jobs",
-                    "bundle_url": "/edge_worker/static/main.umd.cjs",
+                    "bundle_url": _get_base_url_path("/edge_worker/static/main.umd.cjs"),
                     "url_route": "edge_jobs",
                     "category": "admin",
-                    "icon": "/edge_worker/res/cloud-computer.svg",
-                    "icon_dark_mode": "/edge_worker/res/cloud-computer-dark.svg",
+                    "icon": _get_base_url_path("/edge_worker/res/cloud-computer.svg"),
+                    "icon_dark_mode": _get_base_url_path("/edge_worker/res/cloud-computer-dark.svg"),
                 },
             ]
             external_views = [
                 {
                     "name": "Edge Worker API docs",
-                    "href": "/edge_worker/docs",
+                    "href": _get_base_url_path("/edge_worker/docs"),
                     "destination": "nav",
                     "category": "docs",
-                    "icon": "/edge_worker/res/cloud-computer.svg",
-                    "icon_dark_mode": "/edge_worker/res/cloud-computer-dark.svg",
+                    "icon": _get_base_url_path("/edge_worker/res/cloud-computer.svg"),
+                    "icon_dark_mode": _get_base_url_path("/edge_worker/res/cloud-computer-dark.svg"),
                     "url_route": "edge_worker_api_docs",
                 }
             ]
@@ -271,7 +287,7 @@ class EdgeExecutorPlugin(AirflowPlugin):
             appbuilder_menu_items = [
                 {
                     "name": "Edge Worker API docs",
-                    "href": "/edge_worker/v1/ui",
+                    "href": _get_base_url_path("/edge_worker/v1/ui"),
                     "category": "Docs",
                 }
             ]

providers/edge3/src/airflow/providers/edge3/plugins/www/dist/main.umd.cjs

@@ -30,9 +30,13 @@ export const EdgeLayout = () => {
     { label: "Edge Jobs", value: "plugin/edge_jobs" },
   ];
 
+  // Extract base URL from HTML base element to handle webserver.base_url configuration
+  const baseUrl = document.querySelector("base")?.href ?? "http://localhost:8080/";
+  const basename = new URL(baseUrl).pathname;
+
   return (
     <Box p={2} /* Compensate for parent padding from ExternalView */>
-      <BrowserRouter>
+      <BrowserRouter basename={basename}>
         <NavTabs tabs={tabs} />
         <Routes>
           <Route path="plugin/edge_worker" element={<WorkerPage />} />

providers/edge3/src/airflow/providers/edge3/plugins/www/src/layouts/EdgeLayout.tsx

@@ -19,6 +19,7 @@
 import { ChakraProvider } from "@chakra-ui/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import axios from "axios";
+import { OpenAPI } from "openapi/requests/core/OpenAPI";
 import { FC } from "react";
 
 import { ColorModeProvider } from "src/context/colorMode";
@@ -33,6 +34,11 @@ export type PluginComponentProps = object;
  * Main plugin component
  */
 const PluginComponent: FC<PluginComponentProps> = () => {
+  // Set the base URL for OpenAPI client from the HTML base tag
+  const baseHref = document.querySelector("head > base")?.getAttribute("href") ?? "";
+  const baseUrl = new URL(baseHref, globalThis.location.origin);
+  OpenAPI.BASE = baseUrl.pathname.replace(/\/$/, ""); // Remove trailing slash
+
   // ensure HTTP API calls are authenticated with current session token
   axios.interceptors.request.use(tokenHandler);
 

providers/edge3/src/airflow/providers/edge3/plugins/www/src/main.tsx

@@ -1 +1 @@
-719ccadaebac924011168dd33e1a46f7128362bfdd487ac43cefba7c365d717b
+b9d4cc61d6d7979b1b1cd1144d0a16663367137bb2e265a4fdd90a126dbbc78d