Refactor PageRegistration to separate registries/interfaces #1130 (#1144)

Signed-off-by: Roman <ixrock@gmail.com>

extensions/example-extension/renderer.tsx

@@ -7,10 +7,9 @@ export default class ExampleExtension extends LensRendererExtension {
     console.log('EXAMPLE EXTENSION RENDERER: ACTIVATED', this.getMeta());
   }
 
-  registerPages(registry: Registry.PageRegistry) {
+  registerClusterPage(registry: Registry.ClusterPageRegistry) {
     this.disposers.push(
       registry.add({
-        type: Registry.PageRegistryType.CLUSTER,
         path: "/extension-example",
         title: "Example Extension",
         components: {

extensions/support-page/renderer.tsx

@@ -8,12 +8,12 @@ export default class SupportPageRendererExtension extends LensRendererExtension
     console.log("support page extension activated")
   }
 
-  registerPages(registry: Registry.PageRegistry) {
+  registerGlobalPage(registry: Registry.GlobalPageRegistry) {
     this.disposers.push(
       registry.add({
         ...supportPageRoute,
-        type: Registry.PageRegistryType.GLOBAL,
         url: supportPageURL(),
+        hideInMenu: true,
         components: {
           Page: Support,
         }

src/extensions/extension-loader.ts

@@ -6,7 +6,7 @@ import { broadcastIpc } from "../common/ipc"
 import { observable, reaction, toJS, } from "mobx"
 import logger from "../main/logger"
 import { app, ipcRenderer, remote } from "electron"
-import { appPreferenceRegistry, kubeObjectMenuRegistry, menuRegistry, pageRegistry, statusBarRegistry, clusterFeatureRegistry } from "./registries";
+import { appPreferenceRegistry, clusterFeatureRegistry, clusterPageRegistry, globalPageRegistry, kubeObjectMenuRegistry, menuRegistry, statusBarRegistry } from "./registries";
 
 export interface InstalledExtension extends ExtensionModel {
   manifestPath: string;
@@ -44,7 +44,7 @@ export class ExtensionLoader {
   loadOnClusterManagerRenderer() {
     logger.info('[EXTENSIONS-LOADER]: load on main renderer (cluster manager)')
     this.autoloadExtensions((instance: LensRendererExtension) => {
-      instance.registerPages(pageRegistry)
+      instance.registerGlobalPage(globalPageRegistry)
       instance.registerAppPreferences(appPreferenceRegistry)
       instance.registerClusterFeatures(clusterFeatureRegistry)
       instance.registerStatusBarIcon(statusBarRegistry)
@@ -54,7 +54,7 @@ export class ExtensionLoader {
   loadOnClusterRenderer() {
     logger.info('[EXTENSIONS-LOADER]: load on cluster renderer (dashboard)')
     this.autoloadExtensions((instance: LensRendererExtension) => {
-      instance.registerPages(pageRegistry)
+      instance.registerClusterPage(clusterPageRegistry)
       instance.registerKubeObjectMenus(kubeObjectMenuRegistry)
     })
   }

src/extensions/lens-renderer-extension.ts

@@ -1,8 +1,12 @@
 import { LensExtension } from "./lens-extension"
-import type { PageRegistry, AppPreferenceRegistry, StatusBarRegistry, KubeObjectMenuRegistry, ClusterFeatureRegistry } from "./registries"
+import type { GlobalPageRegistry, ClusterPageRegistry, AppPreferenceRegistry, StatusBarRegistry, KubeObjectMenuRegistry, ClusterFeatureRegistry } from "./registries"
 
 export class LensRendererExtension extends LensExtension {
-  registerPages(registry: PageRegistry) {
+  registerGlobalPage(registry: GlobalPageRegistry) {
+    return
+  }
+
+  registerClusterPage(registry: ClusterPageRegistry) {
     return
   }
 

src/extensions/registries/page-registry.ts

@@ -1,4 +1,4 @@
-// Extensions-api -> Dynamic pages
+// Extensions-api -> Custom page registration
 
 import type React from "react";
 import type { RouteProps } from "react-router";
@@ -6,20 +6,14 @@ 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";
-import { computed } from "mobx";
-
-export enum PageRegistryType {
-  GLOBAL = "lens-scope",
-  CLUSTER = "cluster-view-scope",
-}
 
 export interface PageRegistration extends RouteProps {
-  type: PageRegistryType;
-  components: PageComponents;
   className?: IClassName;
   url?: string; // initial url to be used for building menus and tabs, otherwise "path" applied by default
   title?: React.ReactNode; // used in sidebar's & tabs-layout if provided
+  hideInMenu?: boolean; // hide element within app's navigation menu
   subPages?: (PageRegistration & TabRoute)[];
+  components: PageComponents;
 }
 
 export interface PageComponents {
@@ -27,14 +21,11 @@ export interface PageComponents {
   MenuIcon?: React.ComponentType<IconProps>;
 }
 
-export class PageRegistry extends BaseRegistry<PageRegistration> {
+export class GlobalPageRegistry extends BaseRegistry<PageRegistration> {
-  @computed get globalPages() {
-    return this.items.filter(page => page.type === PageRegistryType.GLOBAL);
 }
 
-  @computed get clusterPages() {
+export class ClusterPageRegistry extends BaseRegistry<PageRegistration> {
-    return this.items.filter(page => page.type === PageRegistryType.CLUSTER);
-  }
 }
 
-export const pageRegistry = new PageRegistry();
+export const globalPageRegistry = new GlobalPageRegistry();
+export const clusterPageRegistry = new ClusterPageRegistry();

src/renderer/components/app.tsx

@@ -35,7 +35,7 @@ import { getHostedCluster, getHostedClusterId } from "../../common/cluster-store
 import logger from "../../main/logger";
 import { clusterIpc } from "../../common/cluster-ipc";
 import { webFrame } from "electron";
-import { pageRegistry } from "../../extensions/registries/page-registry";
+import { clusterPageRegistry } from "../../extensions/registries/page-registry";
 import { DynamicPage } from "../../extensions/dynamic-page";
 import { extensionLoader } from "../../extensions/extension-loader";
 import { appEventBus } from "../../common/event-bus"
@@ -81,7 +81,7 @@ export class App extends React.Component {
                 <Route component={CustomResources} {...crdRoute}/>
                 <Route component={UserManagement} {...usersManagementRoute}/>
                 <Route component={Apps} {...appsRoute}/>
-                {pageRegistry.clusterPages.map(page => {
+                {clusterPageRegistry.getItems().map(page => {
                   return <Route {...page} key={String(page.path)} render={() => <DynamicPage page={page}/>}/>
                 })}
                 <Redirect exact from="/" to={this.startURL}/>

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

@@ -14,7 +14,7 @@ import { ClusterSettings, clusterSettingsRoute } from "../+cluster-settings";
 import { clusterViewRoute, clusterViewURL, getMatchedCluster, getMatchedClusterId } from "./cluster-view.route";
 import { clusterStore } from "../../../common/cluster-store";
 import { hasLoadedView, initView, lensViews, refreshViews } from "./lens-views";
-import { pageRegistry } from "../../../extensions/registries/page-registry";
+import { globalPageRegistry } from "../../../extensions/registries/page-registry";
 
 @observer
 export class ClusterManager extends React.Component {
@@ -63,7 +63,7 @@ export class ClusterManager extends React.Component {
             <Route component={AddCluster} {...addClusterRoute} />
             <Route component={ClusterView} {...clusterViewRoute} />
             <Route component={ClusterSettings} {...clusterSettingsRoute} />
-            {pageRegistry.globalPages.map(({ path, url = String(path), components: { Page } }) => {
+            {globalPageRegistry.getItems().map(({ path, url = String(path), components: { Page } }) => {
               return <Route key={url} path={path} component={Page}/>
             })}
             <Redirect exact to={this.startUrl} />

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

@@ -22,7 +22,7 @@ import { ConfirmDialog } from "../confirm-dialog";
 import { clusterIpc } from "../../../common/cluster-ipc";
 import { clusterViewURL } from "./cluster-view.route";
 import { DragDropContext, Draggable, DraggableProvided, Droppable, DroppableProvided, DropResult } from "react-beautiful-dnd";
-import { pageRegistry } from "../../../extensions/registries/page-registry";
+import { globalPageRegistry } from "../../../extensions/registries/page-registry";
 
 interface Props {
   className?: IClassName;
@@ -156,8 +156,10 @@ export class ClustersMenu extends React.Component<Props> {
           )}
         </div>
         <div className="extensions">
-          {pageRegistry.globalPages.map(({ path, url = String(path), components: { MenuIcon } }) => {
+          {globalPageRegistry.getItems().map(({ path, url = String(path), hideInMenu, components: { MenuIcon } }) => {
-            if (!MenuIcon) return;
+            if (!MenuIcon || hideInMenu) {
+              return;
+            }
             return <MenuIcon key={url} onClick={() => navigate(url)}/>
           })}
         </div>

src/renderer/components/layout/sidebar.tsx

@@ -28,7 +28,7 @@ import { CrdList, crdResourcesRoute, crdRoute, crdURL } from "../+custom-resourc
 import { CustomResources } from "../+custom-resources/custom-resources";
 import { navigation } from "../../navigation";
 import { isAllowedResource } from "../../../common/rbac"
-import { pageRegistry } from "../../../extensions/registries/page-registry";
+import { clusterPageRegistry } from "../../../extensions/registries/page-registry";
 
 const SidebarContext = React.createContext<SidebarContextValue>({ pinned: false });
 type SidebarContextValue = {
@@ -184,8 +184,10 @@ export class Sidebar extends React.Component<Props> {
             >
               {this.renderCustomResources()}
             </SidebarNavItem>
-            {pageRegistry.clusterPages.map(({ path, title, url = String(path), components: { MenuIcon } }) => {
+            {clusterPageRegistry.getItems().map(({ path, title, url = String(path), hideInMenu, components: { MenuIcon } }) => {
-              if (!MenuIcon) return;
+              if (!MenuIcon || hideInMenu) {
+                return;
+              }
               return (
                 <SidebarNavItem
                   key={url} id={`sidebar_item_${url}`}