Add Dag Runs and Task Instances to NavBar Menu

airflow-core/src/airflow/ui/src/layouts/Nav/AdminButton.tsx

@@ -27,6 +27,7 @@ import { Menu } from "src/system-components";
 import type { NavItemResponse } from "src/utils/types";
 
 import { NavButton } from "./NavButton";
+import { NavMenu } from "./NavMenu";
 import { PluginMenuItem } from "./PluginMenuItem";
 
 const links = [
@@ -78,20 +79,19 @@ export const AdminButton = ({
   }
 
   return (
-    <Menu.Root positioning={{ placement: "right" }}>
-      <Menu.Trigger asChild>
+    <NavMenu
+      trigger={
         <NavButton
           icon={FiSettings}
           title={translate("nav.admin")}
           to={authorizedLinks.map(({ href }) => href)}
         />
-      </Menu.Trigger>
-      <Menu.Content>
-        {menuItems}
-        {externalViews.map((view) => (
-          <PluginMenuItem {...view} key={view.name} />
-        ))}
-      </Menu.Content>
-    </Menu.Root>
+      }
+    >
+      {menuItems}
+      {externalViews.map((view) => (
+        <PluginMenuItem {...view} key={view.name} />
+      ))}
+    </NavMenu>
   );
 };

airflow-core/src/airflow/ui/src/layouts/Nav/BrowseButton.tsx

@@ -27,6 +27,7 @@ import { Menu } from "src/system-components";
 import type { NavItemResponse } from "src/utils/types";
 
 import { NavButton } from "./NavButton";
+import { NavMenu } from "./NavMenu";
 import { PluginMenuItem } from "./PluginMenuItem";
 
 const links = [
@@ -85,20 +86,19 @@ export const BrowseButton = ({
   }
 
   return (
-    <Menu.Root positioning={{ placement: "right" }}>
-      <Menu.Trigger asChild>
+    <NavMenu
+      trigger={
         <NavButton
           icon={FiGlobe}
           title={translate("nav.browse")}
           to={authorizedLinks.map(({ href }) => href)}
         />
-      </Menu.Trigger>
-      <Menu.Content>
-        {menuItems}
-        {externalViews.map((view) => (
-          <PluginMenuItem {...view} key={view.name} />
-        ))}
-      </Menu.Content>
-    </Menu.Root>
+      }
+    >
+      {menuItems}
+      {externalViews.map((view) => (
+        <PluginMenuItem {...view} key={view.name} />
+      ))}
+    </NavMenu>
   );
 };

airflow-core/src/airflow/ui/src/layouts/Nav/DagsButton.test.tsx

@@ -0,0 +1,67 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import "@testing-library/jest-dom/vitest";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { Wrapper } from "src/utils/Wrapper";
+
+import { DagsButton } from "./DagsButton";
+
+const getTrigger = () => screen.getByRole("link", { name: "nav.dags" });
+
+describe("DagsButton", () => {
+  it("links straight to the Dags list", () => {
+    render(<DagsButton authorizedMenuItems={["Dags"]} />, { wrapper: Wrapper });
+
+    expect(getTrigger()).toHaveAttribute("href", "/dags");
+  });
+
+  it("reveals the dags, dag runs and task instances links on hover", async () => {
+    render(<DagsButton authorizedMenuItems={["Dags"]} />, { wrapper: Wrapper });
+
+    expect(screen.queryByRole("menuitem")).toBeNull();
+
+    fireEvent.pointerEnter(getTrigger(), { pointerType: "mouse" });
+
+    await waitFor(() => {
+      expect(screen.getAllByRole("menuitem")).toHaveLength(3);
+    });
+
+    expect(screen.getAllByRole("menuitem").map((item) => item.getAttribute("href"))).toStrictEqual([
+      "/dags",
+      "/dag_runs",
+      "/task_instances",
+    ]);
+  });
+
+  it("ignores hover from a touch pointer", async () => {
+    render(<DagsButton authorizedMenuItems={["Dags"]} />, { wrapper: Wrapper });
+
+    fireEvent.pointerEnter(getTrigger(), { pointerType: "touch" });
+
+    await expect(waitFor(() => expect(screen.getAllByRole("menuitem")).toHaveLength(3))).rejects.toThrow();
+  });
+
+  it("renders a plain button with no menu when Dags is not authorized", () => {
+    render(<DagsButton authorizedMenuItems={[]} />, { wrapper: Wrapper });
+
+    expect(getTrigger()).not.toHaveAttribute("aria-haspopup");
+  });
+});

airflow-core/src/airflow/ui/src/layouts/Nav/DagsButton.tsx

@@ -0,0 +1,77 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { useTranslation } from "react-i18next";
+import { Link as RouterLink } from "react-router-dom";
+
+import type { MenuItem } from "openapi/requests/types.gen";
+
+import { Menu } from "src/system-components";
+
+import { DagIcon } from "src/assets/DagIcon";
+
+import { NavButton } from "./NavButton";
+import { NavMenu } from "./NavMenu";
+
+const links = [
+  {
+    href: "/dags",
+    key: "dag_other",
+  },
+  {
+    href: "/dag_runs",
+    key: "dagRun_other",
+  },
+  {
+    href: "/task_instances",
+    key: "taskInstance_other",
+  },
+];
+
+export const DagsButton = ({ authorizedMenuItems }: { readonly authorizedMenuItems: Array<MenuItem> }) => {
+  const { t: translate } = useTranslation();
+  const isAuthorized = authorizedMenuItems.includes("Dags");
+
+  // Stays a link to the Dags list: hovering reveals the menu, clicking goes straight there.
+  const trigger = (
+    <NavButton
+      data-testid="nav-dags-link"
+      disabled={!isAuthorized}
+      icon={DagIcon}
+      matchPaths={["dag_runs", "task_instances"]}
+      title={translate("nav.dags")}
+      to="/dags"
+    />
+  );
+
+  if (!isAuthorized) {
+    return trigger;
+  }
+
+  return (
+    <NavMenu trigger={trigger}>
+      {links.map(({ href, key }) => (
+        <Menu.Item asChild key={key} value={key}>
+          <RouterLink aria-label={translate(key)} to={href}>
+            {translate(key)}
+          </RouterLink>
+        </Menu.Item>
+      ))}
+    </NavMenu>
+  );
+};

airflow-core/src/airflow/ui/src/layouts/Nav/DocsButton.tsx

@@ -26,6 +26,7 @@ import { useConfig } from "src/queries/useConfig";
 import type { NavItemResponse } from "src/utils/types";
 
 import { NavButton } from "./NavButton";
+import { NavMenu } from "./NavMenu";
 import { PluginMenuItem } from "./PluginMenuItem";
 
 const baseUrl = document.querySelector("base")?.href ?? "http://localhost:8080/";
@@ -60,39 +61,34 @@ export const DocsButton = ({
   const versionLink = `https://airflow.apache.org/docs/apache-airflow/${version}/index.html`;
 
   return (
-    <Menu.Root positioning={{ placement: "right" }}>
-      <Menu.Trigger asChild>
-        <NavButton icon={FiBookOpen} title={translate("nav.docs")} />
-      </Menu.Trigger>
-      <Menu.Content>
-        {links
-          .filter((link) => !(!showAPIDocs && link.key === "restApiReference"))
-          .map((link) => (
-            <Menu.Item asChild key={link.key} value={translate(`docs.${link.key}`)}>
-              <Link
-                aria-label={translate(`docs.${link.key}`)}
-                href={link.href}
-                rel="noopener noreferrer"
-                target="_blank"
-                textDecoration="none"
-              >
-                <Box flex="1">{translate(`docs.${link.key}`)}</Box>
-                <Icon as={FiExternalLink} boxSize={4} color="fg.muted" />
-              </Link>
-            </Menu.Item>
-          ))}
-        {version === undefined ? undefined : (
-          <Menu.Item asChild key={version} value={version}>
-            <Link aria-label={version} href={versionLink} rel="noopener noreferrer" target="_blank">
-              <Box flex="1">{version}</Box>
+    <NavMenu trigger={<NavButton icon={FiBookOpen} title={translate("nav.docs")} />}>
+      {links
+        .filter((link) => !(!showAPIDocs && link.key === "restApiReference"))
+        .map((link) => (
+          <Menu.Item asChild key={link.key} value={translate(`docs.${link.key}`)}>
+            <Link
+              aria-label={translate(`docs.${link.key}`)}
+              href={link.href}
+              rel="noopener noreferrer"
+              target="_blank"
+              textDecoration="none"
+            >
+              <Box flex="1">{translate(`docs.${link.key}`)}</Box>
               <Icon as={FiExternalLink} boxSize={4} color="fg.muted" />
             </Link>
           </Menu.Item>
-        )}
-        {externalViews.map((view) => (
-          <PluginMenuItem {...view} key={view.name} />
         ))}
-      </Menu.Content>
-    </Menu.Root>
+      {version === undefined ? undefined : (
+        <Menu.Item asChild key={version} value={version}>
+          <Link aria-label={version} href={versionLink} rel="noopener noreferrer" target="_blank">
+            <Box flex="1">{version}</Box>
+            <Icon as={FiExternalLink} boxSize={4} color="fg.muted" />
+          </Link>
+        </Menu.Item>
+      )}
+      {externalViews.map((view) => (
+        <PluginMenuItem {...view} key={view.name} />
+      ))}
+    </NavMenu>
   );
 };

airflow-core/src/airflow/ui/src/layouts/Nav/Nav.tsx

@@ -32,14 +32,14 @@ import { Tooltip } from "src/system-components";
 
 import { Logo } from "src/components/Logo";
 
-import { DagIcon } from "src/assets/DagIcon";
 import { useTimezone } from "src/context/timezone";
 import { useConfig } from "src/queries/useConfig";
 import { getTimezoneOffsetString, getTimezoneTooltipLabel } from "src/utils/datetimeUtils";
 import type { NavItemResponse } from "src/utils/types";
 
 import { AdminButton } from "./AdminButton";
 import { BrowseButton } from "./BrowseButton";
+import { DagsButton } from "./DagsButton";
 import { DocsButton } from "./DocsButton";
 import { NavButton } from "./NavButton";
 import { PluginMenus } from "./PluginMenus";
@@ -180,14 +180,7 @@ export const Nav = () => {
           title={translate("nav.dashboard")}
           to="/home"
         />
-        <NavButton
-          data-testid="nav-dags-link"
-          disabled={!authLinks?.authorized_menu_items.includes("Dags")}
-          icon={DagIcon}
-          matchPaths={["dag_runs", "task_instances"]}
-          title={translate("nav.dags")}
-          to="/dags"
-        />
+        <DagsButton authorizedMenuItems={authLinks?.authorized_menu_items ?? []} />
         <NavButton
           data-testid="nav-assets-link"
           disabled={!authLinks?.authorized_menu_items.includes("Assets")}