Get rid of this.disposers while registering stuff in extensions #1145

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

extensions/example-extension/renderer.tsx

@@ -8,16 +8,16 @@ export default class ExampleExtension extends LensRendererExtension {
   }
 
   registerClusterPage(registry: Registry.ClusterPageRegistry) {
-    this.disposers.push(
+    return [
-      registry.add({
+      {
         path: "/extension-example",
         title: "Example Extension",
         components: {
           Page: () => <ExamplePage extension={this} />,
           MenuIcon: ExampleIcon,
         }
-      })
+      }
-    )
+    ]
   }
 
   onDeactivate() {

extensions/metrics-cluster-feature/renderer.tsx

@@ -4,8 +4,8 @@ import React from "react"
 
 export default class ClusterMetricsFeatureExtension extends LensRendererExtension {
   registerClusterFeatures(registry: Registry.ClusterFeatureRegistry) {
-    this.disposers.push(
+    return [
-      registry.add({
+      {
         title: "Metrics Stack",
         components: {
           Description: () => {
@@ -19,7 +19,7 @@ export default class ClusterMetricsFeatureExtension extends LensRendererExtensio
           }
         },
         feature: new MetricsFeature()
-      })
+      }
-    )
+    ]
   }
 }

extensions/node-menu/renderer.tsx

@@ -1,6 +1,6 @@
 import { Registry, LensRendererExtension } from "@k8slens/extensions";
 import React from "react"
-import { NodeMenu } from "./src/node-menu"
+import { NodeMenu, NodeMenuProps } from "./src/node-menu"
 
 export default class NodeMenuRendererExtension extends LensRendererExtension {
   async onActivate() {
@@ -8,14 +8,14 @@ export default class NodeMenuRendererExtension extends LensRendererExtension {
   }
 
   registerKubeObjectMenus(registry: Registry.KubeObjectMenuRegistry) {
-    this.disposers.push(
+    return [
-      registry.add({
+      {
         kind: "Node",
         apiVersions: ["v1"],
         components: {
-          MenuItem: (props) => <NodeMenu {...props} />
+          MenuItem: (props: NodeMenuProps) => <NodeMenu {...props} />
         }
-      })
+      }
-    )
+    ]
   }
 }

extensions/node-menu/src/node-menu.tsx

@@ -1,7 +1,10 @@
 import React from "react";
 import { Component, K8sApi, Navigation} from "@k8slens/extensions"
 
-export function NodeMenu(props: Component.KubeObjectMenuProps<K8sApi.Node>) {
+export interface NodeMenuProps extends Component.KubeObjectMenuProps<K8sApi.Node> {
+}
+
+export function NodeMenu(props: NodeMenuProps) {
   const { object: node, toolbar } = props;
   if (!node) return null;
   const nodeName = node.getName();

extensions/pod-menu/renderer.tsx

@@ -1,6 +1,6 @@
 import { Registry, LensRendererExtension } from "@k8slens/extensions";
-import { PodShellMenu } from "./src/shell-menu"
+import { PodShellMenu, PodShellMenuProps } from "./src/shell-menu"
-import { PodLogsMenu } from "./src/logs-menu"
+import { PodLogsMenu, PodLogsMenuProps } from "./src/logs-menu"
 import React from "react"
 
 export default class PodMenuRendererExtension extends LensRendererExtension {
@@ -9,23 +9,21 @@ export default class PodMenuRendererExtension extends LensRendererExtension {
   }
 
   registerKubeObjectMenus(registry: Registry.KubeObjectMenuRegistry) {
-    this.disposers.push(
+    return [
-      registry.add({
+      {
         kind: "Pod",
         apiVersions: ["v1"],
         components: {
-          MenuItem: (props) => <PodShellMenu {...props} />
+          MenuItem: (props: PodShellMenuProps) => <PodShellMenu {...props} />
         }
-      })
+      },
-    )
+      {
-    this.disposers.push(
-      registry.add({
         kind: "Pod",
         apiVersions: ["v1"],
         components: {
-          MenuItem: (props) => <PodLogsMenu {...props} />
+          MenuItem: (props: PodLogsMenuProps) => <PodLogsMenu {...props} />
         }
-      })
+      }
-    )
+    ]
   }
 }

extensions/pod-menu/src/logs-menu.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import { Component, K8sApi, Util, Navigation } from "@k8slens/extensions";
 
-interface Props extends Component.KubeObjectMenuProps<K8sApi.Pod> {
+export interface PodLogsMenuProps extends Component.KubeObjectMenuProps<K8sApi.Pod> {
 }
 
-export class PodLogsMenu extends React.Component<Props> {
+export class PodLogsMenu extends React.Component<PodLogsMenuProps> {
   showLogs(container: K8sApi.IPodContainer) {
     Navigation.hideDetails();
     const pod = this.props.object;

extensions/pod-menu/src/shell-menu.tsx

@@ -3,10 +3,10 @@
 import React from "react";
 import { Component, K8sApi, Util, Navigation } from "@k8slens/extensions";
 
-interface Props extends Component.KubeObjectMenuProps<K8sApi.Pod> {
+export interface PodShellMenuProps extends Component.KubeObjectMenuProps<K8sApi.Pod> {
 }
 
-export class PodShellMenu extends React.Component<Props> {
+export class PodShellMenu extends React.Component<PodShellMenuProps> {
   async execShell(container?: string) {
     Navigation.hideDetails();
     const { object: pod } = this.props

extensions/support-page/main.ts

@@ -6,9 +6,9 @@ export default class SupportPageMainExtension extends LensMainExtension {
     console.log("support page extension activated")
   }
 
-  async registerAppMenus(registry: Registry.MenuRegistry) {
+  registerAppMenus(registry: Registry.MenuRegistry) {
-    this.disposers.push(
+    return [
-      registry.add({
+      {
         parentId: "help",
         label: "Support",
         click() {
@@ -17,7 +17,7 @@ export default class SupportPageMainExtension extends LensMainExtension {
             url: supportPageURL(),
           });
         }
-      })
+      }
-    )
+    ]
   }
 }

extensions/support-page/renderer.tsx

@@ -8,22 +8,22 @@ export default class SupportPageRendererExtension extends LensRendererExtension
     console.log("support page extension activated")
   }
 
-  registerGlobalPage(registry: Registry.GlobalPageRegistry) {
+  registerGlobalPages(registry: Registry.GlobalPageRegistry) {
-    this.disposers.push(
+    return [
-      registry.add({
+      {
         ...supportPageRoute,
         url: supportPageURL(),
         hideInMenu: true,
         components: {
           Page: Support,
         }
-      })
+      }
-    )
+    ]
   }
 
-  registerStatusBarItem(registry: Registry.StatusBarRegistry) {
+  registerStatusBarItems(registry: Registry.StatusBarRegistry) {
-    this.disposers.push(
+    return [
-      registry.add({
+      {
         item: (
           <div
             className="flex align-center gaps hover-highlight"
@@ -33,7 +33,7 @@ export default class SupportPageRendererExtension extends LensRendererExtension
             <span>Support</span>
           </div>
         )
-      })
+      }
-    )
+    ]
   }
 }

extensions/telemetry/renderer.tsx

@@ -12,15 +12,15 @@ export default class TelemetryRendererExtension extends LensRendererExtension {
   }
 
   registerAppPreferences(registry: Registry.AppPreferenceRegistry) {
-    this.disposers.push(
+    return [
-      registry.add({
+      {
         title: "Telemetry & Usage Tracking",
         components: {
           Hint: () => <TelemetryPreferenceHint />,
           Input: () => <TelemetryPreferenceInput telemetry={telemetryPreferencesStore} />
         }
-      })
+      }
-    )
+    ]
   }
 
   onDeactivate() {

src/extensions/extension-loader.ts

@@ -36,26 +36,26 @@ export class ExtensionLoader {
 
   loadOnMain() {
     logger.info('[EXTENSIONS-LOADER]: load on main')
-    this.autoloadExtensions((instance: LensMainExtension) => {
+    this.autoloadExtensions((extension: LensMainExtension) => {
-      instance.registerAppMenus(menuRegistry);
+      extension.register(menuRegistry, extension.registerAppMenus(menuRegistry))
     })
   }
 
   loadOnClusterManagerRenderer() {
     logger.info('[EXTENSIONS-LOADER]: load on main renderer (cluster manager)')
-    this.autoloadExtensions((instance: LensRendererExtension) => {
+    this.autoloadExtensions((extension: LensRendererExtension) => {
-      instance.registerGlobalPage(globalPageRegistry)
+      extension.register(globalPageRegistry, extension.registerGlobalPages(globalPageRegistry))
-      instance.registerAppPreferences(appPreferenceRegistry)
+      extension.register(appPreferenceRegistry, extension.registerAppPreferences(appPreferenceRegistry))
-      instance.registerClusterFeatures(clusterFeatureRegistry)
+      extension.register(clusterFeatureRegistry, extension.registerClusterFeatures(clusterFeatureRegistry))
-      instance.registerStatusBarItem(statusBarRegistry)
+      extension.register(statusBarRegistry, extension.registerStatusBarItems(statusBarRegistry))
     })
   }
 
   loadOnClusterRenderer() {
     logger.info('[EXTENSIONS-LOADER]: load on cluster renderer (dashboard)')
-    this.autoloadExtensions((instance: LensRendererExtension) => {
+    this.autoloadExtensions((extension: LensRendererExtension) => {
-      instance.registerClusterPage(clusterPageRegistry)
+      extension.register(clusterPageRegistry, extension.registerClusterPages(clusterPageRegistry))
-      instance.registerKubeObjectMenus(kubeObjectMenuRegistry)
+      extension.register(kubeObjectMenuRegistry, extension.registerKubeObjectMenus(kubeObjectMenuRegistry))
     })
   }
 

src/extensions/lens-extension.ts

@@ -1,6 +1,7 @@
 import { readJsonSync } from "fs-extra";
 import { action, observable, toJS } from "mobx";
 import logger from "../main/logger";
+import { BaseRegistry } from "./registries/base-registry";
 
 export type ExtensionId = string | ExtensionPackageJsonPath;
 export type ExtensionPackageJsonPath = string;
@@ -25,7 +26,7 @@ export interface ExtensionManifest extends ExtensionModel {
 export class LensExtension implements ExtensionModel {
   public id: ExtensionId;
   public updateUrl: string;
-  protected disposers: Function[] = [];
+  protected disposers: (() => void)[] = [];
 
   @observable name = "";
   @observable description = "";
@@ -77,6 +78,14 @@ export class LensExtension implements ExtensionModel {
     // mock
   }
 
+  register<T = any>(registry: BaseRegistry<T>, registryItems: T[]) {
+    const disposers = registryItems.map(item => registry.add(item));
+    this.disposers.push(...disposers);
+    return () => {
+      this.disposers = this.disposers.filter(disposer => !disposers.includes(disposer))
+    };
+  }
+
   getMeta() {
     return toJS({
       id: this.id,

src/extensions/lens-main-extension.ts

@@ -1,12 +1,12 @@
 import { LensExtension } from "./lens-extension"
-import type { MenuRegistry } from "./registries/menu-registry";
+import type { MenuRegistration, MenuRegistry } from "./registries/menu-registry";
 
 export class LensMainExtension extends LensExtension {
-  registerAppMenus(registry: MenuRegistry) {
+  registerAppMenus(registry: MenuRegistry): MenuRegistration[] {
-    //
+    return []
   }
 
-  registerPrometheusProviders(registry: any) {
+  registerPrometheusProviders(registry: any): any[] {
-    //
+    return []
   }
 }

src/extensions/lens-renderer-extension.ts

@@ -1,28 +1,28 @@
 import { LensExtension } from "./lens-extension"
-import type { GlobalPageRegistry, ClusterPageRegistry, AppPreferenceRegistry, StatusBarRegistry, KubeObjectMenuRegistry, ClusterFeatureRegistry } from "./registries"
+import type { GlobalPageRegistry, ClusterPageRegistry, AppPreferenceRegistry, StatusBarRegistry, KubeObjectMenuRegistry, ClusterFeatureRegistry, PageRegistration, AppPreferenceRegistration, ClusterFeatureRegistration, StatusBarRegistration, KubeObjectMenuRegistration } from "./registries"
 
 export class LensRendererExtension extends LensExtension {
-  registerGlobalPage(registry: GlobalPageRegistry) {
+  registerGlobalPages(registry: GlobalPageRegistry): PageRegistration[] {
-    return
+    return []
   }
 
-  registerClusterPage(registry: ClusterPageRegistry) {
+  registerClusterPages(registry: ClusterPageRegistry): PageRegistration[] {
-    return
+    return []
   }
 
-  registerAppPreferences(registry: AppPreferenceRegistry) {
+  registerAppPreferences(registry: AppPreferenceRegistry): AppPreferenceRegistration[] {
-    return
+    return []
   }
 
-  registerClusterFeatures(registry: ClusterFeatureRegistry) {
+  registerClusterFeatures(registry: ClusterFeatureRegistry): ClusterFeatureRegistration[] {
-    return
+    return []
   }
 
-  registerStatusBarItem(registry: StatusBarRegistry) {
+  registerStatusBarItems(registry: StatusBarRegistry): StatusBarRegistration[] {
-    return
+    return []
   }
 
-  registerKubeObjectMenus(registry: KubeObjectMenuRegistry) {
+  registerKubeObjectMenus(registry: KubeObjectMenuRegistry): KubeObjectMenuRegistration[] {
-    return
+    return []
   }
 }

src/extensions/registries/menu-registry.ts

@@ -1,11 +1,10 @@
 // Extensions API -> Global menu customizations
 
-import type { MenuTopId } from "../../main/menu";
 import type { MenuItemConstructorOptions } from "electron";
 import { BaseRegistry } from "./base-registry";
 
 export interface MenuRegistration extends MenuItemConstructorOptions {
-  parentId?: MenuTopId;
+  parentId: string;
 }
 
 export class MenuRegistry extends BaseRegistry<MenuRegistration> {

src/main/menu.ts

@@ -209,7 +209,7 @@ export function buildMenu(windowManager: WindowManager) {
   // Modify menu from extensions-api
   menuRegistry.getItems().forEach(({ parentId, ...menuItem }) => {
     try {
-      const topMenu = appMenu[parentId].submenu as MenuItemConstructorOptions[];
+      const topMenu = appMenu[parentId as MenuTopId].submenu as MenuItemConstructorOptions[];
       topMenu.push(menuItem);
     } catch (err) {
       logger.error(`[MENU]: can't register menu item, parentId=${parentId}`, { menuItem })