diff --git a/src/extensions/example-extension/example-extension.tsx b/src/extensions/example-extension/example-extension.tsx index 5a4e7032b9..5c1582057f 100644 --- a/src/extensions/example-extension/example-extension.tsx +++ b/src/extensions/example-extension/example-extension.tsx @@ -3,21 +3,23 @@ import React from "react"; import path from "path"; export default class ExampleExtension extends LensExtension { - protected routePath = "/extension-example" + protected unRegisterPage = Function(); onActivate() { console.log('EXAMPLE EXTENSION: ACTIVATE', this.getMeta()) - const { dynamicPages } = this.runtime; - dynamicPages.register(this.routePath, { - Main: ExtensionPage, - MenuIcon: ExtensionIcon, + this.unRegisterPage = this.runtime.dynamicPages.register({ + type: "cluster-view", + path: "/extension-example", + components: { + Main: ExtensionPage, + MenuIcon: ExtensionIcon, + } }) } onDeactivate() { console.log('EXAMPLE EXTENSION: DEACTIVATE', this.getMeta()); - const { dynamicPages } = this.runtime; - dynamicPages.unregister(this.routePath); + this.unRegisterPage(); } } diff --git a/src/extensions/extension-store.ts b/src/extensions/extension-store.ts index 0ce0c1cab8..640a0e88e4 100644 --- a/src/extensions/extension-store.ts +++ b/src/extensions/extension-store.ts @@ -13,7 +13,7 @@ export interface ExtensionStoreModel { } export interface ExtensionModel { - id?: ExtensionId; // available in lens-extension instance + id: ExtensionId; version: ExtensionVersion; name: string; manifestPath: string; diff --git a/src/renderer/components/cluster-manager/cluster-manager.tsx b/src/renderer/components/cluster-manager/cluster-manager.tsx index 08cbfa9207..9f46c88e19 100644 --- a/src/renderer/components/cluster-manager/cluster-manager.tsx +++ b/src/renderer/components/cluster-manager/cluster-manager.tsx @@ -63,8 +63,8 @@ export class ClusterManager extends React.Component { - {Array.from(dynamicPages.routes).map(([path, { Main }]) => { - return + {dynamicPages.globalPages.map(({ path, components: { Page } }) => { + return })} diff --git a/src/renderer/components/cluster-manager/clusters-menu.tsx b/src/renderer/components/cluster-manager/clusters-menu.tsx index 6068a5bbe1..64f69fb736 100644 --- a/src/renderer/components/cluster-manager/clusters-menu.tsx +++ b/src/renderer/components/cluster-manager/clusters-menu.tsx @@ -149,7 +149,7 @@ export class ClustersMenu extends React.Component { )}
- {Array.from(dynamicPages.routes).map(([path, { MenuIcon }]) => { + {dynamicPages.globalPages.map(({ path, components: { MenuIcon } }) => { if (MenuIcon) { return navigate(path)}/> } diff --git a/src/renderer/components/cluster-manager/register-page.ts b/src/renderer/components/cluster-manager/register-page.ts index 23db2c36dd..49d32dcb30 100644 --- a/src/renderer/components/cluster-manager/register-page.ts +++ b/src/renderer/components/cluster-manager/register-page.ts @@ -1,27 +1,38 @@ // Dynamic pages import React from "react"; -import { observable } from "mobx"; +import { computed, observable } from "mobx"; import type { IconProps } from "../icon"; +export interface PageRegistration { + path: string; + type: "global" | "cluster-view"; + components: PageComponents; +} + export interface PageComponents { - Main: React.ComponentType; + Page: React.ComponentType; MenuIcon: React.ComponentType; } export class PagesStore { - routes = observable.map(); + protected pages = observable.array([], { deep: false }); - getComponents(path: string): PageComponents | null { - return this.routes.get(path); + @computed get globalPages() { + return this.pages.filter(page => page.type === "global"); } - register(path: string, components: PageComponents) { - this.routes.set(path, components); + @computed get clusterPages() { + return this.pages.filter(page => page.type === "cluster-view"); } - unregister(path: string) { - this.routes.delete(path); + register(params: PageRegistration) { + this.pages.push(params); + return () => { + this.pages.replace( + this.pages.filter(page => page.components !== params.components) + ) + }; } }