diff --git a/src/extensions/registries/page-menu-registry.ts b/src/extensions/registries/page-menu-registry.ts index 53131f507b..15f11139e6 100644 --- a/src/extensions/registries/page-menu-registry.ts +++ b/src/extensions/registries/page-menu-registry.ts @@ -1,10 +1,9 @@ // Extensions-api -> Register page menu items import type { IconProps } from "../../renderer/components/icon"; import type React from "react"; -import { action, computed } from "mobx"; +import { action } from "mobx"; import { BaseRegistry } from "./base-registry"; import { LensExtension } from "../lens-extension"; -import { RegisteredPage } from "./page-registry"; export interface PageMenuTarget

{ extensionId?: string; @@ -18,16 +17,11 @@ export interface PageMenuRegistration { components: PageMenuComponents; } -export interface ClusterPageMenuRegistration extends PageMenuRegistration { - id?: string; - parentId?: string; -} - export interface PageMenuComponents { Icon: React.ComponentType; } -export class GlobalPageMenuRegistry extends BaseRegistry { +export class PageMenuRegistry extends BaseRegistry> { @action add(items: PageMenuRegistration[], ext: LensExtension) { const normalizedItems = items.map(menuItem => { @@ -41,31 +35,5 @@ export class GlobalPageMenuRegistry extends BaseRegistry { } } -export class ClusterPageMenuRegistry extends BaseRegistry { - @action - add(items: PageMenuRegistration[], ext: LensExtension) { - const normalizedItems = items.map(menuItem => { - menuItem.target = { - extensionId: ext.name, - ...(menuItem.target || {}), - }; - return menuItem; - }); - return super.add(normalizedItems); - } - - getRootItems() { - return this.getItems().filter((item) => !item.parentId); - } - - getSubItems(parent: ClusterPageMenuRegistration) { - return this.getItems().filter((item) => item.parentId === parent.id && item.target.extensionId === parent.target.extensionId); - } - - getByPage(page: RegisteredPage) { - return this.getItems().find((item) => item.target?.pageId == page.id && item.target?.extensionId === page.extensionId); - } -} - -export const globalPageMenuRegistry = new GlobalPageMenuRegistry(); -export const clusterPageMenuRegistry = new ClusterPageMenuRegistry(); +export const globalPageMenuRegistry = new PageMenuRegistry(); +export const clusterPageMenuRegistry = new PageMenuRegistry(); diff --git a/src/renderer/components/app.tsx b/src/renderer/components/app.tsx index 7aea1125ad..185a9650fa 100755 --- a/src/renderer/components/app.tsx +++ b/src/renderer/components/app.tsx @@ -34,15 +34,12 @@ import { Terminal } from "./dock/terminal"; import { getHostedCluster, getHostedClusterId } from "../../common/cluster-store"; import logger from "../../main/logger"; import { webFrame } from "electron"; -import { clusterPageRegistry, getExtensionPageUrl, PageRegistration, RegisteredPage } from "../../extensions/registries/page-registry"; +import { clusterPageRegistry } 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 { @@ -75,48 +72,9 @@ 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 = () => ; - return ; - } else { - const page = clusterPageRegistry.getByPageMenuTarget(menu.target); - if (page) { - const pageComponent = () => ; - return ; - } - } - }); - } - renderExtensionRoutes() { - return clusterPageRegistry.getItems().map((page, index) => { - const menu = clusterPageMenuRegistry.getByPage(page); - if (!menu) { - return ; - } + return clusterPageRegistry.getItems().map(({ components: { Page }, exact, routePath }) => { + return ; }); } @@ -138,7 +96,6 @@ export class App extends React.Component { - {this.renderExtensionTabLayoutRoutes()} {this.renderExtensionRoutes()} diff --git a/src/renderer/components/layout/sidebar.tsx b/src/renderer/components/layout/sidebar.tsx index 0c56923c28..428794764f 100644 --- a/src/renderer/components/layout/sidebar.tsx +++ b/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 { ClusterPageMenuRegistration, clusterPageMenuRegistry, clusterPageRegistry, getExtensionPageUrl, RegisteredPage } from "../../../extensions/registries"; +import { clusterPageMenuRegistry, clusterPageRegistry, getExtensionPageUrl } from "../../../extensions/registries"; const SidebarContext = React.createContext({ pinned: false }); type SidebarContextValue = { @@ -76,52 +76,6 @@ export class Sidebar extends React.Component { }); } - 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 ( - } - isActive={isActive} - subMenus={tabRoutes} - /> - ); - }); - } - render() { const { toggle, isPinned, className } = this.props; const query = namespaceStore.getContextParams(); @@ -237,7 +191,20 @@ export class Sidebar extends React.Component { > {this.renderCustomResources()} - {this.renderRegisteredMenus()} + {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 ( + } + isActive={isActive} + /> + ); + })}