PageRegistration & BaseRegistry refactoring (#1334)

Signed-off-by: Roman <ixrock@gmail.com>
Co-authored-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

docs/extensions/capabilities/common-capabilities.md

@@ -100,13 +100,20 @@ import { ExamplePage } from "./src/example-page"
 export default class ExampleRendererExtension extends LensRendererExtension {
   globalPages = [
     {
-      path: "/example-route",
-      hideInMenu: true,
       components: {
         Page: ExamplePage,
       }
     }
   ]
+
+  globalPageMenus = [
+    {
+      title: "Example page", // used in icon's tooltip
+      components: {
+        Icon: () => <Component.Icon material="arrow"/>,
+      }
+    }
+  ]
 }
 ```
 
@@ -146,11 +153,20 @@ import { ExampleIcon, ExamplePage } from "./src/page"
 export default class ExampleExtension extends LensRendererExtension {
   clusterPages = [
     {
-      path: "/extension-example",
+      routePath: "/extension-example", // optional
-      title: "Example Extension",
+      exact: true, // optional
       components: {
         Page: () => <ExamplePage extension={this}/>,
-        MenuIcon: ExampleIcon,
+      }
+    }
+  ]
+
+  clusterPageMenus = [
+    {
+      url: "/extension-example", // optional
+      title: "Example Extension",
+      components: {
+        Icon: ExampleIcon,
       }
     }
   ]
@@ -199,11 +215,8 @@ export default class ExampleExtension extends LensRendererExtension {
   statusBarItems = [
     {
       item: (
-        <div
+        <div className="flex align-center gaps hover-highlight" onClick={() => this.navigate("/example-page")} >
-          className="flex align-center gaps hover-highlight"
+          <Component.Icon material="favorite" />
-          onClick={() => Navigation.navigate("/example-page")}
-        >
-          <Component.Icon material="favorite" smallest />
         </div>
       )
     }

docs/extensions/get-started/anatomy.md

@@ -84,11 +84,9 @@ import React from "react"
 export default class ExampleExtension extends LensRendererExtension {
   clusterPages = [
     {
-      path: "/extension-example",
+      routePath: "/extension-example",
-      title: "Hello World",
       components: {
         Page: () => <ExamplePage extension={this}/>,
-        MenuIcon: ExampleIcon,
       }
     }
   ]

extensions/support-page/main.ts

@@ -1,5 +1,4 @@
 import { LensMainExtension } from "@k8slens/extensions";
-import { supportPageURL } from "./src/support.route";
 
 export default class SupportPageMainExtension extends LensMainExtension {
   appMenus = [
@@ -7,7 +6,7 @@ export default class SupportPageMainExtension extends LensMainExtension {
       parentId: "help",
       label: "Support",
       click: () => {
-        this.navigate(supportPageURL());
+        this.navigate();
       }
     }
   ]

extensions/support-page/renderer.tsx

@@ -1,27 +1,20 @@
 import React from "react";
-import { Component, LensRendererExtension, Navigation } from "@k8slens/extensions";
+import { Component, Interface, LensRendererExtension } from "@k8slens/extensions";
-import { supportPageRoute, supportPageURL } from "./src/support.route";
+import { SupportPage } from "./src/support";
-import { Support } from "./src/support";
 
 export default class SupportPageRendererExtension extends LensRendererExtension {
-  globalPages = [
+  globalPages: Interface.PageRegistration[] = [
     {
-      ...supportPageRoute,
-      url: supportPageURL(),
-      hideInMenu: true,
       components: {
-        Page: Support,
+        Page: SupportPage,
       }
     }
   ]
 
-  statusBarItems = [
+  statusBarItems: Interface.StatusBarRegistration[] = [
     {
       item: (
-        <div
+        <div className="SupportPageIcon flex align-center" onClick={() => this.navigate()}>
-          className="SupportPageIcon flex align-center"
-          onClick={() => Navigation.navigate(supportPageURL())}
-        >
           <Component.Icon interactive material="help" smallest/>
         </div>
       )

extensions/support-page/src/support.route.ts

@@ -1,7 +0,0 @@
-import type { RouteProps } from "react-router";
-
-export const supportPageRoute: RouteProps = {
-  path: "/support"
-}
-
-export const supportPageURL = () => supportPageRoute.path.toString();

extensions/support-page/src/support.scss

@@ -1,4 +1,4 @@
-.PageLayout.Support {
+.SupportPage {
   a[target=_blank] {
     text-decoration: none;
     border-bottom: 1px solid;

extensions/support-page/src/support.tsx

@@ -6,12 +6,12 @@ import { observer } from "mobx-react"
 import { App, Component } from "@k8slens/extensions";
 
 @observer
-export class Support extends React.Component {
+export class SupportPage extends React.Component {
   render() {
     const { PageLayout } = Component;
     const { slackUrl, issuesTrackerUrl } = App;
     return (
-      <PageLayout showOnTop className="Support" header={<h2>Support</h2>}>
+      <PageLayout showOnTop className="SupportPage" header={<h2>Support</h2>}>
         <h2>Community Slack Channel</h2>
         <p>
           Ask a question, see what's being discussed, join the conversation <a href={slackUrl} target="_blank">here</a>

integration/__tests__/app.tests.ts

@@ -13,6 +13,7 @@ const itif = (condition: boolean) => condition ? it : it.skip
 
 jest.setTimeout(60000)
 
+// FIXME (!): improve / simplify all css-selectors + use [data-test-id="some-id"] (already used in some tests below)
 describe("Lens integration tests", () => {
   const TEST_NAMESPACE = "integration-tests"
 
@@ -394,7 +395,7 @@ describe("Lens integration tests", () => {
         if (drawer !== "") {
           it(`shows ${drawer} drawer`, async () => {
             expect(clusterAdded).toBe(true)
-            await app.client.click(`.sidebar-nav #${drawerId} span.link-text`)
+            await app.client.click(`.sidebar-nav [data-test-id="${drawerId}"] span.link-text`)
             await app.client.waitUntilTextExists(`a[href^="/${pages[0].href}"]`, pages[0].name)
           })
         }
@@ -409,7 +410,7 @@ describe("Lens integration tests", () => {
           // hide the drawer
           it(`hides ${drawer} drawer`, async () => {
             expect(clusterAdded).toBe(true)
-            await app.client.click(`.sidebar-nav #${drawerId} span.link-text`)
+            await app.client.click(`.sidebar-nav [data-test-id="${drawerId}"] span.link-text`)
             await expect(app.client.waitUntilTextExists(`a[href^="/${pages[0].href}"]`, pages[0].name, 100)).rejects.toThrow()
           })
         }
@@ -428,7 +429,7 @@ describe("Lens integration tests", () => {
       it(`shows a logs for a pod`, async () => {
         expect(clusterAdded).toBe(true)
         // Go to Pods page
-        await app.client.click(".sidebar-nav #workloads span.link-text")
+        await app.client.click(".sidebar-nav [data-test-id='workloads'] span.link-text")
         await app.client.waitUntilTextExists('a[href^="/pods"]', "Pods")
         await app.client.click('a[href^="/pods"]')
         await app.client.waitUntilTextExists("div.TableCell", "kube-apiserver")
@@ -479,7 +480,7 @@ describe("Lens integration tests", () => {
 
       it(`creates a pod in ${TEST_NAMESPACE} namespace`, async () => {
         expect(clusterAdded).toBe(true)
-        await app.client.click(".sidebar-nav #workloads span.link-text")
+        await app.client.click(".sidebar-nav [data-test-id='workloads'] span.link-text")
         await app.client.waitUntilTextExists('a[href^="/pods"]', "Pods")
         await app.client.click('a[href^="/pods"]')
         await app.client.waitUntilTextExists("div.TableCell", "kube-apiserver")

src/extensions/dynamic-page.tsx

@@ -1,15 +0,0 @@
-import React from "react";
-import { cssNames } from "../renderer/utils";
-import { TabLayout } from "../renderer/components/layout/tab-layout";
-import { PageRegistration } from "./registries/page-registry"
-
-export class DynamicPage extends React.Component<{ page: PageRegistration }> {
-  render() {
-    const { className, components: { Page }, subPages = [] } = this.props.page;
-    return (
-      <TabLayout className={cssNames("ExtensionPage", className)} tabs={subPages}>
-        <Page/>
-      </TabLayout>
-    )
-  }
-}

src/extensions/extension-loader.ts

@@ -56,30 +56,31 @@ export class ExtensionLoader {
 
   loadOnMain() {
     logger.info('[EXTENSIONS-LOADER]: load on main')
-    this.autoInitExtensions((extension: LensMainExtension) => [
+    this.autoInitExtensions((ext: LensMainExtension) => [
-      registries.menuRegistry.add(...extension.appMenus)
+      registries.menuRegistry.add(ext.appMenus, { key: ext })
     ]);
   }
 
   loadOnClusterManagerRenderer() {
     logger.info('[EXTENSIONS-LOADER]: load on main renderer (cluster manager)')
-    this.autoInitExtensions((extension: LensRendererExtension) => [
+    this.autoInitExtensions((ext: LensRendererExtension) => [
-      registries.globalPageRegistry.add(...extension.globalPages),
+      registries.globalPageRegistry.add(ext.globalPages, { key: ext }),
-      registries.appPreferenceRegistry.add(...extension.appPreferences),
+      registries.globalPageMenuRegistry.add(ext.globalPageMenus, { key: ext }),
-      registries.clusterFeatureRegistry.add(...extension.clusterFeatures),
+      registries.appPreferenceRegistry.add(ext.appPreferences, { key: ext }),
-      registries.statusBarRegistry.add(...extension.statusBarItems),
+      registries.clusterFeatureRegistry.add(ext.clusterFeatures, { key: ext }),
+      registries.statusBarRegistry.add(ext.statusBarItems, { key: ext }),
     ]);
   }
 
   loadOnClusterRenderer() {
     logger.info('[EXTENSIONS-LOADER]: load on cluster renderer (dashboard)')
-    this.autoInitExtensions((extension: LensRendererExtension) => [
+    this.autoInitExtensions((ext: LensRendererExtension) => [
-      registries.clusterPageRegistry.add(...extension.clusterPages),
+      registries.clusterPageRegistry.add(ext.clusterPages, { key: ext }),
-      registries.kubeObjectMenuRegistry.add(...extension.kubeObjectMenuItems),
+      registries.clusterPageMenuRegistry.add(ext.clusterPageMenus, { key: ext }),
-      registries.kubeObjectDetailRegistry.add(...extension.kubeObjectDetailItems),
+      registries.kubeObjectMenuRegistry.add(ext.kubeObjectMenuItems, { key: ext }),
-      registries.kubeObjectStatusRegistry.add(...extension.kubeObjectStatusTexts)
+      registries.kubeObjectDetailRegistry.add(ext.kubeObjectDetailItems, { key: ext }),
+      registries.kubeObjectStatusRegistry.add(ext.kubeObjectStatusTexts, { key: ext })
     ])
-
   }
 
   protected autoInitExtensions(register: (ext: LensExtension) => Function[]) {

src/extensions/interfaces/registrations.ts

@@ -4,4 +4,5 @@ export type { KubeObjectDetailRegistration, KubeObjectDetailComponents } from ".
 export type { KubeObjectMenuRegistration, KubeObjectMenuComponents } from "../registries/kube-object-menu-registry"
 export type { KubeObjectStatusRegistration } from "../registries/kube-object-status-registry"
 export type { PageRegistration, PageComponents } from "../registries/page-registry"
+export type { PageMenuRegistration, PageMenuComponents } from "../registries/page-menu-registry"
 export type { StatusBarRegistration } from "../registries/status-bar-registry"

src/extensions/lens-extension.ts

@@ -1,5 +1,6 @@
 import type { InstalledExtension } from "./extension-manager";
 import { action, observable, reaction } from "mobx";
+import { compile } from "path-to-regexp"
 import logger from "../main/logger";
 
 export type LensExtensionId = string; // path to manifest (package.json)
@@ -14,6 +15,7 @@ export interface LensExtensionManifest {
 }
 
 export class LensExtension {
+  readonly routePrefix = "/extension/:name"
   readonly manifest: LensExtensionManifest;
   readonly manifestPath: string;
   readonly isBundled: boolean;
@@ -42,6 +44,14 @@ export class LensExtension {
     return this.manifest.description
   }
 
+  getPageUrl(baseUrl = "") {
+    return compile(this.routePrefix)({ name: this.name }) + baseUrl;
+  }
+
+  getPageRoute(baseRoute = "") {
+    return this.routePrefix + baseRoute;
+  }
+
   @action
   async enable() {
     if (this.isEnabled) return;

src/extensions/lens-main-extension.ts

@@ -6,7 +6,9 @@ import { WindowManager } from "../main/window-manager";
 export class LensMainExtension extends LensExtension {
   @observable.shallow appMenus: MenuRegistration[] = []
 
-  async navigate(location: string, frameId?: number) {
+  async navigate(location?: string, frameId?: number) {
-    await WindowManager.getInstance<WindowManager>().navigate(location, frameId)
+    const windowManager = WindowManager.getInstance<WindowManager>();
+    const url = this.getPageUrl(location); // get full path to extension's page
+    await windowManager.navigate(url, frameId);
   }
 }

src/extensions/lens-renderer-extension.ts

@@ -1,23 +1,21 @@
-import type {
+import type { AppPreferenceRegistration, ClusterFeatureRegistration, KubeObjectDetailRegistration, KubeObjectMenuRegistration, KubeObjectStatusRegistration, PageMenuRegistration, PageRegistration, StatusBarRegistration, } from "./registries"
-  AppPreferenceRegistration, ClusterFeatureRegistration,
-  KubeObjectMenuRegistration, KubeObjectDetailRegistration,
-  PageRegistration, StatusBarRegistration, KubeObjectStatusRegistration
-} from "./registries"
 import { observable } from "mobx";
 import { LensExtension } from "./lens-extension"
-import { ipcRenderer } from "electron"
 
 export class LensRendererExtension extends LensExtension {
   @observable.shallow globalPages: PageRegistration[] = []
   @observable.shallow clusterPages: PageRegistration[] = []
-  @observable.shallow kubeObjectStatusTexts: KubeObjectStatusRegistration[] = []
+  @observable.shallow globalPageMenus: PageMenuRegistration[] = []
+  @observable.shallow clusterPageMenus: PageMenuRegistration[] = []
+  @observable.shallow kubeObjectStatusTexts: KubeObjectStatusRegistration[] = []
   @observable.shallow appPreferences: AppPreferenceRegistration[] = []
   @observable.shallow clusterFeatures: ClusterFeatureRegistration[] = []
   @observable.shallow statusBarItems: StatusBarRegistration[] = []
   @observable.shallow kubeObjectDetailItems: KubeObjectDetailRegistration[] = []
   @observable.shallow kubeObjectMenuItems: KubeObjectMenuRegistration[] = []
 
-  navigate(location: string) {
+  async navigate(location?: string) {
-    ipcRenderer.emit("renderer:navigate", location)
+    const { navigate } = await import("../renderer/navigation");
+    navigate(this.getPageUrl(location));
   }
 }

src/extensions/registries/app-preference-registry.ts

@@ -1,12 +1,12 @@
 import type React from "react"
-import { BaseRegistry } from "./base-registry";
+import { BaseRegistry, BaseRegistryItem } from "./base-registry";
 
 export interface AppPreferenceComponents {
   Hint: React.ComponentType<any>;
   Input: React.ComponentType<any>;
 }
 
-export interface AppPreferenceRegistration {
+export interface AppPreferenceRegistration extends BaseRegistryItem {
   title: string;
   components: AppPreferenceComponents;
 }

src/extensions/registries/base-registry.ts

@@ -1,23 +1,65 @@
 // Base class for extensions-api registries
 import { action, observable } from "mobx";
+import { LensExtension } from "../lens-extension";
+import { getRandId } from "../../common/utils";
 
-export class BaseRegistry<T = any> {
+export type BaseRegistryKey = LensExtension | null;
-  protected items = observable<T>([], { deep: false });
+export type BaseRegistryItemId = string | symbol;
 
-  getItems(): T[] {
+export interface BaseRegistryItem {
-    return this.items.toJS();
+  id?: BaseRegistryItemId; // uniq id, generated automatically when not provided
+}
+
+export interface BaseRegistryAddMeta {
+  key?: BaseRegistryKey;
+  merge?: boolean
+}
+
+export class BaseRegistry<T extends BaseRegistryItem = any> {
+  private items = observable.map<BaseRegistryKey, T[]>([], { deep: false });
+
+  getItems(): (T & { extension?: LensExtension | null })[] {
+    return Array.from(this.items).map(([ext, items]) => {
+      return items.map(item => ({
+        ...item,
+        extension: ext,
+      }))
+    }).flat()
+  }
+
+  getById(itemId: BaseRegistryItemId, key?: BaseRegistryKey): T {
+    const byId = (item: BaseRegistryItem) => item.id === itemId;
+    if (key) {
+      return this.items.get(key)?.find(byId)
+    }
+    return this.getItems().find(byId);
   }
 
   @action
-  add(...items: T[]) {
+  add(items: T | T[], { key = null, merge = true }: BaseRegistryAddMeta = {}) {
-    this.items.push(...items);
+    const normalizedItems = (Array.isArray(items) ? items : [items]).map((item: T) => {
-    return () => this.remove(...items);
+      item.id = item.id || getRandId();
+      return item;
+    });
+    if (merge && this.items.has(key)) {
+      const newItems = new Set(this.items.get(key));
+      normalizedItems.forEach(item => newItems.add(item))
+      this.items.set(key, [...newItems]);
+    } else {
+      this.items.set(key, normalizedItems);
+    }
+    return () => this.remove(normalizedItems, key)
   }
 
   @action
-  remove(...items: T[]) {
+  remove(items: T[], key: BaseRegistryKey = null) {
-    items.forEach(item => {
+    const storedItems = this.items.get(key);
-      this.items.remove(item); // works because of {deep: false};
+    if (!storedItems) return;
-    })
+    const newItems = storedItems.filter(item => !items.includes(item)); // works because of {deep: false};
+    if (newItems.length > 0) {
+      this.items.set(key, newItems)
+    } else {
+      this.items.delete(key);
+    }
   }
 }

src/extensions/registries/cluster-feature-registry.ts

@@ -1,16 +1,18 @@
-import { BaseRegistry } from "./base-registry";
+import type React from "react"
+import { BaseRegistry, BaseRegistryItem } from "./base-registry";
 import { ClusterFeature } from "../cluster-feature";
 
 export interface ClusterFeatureComponents {
   Description: React.ComponentType<any>;
 }
 
-export interface ClusterFeatureRegistration {
+export interface ClusterFeatureRegistration extends BaseRegistryItem {
   title: string;
   components: ClusterFeatureComponents
   feature: ClusterFeature
 }
 
-export class ClusterFeatureRegistry extends BaseRegistry<ClusterFeatureRegistration> {}
+export class ClusterFeatureRegistry extends BaseRegistry<ClusterFeatureRegistration> {
+}
 
 export const clusterFeatureRegistry = new ClusterFeatureRegistry()

src/extensions/registries/index.ts

@@ -1,6 +1,7 @@
 // All registries managed by extensions api
 
 export * from "./page-registry"
+export * from "./page-menu-registry"
 export * from "./menu-registry"
 export * from "./app-preference-registry"
 export * from "./status-bar-registry"

src/extensions/registries/kube-object-detail-registry.ts

@@ -1,11 +1,11 @@
 import React from "react"
-import { BaseRegistry } from "./base-registry";
+import { BaseRegistry, BaseRegistryItem } from "./base-registry";
 
 export interface KubeObjectDetailComponents {
   Details: React.ComponentType<any>;
 }
 
-export interface KubeObjectDetailRegistration {
+export interface KubeObjectDetailRegistration extends BaseRegistryItem {
   kind: string;
   apiVersions: string[];
   components: KubeObjectDetailComponents;
@@ -14,7 +14,7 @@ export interface KubeObjectDetailRegistration {
 
 export class KubeObjectDetailRegistry extends BaseRegistry<KubeObjectDetailRegistration> {
   getItemsForKind(kind: string, apiVersion: string) {
-    const items = this.items.filter((item) => {
+    const items = this.getItems().filter((item) => {
       return item.kind === kind && item.apiVersions.includes(apiVersion)
     }).map((item) => {
       if (item.priority === null) {

src/extensions/registries/kube-object-menu-registry.ts

@@ -1,11 +1,11 @@
 import React from "react"
-import { BaseRegistry } from "./base-registry";
+import { BaseRegistry, BaseRegistryItem } from "./base-registry";
 
 export interface KubeObjectMenuComponents {
   MenuItem: React.ComponentType<any>;
 }
 
-export interface KubeObjectMenuRegistration {
+export interface KubeObjectMenuRegistration extends BaseRegistryItem {
   kind: string;
   apiVersions: string[];
   components: KubeObjectMenuComponents;
@@ -13,7 +13,7 @@ export interface KubeObjectMenuRegistration {
 
 export class KubeObjectMenuRegistry extends BaseRegistry<KubeObjectMenuRegistration> {
   getItemsForKind(kind: string, apiVersion: string) {
-    return this.items.filter((item) => {
+    return this.getItems().filter((item) => {
       return item.kind === kind && item.apiVersions.includes(apiVersion)
     })
   }

src/extensions/registries/kube-object-status-registry.ts

@@ -1,7 +1,7 @@
 import { KubeObject, KubeObjectStatus } from "../renderer-api/k8s-api";
-import { BaseRegistry } from "./base-registry";
+import { BaseRegistry, BaseRegistryItem } from "./base-registry";
 
-export interface KubeObjectStatusRegistration {
+export interface KubeObjectStatusRegistration extends BaseRegistryItem {
   kind: string;
   apiVersions: string[];
   resolve: (object: KubeObject) => KubeObjectStatus;
@@ -9,7 +9,7 @@ export interface KubeObjectStatusRegistration {
 
 export class KubeObjectStatusRegistry extends BaseRegistry<KubeObjectStatusRegistration> {
   getItemsForKind(kind: string, apiVersion: string) {
-    return this.items.filter((item) => {
+    return this.getItems().filter((item) => {
       return item.kind === kind && item.apiVersions.includes(apiVersion)
     })
   }

src/extensions/registries/page-menu-registry.ts

@@ -0,0 +1,34 @@
+// Extensions-api -> Register page menu items
+
+import type React from "react";
+import type { IconProps } from "../../renderer/components/icon";
+import { BaseRegistry, BaseRegistryItem, BaseRegistryItemId } from "./base-registry";
+
+export interface PageMenuRegistration extends BaseRegistryItem {
+  id: BaseRegistryItemId; // required id from page-registry item to match with
+  url?: string; // when not provided initial extension's path used, e.g. "/extension/lens-extension-name"
+  title: React.ReactNode;
+  components: PageMenuComponents;
+  subMenus?: PageSubMenuRegistration[];
+}
+
+export interface PageSubMenuRegistration {
+  url: string;
+  title: React.ReactNode;
+}
+
+export interface PageMenuComponents {
+  Icon: React.ComponentType<IconProps>;
+}
+
+export class PageMenuRegistry<T extends PageMenuRegistration> extends BaseRegistry<T> {
+  getItems() {
+    return super.getItems().map(item => {
+      item.url = item.extension.getPageUrl(item.url)
+      return item
+    });
+  }
+}
+
+export const globalPageMenuRegistry = new PageMenuRegistry<Omit<PageMenuRegistration, "subMenus">>();
+export const clusterPageMenuRegistry = new PageMenuRegistry();

src/extensions/registries/page-registry.ts

@@ -1,31 +1,33 @@
 // Extensions-api -> Custom page registration
 
-import type React from "react";
+import React from "react";
-import type { RouteProps } from "react-router";
+import { BaseRegistry, BaseRegistryItem } from "./base-registry";
-import type { IconProps } from "../../renderer/components/icon";
-import type { IClassName } from "../../renderer/utils";
-import type { TabRoute } from "../../renderer/components/layout/tab-layout";
-import { BaseRegistry } from "./base-registry";
 
-export interface PageRegistration extends RouteProps {
+export interface PageRegistration extends BaseRegistryItem {
-  className?: IClassName;
+  routePath?: string; // additional (suffix) route path to base extension's route: "/extension/:name"
-  url?: string; // initial url to be used for building menus and tabs, otherwise "path" applied by default
+  exact?: boolean; // route matching flag, see: https://reactrouter.com/web/api/NavLink/exact-bool
-  title?: React.ReactNode; // used in sidebar's & tabs-layout if provided
+  components: PageComponents;
-  hideInMenu?: boolean; // hide element within app's navigation menu
+  subPages?: SubPageRegistration[];
-  subPages?: (PageRegistration & TabRoute)[];
+}
+
+export interface SubPageRegistration {
+  routePath: string; // required for sub-pages
+  exact?: boolean;
   components: PageComponents;
 }
 
 export interface PageComponents {
   Page: React.ComponentType<any>;
-  MenuIcon?: React.ComponentType<IconProps>;
 }
 
-export class GlobalPageRegistry extends BaseRegistry<PageRegistration> {
+export class PageRegistry<T extends PageRegistration> extends BaseRegistry<T> {
+  getItems() {
+    return super.getItems().map(item => {
+      item.routePath = item.extension.getPageRoute(item.routePath)
+      return item
+    });
+  }
 }
 
-export class ClusterPageRegistry extends BaseRegistry<PageRegistration> {
+export const globalPageRegistry = new PageRegistry<Omit<PageRegistration, "subPages">>();
-}
+export const clusterPageRegistry = new PageRegistry();
-
-export const globalPageRegistry = new GlobalPageRegistry();
-export const clusterPageRegistry = new ClusterPageRegistry();

src/extensions/registries/status-bar-registry.ts

@@ -1,9 +1,9 @@
 // Extensions API -> Status bar customizations
 
 import React from "react";
-import { BaseRegistry } from "./base-registry";
+import { BaseRegistry, BaseRegistryItem } from "./base-registry";
 
-export interface StatusBarRegistration {
+export interface StatusBarRegistration extends BaseRegistryItem {
   item?: React.ReactNode;
 }
 

src/extensions/renderer-api/navigation.ts

@@ -1,4 +1,3 @@
 export { navigate } from "../../renderer/navigation";
 export { hideDetails, showDetails, getDetailsUrl } from "../../renderer/navigation"
-export { RouteProps } from "react-router"
 export { IURLParams } from "../../common/utils/buildUrl";

src/renderer/components/+apps/apps.tsx

@@ -1,41 +1,34 @@
 import React from "react";
 import { observer } from "mobx-react";
-import { Redirect, Route, Switch } from "react-router";
 import { Trans } from "@lingui/macro";
-import { TabLayout, TabRoute } from "../layout/tab-layout";
+import { TabLayout, TabLayoutRoute } from "../layout/tab-layout";
 import { HelmCharts, helmChartsRoute, helmChartsURL } from "../+apps-helm-charts";
 import { HelmReleases, releaseRoute, releaseURL } from "../+apps-releases";
 import { namespaceStore } from "../+namespaces/namespace.store";
 
 @observer
 export class Apps extends React.Component {
-  static get tabRoutes(): TabRoute[] {
+  static get tabRoutes(): TabLayoutRoute[] {
     const query = namespaceStore.getContextParams();
     return [
       {
         title: <Trans>Charts</Trans>,
         component: HelmCharts,
         url: helmChartsURL(),
-        path: helmChartsRoute.path,
+        routePath: helmChartsRoute.path.toString(),
       },
       {
         title: <Trans>Releases</Trans>,
         component: HelmReleases,
         url: releaseURL({ query }),
-        path: releaseRoute.path,
+        routePath: releaseRoute.path.toString(),
       },
     ]
   }
 
   render() {
-    const tabRoutes = Apps.tabRoutes;
     return (
-      <TabLayout className="Apps" tabs={tabRoutes}>
+      <TabLayout className="Apps" tabs={Apps.tabRoutes}/>
-        <Switch>
-          {tabRoutes.map((route, index) => <Route key={index} {...route}/>)}
-          <Redirect to={tabRoutes[0].url}/>
-        </Switch>
-      </TabLayout>
     )
   }
 }

src/renderer/components/+config/config.route.ts

@@ -5,7 +5,7 @@ import { configMapsURL } from "../+config-maps/config-maps.route";
 
 export const configRoute: RouteProps = {
   get path() {
-    return Config.tabRoutes.map(({ path }) => path).flat()
+    return Config.tabRoutes.map(({ routePath }) => routePath).flat()
   }
 }
 

src/renderer/components/+config/config.tsx

@@ -1,33 +1,26 @@
 import React from "react";
 import { observer } from "mobx-react";
-import { Redirect, Route, Switch } from "react-router";
 import { Trans } from "@lingui/macro";
-import { TabLayout, TabRoute } from "../layout/tab-layout";
+import { TabLayout, TabLayoutRoute } from "../layout/tab-layout";
 import { ConfigMaps, configMapsRoute, configMapsURL } from "../+config-maps";
 import { Secrets, secretsRoute, secretsURL } from "../+config-secrets";
 import { namespaceStore } from "../+namespaces/namespace.store";
 import { resourceQuotaRoute, ResourceQuotas, resourceQuotaURL } from "../+config-resource-quotas";
-import { PodDisruptionBudgets, pdbRoute, pdbURL } from "../+config-pod-disruption-budgets";
+import { pdbRoute, pdbURL, PodDisruptionBudgets } from "../+config-pod-disruption-budgets";
-import { configURL } from "./config.route";
 import { HorizontalPodAutoscalers, hpaRoute, hpaURL } from "../+config-autoscalers";
 import { isAllowedResource } from "../../../common/rbac"
-import { buildURL } from "../../../common/utils/buildUrl";
-
-export const certificatesURL = buildURL("/certificates");
-export const issuersURL = buildURL("/issuers");
-export const clusterIssuersURL = buildURL("/clusterissuers");
 
 @observer
 export class Config extends React.Component {
-  static get tabRoutes(): TabRoute[] {
+  static get tabRoutes(): TabLayoutRoute[] {
     const query = namespaceStore.getContextParams()
-    const routes: TabRoute[] = []
+    const routes: TabLayoutRoute[] = []
     if (isAllowedResource("configmaps")) {
       routes.push({
         title: <Trans>ConfigMaps</Trans>,
         component: ConfigMaps,
         url: configMapsURL({ query }),
-        path: configMapsRoute.path,
+        routePath: configMapsRoute.path.toString(),
       })
     }
     if (isAllowedResource("secrets")) {
@@ -35,7 +28,7 @@ export class Config extends React.Component {
         title: <Trans>Secrets</Trans>,
         component: Secrets,
         url: secretsURL({ query }),
-        path: secretsRoute.path,
+        routePath: secretsRoute.path.toString(),
       })
     }
     if (isAllowedResource("resourcequotas")) {
@@ -43,7 +36,7 @@ export class Config extends React.Component {
         title: <Trans>Resource Quotas</Trans>,
         component: ResourceQuotas,
         url: resourceQuotaURL({ query }),
-        path: resourceQuotaRoute.path,
+        routePath: resourceQuotaRoute.path.toString(),
       })
     }
     if (isAllowedResource("horizontalpodautoscalers")) {
@@ -51,7 +44,7 @@ export class Config extends React.Component {
         title: <Trans>HPA</Trans>,
         component: HorizontalPodAutoscalers,
         url: hpaURL({ query }),
-        path: hpaRoute.path,
+        routePath: hpaRoute.path.toString(),
       })
     }
     if (isAllowedResource("poddisruptionbudgets")) {
@@ -59,21 +52,15 @@ export class Config extends React.Component {
         title: <Trans>Pod Disruption Budgets</Trans>,
         component: PodDisruptionBudgets,
         url: pdbURL({ query }),
-        path: pdbRoute.path,
+        routePath: pdbRoute.path.toString(),
       })
     }
     return routes;
   }
 
   render() {
-    const tabRoutes = Config.tabRoutes;
     return (
-      <TabLayout className="Config" tabs={tabRoutes}>
+      <TabLayout className="Config" tabs={Config.tabRoutes}/>
-        <Switch>
-          {tabRoutes.map((route, index) => <Route key={index} {...route}/>)}
-          <Redirect to={configURL({ query: namespaceStore.getContextParams() })}/>
-        </Switch>
-      </TabLayout>
     )
   }
 }

src/renderer/components/+custom-resources/custom-resources.tsx

@@ -2,23 +2,20 @@ import React from "react";
 import { observer } from "mobx-react";
 import { Redirect, Route, Switch } from "react-router";
 import { Trans } from "@lingui/macro";
-import { TabLayout, TabRoute } from "../layout/tab-layout";
+import { TabLayout, TabLayoutRoute } from "../layout/tab-layout";
 import { crdResourcesRoute, crdRoute, crdURL, crdDefinitionsRoute } from "./crd.route";
 import { CrdList } from "./crd-list";
 import { CrdResources } from "./crd-resources";
 
-// todo: next steps - customization via plugins
-// todo: list views (rows content), full details view and if possible chart/prometheus hooks
-
 @observer
 export class CustomResources extends React.Component {
-  static get tabRoutes(): TabRoute[] {
+  static get tabRoutes(): TabLayoutRoute[] {
     return [
       {
         title: <Trans>Definitions</Trans>,
         component: CustomResources,
         url: crdURL(),
-        path: crdRoute.path,
+        routePath: crdRoute.path.toString(),
       }
     ]
   }

src/renderer/components/+network/network.route.ts

@@ -5,7 +5,7 @@ import { IURLParams } from "../../../common/utils/buildUrl";
 
 export const networkRoute: RouteProps = {
   get path() {
-    return Network.tabRoutes.map(({ path }) => path).flat()
+    return Network.tabRoutes.map(({ routePath }) => routePath).flat()
   }
 }
 

src/renderer/components/+network/network.tsx

@@ -2,32 +2,26 @@ import "./network.scss"
 
 import React from "react";
 import { observer } from "mobx-react";
-import { Redirect, Route, Switch } from "react-router";
-import { RouteComponentProps } from "react-router-dom";
 import { Trans } from "@lingui/macro";
-import { TabLayout, TabRoute } from "../layout/tab-layout";
+import { TabLayout, TabLayoutRoute } from "../layout/tab-layout";
 import { Services, servicesRoute, servicesURL } from "../+network-services";
-import { Endpoints, endpointRoute, endpointURL } from "../+network-endpoints";
+import { endpointRoute, Endpoints, endpointURL } from "../+network-endpoints";
 import { Ingresses, ingressRoute, ingressURL } from "../+network-ingresses";
 import { NetworkPolicies, networkPoliciesRoute, networkPoliciesURL } from "../+network-policies";
 import { namespaceStore } from "../+namespaces/namespace.store";
-import { networkURL } from "./network.route";
 import { isAllowedResource } from "../../../common/rbac";
 
-interface Props extends RouteComponentProps<{}> {
-}
-
 @observer
-export class Network extends React.Component<Props> {
+export class Network extends React.Component {
-  static get tabRoutes(): TabRoute[] {
+  static get tabRoutes(): TabLayoutRoute[] {
     const query = namespaceStore.getContextParams()
-    const routes: TabRoute[] = [];
+    const routes: TabLayoutRoute[] = [];
     if (isAllowedResource("services")) {
       routes.push({
         title: <Trans>Services</Trans>,
         component: Services,
         url: servicesURL({ query }),
-        path: servicesRoute.path,
+        routePath: servicesRoute.path.toString(),
       })
     }
     if (isAllowedResource("endpoints")) {
@@ -35,7 +29,7 @@ export class Network extends React.Component<Props> {
         title: <Trans>Endpoints</Trans>,
         component: Endpoints,
         url: endpointURL({ query }),
-        path: endpointRoute.path,
+        routePath: endpointRoute.path.toString(),
       })
     }
     if (isAllowedResource("ingresses")) {
@@ -43,7 +37,7 @@ export class Network extends React.Component<Props> {
         title: <Trans>Ingresses</Trans>,
         component: Ingresses,
         url: ingressURL({ query }),
-        path: ingressRoute.path,
+        routePath: ingressRoute.path.toString(),
       })
     }
     if (isAllowedResource("networkpolicies")) {
@@ -51,21 +45,15 @@ export class Network extends React.Component<Props> {
         title: <Trans>Network Policies</Trans>,
         component: NetworkPolicies,
         url: networkPoliciesURL({ query }),
-        path: networkPoliciesRoute.path,
+        routePath: networkPoliciesRoute.path.toString(),
       })
     }
     return routes
   }
 
   render() {
-    const tabRoutes = Network.tabRoutes;
     return (
-      <TabLayout className="Network" tabs={tabRoutes}>
+      <TabLayout className="Network" tabs={Network.tabRoutes}/>
-        <Switch>
-          {tabRoutes.map((route, index) => <Route key={index} {...route}/>)}
-          <Redirect to={networkURL({ query: namespaceStore.getContextParams() })}/>
-        </Switch>
-      </TabLayout>
     )
   }
 }

src/renderer/components/+storage/storage.route.ts

@@ -5,7 +5,7 @@ import { IURLParams } from "../../../common/utils/buildUrl";
 
 export const storageRoute: RouteProps = {
   get path() {
-    return Storage.tabRoutes.map(({ path }) => path).flat()
+    return Storage.tabRoutes.map(({ routePath }) => routePath).flat()
   }
 }
 

src/renderer/components/+storage/storage.tsx

@@ -2,31 +2,25 @@ import "./storage.scss"
 
 import React from "react";
 import { observer } from "mobx-react";
-import { Redirect, Route, Switch } from "react-router";
-import { RouteComponentProps } from "react-router-dom";
 import { Trans } from "@lingui/macro";
-import { TabLayout, TabRoute } from "../layout/tab-layout";
+import { TabLayout, TabLayoutRoute } from "../layout/tab-layout";
 import { PersistentVolumes, volumesRoute, volumesURL } from "../+storage-volumes";
 import { StorageClasses, storageClassesRoute, storageClassesURL } from "../+storage-classes";
 import { PersistentVolumeClaims, volumeClaimsRoute, volumeClaimsURL } from "../+storage-volume-claims";
 import { namespaceStore } from "../+namespaces/namespace.store";
-import { storageURL } from "./storage.route";
 import { isAllowedResource } from "../../../common/rbac";
 
-interface Props extends RouteComponentProps<{}> {
-}
-
 @observer
-export class Storage extends React.Component<Props> {
+export class Storage extends React.Component {
   static get tabRoutes() {
-    const tabRoutes: TabRoute[] = [];
+    const tabRoutes: TabLayoutRoute[] = [];
     const query = namespaceStore.getContextParams()
 
     tabRoutes.push({
       title: <Trans>Persistent Volume Claims</Trans>,
       component: PersistentVolumeClaims,
       url: volumeClaimsURL({ query }),
-      path: volumeClaimsRoute.path,
+      routePath: volumeClaimsRoute.path.toString(),
     })
 
     if (isAllowedResource('persistentvolumes')) {
@@ -34,7 +28,7 @@ export class Storage extends React.Component<Props> {
         title: <Trans>Persistent Volumes</Trans>,
         component: PersistentVolumes,
         url: volumesURL(),
-        path: volumesRoute.path,
+        routePath: volumesRoute.path.toString(),
       });
     }
 
@@ -43,21 +37,15 @@ export class Storage extends React.Component<Props> {
         title: <Trans>Storage Classes</Trans>,
         component: StorageClasses,
         url: storageClassesURL(),
-        path: storageClassesRoute.path,
+        routePath: storageClassesRoute.path.toString(),
       })
     }
     return tabRoutes;
   }
 
   render() {
-    const tabRoutes = Storage.tabRoutes;
     return (
-      <TabLayout className="Storage" tabs={tabRoutes}>
+      <TabLayout className="Storage" tabs={Storage.tabRoutes}/>
-        <Switch>
-          {tabRoutes.map((route, index) => <Route key={index} {...route}/>)}
-          <Redirect to={storageURL({ query: namespaceStore.getContextParams() })}/>
-        </Switch>
-      </TabLayout>
     )
   }
 }

src/renderer/components/+user-management/user-management.route.ts

@@ -4,7 +4,7 @@ import { UserManagement } from "./user-management"
 
 export const usersManagementRoute: RouteProps = {
   get path() {
-    return UserManagement.tabRoutes.map(({ path }) => path).flat()
+    return UserManagement.tabRoutes.map(({ routePath }) => routePath).flat()
   }
 }
 

src/renderer/components/+user-management/user-management.tsx

@@ -1,44 +1,39 @@
 import "./user-management.scss"
 import React from "react";
 import { observer } from "mobx-react";
-import { Redirect, Route, Switch } from "react-router";
-import { RouteComponentProps } from "react-router-dom";
 import { Trans } from "@lingui/macro";
-import { TabLayout, TabRoute } from "../layout/tab-layout";
+import { TabLayout, TabLayoutRoute } from "../layout/tab-layout";
 import { Roles } from "../+user-management-roles";
 import { RoleBindings } from "../+user-management-roles-bindings";
 import { ServiceAccounts } from "../+user-management-service-accounts";
-import { roleBindingsRoute, roleBindingsURL, rolesRoute, rolesURL, serviceAccountsRoute, serviceAccountsURL, usersManagementURL } from "./user-management.route";
+import { roleBindingsRoute, roleBindingsURL, rolesRoute, rolesURL, serviceAccountsRoute, serviceAccountsURL } from "./user-management.route";
 import { namespaceStore } from "../+namespaces/namespace.store";
 import { PodSecurityPolicies, podSecurityPoliciesRoute, podSecurityPoliciesURL } from "../+pod-security-policies";
 import { isAllowedResource } from "../../../common/rbac";
 
-interface Props extends RouteComponentProps<{}> {
-}
-
 @observer
-export class UserManagement extends React.Component<Props> {
+export class UserManagement extends React.Component {
   static get tabRoutes() {
-    const tabRoutes: TabRoute[] = [];
+    const tabRoutes: TabLayoutRoute[] = [];
     const query = namespaceStore.getContextParams()
     tabRoutes.push(
       {
         title: <Trans>Service Accounts</Trans>,
         component: ServiceAccounts,
         url: serviceAccountsURL({ query }),
-        path: serviceAccountsRoute.path,
+        routePath: serviceAccountsRoute.path.toString(),
       },
       {
         title: <Trans>Role Bindings</Trans>,
         component: RoleBindings,
         url: roleBindingsURL({ query }),
-        path: roleBindingsRoute.path,
+        routePath: roleBindingsRoute.path.toString(),
       },
       {
         title: <Trans>Roles</Trans>,
         component: Roles,
         url: rolesURL({ query }),
-        path: rolesRoute.path,
+        routePath: rolesRoute.path.toString(),
       },
     )
     if (isAllowedResource("podsecuritypolicies")) {
@@ -46,21 +41,15 @@ export class UserManagement extends React.Component<Props> {
         title: <Trans>Pod Security Policies</Trans>,
         component: PodSecurityPolicies,
         url: podSecurityPoliciesURL(),
-        path: podSecurityPoliciesRoute.path,
+        routePath: podSecurityPoliciesRoute.path.toString(),
       })
     }
     return tabRoutes;
   }
 
   render() {
-    const tabRoutes = UserManagement.tabRoutes;
     return (
-      <TabLayout className="UserManagement" tabs={tabRoutes}>
+      <TabLayout className="UserManagement" tabs={UserManagement.tabRoutes}/>
-        <Switch>
-          {tabRoutes.map((route, index) => <Route key={index} {...route}/>)}
-          <Redirect to={usersManagementURL({ query: namespaceStore.getContextParams() })}/>
-        </Switch>
-      </TabLayout>
     )
   }
 }

src/renderer/components/+workloads/workloads.route.ts

@@ -5,7 +5,7 @@ import { Workloads } from "./workloads";
 
 export const workloadsRoute: RouteProps = {
   get path() {
-    return Workloads.tabRoutes.map(({ path }) => path).flat()
+    return Workloads.tabRoutes.map(({ routePath }) => routePath).flat()
   }
 }
 

src/renderer/components/+workloads/workloads.tsx

@@ -2,12 +2,10 @@ import "./workloads.scss"
 
 import React from "react";
 import { observer } from "mobx-react";
-import { Redirect, Route, Switch } from "react-router";
-import { RouteComponentProps } from "react-router-dom";
 import { Trans } from "@lingui/macro";
-import { TabLayout, TabRoute } from "../layout/tab-layout";
+import { TabLayout, TabLayoutRoute } from "../layout/tab-layout";
 import { WorkloadsOverview } from "../+workloads-overview/overview";
-import { cronJobsRoute, cronJobsURL, daemonSetsRoute, daemonSetsURL, deploymentsRoute, deploymentsURL, jobsRoute, jobsURL, overviewRoute, overviewURL, podsRoute, podsURL, statefulSetsRoute, statefulSetsURL, workloadsURL } from "./workloads.route";
+import { cronJobsRoute, cronJobsURL, daemonSetsRoute, daemonSetsURL, deploymentsRoute, deploymentsURL, jobsRoute, jobsURL, overviewRoute, overviewURL, podsRoute, podsURL, statefulSetsRoute, statefulSetsURL } from "./workloads.route";
 import { namespaceStore } from "../+namespaces/namespace.store";
 import { Pods } from "../+workloads-pods";
 import { Deployments } from "../+workloads-deployments";
@@ -17,19 +15,16 @@ import { Jobs } from "../+workloads-jobs";
 import { CronJobs } from "../+workloads-cronjobs";
 import { isAllowedResource } from "../../../common/rbac"
 
-interface Props extends RouteComponentProps {
-}
-
 @observer
-export class Workloads extends React.Component<Props> {
+export class Workloads extends React.Component {
-  static get tabRoutes(): TabRoute[] {
+  static get tabRoutes(): TabLayoutRoute[] {
     const query = namespaceStore.getContextParams();
-    const routes: TabRoute[] = [
+    const routes: TabLayoutRoute[] = [
       {
         title: <Trans>Overview</Trans>,
         component: WorkloadsOverview,
         url: overviewURL({ query }),
-        path: overviewRoute.path
+        routePath: overviewRoute.path.toString()
       }
     ]
     if (isAllowedResource("pods")) {
@@ -37,7 +32,7 @@ export class Workloads extends React.Component<Props> {
         title: <Trans>Pods</Trans>,
         component: Pods,
         url: podsURL({ query }),
-        path: podsRoute.path
+        routePath: podsRoute.path.toString()
       })
     }
     if (isAllowedResource("deployments")) {
@@ -45,7 +40,7 @@ export class Workloads extends React.Component<Props> {
         title: <Trans>Deployments</Trans>,
         component: Deployments,
         url: deploymentsURL({ query }),
-        path: deploymentsRoute.path,
+        routePath: deploymentsRoute.path.toString(),
       })
     }
     if (isAllowedResource("daemonsets")) {
@@ -53,7 +48,7 @@ export class Workloads extends React.Component<Props> {
         title: <Trans>DaemonSets</Trans>,
         component: DaemonSets,
         url: daemonSetsURL({ query }),
-        path: daemonSetsRoute.path,
+        routePath: daemonSetsRoute.path.toString(),
       })
     }
     if (isAllowedResource("statefulsets")) {
@@ -61,7 +56,7 @@ export class Workloads extends React.Component<Props> {
         title: <Trans>StatefulSets</Trans>,
         component: StatefulSets,
         url: statefulSetsURL({ query }),
-        path: statefulSetsRoute.path,
+        routePath: statefulSetsRoute.path.toString(),
       })
     }
     if (isAllowedResource("jobs")) {
@@ -69,7 +64,7 @@ export class Workloads extends React.Component<Props> {
         title: <Trans>Jobs</Trans>,
         component: Jobs,
         url: jobsURL({ query }),
-        path: jobsRoute.path,
+        routePath: jobsRoute.path.toString(),
       })
     }
     if (isAllowedResource("cronjobs")) {
@@ -77,21 +72,15 @@ export class Workloads extends React.Component<Props> {
         title: <Trans>CronJobs</Trans>,
         component: CronJobs,
         url: cronJobsURL({ query }),
-        path: cronJobsRoute.path,
+        routePath: cronJobsRoute.path.toString(),
       })
     }
     return routes;
   }
 
   render() {
-    const tabRoutes = Workloads.tabRoutes;
     return (
-      <TabLayout className="Workloads" tabs={tabRoutes}>
+      <TabLayout className="Workloads" tabs={Workloads.tabRoutes}/>
-        <Switch>
-          {tabRoutes.map((route, index) => <Route key={index} {...route}/>)}
-          <Redirect to={workloadsURL({ query: namespaceStore.getContextParams() })}/>
-        </Switch>
-      </TabLayout>
     )
   }
 }

src/renderer/components/app.tsx

@@ -29,6 +29,7 @@ import { CustomResources } from "./+custom-resources/custom-resources";
 import { crdRoute } from "./+custom-resources";
 import { isAllowedResource } from "../../common/rbac";
 import { MainLayout } from "./layout/main-layout";
+import { TabLayout, TabLayoutRoute } from "./layout/tab-layout";
 import { ErrorBoundary } from "./error-boundary";
 import { Terminal } from "./dock/terminal";
 import { getHostedCluster, getHostedClusterId } from "../../common/cluster-store";
@@ -36,7 +37,7 @@ import logger from "../../main/logger";
 import { clusterIpc } from "../../common/cluster-ipc";
 import { webFrame } from "electron";
 import { clusterPageRegistry } from "../../extensions/registries/page-registry";
-import { DynamicPage } from "../../extensions/dynamic-page";
+import { clusterPageMenuRegistry } from "../../extensions/registries";
 import { extensionLoader } from "../../extensions/extension-loader";
 import { appEventBus } from "../../common/event-bus";
 import whatInput from 'what-input';
@@ -52,9 +53,13 @@ export class App extends React.Component {
     await clusterIpc.setFrameId.invokeFromRenderer(clusterId, frameId);
     await getHostedCluster().whenReady; // cluster.activate() is done at this point
     extensionLoader.loadOnClusterRenderer();
-    appEventBus.emit({name: "cluster", action: "open", params: {
+    appEventBus.emit({
+      name: "cluster",
+      action: "open",
+      params: {
         clusterId: clusterId
-    }})
+      }
+    })
     window.addEventListener("online", () => {
       window.location.reload()
     })
@@ -68,6 +73,34 @@ export class App extends React.Component {
     return workloadsURL();
   }
 
+  renderExtensionRoutes() {
+    return clusterPageRegistry.getItems().map(({ id: pageId, components: { Page }, exact, routePath, subPages }) => {
+      const Component = () => {
+        if (subPages) {
+          const tabs: TabLayoutRoute[] = subPages.map(({ exact, routePath, components: { Page } }) => {
+            const menuItem = clusterPageMenuRegistry.getById(pageId);
+            if (!menuItem) return;
+            return {
+              routePath, exact,
+              component: Page,
+              url: menuItem.url,
+              title: menuItem.title,
+            }
+          }).filter(Boolean);
+          if (tabs.length > 0) {
+            return (
+              <Page>
+                <TabLayout tabs={tabs}/>
+              </Page>
+            )
+          }
+        }
+        return <Page/>
+      };
+      return <Route key={routePath} path={routePath} exact={exact} component={Component}/>
+    })
+  }
+
   render() {
     return (
       <I18nProvider i18n={_i18n}>
@@ -86,12 +119,11 @@ export class App extends React.Component {
                 <Route component={CustomResources} {...crdRoute}/>
                 <Route component={UserManagement} {...usersManagementRoute}/>
                 <Route component={Apps} {...appsRoute}/>
-                {clusterPageRegistry.getItems().map(page => {
+                {this.renderExtensionRoutes()}
-                  return <Route {...page} key={String(page.path)} render={() => <DynamicPage page={page}/>}/>
-                })}
                 <Redirect exact from="/" to={this.startURL}/>
                 <Route component={NotFound}/>
-              </Switch></MainLayout>
+              </Switch>
+            </MainLayout>
             <Notifications/>
             <ConfirmDialog/>
             <KubeObjectDetails/>

src/renderer/components/cluster-manager/cluster-manager.tsx

@@ -69,8 +69,8 @@ export class ClusterManager extends React.Component {
             <Route component={AddCluster} {...addClusterRoute} />
             <Route component={ClusterView} {...clusterViewRoute} />
             <Route component={ClusterSettings} {...clusterSettingsRoute} />
-            {globalPageRegistry.getItems().map(({ path, url = String(path), components: { Page } }) => {
+            {globalPageRegistry.getItems().map(({ routePath, exact, components: { Page } }) => {
-              return <Route key={url} path={path} component={Page}/>
+              return <Route key={routePath} path={routePath} component={Page} exact={exact}/>
             })}
             <Redirect exact to={this.startUrl}/>
           </Switch>

src/renderer/components/cluster-manager/clusters-menu.tsx

@@ -5,6 +5,7 @@ import { remote } from "electron"
 import type { Cluster } from "../../../main/cluster";
 import { DragDropContext, Draggable, DraggableProvided, Droppable, DroppableProvided, DropResult } from "react-beautiful-dnd";
 import { observer } from "mobx-react";
+import { matchPath } from "react-router";
 import { _i18n } from "../../i18n";
 import { t, Trans } from "@lingui/macro";
 import { userStore } from "../../../common/user-store";
@@ -14,7 +15,7 @@ import { ClusterIcon } from "../cluster-icon";
 import { Icon } from "../icon";
 import { autobind, cssNames, IClassName } from "../../utils";
 import { Badge } from "../badge";
-import { navigate } from "../../navigation";
+import { navigate, navigation } from "../../navigation";
 import { addClusterURL } from "../+add-cluster";
 import { clusterSettingsURL } from "../+cluster-settings";
 import { landingURL } from "../+landing-page";
@@ -22,7 +23,7 @@ import { Tooltip } from "../tooltip";
 import { ConfirmDialog } from "../confirm-dialog";
 import { clusterIpc } from "../../../common/cluster-ipc";
 import { clusterViewURL } from "./cluster-view.route";
-import { globalPageRegistry } from "../../../extensions/registries/page-registry";
+import { globalPageMenuRegistry, globalPageRegistry } from "../../../extensions/registries";
 
 interface Props {
   className?: IClassName;
@@ -148,9 +149,19 @@ export class ClustersMenu extends React.Component<Props> {
           )}
         </div>
         <div className="extensions">
-          {globalPageRegistry.getItems().map(({ path, url = String(path), hideInMenu, components: { MenuIcon } }) => {
+          {globalPageMenuRegistry.getItems().map(({ id: menuItemId, title, url, components: { Icon } }) => {
-            if (!MenuIcon || hideInMenu) return;
+            const registeredPage = globalPageRegistry.getById(menuItemId);
-            return <MenuIcon key={url} onClick={() => navigate(url)}/>
+            if (!registeredPage) return;
+            const { routePath, exact } = registeredPage;
+            const isActive = !!matchPath(navigation.location.pathname, { path: routePath, exact });
+            return (
+              <Icon
+                key={routePath}
+                tooltip={title}
+                active={isActive}
+                onClick={() => navigate(url)}
+              />
+            )
           })}
         </div>
       </div>

src/renderer/components/layout/sidebar.tsx

@@ -1,20 +1,20 @@
-import type { TabRoute } from "./tab-layout";
+import type { TabLayoutRoute } from "./tab-layout";
 import "./sidebar.scss";
 
 import React from "react";
 import { computed, observable, reaction } from "mobx";
 import { observer } from "mobx-react";
-import { matchPath, NavLink } from "react-router-dom";
+import { NavLink } from "react-router-dom";
 import { Trans } from "@lingui/macro";
 import { createStorage, cssNames } from "../../utils";
 import { Icon } from "../icon";
 import { workloadsRoute, workloadsURL } from "../+workloads/workloads.route";
-import { namespacesURL } from "../+namespaces/namespaces.route";
+import { namespacesRoute, namespacesURL } from "../+namespaces/namespaces.route";
-import { nodesURL } from "../+nodes/nodes.route";
+import { nodesRoute, nodesURL } from "../+nodes/nodes.route";
 import { usersManagementRoute, usersManagementURL } from "../+user-management/user-management.route";
 import { networkRoute, networkURL } from "../+network/network.route";
 import { storageRoute, storageURL } from "../+storage/storage.route";
-import { clusterURL } from "../+cluster";
+import { clusterRoute, clusterURL } from "../+cluster";
 import { Config, configRoute, configURL } from "../+config";
 import { eventRoute, eventsURL } from "../+events";
 import { Apps, appsRoute, appsURL } from "../+apps";
@@ -26,10 +26,10 @@ import { Network } from "../+network";
 import { crdStore } from "../+custom-resources/crd.store";
 import { CrdList, crdResourcesRoute, crdRoute, crdURL } from "../+custom-resources";
 import { CustomResources } from "../+custom-resources/custom-resources";
-import { navigation } from "../../navigation";
+import { isActiveRoute } from "../../navigation";
-import { clusterPageRegistry } from "../../../extensions/registries/page-registry";
+import { isAllowedResource } from "../../../common/rbac"
-import { isAllowedResource } from "../../../common/rbac";
 import { Spinner } from "../spinner";
+import { clusterPageMenuRegistry, clusterPageRegistry } from "../../../extensions/registries";
 
 const SidebarContext = React.createContext<SidebarContextValue>({ pinned: false });
 type SidebarContextValue = {
@@ -56,18 +56,17 @@ export class Sidebar extends React.Component<Props> {
     }
 
     return Object.entries(crdStore.groups).map(([group, crds]) => {
-      const submenus = crds.map((crd) => {
+      const submenus: TabLayoutRoute[] = crds.map((crd) => {
         return {
           title: crd.getResourceKind(),
           component: CrdList,
           url: crd.getResourceUrl(),
-          path: crdResourcesRoute.path,
+          routePath: String(crdResourcesRoute.path),
         };
       });
       return (
         <SidebarNavItem
           key={group}
-          id={group}
           className="sub-menu-parent"
           url={crdURL({ query: { groups: group } })}
           subMenus={submenus}
@@ -98,108 +97,111 @@ export class Sidebar extends React.Component<Props> {
           </div>
           <div className="sidebar-nav flex column box grow-fixed">
             <SidebarNavItem
-              id="cluster"
+              testId="cluster"
+              isActive={isActiveRoute(clusterRoute)}
               isHidden={!isAllowedResource("nodes")}
               url={clusterURL()}
               text={<Trans>Cluster</Trans>}
               icon={<Icon svg="kube"/>}
             />
             <SidebarNavItem
-              id="nodes"
+              testId="nodes"
+              isActive={isActiveRoute(nodesRoute)}
               isHidden={!isAllowedResource("nodes")}
               url={nodesURL()}
               text={<Trans>Nodes</Trans>}
               icon={<Icon svg="nodes"/>}
             />
             <SidebarNavItem
-              id="workloads"
+              testId="workloads"
+              isActive={isActiveRoute(workloadsRoute)}
               isHidden={Workloads.tabRoutes.length == 0}
               url={workloadsURL({ query })}
-              routePath={workloadsRoute.path}
               subMenus={Workloads.tabRoutes}
               text={<Trans>Workloads</Trans>}
               icon={<Icon svg="workloads"/>}
             />
             <SidebarNavItem
-              id="config"
+              testId="config"
+              isActive={isActiveRoute(configRoute)}
               isHidden={Config.tabRoutes.length == 0}
               url={configURL({ query })}
-              routePath={configRoute.path}
               subMenus={Config.tabRoutes}
               text={<Trans>Configuration</Trans>}
               icon={<Icon material="list"/>}
             />
             <SidebarNavItem
-              id="networks"
+              testId="networks"
+              isActive={isActiveRoute(networkRoute)}
               isHidden={Network.tabRoutes.length == 0}
               url={networkURL({ query })}
-              routePath={networkRoute.path}
               subMenus={Network.tabRoutes}
               text={<Trans>Network</Trans>}
               icon={<Icon material="device_hub"/>}
             />
             <SidebarNavItem
-              id="storage"
+              testId="storage"
+              isActive={isActiveRoute(storageRoute)}
               isHidden={Storage.tabRoutes.length == 0}
               url={storageURL({ query })}
-              routePath={storageRoute.path}
               subMenus={Storage.tabRoutes}
               icon={<Icon svg="storage"/>}
               text={<Trans>Storage</Trans>}
             />
             <SidebarNavItem
-              id="namespaces"
+              testId="namespaces"
+              isActive={isActiveRoute(namespacesRoute)}
               isHidden={!isAllowedResource("namespaces")}
               url={namespacesURL()}
               icon={<Icon material="layers"/>}
               text={<Trans>Namespaces</Trans>}
             />
             <SidebarNavItem
-              id="events"
+              testId="events"
+              isActive={isActiveRoute(eventRoute)}
               isHidden={!isAllowedResource("events")}
               url={eventsURL({ query })}
-              routePath={eventRoute.path}
               icon={<Icon material="access_time"/>}
               text={<Trans>Events</Trans>}
             />
             <SidebarNavItem
-              id="apps"
+              testId="apps"
+              isActive={isActiveRoute(appsRoute)}
               url={appsURL({ query })}
               subMenus={Apps.tabRoutes}
-              routePath={appsRoute.path}
               icon={<Icon material="apps"/>}
               text={<Trans>Apps</Trans>}
             />
             <SidebarNavItem
-              id="users"
+              testId="users"
+              isActive={isActiveRoute(usersManagementRoute)}
               url={usersManagementURL({ query })}
-              routePath={usersManagementRoute.path}
               subMenus={UserManagement.tabRoutes}
               icon={<Icon material="security"/>}
               text={<Trans>Access Control</Trans>}
             />
             <SidebarNavItem
-              id="custom-resources"
+              testId="custom-resources"
+              isActive={isActiveRoute(crdRoute)}
               isHidden={!isAllowedResource("customresourcedefinitions")}
               url={crdURL()}
               subMenus={CustomResources.tabRoutes}
-              routePath={crdRoute.path}
               icon={<Icon material="extension"/>}
               text={<Trans>Custom Resources</Trans>}
             >
               {this.renderCustomResources()}
             </SidebarNavItem>
-            {clusterPageRegistry.getItems().map(({ path, title, url = String(path), hideInMenu, components: { MenuIcon } }) => {
+            {clusterPageMenuRegistry.getItems().map(({ id: menuItemId, title, url, components: { Icon } }) => {
-              if (!MenuIcon || hideInMenu) {
+              const registeredPage = clusterPageRegistry.getById(menuItemId);
-                return;
+              if (!registeredPage) return;
-              }
+              const { routePath, exact } = registeredPage;
               return (
                 <SidebarNavItem
-                  key={url} id={`sidebar_item_${url}`}
+                  key={url}
                   url={url}
-                  routePath={path}
                   text={title}
-                  icon={<MenuIcon />}
+                  icon={<Icon/>}
+                  isActive={isActiveRoute({ path: routePath, exact })}
                 />
               )
             })}
@@ -211,54 +213,46 @@ export class Sidebar extends React.Component<Props> {
 }
 
 interface SidebarNavItemProps {
-  id: string;
   url: string;
   text: React.ReactNode | string;
   className?: string;
   icon?: React.ReactNode;
   isHidden?: boolean;
-  routePath?: string | string[];
+  isActive?: boolean;
-  subMenus?: TabRoute[];
+  subMenus?: TabLayoutRoute[];
+  testId?: string; // data-test-id="" property for integration tests
 }
 
 const navItemStorage = createStorage<[string, boolean][]>("sidebar_menu_item", []);
 const navItemState = observable.map<string, boolean>(navItemStorage.get());
-reaction(
+reaction(() => [...navItemState], (value) => navItemStorage.set(value));
-  () => [...navItemState],
-  (value) => navItemStorage.set(value)
-);
 
 @observer
 class SidebarNavItem extends React.Component<SidebarNavItemProps> {
   static contextType = SidebarContext;
   public context: SidebarContextValue;
 
+  get itemId() {
+    return this.props.url;
+  }
+
   @computed get isExpanded() {
-    return navItemState.get(this.props.id);
+    return navItemState.get(this.itemId);
   }
 
   toggleSubMenu = () => {
-    navItemState.set(this.props.id, !this.isExpanded);
+    navItemState.set(this.itemId, !this.isExpanded);
-  };
-
-  isActive = () => {
-    const { routePath, url } = this.props;
-    const { pathname } = navigation.location;
-    return !!matchPath(pathname, {
-      path: routePath || url,
-    });
   };
 
   render() {
-    const { id, isHidden, subMenus = [], icon, text, url, children, className } = this.props;
+    const { isHidden, isActive, subMenus = [], icon, text, url, children, className, testId } = this.props;
     if (isHidden) {
       return null;
     }
     const extendedView = (subMenus.length > 0 || children) && this.context.pinned;
     if (extendedView) {
-      const isActive = this.isActive();
       return (
-        <div id={id} className={cssNames("SidebarNavItem", className)}>
+        <div className={cssNames("SidebarNavItem", className)} data-test-id={testId}>
           <div className={cssNames("nav-item", { active: isActive })} onClick={this.toggleSubMenu}>
             {icon}
             <span className="link-text">{text}</span>
@@ -280,7 +274,7 @@ class SidebarNavItem extends React.Component<SidebarNavItemProps> {
       );
     }
     return (
-      <NavLink className={cssNames("SidebarNavItem", className)} to={url} isActive={this.isActive}>
+      <NavLink className={cssNames("SidebarNavItem", className)} to={url} isActive={() => isActive}>
         {icon}
         <span className="link-text">{text}</span>
       </NavLink>

src/renderer/components/layout/tab-layout.tsx

@@ -1,38 +1,55 @@
 import "./tab-layout.scss";
+
 import React, { ReactNode } from "react";
-import { matchPath, RouteProps } from "react-router-dom";
+import { matchPath, Redirect, Route, Switch } from "react-router";
 import { observer } from "mobx-react";
-import { cssNames } from "../../utils";
+import { cssNames, IClassName } from "../../utils";
 import { Tab, Tabs } from "../tabs";
 import { ErrorBoundary } from "../error-boundary";
 import { navigate, navigation } from "../../navigation";
 
-export interface TabRoute extends RouteProps {
-  title: React.ReactNode;
-  url: string;
-}
-
 export interface TabLayoutProps {
-  children: ReactNode;
+  className?: IClassName;
-  className?: any;
+  contentClass?: IClassName;
-  tabs?: TabRoute[];
+  tabs?: TabLayoutRoute[];
-  contentClass?: string;
+  children?: ReactNode;
 }
 
-export const TabLayout = observer(({ className, contentClass, tabs, children }: TabLayoutProps) => {
+export interface TabLayoutRoute {
-  const routePath = navigation.location.pathname;
+  routePath: string;
+  title: React.ReactNode;
+  component: React.ComponentType<any>;
+  url?: string; // page-url, if not provided `routePath` is used (doesn't work when path has some :placeholder(s))
+  exact?: boolean; // route-path matching rule
+  default?: boolean; // initial tab to open with provided `url, by default tabs[0] is used
+}
+
+export const TabLayout = observer(({ className, contentClass, tabs = [], children }: TabLayoutProps) => {
+  const currentLocation = navigation.location.pathname;
+  const hasTabs = tabs.length > 0;
+  const startTabUrl = hasTabs ? (tabs.find(tab => tab.default) || tabs[0])?.url : null;
   return (
     <div className={cssNames("TabLayout", className)}>
-      {tabs && (
+      {hasTabs && (
         <Tabs center onChange={(url) => navigate(url)}>
-          {tabs.map(({ title, path, url, ...routeProps }) => {
+          {tabs.map(({ title, routePath, url = routePath, exact }) => {
-            const isActive = !!matchPath(routePath, { path, ...routeProps });
+            const isActive = !!matchPath(currentLocation, { path: routePath, exact });
             return <Tab key={url} label={title} value={url} active={isActive}/>;
           })}
         </Tabs>
       )}
-      <main className={contentClass}>
+      <main className={cssNames(contentClass)}>
-        <ErrorBoundary>{children}</ErrorBoundary>
+        <ErrorBoundary>
+          {hasTabs && (
+            <Switch>
+              {tabs.map(({ routePath, exact, component }) => {
+                return <Route key={routePath} exact={exact} path={routePath} component={component}/>;
+              })}
+              <Redirect to={startTabUrl}/>
+            </Switch>
+          )}
+          {children}
+        </ErrorBoundary>
       </main>
     </div>
   );

src/renderer/navigation.ts

@@ -1,14 +1,14 @@
 // Navigation helpers
 
 import { ipcRenderer } from "electron";
-import { matchPath } from "react-router";
+import { matchPath, RouteProps } from "react-router";
 import { reaction } from "mobx";
 import { createObservableHistory } from "mobx-observable-history";
-import { createBrowserHistory, createMemoryHistory, LocationDescriptor } from "history";
+import { createBrowserHistory, LocationDescriptor } from "history";
 import logger from "../main/logger";
 import { clusterViewRoute, IClusterViewRouteParams } from "./components/cluster-manager/cluster-view.route";
 
-export const history = typeof window !== "undefined" ? createBrowserHistory() : createMemoryHistory();
+export const history = createBrowserHistory();
 export const navigation = createObservableHistory(history);
 
 /**
@@ -22,6 +22,10 @@ export function navigate(location: LocationDescriptor) {
   }
 }
 
+export function isActiveRoute(route: string | string[] | RouteProps): boolean {
+  return !!matchPath(navigation.location.pathname, route);
+}
+
 // common params for all pages
 export interface IQueryParams {
   namespaces?: string[];  // selected context namespaces