Extension tray menu items (#4619)

* Add extension ability to add tray menu items.

Signed-off-by: Juho Heikka <juho.heikka@gmail.com>

* Add tray menu extension documentation

Signed-off-by: Juho Heikka <juho.heikka@gmail.com>

* Add tests to tray menu items. Fix autorun infinite loop.

Signed-off-by: Juho Heikka <juho.heikka@gmail.com>

* Fix documentation

Signed-off-by: Juho Heikka <juho.heikka@gmail.com>

* Remove unnecessary slice()

Signed-off-by: Juho Heikka <juho.heikka@gmail.com>

* Define a type for tray menu registration

Signed-off-by: Juho Heikka <juho.heikka@gmail.com>

* Change TrayMenuRegistration not to leak or depend on Electron Menu API

Signed-off-by: Juho Heikka <juho.heikka@gmail.com>

* Update trayMenus Extension API documentation

Signed-off-by: Juho Heikka <juho.heikka@gmail.com>

* Refactor all tests to use runInAction

Signed-off-by: Juho Heikka <juho.heikka@gmail.com>

docs/extensions/capabilities/common-capabilities.md

@@ -37,9 +37,9 @@ export default class ExampleMainExtension extends Main.LensExtension {
 }
 ```
 
-### App Menus
+### Menus
 
-This extension can register custom app menus that will be displayed on OS native menus.
+This extension can register custom app and tray menus that will be displayed on OS native menus.
 
 Example:
 
@@ -56,6 +56,29 @@ export default class ExampleMainExtension extends Main.LensExtension {
       }
     }
   ]
+
+  trayMenus = [
+    {
+      label: "My links",
+      submenu: [
+        {
+          label: "Lens",
+          click() {
+            Main.Navigation.navigate("https://k8slens.dev");
+          }
+        },
+        {
+          type: "separator"
+        },
+        {
+          label: "Lens Github",
+          click() {
+            Main.Navigation.navigate("https://github.com/lensapp/lens");
+          }
+        }
+      ]
+    }
+  ]
 }
 ```
 

docs/extensions/guides/main-extension.md

@@ -45,7 +45,6 @@ For more details on accessing Lens state data, please see the [Stores](../stores
 ### `appMenus`
 
 The Main Extension API allows you to customize the UI application menu.
-Note that this is the only UI feature that the Main Extension API allows you to customize.
 The following example demonstrates adding an item to the **Help** menu.
 
 ``` typescript
@@ -65,7 +64,7 @@ export default class SamplePageMainExtension extends Main.LensExtension {
 ```
 
 `appMenus` is an array of objects that satisfy the `MenuRegistration` interface.
-`MenuRegistration` extends React's `MenuItemConstructorOptions` interface.
+`MenuRegistration` extends Electron's `MenuItemConstructorOptions` interface.
 The properties of the appMenus array objects are defined as follows:
 
 * `parentId` is the name of the menu where your new menu item will be listed.
@@ -96,6 +95,35 @@ export default class SamplePageMainExtension extends Main.LensExtension {
 When the menu item is clicked the `navigate()` method looks for and displays a global page with id `"myGlobalPage"`.
 This page would be defined in your extension's `Renderer.LensExtension` implementation (See [`Renderer.LensExtension`](renderer-extension.md)).
 
+### `trayMenus`
+
+`trayMenus` is an array of `TrayMenuRegistration` objects. Most importantly you can define a `label` and a `click` handler. Other properties are `submenu`, `enabled`, `toolTip`, `id` and `type`.
+
+``` typescript
+interface TrayMenuRegistration {
+  label?: string;
+  click?: (menuItem: TrayMenuRegistration) => void;
+  id?: string;
+  type?: "normal" | "separator" | "submenu"
+  toolTip?: string;
+  enabled?: boolean;
+  submenu?: TrayMenuRegistration[]
+}
+```
+
+The following example demonstrates how tray menus can be added from extension:
+
+``` typescript
+import { Main } from "@k8slens/extensions";
+
+export default class SampleTrayMenuMainExtension extends Main.LensExtension {
+  trayMenus = [{
+    label: "menu from the extension",
+    click: () => { console.log("tray menu clicked!") }
+  }]
+}
+```
+
 ### `addCatalogSource()` and `removeCatalogSource()` Methods
 
 The `Main.LensExtension` class also provides the `addCatalogSource()` and `removeCatalogSource()` methods, for managing custom catalog items (or entities).

src/extensions/lens-main-extension.ts

@@ -25,9 +25,10 @@ import { catalogEntityRegistry } from "../main/catalog";
 import type { CatalogEntity } from "../common/catalog";
 import type { IObservableArray } from "mobx";
 import type { MenuRegistration } from "../main/menu/menu-registration";
-
+import type { TrayMenuRegistration } from "../main/tray/tray-menu-registration";
 export class LensMainExtension extends LensExtension {
   appMenus: MenuRegistration[] = [];
+  trayMenus: TrayMenuRegistration[] = [];
 
   async navigate(pageId?: string, params?: Record<string, any>, frameId?: number) {
     return WindowManager.getInstance().navigateExtension(this.id, pageId, params, frameId);

src/main/index.ts

@@ -60,7 +60,7 @@ import { SentryInit } from "../common/sentry";
 import { ensureDir } from "fs-extra";
 import { Router } from "./router";
 import { initMenu } from "./menu/menu";
-import { initTray } from "./tray";
+import { initTray } from "./tray/tray";
 import { kubeApiRequest, shellApiRequest, ShellRequestAuthenticator } from "./proxy-functions";
 import { AppPaths } from "../common/app-paths";
 import { ShellSession } from "./shell-session/shell-session";
@@ -68,6 +68,7 @@ import { getDi } from "./getDi";
 import electronMenuItemsInjectable from "./menu/electron-menu-items.injectable";
 import extensionLoaderInjectable from "../extensions/extension-loader/extension-loader.injectable";
 import lensProtocolRouterMainInjectable from "./protocol-handler/lens-protocol-router-main/lens-protocol-router-main.injectable";
+import trayMenuItemsInjectable from "./tray/tray-menu-items.injectable";
 
 const di = getDi();
 
@@ -104,6 +105,7 @@ mangleProxyEnv();
 logger.debug("[APP-MAIN] initializing ipc main handlers");
 
 const menuItems = di.inject(electronMenuItemsInjectable);
+const trayMenuItems = di.inject(trayMenuItemsInjectable);
 
 initializers.initIpcMainHandlers(menuItems);
 
@@ -244,7 +246,7 @@ app.on("ready", async () => {
 
   onQuitCleanup.push(
     initMenu(windowManager, menuItems),
-    initTray(windowManager),
+    initTray(windowManager, trayMenuItems),
     () => ShellSession.cleanup(),
   );
 

src/main/menu/electron-menu-items.injectable.ts

@@ -29,8 +29,7 @@ const electronMenuItemsInjectable = getInjectable({
     const extensions = di.inject(mainExtensionsInjectable);
 
     return computed(() =>
-      extensions.get().flatMap((extension) => extension.appMenus),
+      extensions.get().flatMap((extension) => extension.appMenus));
-    );
   },
 });
 

src/main/tray/tray-menu-items.injectable.ts

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
+import { computed } from "mobx";
+import mainExtensionsInjectable from "../../extensions/main-extensions.injectable";
+
+const trayItemsInjectable = getInjectable({
+  lifecycle: lifecycleEnum.singleton,
+
+  instantiate: (di) => {
+    const extensions = di.inject(mainExtensionsInjectable);
+
+    return computed(() =>
+      extensions.get().flatMap(extension => extension.trayMenus));
+  },
+});
+
+export default trayItemsInjectable;

src/main/tray/tray-menu-items.test.ts

@@ -0,0 +1,136 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+import type { ConfigurableDependencyInjectionContainer } from "@ogre-tools/injectable";
+import { LensMainExtension } from "../../extensions/lens-main-extension";
+import trayItemsInjectable from "./tray-menu-items.injectable";
+import type { IComputedValue } from "mobx";
+import { computed, ObservableMap, runInAction } from "mobx";
+import { getDiForUnitTesting } from "../getDiForUnitTesting";
+import mainExtensionsInjectable from "../../extensions/main-extensions.injectable";
+import type { TrayMenuRegistration } from "./tray-menu-registration";
+
+describe("tray-menu-items", () => {
+  let di: ConfigurableDependencyInjectionContainer;
+  let trayMenuItems: IComputedValue<TrayMenuRegistration[]>;
+  let extensionsStub: ObservableMap<string, LensMainExtension>;
+
+  beforeEach(() => {
+    di = getDiForUnitTesting();
+
+    extensionsStub = new ObservableMap();
+
+    di.override(
+      mainExtensionsInjectable,
+      () => computed(() => [...extensionsStub.values()]),
+    );
+
+    trayMenuItems = di.inject(trayItemsInjectable);
+  });
+
+  it("does not have any items yet", () => {
+    expect(trayMenuItems.get()).toHaveLength(0);
+  });
+
+  describe("when extension is enabled", () => {
+    beforeEach(() => {
+      const someExtension = new SomeTestExtension({
+        id: "some-extension-id",
+        trayMenus: [{ label: "tray-menu-from-some-extension" }],
+      });
+
+      runInAction(() => {
+        extensionsStub.set("some-extension-id", someExtension);
+      });
+    });
+
+    it("has tray menu items", () => {
+      expect(trayMenuItems.get()).toEqual([
+        {
+          label: "tray-menu-from-some-extension",
+        },
+      ]);
+    });
+
+    it("when disabling extension, does not have tray menu items", () => {
+      runInAction(() => {
+        extensionsStub.delete("some-extension-id");
+      });
+
+      expect(trayMenuItems.get()).toHaveLength(0);
+    });
+
+    describe("when other extension is enabled", () => {
+      beforeEach(() => {
+        const someOtherExtension = new SomeTestExtension({
+          id: "some-extension-id",
+          trayMenus: [{ label: "some-label-from-second-extension" }],
+        });
+
+        runInAction(() => {
+          extensionsStub.set("some-other-extension-id", someOtherExtension);
+        });
+      });
+
+      it("has tray menu items for both extensions", () => {
+        expect(trayMenuItems.get()).toEqual([
+          {
+            label: "tray-menu-from-some-extension",
+          },
+
+          {
+            label: "some-label-from-second-extension",
+          },
+        ]);
+      });
+
+      it("when extension is disabled, still returns tray menu items for extensions that are enabled", () => {
+        runInAction(() => {
+          extensionsStub.delete("some-other-extension-id");
+        });
+
+        expect(trayMenuItems.get()).toEqual([
+          {
+            label: "tray-menu-from-some-extension",
+          },
+        ]);
+      });
+    });
+  });
+});
+
+class SomeTestExtension extends LensMainExtension {
+  constructor({ id, trayMenus }: {
+     id: string;
+     trayMenus: TrayMenuRegistration[];
+   }) {
+    super({
+      id,
+      absolutePath: "irrelevant",
+      isBundled: false,
+      isCompatible: false,
+      isEnabled: false,
+      manifest: { name: id, version: "some-version" },
+      manifestPath: "irrelevant",
+    });
+
+    this.trayMenus = trayMenus;
+  }
+}

src/main/tray/tray-menu-registration.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+export interface TrayMenuRegistration {
+  label?: string;
+  click?: (menuItem: TrayMenuRegistration) => void;
+  id?: string;
+  type?: "normal" | "separator" | "submenu"
+  toolTip?: string;
+  enabled?: boolean;
+  submenu?: TrayMenuRegistration[]
+}

src/main/tray/tray.ts

@@ -20,16 +20,18 @@
  */
 
 import path from "path";
-import packageInfo from "../../package.json";
+import packageInfo from "../../../package.json";
 import { Menu, Tray } from "electron";
-import { autorun } from "mobx";
+import { autorun, IComputedValue } from "mobx";
-import { showAbout } from "./menu/menu";
+import { showAbout } from "../menu/menu";
-import { checkForUpdates, isAutoUpdateEnabled } from "./app-updater";
+import { checkForUpdates, isAutoUpdateEnabled } from "../app-updater";
-import type { WindowManager } from "./window-manager";
+import type { WindowManager } from "../window-manager";
-import logger from "./logger";
+import logger from "../logger";
-import { isDevelopment, isWindows, productName } from "../common/vars";
+import { isDevelopment, isWindows, productName } from "../../common/vars";
-import { exitApp } from "./exit-app";
+import { exitApp } from "../exit-app";
-import { preferencesURL } from "../common/routes";
+import { preferencesURL } from "../../common/routes";
+import { toJS } from "../../common/utils";
+import type { TrayMenuRegistration } from "./tray-menu-registration";
 
 const TRAY_LOG_PREFIX = "[TRAY]";
 
@@ -44,7 +46,10 @@ export function getTrayIcon(): string {
   );
 }
 
-export function initTray(windowManager: WindowManager) {
+export function initTray(
+  windowManager: WindowManager,
+  trayMenuItems: IComputedValue<TrayMenuRegistration[]>,
+) {
   const icon = getTrayIcon();
 
   tray = new Tray(icon);
@@ -62,7 +67,7 @@ export function initTray(windowManager: WindowManager) {
   const disposers = [
     autorun(() => {
       try {
-        const menu = createTrayMenu(windowManager);
+        const menu = createTrayMenu(windowManager, toJS(trayMenuItems.get()));
 
         tray.setContextMenu(menu);
       } catch (error) {
@@ -78,8 +83,21 @@ export function initTray(windowManager: WindowManager) {
   };
 }
 
-function createTrayMenu(windowManager: WindowManager): Menu {
+function getMenuItemConstructorOptions(trayItem: TrayMenuRegistration): Electron.MenuItemConstructorOptions {
-  const template: Electron.MenuItemConstructorOptions[] = [
+  return {
+    ...trayItem,
+    submenu: trayItem.submenu ? trayItem.submenu.map(getMenuItemConstructorOptions) : undefined,
+    click: trayItem.click ? () => {
+      trayItem.click(trayItem);
+    } : undefined,
+  };
+}
+
+function createTrayMenu(
+  windowManager: WindowManager,
+  extensionTrayItems: TrayMenuRegistration[],
+): Menu {
+  let template: Electron.MenuItemConstructorOptions[] = [
     {
       label: `Open ${productName}`,
       click() {
@@ -108,6 +126,8 @@ function createTrayMenu(windowManager: WindowManager): Menu {
     });
   }
 
+  template = template.concat(extensionTrayItems.map(getMenuItemConstructorOptions));
+
   return Menu.buildFromTemplate(template.concat([
     {
       label: `About ${productName}`,