Allow extension cluster menus to have a parent (#1452)

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

src/renderer/components/app.tsx

@@ -34,12 +34,15 @@ import { Terminal } from "./dock/terminal";
 import { getHostedCluster, getHostedClusterId } from "../../common/cluster-store";
 import logger from "../../main/logger";
 import { webFrame } from "electron";
-import { clusterPageRegistry } from "../../extensions/registries/page-registry";
+import { clusterPageRegistry, getExtensionPageUrl, PageRegistration, RegisteredPage } from "../../extensions/registries/page-registry";
 import { extensionLoader } from "../../extensions/extension-loader";
 import { appEventBus } from "../../common/event-bus";
 import { requestMain } from "../../common/ipc";
 import whatInput from 'what-input';
 import { clusterSetFrameIdHandler } from "../../common/cluster-ipc";
+import { ClusterPageMenuRegistration, clusterPageMenuRegistry } from "../../extensions/registries";
+import { TabLayoutRoute, TabLayout } from "./layout/tab-layout";
+import { Trans } from "@lingui/macro";
 
 @observer
 export class App extends React.Component {
@@ -72,9 +75,48 @@ export class App extends React.Component {
     return workloadsURL();
   }
 
+  getTabLayoutRoutes(menuItem: ClusterPageMenuRegistration) {
+    const routes: TabLayoutRoute[] = [];
+    if (!menuItem.id) {
+      return routes;
+    }
+    clusterPageMenuRegistry.getSubItems(menuItem).forEach((item) => {
+      const page = clusterPageRegistry.getByPageMenuTarget(item.target);
+      if (page) {
+        routes.push({
+          routePath: page.routePath,
+          url: getExtensionPageUrl({ extensionId: page.extensionId, pageId: page.id, params: item.target.params }),
+          title: item.title,
+          component: page.components.Page,
+          exact: page.exact
+        });
+      }
+    });
+    return routes;
+  }
+
+  renderExtensionTabLayoutRoutes() {
+    return clusterPageMenuRegistry.getRootItems().map((menu, index) => {
+      const tabRoutes = this.getTabLayoutRoutes(menu);
+      if (tabRoutes.length > 0) {
+        const pageComponent = () => <TabLayout tabs={tabRoutes} />;
+        return <Route key={"extension-tab-layout-route-" + index} component={pageComponent}/>;
+      } else {
+        const page = clusterPageRegistry.getByPageMenuTarget(menu.target);
+        if (page) {
+          const pageComponent = () => <page.components.Page />;
+          return <Route key={"extension-tab-layout-route-" + index} path={page.routePath} exact={page.exact} component={pageComponent}/>;
+        }
+      }
+    });
+  }
+
   renderExtensionRoutes() {
-    return clusterPageRegistry.getItems().map(({ components: { Page }, exact, routePath }) => {
-      return <Route key={routePath} path={routePath} exact={exact} component={Page}/>;
+    return clusterPageRegistry.getItems().map((page, index) => {
+      const menu = clusterPageMenuRegistry.getByPage(page);
+      if (!menu) {
+        return <Route key={"extension-route-" + index} path={page.routePath} exact={page.exact} component={page.components.Page}/>;
+      }
     });
   }
 
@@ -96,6 +138,7 @@ export class App extends React.Component {
                 <Route component={CustomResources} {...crdRoute}/>
                 <Route component={UserManagement} {...usersManagementRoute}/>
                 <Route component={Apps} {...appsRoute}/>
+                {this.renderExtensionTabLayoutRoutes()}
                 {this.renderExtensionRoutes()}
                 <Redirect exact from="/" to={this.startURL}/>
                 <Route component={NotFound}/>

src/renderer/components/layout/sidebar.tsx

@@ -29,7 +29,7 @@ import { CustomResources } from "../+custom-resources/custom-resources";
 import { isActiveRoute, navigation } from "../../navigation";
 import { isAllowedResource } from "../../../common/rbac";
 import { Spinner } from "../spinner";
-import { clusterPageMenuRegistry, clusterPageRegistry, getExtensionPageUrl } from "../../../extensions/registries";
+import { ClusterPageMenuRegistration, clusterPageMenuRegistry, clusterPageRegistry, getExtensionPageUrl, RegisteredPage } from "../../../extensions/registries";
 
 const SidebarContext = React.createContext<SidebarContextValue>({ pinned: false });
 type SidebarContextValue = {
@@ -76,6 +76,52 @@ export class Sidebar extends React.Component<Props> {
     });
   }
 
+  getTabLayoutRoutes(menu: ClusterPageMenuRegistration): TabLayoutRoute[] {
+    if (!menu.id) {
+      return [];
+    }
+    const routes: TabLayoutRoute[] = [];
+
+    clusterPageMenuRegistry.getSubItems(menu).forEach((subItem) => {
+      const subPage = clusterPageRegistry.getByPageMenuTarget(subItem.target);
+      if (subPage) {
+        routes.push({
+          routePath: subPage.routePath,
+          url: getExtensionPageUrl({ extensionId: subPage.extensionId, pageId: subPage.id, params: subItem.target.params }),
+          title: subItem.title,
+          component: subPage.components.Page,
+          exact: subPage.exact
+        });
+      }
+    });
+    return routes;
+  }
+
+  renderRegisteredMenus() {
+    return clusterPageMenuRegistry.getRootItems().map((menuItem) => {
+      const registeredPage = clusterPageRegistry.getByPageMenuTarget(menuItem.target);
+      let pageUrl: string;
+      let isActive = false;
+      if (registeredPage) {
+        const { extensionId, id: pageId } = registeredPage;
+        pageUrl = getExtensionPageUrl({ extensionId, pageId, params: menuItem.target.params });
+        isActive = pageUrl === navigation.location.pathname;
+      }
+      const tabRoutes = this.getTabLayoutRoutes(menuItem);
+      if (!registeredPage && tabRoutes.length == 0) {
+        return;
+      }
+      return (
+        <SidebarNavItem
+          key={pageUrl} url={pageUrl}
+          text={menuItem.title} icon={<menuItem.components.Icon/>}
+          isActive={isActive}
+          subMenus={tabRoutes}
+        />
+      );
+    });
+  }
+
   render() {
     const { toggle, isPinned, className } = this.props;
     const query = namespaceStore.getContextParams();
@@ -191,20 +237,7 @@ export class Sidebar extends React.Component<Props> {
             >
               {this.renderCustomResources()}
             </SidebarNavItem>
-            {clusterPageMenuRegistry.getItems().map(({ title, target, components: { Icon } }) => {
-              const registeredPage = clusterPageRegistry.getByPageMenuTarget(target);
-              if (!registeredPage) return;
-              const { extensionId, id: pageId } = registeredPage;
-              const pageUrl = getExtensionPageUrl({ extensionId, pageId, params: target.params });
-              const isActive = pageUrl === navigation.location.pathname;
-              return (
-                <SidebarNavItem
-                  key={pageUrl} url={pageUrl}
-                  text={title} icon={<Icon/>}
-                  isActive={isActive}
-                />
-              );
-            })}
+            {this.renderRegisteredMenus()}
           </div>
         </div>
       </SidebarContext.Provider>