Tray icon (#1005)

* Tray icon #833 -- part 1 Signed-off-by: Roman <ixrock@gmail.com> * Tray icon #833 -- part 2 Signed-off-by: Roman <ixrock@gmail.com> * Tray icon #833 -- part 3 Signed-off-by: Roman <ixrock@gmail.com> * Tray icon #833 -- part 4 Signed-off-by: Roman <ixrock@gmail.com> * fix: lint / linux build failed Signed-off-by: Roman <ixrock@gmail.com> * allow to disable tray from preferences Signed-off-by: Roman <ixrock@gmail.com> * allow to tweak svg-icon before applying as tray-icon Signed-off-by: Roman <ixrock@gmail.com> * add checkbox indication, setActive workspace on cluster select Signed-off-by: Roman <ixrock@gmail.com> * fix build version (cannon find module 'react') Signed-off-by: Roman <ixrock@gmail.com> * - switching dark/light icon depending on os-x theme settings - optimization: don't re-create tray icon on menu udpates (avoid blinking) Signed-off-by: Roman <ixrock@gmail.com> * fix: refresh icon after turning on/off + switching dark-mode Signed-off-by: Roman <ixrock@gmail.com> * allow to close main window and re-open from dock or tray icon Signed-off-by: Roman <ixrock@gmail.com> * small fix Signed-off-by: Roman <ixrock@gmail.com> * fix: ensure main-window from global menu Signed-off-by: Roman <ixrock@gmail.com> * chore Signed-off-by: Roman <ixrock@gmail.com> * fix: hide traffic-light buttons for tray window Signed-off-by: Roman <ixrock@gmail.com> * removed redundant tray window Signed-off-by: Roman <ixrock@gmail.com> * removed delay from base-store Signed-off-by: Roman <ixrock@gmail.com> * adding cluster fix (reverted changes from master) Signed-off-by: Roman <ixrock@gmail.com> * - hide icon in dock when main-window closed (mac-os only) - added preferences checkbox to open app at system start-up Signed-off-by: Roman <ixrock@gmail.com> * handle quit app action from tray menu Signed-off-by: Roman <ixrock@gmail.com> * moved generating tray icons to build step Signed-off-by: Roman <ixrock@gmail.com> * Fix integration tests (#1080) * Fix integration tests Signed-off-by: Lauri Nevala <lauri.nevala@gmail.com> * Update integration/helpers/utils.ts Co-authored-by: Sebastian Malton <sebastian@malton.name> Signed-off-by: Lauri Nevala <lauri.nevala@gmail.com> Co-authored-by: Sebastian Malton <sebastian@malton.name> * fix-build: invisible app icon when there are more files within "build/icons/*.png" Signed-off-by: Roman <ixrock@gmail.com> * chore Signed-off-by: Roman <ixrock@gmail.com> * yarn i18n.extract Signed-off-by: Roman <ixrock@gmail.com> * clean-up Signed-off-by: Roman <ixrock@gmail.com> * navigation refactoring, move out `buildUrl` to common/utils so `react` and `react-router` not required as package.json dependecies in runtime (main) Signed-off-by: Roman <ixrock@gmail.com> * Ignore namespace query param on integration tests (#1109) Signed-off-by: Lauri Nevala <lauri.nevala@gmail.com> * merge-conflicts fixes Signed-off-by: Roman <ixrock@gmail.com> * support page fixes Signed-off-by: Roman <ixrock@gmail.com> * make eslint happy again Signed-off-by: Roman <ixrock@gmail.com> Co-authored-by: Lauri Nevala <lauri.nevala@gmail.com> Co-authored-by: Sebastian Malton <sebastian@malton.name>
2025-05-20 05:10:56 +00:00 · 2020-10-27 15:25:29 +02:00
1 parent e2a1bac0ed
commit 334815f71a
@@ -1,19 +1,19 @@
 import { autoUpdater } from "electron-updater"
 import logger from "./logger"

-export default class AppUpdater {
+export class AppUpdater {
+  static readonly defaultUpdateIntervalMs = 1000 * 60 * 60 * 24 // once a day

-  protected updateInterval: number = (1000 * 60 * 60 * 24) // once a day
+  static checkForUpdates() {
+    return autoUpdater.checkForUpdatesAndNotify()
+  }

-  constructor() {
+  constructor(protected updateInterval = AppUpdater.defaultUpdateIntervalMs) {
    autoUpdater.logger = logger
  }

  public start() {
-    setInterval(() => {
-      autoUpdater.checkForUpdatesAndNotify()
-    }, this.updateInterval)
-
-    return autoUpdater.checkForUpdatesAndNotify()
+    setInterval(AppUpdater.checkForUpdates, this.updateInterval)
+    return AppUpdater.checkForUpdates();
  }
 }
@@ -10,7 +10,7 @@ import path from "path"
 import { LensProxy } from "./lens-proxy"
 import { WindowManager } from "./window-manager";
 import { ClusterManager } from "./cluster-manager";
-import AppUpdater from "./app-updater"
+import { AppUpdater } from "./app-updater"
 import { shellSync } from "./shell-sync"
 import { getFreePort } from "./port"
 import { mangleProxyEnv } from "./proxy-env"
@@ -24,45 +24,46 @@ import { extensionLoader } from "../extensions/extension-loader";
 import logger from "./logger"

 const workingDir = path.join(app.getPath("appData"), appName);
+let proxyPort: number;
+let proxyServer: LensProxy;
+let clusterManager: ClusterManager;
+let windowManager: WindowManager;
+
 app.setName(appName);
 if (!process.env.CICD) {
  app.setPath("userData", workingDir);
 }

-let clusterManager: ClusterManager;
-let proxyServer: LensProxy;
-
 mangleProxyEnv()
 if (app.commandLine.getSwitchValue("proxy-server") !== "") {
  process.env.HTTPS_PROXY = app.commandLine.getSwitchValue("proxy-server")
 }

-async function main() {
-  await shellSync();
+app.on("ready", async () => {
  logger.info(`🚀 Starting Lens from "${workingDir}"`)
+  await shellSync();

  const updater = new AppUpdater()
  updater.start();

  registerFileProtocol("static", __static);

-  // find free port
-  let proxyPort: number
-  try {
-    proxyPort = await getFreePort()
-  } catch (error) {
-    logger.error(error)
-    dialog.showErrorBox("Lens Error", "Could not find a free port for the cluster proxy")
-    app.quit();
-  }
-
-  // preload configuration from stores
+  // preload isomorphic stores
  await Promise.all([
    userStore.load(),
    clusterStore.load(),
    workspaceStore.load(),
  ]);

+  // find free port
+  try {
+    proxyPort = await getFreePort()
+  } catch (error) {
+    logger.error(error)
+    dialog.showErrorBox("Lens Error", "Could not find a free port for the cluster proxy")
+    app.exit();
+  }
+
  // create cluster manager
  clusterManager = new ClusterManager(proxyPort);

@@ -72,28 +73,34 @@ async function main() {
  } catch (error) {
    logger.error(`Could not start proxy (127.0.0:${proxyPort}): ${error.message}`)
    dialog.showErrorBox("Lens Error", `Could not start proxy (127.0.0:${proxyPort}): ${error.message || "unknown error"}`)
-    app.quit();
+    app.exit();
  }

-  // create window manager and open app
-  LensExtensionsApi.windowManager = new WindowManager(proxyPort);
+  windowManager = new WindowManager(proxyPort);

+  LensExtensionsApi.windowManager = windowManager; // expose to extensions
  extensionLoader.loadOnMain()
  extensionLoader.extensions.replace(await extensionManager.load())
  extensionLoader.broadcastExtensions()

  setTimeout(() => {
-    appEventBus.emit({name: "app", action: "start"})
+    appEventBus.emit({ name: "app", action: "start" })
  }, 1000)
-}
+});

-app.on("ready", main);
+app.on("activate", (event, hasVisibleWindows) => {
+  logger.info('APP:ACTIVATE', { hasVisibleWindows })
+  if (!hasVisibleWindows) {
+    windowManager.initMainWindow();
+  }
+});

-app.on("will-quit", async (event) => {
-  event.preventDefault(); // To allow mixpanel sending to be executed
-  if (proxyServer) proxyServer.close()
-  if (clusterManager) clusterManager.stop()
-  app.exit();
+// Quit app on Cmd+Q (MacOS)
+app.on("will-quit", (event) => {
+  logger.info('APP:QUIT');
+  event.preventDefault(); // prevent app's default shutdown (e.g. required for telemetry, etc.)
+  clusterManager?.stop(); // close cluster connections
+  return; // skip exit to make tray work, to quit go to app's global menu or tray's menu
 })

 // Extensions-api runtime exports
@@ -12,11 +12,27 @@ import logger from "./logger";
 export type MenuTopId = "mac" | "file" | "edit" | "view" | "help"

 export function initMenu(windowManager: WindowManager) {
-  autorun(() => buildMenu(windowManager), {
+  return autorun(() => buildMenu(windowManager), {
    delay: 100
  });
 }

+export function showAbout(browserWindow: BrowserWindow) {
+  const appInfo = [
+    `${appName}: ${app.getVersion()}`,
+    `Electron: ${process.versions.electron}`,
+    `Chrome: ${process.versions.chrome}`,
+    `Copyright 2020 Mirantis, Inc.`,
+  ]
+  dialog.showMessageBoxSync(browserWindow, {
+    title: `${isWindows ? " ".repeat(2) : ""}${appName}`,
+    type: "info",
+    buttons: ["Close"],
+    message: `Lens`,
+    detail: appInfo.join("\r\n")
+  })
+}
+
 export function buildMenu(windowManager: WindowManager) {
  function ignoreOnMac(menuItems: MenuItemConstructorOptions[]) {
    if (isMac) return [];
@@ -32,28 +48,9 @@ export function buildMenu(windowManager: WindowManager) {
    return menuItems;
  }

-  function navigate(url: string) {
+  async function navigate(url: string) {
    logger.info(`[MENU]: navigating to ${url}`);
-    windowManager.navigate({
-      channel: "menu:navigate",
-      url: url,
-    })
-  }
-
-  function showAbout(browserWindow: BrowserWindow) {
-    const appInfo = [
-      `${appName}: ${app.getVersion()}`,
-      `Electron: ${process.versions.electron}`,
-      `Chrome: ${process.versions.chrome}`,
-      `Copyright 2020 Mirantis, Inc.`,
-    ]
-    dialog.showMessageBoxSync(browserWindow, {
-      title: `${isWindows ? " ".repeat(2) : ""}${appName}`,
-      type: "info",
-      buttons: ["Close"],
-      message: `Lens`,
-      detail: appInfo.join("\r\n")
-    })
+    await windowManager.navigate(url);
  }

  const macAppMenu: MenuItemConstructorOptions = {
@@ -80,7 +77,13 @@ export function buildMenu(windowManager: WindowManager) {
      { role: 'hideOthers' },
      { role: 'unhide' },
      { type: 'separator' },
-      { role: 'quit' }
+      {
+        label: 'Quit',
+        accelerator: 'Cmd+Q',
+        click() {
+          app.exit(); // force quit since might be blocked within app.on("will-quit")
+        }
+      }
    ]
  };

@@ -118,7 +121,9 @@ export function buildMenu(windowManager: WindowManager) {
        },
        { type: 'separator' },
        { role: 'quit' }
-      ])
+      ]),
+      { type: 'separator' },
+      { role: 'close' } // close current window
    ]
  };

@@ -158,7 +163,7 @@ export function buildMenu(windowManager: WindowManager) {
        label: 'Reload',
        accelerator: 'CmdOrCtrl+R',
        click() {
-          windowManager.reload({ channel: "menu:reload" });
+          windowManager.reload();
        }
      },
      { role: 'toggleDevTools' },
@@ -209,7 +214,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 })
@@ -0,0 +1,126 @@
+import path from "path"
+import packageInfo from "../../package.json"
+import { app, dialog, Menu, NativeImage, nativeTheme, Tray } from "electron"
+import { autorun } from "mobx";
+import { showAbout } from "./menu";
+import { AppUpdater } from "./app-updater";
+import { WindowManager } from "./window-manager";
+import { clusterStore } from "../common/cluster-store";
+import { workspaceStore } from "../common/workspace-store";
+import { preferencesURL } from "../renderer/components/+preferences/preferences.route";
+import { clusterViewURL } from "../renderer/components/cluster-manager/cluster-view.route";
+import logger from "./logger";
+import { isDevelopment } from "../common/vars";
+
+// note: instance of Tray should be saved somewhere, otherwise it disappears
+export let tray: Tray;
+
+// refresh icon when MacOS dark/light theme has changed
+nativeTheme.on("updated", () => tray?.setImage(getTrayIcon()));
+
+export function getTrayIcon(isDark = nativeTheme.shouldUseDarkColors): string {
+  return path.resolve(
+    __static,
+    isDevelopment ? "../build/tray" : "icons", // copied within electron-builder extras
+    `tray_icon${isDark ? "_dark" : ""}.png`
+  )
+}
+
+export function initTray(windowManager: WindowManager) {
+  const dispose = autorun(() => {
+    try {
+      const menu = createTrayMenu(windowManager);
+      buildTray(getTrayIcon(), menu);
+    } catch (err) {
+      logger.error(`[TRAY]: building failed: ${err}`);
+    }
+  })
+  return () => {
+    dispose();
+    tray?.destroy();
+    tray = null;
+  }
+}
+
+export function buildTray(icon: string | NativeImage, menu: Menu) {
+  if (!tray) {
+    tray = new Tray(icon)
+    tray.setToolTip(packageInfo.description)
+    tray.setIgnoreDoubleClickEvents(true);
+  }
+
+  tray.setImage(icon);
+  tray.setContextMenu(menu);
+
+  return tray;
+}
+
+export function createTrayMenu(windowManager: WindowManager): Menu {
+  return Menu.buildFromTemplate([
+    {
+      label: "About Lens",
+      async click() {
+        // note: argument[1] (browserWindow) not available when app is not focused / hidden
+        const browserWindow = await windowManager.ensureMainWindow();
+        showAbout(browserWindow);
+      },
+    },
+    { type: 'separator' },
+    {
+      label: "Open Lens",
+      async click() {
+        await windowManager.ensureMainWindow()
+      },
+    },
+    {
+      label: "Preferences",
+      click() {
+        windowManager.navigate(preferencesURL());
+      },
+    },
+    {
+      label: "Clusters",
+      submenu: workspaceStore.workspacesList
+        .filter(workspace => clusterStore.getByWorkspaceId(workspace.id).length > 0) // hide empty workspaces
+        .map(workspace => {
+          const clusters = clusterStore.getByWorkspaceId(workspace.id);
+          return {
+            label: workspace.name,
+            toolTip: workspace.description,
+            submenu: clusters.map(cluster => {
+              const { id: clusterId, preferences: { clusterName: label }, online, workspace } = cluster;
+              return {
+                label: `${online ? '✓' : '\x20'.repeat(3)/*offset*/}${label}`,
+                toolTip: clusterId,
+                async click() {
+                  workspaceStore.setActive(workspace);
+                  clusterStore.setActive(clusterId);
+                  windowManager.navigate(clusterViewURL({ params: { clusterId } }));
+                }
+              }
+            })
+          }
+        }),
+    },
+    {
+      label: "Check for updates",
+      async click() {
+        const result = await AppUpdater.checkForUpdates();
+        if (!result) {
+          const browserWindow = await windowManager.ensureMainWindow();
+          dialog.showMessageBoxSync(browserWindow, {
+            message: "No updates available",
+            type: "info",
+          })
+        }
+      },
+    },
+    { type: 'separator' },
+    {
+      label: 'Quit App',
+      click() {
+        app.exit();
+      }
+    }
+  ]);
+}
@@ -1,95 +1,140 @@
 import type { ClusterId } from "../common/cluster-store";
 import { clusterStore } from "../common/cluster-store";
-import { BrowserWindow, dialog, ipcMain, shell, webContents } from "electron"
-import windowStateKeeper from "electron-window-state"
 import { observable } from "mobx";
-import { initMenu } from "./menu";
+import { app, BrowserWindow, dialog, ipcMain, shell, webContents } from "electron"
+import windowStateKeeper from "electron-window-state"
 import { extensionLoader } from "../extensions/extension-loader";
 import { appEventBus } from "../common/event-bus"
+import { initMenu } from "./menu";
+import { initTray } from "./tray";

 export class WindowManager {
-  protected mainView: BrowserWindow;
+  protected mainWindow: BrowserWindow;
  protected splashWindow: BrowserWindow;
  protected windowState: windowStateKeeper.State;
+  protected disposers: Record<string, Function> = {};

  @observable activeClusterId: ClusterId;

  constructor(protected proxyPort: number) {
+    this.bindEvents();
+    this.initMenu();
+    this.initTray();
+    this.initMainWindow();
+  }
+
+  get mainUrl() {
+    return `http://localhost:${this.proxyPort}`
+  }
+
+  async initMainWindow(showSplash = true) {
    // Manage main window size and position with state persistence
-    this.windowState = windowStateKeeper({
-      defaultHeight: 900,
-      defaultWidth: 1440,
-    });
+    if (!this.windowState) {
+      this.windowState = windowStateKeeper({
+        defaultHeight: 900,
+        defaultWidth: 1440,
+      });
+    }
+    if (!this.mainWindow) {
+      // show icon in dock (mac-os only)
+      app.dock?.show();

-    const { width, height, x, y } = this.windowState;
-    this.mainView = new BrowserWindow({
-      x, y, width, height,
-      show: false,
-      minWidth: 700,  // accommodate 800 x 600 display minimum
-      minHeight: 500, // accommodate 800 x 600 display minimum
-      titleBarStyle: "hidden",
-      backgroundColor: "#1e2124",
-      webPreferences: {
-        nodeIntegration: true,
-        nodeIntegrationInSubFrames: true,
-        enableRemoteModule: true,
-      },
-    });
-    this.windowState.manage(this.mainView);
+      const { width, height, x, y } = this.windowState;
+      this.mainWindow = new BrowserWindow({
+        x, y, width, height,
+        show: false,
+        minWidth: 700,  // accommodate 800 x 600 display minimum
+        minHeight: 500, // accommodate 800 x 600 display minimum
+        titleBarStyle: "hidden",
+        backgroundColor: "#1e2124",
+        webPreferences: {
+          nodeIntegration: true,
+          nodeIntegrationInSubFrames: true,
+          enableRemoteModule: true,
+        },
+      });
+      this.windowState.manage(this.mainWindow);

-    // open external links in default browser (target=_blank, window.open)
-    this.mainView.webContents.on("new-window", (event, url) => {
-      event.preventDefault();
-      shell.openExternal(url);
-    });
-    this.mainView.webContents.on("dom-ready", () => {
-      extensionLoader.broadcastExtensions()
-    })
-    this.mainView.on("focus", () => {
-      appEventBus.emit({name: "app", action: "focus"})
-    })
-    this.mainView.on("blur", () => {
-      appEventBus.emit({name: "app", action: "blur"})
-    })
+      // open external links in default browser (target=_blank, window.open)
+      this.mainWindow.webContents.on("new-window", (event, url) => {
+        event.preventDefault();
+        shell.openExternal(url);
+      });
+      this.mainWindow.webContents.on("dom-ready", () => {
+        extensionLoader.broadcastExtensions()
+      })
+      this.mainWindow.on("focus", () => {
+        appEventBus.emit({name: "app", action: "focus"})
+      })
+      this.mainWindow.on("blur", () => {
+        appEventBus.emit({name: "app", action: "blur"})
+      })

+      // clean up
+      this.mainWindow.on("closed", () => {
+        this.windowState.unmanage();
+        this.mainWindow = null;
+        this.splashWindow = null;
+        app.dock?.hide(); // hide icon in dock (mac-os)
+      })
+    }
+    try {
+      if (showSplash) await this.showSplash();
+      await this.mainWindow.loadURL(this.mainUrl);
+      this.mainWindow.show();
+      this.splashWindow?.close();
+    } catch (err) {
+      dialog.showErrorBox("ERROR!", err.toString())
+    }
+  }
+
+  protected async initMenu() {
+    this.disposers.menuAutoUpdater = initMenu(this);
+  }
+
+  protected initTray() {
+    this.disposers.trayAutoUpdater = initTray(this);
+  }
+
+  protected bindEvents() {
    // track visible cluster from ui
    ipcMain.on("cluster-view:current-id", (event, clusterId: ClusterId) => {
      this.activeClusterId = clusterId;
    });
-
-    // load & show app
-    this.showMain();
-    initMenu(this);
  }

-  navigate({ url, channel, frameId }: { url: string, channel: string, frameId?: number }) {
+  async ensureMainWindow(): Promise<BrowserWindow> {
+    if (!this.mainWindow) await this.initMainWindow();
+    this.mainWindow.show();
+    return this.mainWindow;
+  }
+
+  sendToView({ channel, frameId, data = [] }: { channel: string, frameId?: number, data?: any[] }) {
    if (frameId) {
-      this.mainView.webContents.sendToFrame(frameId, channel, url);
+      this.mainWindow.webContents.sendToFrame(frameId, channel, ...data);
    } else {
-      this.mainView.webContents.send(channel, url);
+      this.mainWindow.webContents.send(channel, ...data);
    }
  }

-  reload({ channel }: { channel: string }) {
+  async navigate(url: string, frameId?: number) {
+    await this.ensureMainWindow();
+    this.sendToView({
+      channel: "menu:navigate",
+      frameId: frameId,
+      data: [url],
+    })
+  }
+
+  reload() {
    const frameId = clusterStore.getById(this.activeClusterId)?.frameId;
    if (frameId) {
-      this.mainView.webContents.sendToFrame(frameId, channel);
+      this.sendToView({ channel: "menu:reload", frameId });
    } else {
      webContents.getFocusedWebContents()?.reload();
    }
  }

-  async showMain() {
-    try {
-      await this.showSplash();
-      await this.mainView.loadURL(`http://localhost:${this.proxyPort}`)
-      this.mainView.show()
-      this.splashWindow.close()
-    } catch (err) {
-      dialog.showErrorBox("ERROR!", err.toString())
-    }
-  }
-
  async showSplash() {
    if (!this.splashWindow) {
      this.splashWindow = new BrowserWindow({
@@ -110,8 +155,13 @@ export class WindowManager {
  }

  destroy() {
-    this.windowState.unmanage();
+    this.mainWindow.destroy();
    this.splashWindow.destroy();
-    this.mainView.destroy();
+    this.mainWindow = null;
+    this.splashWindow = null;
+    Object.entries(this.disposers).forEach(([name, dispose]) => {
+      dispose();
+      delete this.disposers[name]
+    });
  }
 }