Add context menu in topbar

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/main/index.ts

@@ -26,7 +26,7 @@ import { initialize as initializeRemote } from "@electron/remote/main";
 import * as Mobx from "mobx";
 import * as LensExtensionsCommonApi from "../extensions/common-api";
 import * as LensExtensionsMainApi from "../extensions/main-api";
-import { app, autoUpdater, dialog, powerMonitor } from "electron";
+import { app, autoUpdater, BrowserWindow, dialog, Menu, powerMonitor } from "electron";
 import { appName, isIntegrationTesting, isMac, isWindows, productName } from "../common/vars";
 import { LensProxy } from "./lens-proxy";
 import { WindowManager } from "./window-manager";
@@ -61,7 +61,7 @@ import { FilesystemProvisionerStore } from "./extension-filesystem";
 import { SentryInit } from "../common/sentry";
 import { ensureDir } from "fs-extra";
 import { Router } from "./router";
-import { initMenu } from "./menu";
+import { getAppMenu, initMenu } from "./menu";
 import { initTray } from "./tray";
 import { kubeApiRequest, shellApiRequest, ShellRequestAuthenticator } from "./proxy-functions";
 import { AppPaths } from "../common/app-paths";
@@ -256,6 +256,12 @@ app.on("ready", async () => {
     LensProtocolRouterMain.getInstance().rendererLoaded = true;
   });
 
+  ipcMainOn("show-app-context-menu", (event) => {
+    const menu = Menu.buildFromTemplate(getAppMenu(windowManager));
+
+    menu.popup(BrowserWindow.fromWebContents(event.sender) as any);
+  });
+
   logger.info("🧩 Initializing extensions");
 
   // call after windowManager to see splash earlier

src/main/menu.ts

@@ -61,7 +61,7 @@ export function showAbout(browserWindow: BrowserWindow) {
   });
 }
 
-export function buildMenu(windowManager: WindowManager) {
+export function getAppMenu(windowManager: WindowManager) {
   function ignoreIf(check: boolean, menuItems: MenuItemConstructorOptions[]) {
     return check ? [] : menuItems;
   }
@@ -316,5 +316,10 @@ export function buildMenu(windowManager: WindowManager) {
     appMenu.delete("mac");
   }
 
-  Menu.setApplicationMenu(Menu.buildFromTemplate([...appMenu.values()]));
+  return [...appMenu.values()];
+
+}
+
+export function buildMenu(windowManager: WindowManager) {
+  Menu.setApplicationMenu(Menu.buildFromTemplate(getAppMenu(windowManager)));
 }

src/main/window-manager.ts

@@ -29,7 +29,7 @@ import { delay, iter, Singleton } from "../common/utils";
 import { ClusterFrameInfo, clusterFrameMap } from "../common/cluster-frames";
 import { IpcRendererNavigationEvents } from "../renderer/navigation/events";
 import logger from "./logger";
-import { productName } from "../common/vars";
+import { isWindows, productName } from "../common/vars";
 import { LensProxy } from "./lens-proxy";
 
 function isHideable(window: BrowserWindow | null): boolean {
@@ -81,7 +81,7 @@ export class WindowManager extends Singleton {
         show: false,
         minWidth: 700,  // accommodate 800 x 600 display minimum
         minHeight: 500, // accommodate 800 x 600 display minimum
-        titleBarStyle: "hiddenInset",
+        titleBarStyle: isWindows ? "hidden" : "hiddenInset",
         backgroundColor: "#1e2124",
         webPreferences: {
           nodeIntegration: true,

src/renderer/components/layout/topbar.tsx

@@ -26,7 +26,7 @@ import { TopBarRegistry } from "../../../extensions/registries";
 import { Icon } from "../icon";
 import { webContents, getCurrentWindow } from "@electron/remote";
 import { observable } from "mobx";
-import { ipcRendererOn } from "../../../common/ipc";
+import { broadcastMessage, ipcRendererOn } from "../../../common/ipc";
 import { watchHistoryState } from "../../remote-helpers/history-updater";
 import { isActiveRoute, navigate } from "../../navigation";
 import { catalogRoute, catalogURL } from "../../../common/routes";
@@ -70,6 +70,10 @@ export const TopBar = observer(({ children, ...rest }: Props) => {
     );
   };
 
+  const openContextMenu = () => {
+    broadcastMessage("show-app-context-menu");
+  };
+
   const goHome = () => {
     navigate(catalogURL());
   };
@@ -101,6 +105,12 @@ export const TopBar = observer(({ children, ...rest }: Props) => {
   return (
     <div className={styles.topBar} {...rest}>
       <div className={styles.tools} onDoubleClick={windowSizeToggle}>
+        <Icon
+          data-testid="menu-button"
+          material="menu"
+          className="ml-4"
+          onClick={openContextMenu}
+        />
         <Icon
           data-testid="home-button"
           material="home"