Add iframe plugins to the nav

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

@@ -16,10 +16,11 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box, Link } from "@chakra-ui/react";
+import { Box, Link, Image } from "@chakra-ui/react";
 import { useTranslation } from "react-i18next";
 import { FiChevronRight } from "react-icons/fi";
 import { LuPlug } from "react-icons/lu";
+import { Link as RouterLink } from "react-router-dom";
 
 import { usePluginServiceGetPlugins } from "openapi/queries";
 import type { AppBuilderMenuItemResponse } from "openapi/requests/types.gen";
@@ -32,15 +33,21 @@ export const PluginMenus = () => {
   const { data } = usePluginServiceGetPlugins();
 
   const menuPlugins = data?.plugins.filter((plugin) => plugin.appbuilder_menu_items.length > 0);
+  const iframePlugins =
+    data?.plugins.flatMap((plugin) => plugin.iframe_views).filter((view) => view.destination === "nav") ?? [];
 
-  if (data === undefined || menuPlugins === undefined) {
+  // Only show iframe plugins in menu if there are more than 2
+  const menuIframePlugins = iframePlugins.length > 2 ? iframePlugins : [];
+  const directIframePlugins = iframePlugins.length <= 2 ? iframePlugins : [];
+
+  if (data === undefined || (menuPlugins === undefined && iframePlugins.length === 0)) {
     return undefined;
   }
 
   const categories: Record<string, Array<AppBuilderMenuItemResponse>> = {};
   const buttons: Array<AppBuilderMenuItemResponse> = [];
 
-  menuPlugins.forEach((plugin) => {
+  menuPlugins?.forEach((plugin) => {
     plugin.appbuilder_menu_items.forEach((mi) => {
       if (mi.category !== null && mi.category !== undefined) {
         categories[mi.category] = [...(categories[mi.category] ?? []), mi];
@@ -50,45 +57,79 @@ export const PluginMenus = () => {
     });
   });
 
-  if (!buttons.length && !Object.keys(categories).length) {
+  if (!buttons.length && !Object.keys(categories).length && iframePlugins.length === 0) {
     return undefined;
   }
 
   return (
-    <Menu.Root positioning={{ placement: "right" }}>
-      <Menu.Trigger>
-        <NavButton as={Box} icon={<LuPlug />} title={translate("nav.plugins")} />
-      </Menu.Trigger>
-      <Menu.Content>
-        {buttons.map(({ href, name }) =>
-          href !== null && href !== undefined ? (
-            <Menu.Item asChild key={name} value={name}>
-              <Link aria-label={name} href={href} rel="noopener noreferrer" target="_blank">
-                {name}
-              </Link>
-            </Menu.Item>
-          ) : undefined,
-        )}
-        {Object.entries(categories).map(([key, menuButtons]) => (
-          <Menu.Root key={key} positioning={{ placement: "right" }}>
-            <Menu.TriggerItem display="flex" justifyContent="space-between">
-              {key}
-              <FiChevronRight />
-            </Menu.TriggerItem>
-            <Menu.Content>
-              {menuButtons.map(({ href, name }) =>
-                href !== undefined && href !== null ? (
-                  <Menu.Item asChild key={name} value={name}>
-                    <Link aria-label={name} href={href} rel="noopener noreferrer" target="_blank">
-                      {name}
-                    </Link>
-                  </Menu.Item>
-                ) : undefined,
-              )}
-            </Menu.Content>
-          </Menu.Root>
-        ))}
-      </Menu.Content>
-    </Menu.Root>
+    <>
+      {directIframePlugins.map((plugin) => (
+        <NavButton
+          icon={
+            typeof plugin.icon === "string" ? (
+              <Image height="1.75rem" src={plugin.icon} width="1.75rem" />
+            ) : (
+              <LuPlug size="1.75rem" />
+            )
+          }
+          key={plugin.name}
+          title={plugin.name}
+          to={`plugin/${plugin.url_route ?? plugin.name.toLowerCase().replace(" ", "-")}`}
+        />
+      ))}
+      {(menuIframePlugins.length > 0 || buttons.length > 0 || Object.keys(categories).length > 0) && (
+        <Menu.Root positioning={{ placement: "right" }}>
+          <Menu.Trigger>
+            <NavButton as={Box} icon={<LuPlug />} title={translate("nav.plugins")} />
+          </Menu.Trigger>
+          <Menu.Content>
+            {menuIframePlugins.map((plugin) => (
+              <Menu.Item key={plugin.name} value={plugin.name}>
+                <Box alignItems="center" display="flex" gap={2}>
+                  {typeof plugin.icon === "string" ? (
+                    <Image height="1.25rem" src={plugin.icon} width="1.25rem" />
+                  ) : (
+                    <LuPlug size="1.25rem" />
+                  )}
+                  <RouterLink
+                    to={`plugin/${plugin.url_route ?? plugin.name.toLowerCase().replace(" ", "-")}`}
+                  >
+                    {plugin.name}
+                  </RouterLink>
+                </Box>
+              </Menu.Item>
+            ))}
+            {buttons.map(({ href, name }) =>
+              href !== null && href !== undefined ? (
+                <Menu.Item asChild key={name} value={name}>
+                  <Link aria-label={name} href={href} rel="noopener noreferrer" target="_blank">
+                    {name}
+                  </Link>
+                </Menu.Item>
+              ) : undefined,
+            )}
+            {Object.entries(categories).map(([key, menuButtons]) => (
+              <Menu.Root key={key} positioning={{ placement: "right" }}>
+                <Menu.TriggerItem display="flex" justifyContent="space-between">
+                  {key}
+                  <FiChevronRight />
+                </Menu.TriggerItem>
+                <Menu.Content>
+                  {menuButtons.map(({ href, name }) =>
+                    href !== undefined && href !== null ? (
+                      <Menu.Item asChild key={name} value={name}>
+                        <Link aria-label={name} href={href} rel="noopener noreferrer" target="_blank">
+                          {name}
+                        </Link>
+                      </Menu.Item>
+                    ) : undefined,
+                  )}
+                </Menu.Content>
+              </Menu.Root>
+            ))}
+          </Menu.Content>
+        </Menu.Root>
+      )}
+    </>
   );
 };

airflow-core/src/airflow/ui/src/pages/Iframe.tsx

@@ -0,0 +1,57 @@
+/*!
+ * 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 { Box } from "@chakra-ui/react";
+import { useParams } from "react-router-dom";
+
+import { usePluginServiceGetPlugins } from "openapi/queries";
+import { ProgressBar } from "src/components/ui";
+
+import { ErrorPage } from "./Error";
+
+export const Iframe = () => {
+  const { page } = useParams();
+  const { data: pluginData, isLoading } = usePluginServiceGetPlugins();
+
+  const iframeView = pluginData?.plugins
+    .flatMap((plugin) => plugin.iframe_views)
+    .find((view) => (view.url_route ?? view.name.toLowerCase().replace(" ", "-")) === page);
+
+  if (!iframeView) {
+    if (isLoading) {
+      return (
+        <Box flexGrow={1}>
+          <ProgressBar />
+        </Box>
+      );
+    }
+
+    return <ErrorPage />;
+  }
+
+  return (
+    <Box flexGrow={1} m={-3}>
+      <iframe
+        sandbox="allow-same-origin allow-forms"
+        src={iframeView.src}
+        style={{ height: "100%", width: "100%" }}
+        title={iframeView.name}
+      />
+    </Box>
+  );
+};

airflow-core/src/airflow/ui/src/router.tsx

@@ -25,6 +25,7 @@ import { BaseLayout } from "src/layouts/BaseLayout";
 import { DagsLayout } from "src/layouts/DagsLayout";
 import { Asset } from "src/pages/Asset";
 import { AssetsList } from "src/pages/AssetsList";
+import { Configs } from "src/pages/Configs";
 import { Connections } from "src/pages/Connections";
 import { Dag } from "src/pages/Dag";
 import { Backfills } from "src/pages/Dag/Backfills";
@@ -37,26 +38,26 @@ import { DagsList } from "src/pages/DagsList";
 import { Dashboard } from "src/pages/Dashboard";
 import { ErrorPage } from "src/pages/Error";
 import { Events } from "src/pages/Events";
+import { GroupTaskInstance } from "src/pages/GroupTaskInstance";
+import { Iframe } from "src/pages/Iframe";
 import { MappedTaskInstance } from "src/pages/MappedTaskInstance";
 import { Plugins } from "src/pages/Plugins";
 import { Pools } from "src/pages/Pools";
 import { Providers } from "src/pages/Providers";
 import { Run } from "src/pages/Run";
+import { AssetEvents as DagRunAssetEvents } from "src/pages/Run/AssetEvents";
 import { Details as DagRunDetails } from "src/pages/Run/Details";
+import { Security } from "src/pages/Security";
 import { Task } from "src/pages/Task";
 import { Overview as TaskOverview } from "src/pages/Task/Overview";
 import { TaskInstance, Logs } from "src/pages/TaskInstance";
+import { AssetEvents as TaskInstanceAssetEvents } from "src/pages/TaskInstance/AssetEvents";
 import { Details as TaskInstanceDetails } from "src/pages/TaskInstance/Details";
 import { RenderedTemplates } from "src/pages/TaskInstance/RenderedTemplates";
 import { TaskInstances } from "src/pages/TaskInstances";
 import { Variables } from "src/pages/Variables";
 import { XCom } from "src/pages/XCom";
 
-import { Configs } from "./pages/Configs";
-import { GroupTaskInstance } from "./pages/GroupTaskInstance";
-import { AssetEvents as DagRunAssetEvents } from "./pages/Run/AssetEvents";
-import { Security } from "./pages/Security";
-import { AssetEvents as TaskInstanceAssetEvents } from "./pages/TaskInstance/AssetEvents";
 import { client } from "./queryClient";
 
 const taskInstanceRoutes = [
@@ -141,6 +142,10 @@ export const routerConfig = [
         element: <Connections />,
         path: "connections",
       },
+      {
+        element: <Iframe />,
+        path: "plugin/:page",
+      },
       {
         children: [
           { element: <Overview />, index: true },