Merge remote-tracking branch 'upstream/master' into make-menu-registry-obsolete

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

RELEASE_GUIDE.md

@@ -6,6 +6,13 @@ Lens releases are built by CICD automatically on git tags. The typical release p
 
 1. If doing a patch release checkout the `release/vMAJOR.MINOR` branch for the appropriate `MAJOR`/`MINOR` version and manually `cherry-pick` the PRs required for the patch that were commited to master. If there are any conflicts they must be resolved manually. If necessary, get assistance from the PR authors.
 
+This can be helped (if you have the `gh` CLI installed) by running:
+```
+gh api -XGET "/repos/lensapp/lens/pulls?state=closed&per_page=100" | jq -r '[.[] | select(.milestone.title == "<VERSION>") | select((.merged_at | type) == "string")] | sort_by(.merged_at) | map(.merge_commit_sha) | join(" ")'
+```
+
+But you will probably need to verify that all the PRs have correct milestones.
+
 1. From a clean and up to date `master` (or `release/vMAJOR.MINOR` if doing a patch release) run `npm version <version-type> --git-tag-version false` where `<version-type>` is one of the following:
     - `major`
     - `minor`
@@ -14,14 +21,27 @@ Lens releases are built by CICD automatically on git tags. The typical release p
     - `preminor [--preid=<prerelease-id>]`
     - `prepatch [--preid=<prerelease-id>]`
     - `prerelease [--preid=<prerelease-id>]`
-      
+
       where `<prerelease-id>` is generally one of:
         - `alpha`
         - `beta`
         - `rc`
-  
+
     This assumes origin is set to https://github.com/lensapp/lens.git. If not then set GIT_REMOTE to the remote that is set to https://github.com/lensapp/lens.git. For example run `GIT_REMOTE=upstream npm version ...`
 1. Open the PR (git should have printed a link to GitHub in the console) with the contents of all the accepted PRs since the last release. The PR description needs to be filled with the draft release description. From https://github.com/lensapp/lens click on Releases, the draft release should be first in the list, click `Edit` and copy/paste the markdown to the PR description. Add the `skip-changelog` label and click `Create Pull Request`. If this is a patch release be sure to set the PR base branch to `release/vMAJOR.MINOR` instead of `master`.
+
+    It might also help, if the release drafter isn't updating correctly. To grab the data for the PR description using `gh` and `jq`. You can run the following command to get all the titles:
+
+    ```
+    gh api -XGET "/repos/lensapp/lens/pulls?state=closed&per_page=100" | jq -r '[.[] | select(.milestone.title == "<VERSION>") | select((.merged_at | type) == "string")] | sort_by(.merged_at) | map([.title, " (**#", .number, "**) ", .user.html_url] | join ("")) | join("\n")' | pbcopy
+    ```
+
+    And if you want to specify just bug fixes then you can add the following to the end of the `[ ... ]` section in the above command (before the `sort_by`) to just have bug fixes. Switch to `== "enhancement"` for enhancements and `all()` with `. != "bug && . != "enhancement"` for maintanence sections.
+
+    ```
+    | select(any(.labels | map(.name)[]; . == "bug"))
+    ```
+
 1. After the PR is accepted and passes CI (and before merging), go to the same branch and run `make tag-release` (set GIT_REMOTE if necessary). This additionally triggers the azure jobs to build the binaries and put them on S3.
 1. If the CI fails at this stage the problem needs to be fixed. Sometimes an azure job fails due to outside service issues (e.g. Apple signing occasionally fails), in which case the specific azure job can be rerun from https://dev.azure.com/lensapp/lensapp/_build. Otherwise changes to the codebase may need to be done and committed to the release branch and pushed to https://github.com/lensapp/lens. CI will run again. As well the release tag needs to be manually set to this new commit. You can do something like:
     - `git push origin :refs/tags/vX.Y.Z-beta.N` (removes the tag from https://github.com/lensapp/lens)
@@ -43,4 +63,4 @@ Other tasks
  - generate a changelog from the prerelease descriptions (for major/minor releases)
  - announce the release on lens and lens-hq slack channels (release is announced automatically on the community slack lens channel through the above publishing process)
  - announce on lens-hq that master is open for PR merges for the next release (for major/minor releases)
- - update issues on github (bump those that did not make it into the release to a subsequent release) (for major/minor/patch releases)
+ - update issues on github (bump those that did not make it into the release to a subsequent release) (for major/minor/patch releases)

package.json

@@ -196,10 +196,10 @@
     "@hapi/call": "^8.0.1",
     "@hapi/subtext": "^7.0.3",
     "@kubernetes/client-node": "^0.16.1",
-    "@sentry/electron": "^2.5.4",
-    "@sentry/integrations": "^6.15.0",
     "@ogre-tools/injectable": "^1.4.1",
     "@ogre-tools/injectable-react": "^1.4.1",
+    "@sentry/electron": "^2.5.4",
+    "@sentry/integrations": "^6.15.0",
     "abort-controller": "^3.0.0",
     "auto-bind": "^4.0.0",
     "autobind-decorator": "^2.4.0",
@@ -230,7 +230,7 @@
     "mobx": "^6.3.7",
     "mobx-observable-history": "^2.0.3",
     "mobx-react": "^7.2.1",
-    "mock-fs": "^4.14.0",
+    "mock-fs": "^5.1.2",
     "moment": "^2.29.1",
     "moment-timezone": "^0.5.34",
     "monaco-editor": "^0.29.1",
@@ -271,7 +271,7 @@
     "@material-ui/lab": "^4.0.0-alpha.60",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
     "@sentry/types": "^6.14.1",
-    "@testing-library/jest-dom": "^5.15.0",
+    "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^13.5.0",
     "@types/byline": "^4.2.33",
@@ -360,7 +360,7 @@
     "node-loader": "^1.0.3",
     "nodemon": "^2.0.14",
     "playwright": "^1.17.1",
-    "postcss": "^8.3.11",
+    "postcss": "^8.4.5",
     "postcss-loader": "4.3.0",
     "postinstall-postinstall": "^2.1.0",
     "progress-bar-webpack-plugin": "^2.1.0",

src/common/cluster-types.ts

@@ -90,7 +90,11 @@ export interface ClusterPreferences extends ClusterPrometheusPreferences {
   terminalCWD?: string;
   clusterName?: string;
   iconOrder?: number;
-  icon?: string;
+  /**
+   * The <img> src for the cluster. If set to `null` that means that it was
+   * cleared by preferences.
+   */
+  icon?: string | null;
   httpsProxy?: string;
   hiddenMetrics?: string[];
   nodeShellImage?: string;

src/common/k8s-api/kube-json-api.ts

@@ -21,7 +21,6 @@
 
 import { JsonApi, JsonApiData, JsonApiError } from "./json-api";
 import type { Response } from "node-fetch";
-import type { Cluster } from "../../main/cluster";
 import { LensProxy } from "../../main/lens-proxy";
 import { apiKubePrefix, isDebugging } from "../vars";
 
@@ -73,7 +72,7 @@ export interface KubeJsonApiError extends JsonApiError {
 }
 
 export class KubeJsonApi extends JsonApi<KubeJsonApiData> {
-  static forCluster(cluster: Cluster): KubeJsonApi {
+  static forCluster(clusterId: string): KubeJsonApi {
     const port = LensProxy.getInstance().port;
 
     return new this({
@@ -82,7 +81,7 @@ export class KubeJsonApi extends JsonApi<KubeJsonApiData> {
       debug: isDebugging,
     }, {
       headers: {
-        "Host": `${cluster.id}.localhost:${port}`,
+        "Host": `${clusterId}.localhost:${port}`,
       },
     });
   }

src/extensions/__tests__/extension-compatibility.test.ts

@@ -19,29 +19,24 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { isCompatibleExtension } from "../extension-compatibility";
+import { rawIsCompatibleExtension } from "../extension-compatibility";
 import { Console } from "console";
 import { stdout, stderr } from "process";
 import type { LensExtensionManifest } from "../lens-extension";
-import { appSemVer } from "../../common/vars";
+import { SemVer } from "semver";
 
 console = new Console(stdout, stderr);
 
 describe("extension compatibility", () => {
   describe("appSemVer with no prerelease tag", () => {
-    beforeAll(() => {
-      appSemVer.major = 5;
-      appSemVer.minor = 0;
-      appSemVer.patch = 3;
-      appSemVer.prerelease = [];
-    });
+    const isCompatibleExtension = rawIsCompatibleExtension(new SemVer("5.0.3"));
 
     it("has no extension comparator", () => {
       const manifest = { name: "extensionName", version: "0.0.1" };
 
       expect(isCompatibleExtension(manifest)).toBe(false);
     });
-    
+
     it.each([
       {
         comparator: "",
@@ -83,19 +78,32 @@ describe("extension compatibility", () => {
   });
 
   describe("appSemVer with prerelease tag", () => {
-    beforeAll(() => {
-      appSemVer.major = 5;
-      appSemVer.minor = 0;
-      appSemVer.patch = 3;
-      appSemVer.prerelease = ["beta", 3];
+    const isCompatibleExtension = rawIsCompatibleExtension(new SemVer("5.0.3-beta.3"));
+
+    it("^5.1.0 should work when lens' version is 5.1.0-latest.123456789", () => {
+      const comparer = rawIsCompatibleExtension(new SemVer("5.1.0-latest.123456789"));
+
+      expect(comparer({ name: "extensionName", version: "0.0.1", engines: { lens: "^5.1.0" }})).toBe(true);
     });
-    
+
+    it("^5.1.0 should not when lens' version is 5.1.0-beta.1.123456789", () => {
+      const comparer = rawIsCompatibleExtension(new SemVer("5.1.0-beta.123456789"));
+
+      expect(comparer({ name: "extensionName", version: "0.0.1", engines: { lens: "^5.1.0" }})).toBe(false);
+    });
+
+    it("^5.1.0 should not when lens' version is 5.1.0-alpha.1.123456789", () => {
+      const comparer = rawIsCompatibleExtension(new SemVer("5.1.0-alpha.123456789"));
+
+      expect(comparer({ name: "extensionName", version: "0.0.1", engines: { lens: "^5.1.0" }})).toBe(false);
+    });
+
     it("has no extension comparator", () => {
       const manifest = { name: "extensionName", version: "0.0.1" };
 
       expect(isCompatibleExtension(manifest)).toBe(false);
     });
-    
+
     it.each([
       {
         comparator: "",
@@ -130,9 +138,7 @@ describe("extension compatibility", () => {
         expected: false,
       },
     ])("extension comparator test: %p", ({ comparator, expected }) => {
-      const manifest: LensExtensionManifest = { name: "extensionName", version: "0.0.1", engines: { lens: comparator }};
-
-      expect(isCompatibleExtension(manifest)).toBe(expected);
+      expect(isCompatibleExtension({ name: "extensionName", version: "0.0.1", engines: { lens: comparator }})).toBe(expected);
     });
   });
 });

src/extensions/extension-compatibility.ts

@@ -19,19 +19,47 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import semver from "semver";
+import semver, { SemVer } from "semver";
 import { appSemVer, isProduction } from "../common/vars";
 import type { LensExtensionManifest } from "./lens-extension";
 
-export function isCompatibleExtension(manifest: LensExtensionManifest): boolean {
-  if (manifest.engines?.lens) {
-    /* include Lens's prerelease tag in the matching so the extension's compatibility is not limited by it */
-    return semver.satisfies(appSemVer, manifest.engines.lens, { includePrerelease: true });
+export function rawIsCompatibleExtension(version: SemVer): (manifest: LensExtensionManifest) => boolean {
+  const { major, minor, patch, prerelease: oldPrelease } = version;
+  let prerelease = "";
+
+  if (oldPrelease.length > 0) {
+    const [first] = oldPrelease;
+
+    if (first === "alpha" || first === "beta" || first === "rc") {
+      /**
+       * Strip the build IDs and "latest" prerelease tag as that is not really
+       * a part of API version
+       */
+      prerelease = `-${oldPrelease.slice(0, 2).join(".")}`;
+    }
   }
 
-  return false;
+  /**
+   * We unfortunately have to format as string because the constructor only
+   * takes an instance or a string.
+   */
+  const strippedVersion = new SemVer(`${major}.${minor}.${patch}${prerelease}`, { includePrerelease: true });
+
+  return (manifest: LensExtensionManifest): boolean => {
+    if (manifest.engines?.lens) {
+      /**
+       * include Lens's prerelease tag in the matching so the extension's
+       * compatibility is not limited by it
+       */
+      return semver.satisfies(strippedVersion, manifest.engines.lens, { includePrerelease: true });
+    }
+
+    return false;
+  };
 }
 
+export const isCompatibleExtension = rawIsCompatibleExtension(appSemVer);
+
 export function isCompatibleBundledExtension(manifest: LensExtensionManifest): boolean {
   return !isProduction || manifest.version === appSemVer.raw;
 }

src/extensions/renderer-api/k8s-api.ts

@@ -55,6 +55,7 @@ export { ClusterRole, clusterRoleApi } from "../../common/k8s-api/endpoints";
 export { ClusterRoleBinding, clusterRoleBindingApi } from "../../common/k8s-api/endpoints";
 export { CustomResourceDefinition, crdApi } from "../../common/k8s-api/endpoints";
 export { KubeObjectStatusLevel } from "./kube-object-status";
+export { KubeJsonApi } from "../../common/k8s-api/kube-json-api";
 
 // types
 export type { ILocalKubeApiConfig, IRemoteKubeApiConfig, IKubeApiCluster } from "../../common/k8s-api/kube-api";

src/main/cluster-manager.ts

@@ -136,11 +136,16 @@ export class ClusterManager extends Singleton {
       entity.spec.metrics.prometheus = prometheus;
     }
 
-    // Only set the icon if the preference is set. If the preference is not set
-    // then let the source determine if a cluster has an icon.
     if (cluster.preferences.icon) {
       entity.spec.icon ??= {};
       entity.spec.icon.src = cluster.preferences.icon;
+    } else if (cluster.preferences.icon === null) {
+      /**
+       * NOTE: only clear the icon if set to `null` by ClusterIconSettings.
+       * We can then also clear that value too
+       */
+      entity.spec.icon = undefined;
+      cluster.preferences.icon = undefined;
     }
 
     catalogEntityRegistry.items.splice(index, 1, entity);
@@ -177,7 +182,8 @@ export class ClusterManager extends Singleton {
     }
   }
 
-  @action syncClustersFromCatalog(entities: KubernetesCluster[]) {
+  @action
+  protected syncClustersFromCatalog(entities: KubernetesCluster[]) {
     for (const entity of entities) {
       const cluster = this.store.getById(entity.metadata.uid);
 

src/main/index.ts

@@ -102,7 +102,10 @@ configurePackages();
 mangleProxyEnv();
 
 logger.debug("[APP-MAIN] initializing ipc main handlers");
-initializers.initIpcMainHandlers();
+
+const menuItems = di.inject(electronMenuItemsInjectable);
+
+initializers.initIpcMainHandlers(menuItems);
 
 if (app.commandLine.getSwitchValue("proxy-server") !== "") {
   process.env.HTTPS_PROXY = app.commandLine.getSwitchValue("proxy-server");
@@ -239,8 +242,6 @@ app.on("ready", async () => {
   logger.info("🖥️  Starting WindowManager");
   const windowManager = WindowManager.createInstance();
 
-  const menuItems = di.inject(electronMenuItemsInjectable);
-
   onQuitCleanup.push(
     initMenu(windowManager, menuItems),
     initTray(windowManager),

src/main/initializers/ipc.ts

@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { BrowserWindow, dialog, IpcMainInvokeEvent } from "electron";
+import { BrowserWindow, dialog, IpcMainInvokeEvent, Menu } from "electron";
 import { clusterFrameMap } from "../../common/cluster-frames";
 import { clusterActivateHandler, clusterSetFrameIdHandler, clusterVisibilityHandler, clusterRefreshHandler, clusterDisconnectHandler, clusterKubectlApplyAllHandler, clusterKubectlDeleteAllHandler, clusterDeleteHandler, clusterSetDeletingHandler, clusterClearDeletingHandler } from "../../common/cluster-ipc";
 import type { ClusterId } from "../../common/cluster-types";
@@ -30,12 +30,15 @@ import { catalogEntityRegistry } from "../catalog";
 import { pushCatalogToRenderer } from "../catalog-pusher";
 import { ClusterManager } from "../cluster-manager";
 import { ResourceApplier } from "../resource-applier";
-import { WindowManager } from "../window-manager";
+import { IpcMainWindowEvents, WindowManager } from "../window-manager";
 import path from "path";
 import { remove } from "fs-extra";
 import { AppPaths } from "../../common/app-paths";
+import { getAppMenu } from "../menu/menu";
+import type { MenuRegistration } from "../menu/menu-registration";
+import type { IComputedValue } from "mobx";
 
-export function initIpcMainHandlers() {
+export function initIpcMainHandlers(electronMenuItems: IComputedValue<MenuRegistration[]>) {
   ipcMainHandle(clusterActivateHandler, (event, clusterId: ClusterId, force = false) => {
     return ClusterStore.getInstance()
       .getById(clusterId)
@@ -148,4 +151,16 @@ export function initIpcMainHandlers() {
 
     return dialog.showOpenDialog(BrowserWindow.getFocusedWindow(), dialogOpts);
   });
+
+  ipcMainOn(IpcMainWindowEvents.OPEN_CONTEXT_MENU, async (event) => {
+    const menu = Menu.buildFromTemplate(getAppMenu(WindowManager.getInstance(), electronMenuItems.get()));
+    const options = {
+      ...BrowserWindow.fromWebContents(event.sender),
+      // Center of the topbar menu icon
+      x: 20,
+      y: 20,
+    } as Electron.PopupOptions;
+
+    menu.popup(options);
+  });
 }

src/main/lens-proxy.ts

@@ -50,6 +50,24 @@ export function isLongRunningRequest(reqUrl: string) {
   return getBoolean(url.searchParams, watchParam) || getBoolean(url.searchParams, followParam);
 }
 
+/**
+ * This is the list of ports that chrome considers unsafe to allow HTTP
+ * conntections to. Because they are the standard ports for processes that are
+ * too forgiving in the connection types they accept.
+ *
+ * If we get one of these ports, the easiest thing to do is to just try again.
+ *
+ * Source: https://chromium.googlesource.com/chromium/src.git/+/refs/heads/main/net/base/port_util.cc
+ */
+const disallowedPorts = new Set([
+  1, 7, 9, 11, 13, 15, 17, 19, 20, 21, 22, 23, 25, 37, 42, 43, 53, 69, 77, 79,
+  87, 95, 101, 102, 103, 104, 109, 110, 111, 113, 115, 117, 119, 123, 135, 137,
+  139, 143, 161, 179, 389, 427, 465, 512, 513, 514, 515, 526, 530, 531, 532,
+  540, 548, 554, 556, 563, 587, 601, 636, 989, 990, 993, 995, 1719, 1720, 1723,
+  2049, 3659, 4045, 5060, 5061, 6000, 6566, 6665, 6666, 6667, 6668, 6669, 6697,
+  10080,
+]);
+
 export class LensProxy extends Singleton {
   protected origin: string;
   protected proxyServer: http.Server;
@@ -91,12 +109,13 @@ export class LensProxy extends Singleton {
   }
 
   /**
-   * Starts the lens proxy.
-   * @resolves After the server is listening
-   * @rejects if there is an error before that happens
+   * Starts to listen on an OS provided port. Will reject if the server throws
+   * an error.
+   *
+   * Resolves with the port number that was picked
    */
-  listen(): Promise<void> {
-    return new Promise<void>((resolve, reject) => {
+  private attemptToListen(): Promise<number> {
+    return new Promise<number>((resolve, reject) => {
       this.proxyServer.listen(0, "127.0.0.1");
 
       this.proxyServer
@@ -113,7 +132,7 @@ export class LensProxy extends Singleton {
 
           this.port = port;
           appEventBus.emit({ name: "lens-proxy", action: "listen", params: { port }});
-          resolve();
+          resolve(port);
         })
         .once("error", (error) => {
           logger.info(`[LENS-PROXY]: Proxy server failed to start: ${error}`);
@@ -122,8 +141,40 @@ export class LensProxy extends Singleton {
     });
   }
 
+  /**
+   * Starts the lens proxy.
+   * @resolves After the server is listening on a good port
+   * @rejects if there is an error before that happens
+   */
+  async listen(): Promise<void> {
+    const seenPorts = new Set<number>();
+
+    while(true) {
+      this.proxyServer?.close();
+      const port = await this.attemptToListen();
+
+      if (!disallowedPorts.has(port)) {
+        // We didn't get a port that would result in an ERR_UNSAFE_PORT error, use it
+        return;
+      }
+
+      logger.warn(`[LENS-PROXY]: Proxy server has with port known to be considered unsafe to connect to by chrome, restarting...`);
+
+      if (seenPorts.has(port)) {
+        /**
+         * Assume that if we have seen the port before, then the OS has looped
+         * through all the ports possible and we will not be able to get a safe
+         * port.
+         */
+        throw new Error("Failed to start LensProxy due to seeing too many unsafe ports. Please restart Lens.");
+      } else {
+        seenPorts.add(port);
+      }
+    }
+  }
+
   close() {
-    logger.info("Closing proxy server");
+    logger.info("[LENS-PROXY]: Closing server");
     this.proxyServer.close();
     this.closed = true;
   }

src/main/menu/menu.ts

@@ -63,7 +63,7 @@ export function showAbout(browserWindow: BrowserWindow) {
   });
 }
 
-export function buildMenu(
+export function getAppMenu(
   windowManager: WindowManager,
   electronMenuItems: MenuRegistration[],
 ) {
@@ -324,5 +324,15 @@ export function buildMenu(
     appMenu.delete("mac");
   }
 
-  Menu.setApplicationMenu(Menu.buildFromTemplate([...appMenu.values()]));
+  return [...appMenu.values()];
+
+}
+
+export function buildMenu(
+  windowManager: WindowManager,
+  electronMenuItems: MenuRegistration[],
+) {
+  Menu.setApplicationMenu(
+    Menu.buildFromTemplate(getAppMenu(windowManager, electronMenuItems)),
+  );
 }

src/main/shell-session/node-shell-session.ts

@@ -64,7 +64,7 @@ export class NodeShellSession extends ShellSession {
     const args = ["exec", "-i", "-t", "-n", "kube-system", this.podName, "--"];
     const nodeApi = new NodesApi({
       objectConstructor: Node,
-      request: KubeJsonApi.forCluster(this.cluster),
+      request: KubeJsonApi.forCluster(this.cluster.id),
     });
     const node = await nodeApi.get({ name: this.nodeName });
     const nodeOs = node.getOperatingSystem();

src/main/shell-session/shell-session.ts

@@ -158,6 +158,8 @@ export abstract class ShellSession {
         cwd,
         env,
         name: "xterm-256color",
+        // TODO: Something else is broken here so we need to force the use of winPty on windows
+        useConpty: false,
       }));
     }
 

src/main/window-manager.ts

@@ -29,9 +29,13 @@ 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 { isMac, productName } from "../common/vars";
 import { LensProxy } from "./lens-proxy";
 
+export const enum IpcMainWindowEvents {
+  OPEN_CONTEXT_MENU = "window:open-context-menu",
+}
+
 function isHideable(window: BrowserWindow | null): boolean {
   return Boolean(window && !window.isDestroyed());
 }
@@ -81,7 +85,8 @@ 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: isMac ? "hiddenInset" : "hidden",
+        frame: isMac,
         backgroundColor: "#1e2124",
         webPreferences: {
           nodeIntegration: true,

src/renderer/api/terminal-api.ts

@@ -144,18 +144,6 @@ export class TerminalApi extends WebSocketApi<TerminalEvents> {
     this.socket.binaryType = "arraybuffer";
   }
 
-  destroy() {
-    if (!this.socket) return;
-    const controlCode = String.fromCharCode(4); // ctrl+d
-
-    this.sendMessage({ type: TerminalChannels.STDIN, data: controlCode });
-    setTimeout(() => super.destroy(), 2000);
-  }
-
-  reconnect() {
-    super.reconnect();
-  }
-
   sendMessage(message: TerminalMessage) {
     return this.send(serialize(message));
   }

src/renderer/bootstrap.tsx

@@ -174,8 +174,6 @@ export async function bootstrap(comp: () => Promise<AppComponent>, di: Dependenc
 
   render(
     <DiContextProvider value={{ di }}>
-      {isMac && <div id="draggable-top" />}
-
       {DefaultProps(App)}
     </DiContextProvider>,
 

src/renderer/components/+network-policies/__tests__/network-policy-details.test.tsx

@@ -53,4 +53,19 @@ describe("NetworkPolicyDetails", () => {
     expect(await findByTestId(container, "egress-0")).toBeInstanceOf(HTMLElement);
     expect(await findByText(container, "foo: bar")).toBeInstanceOf(HTMLElement);
   });
+
+  it("should not crash if egress nodeSelector doesn't have matchLabels", async () => {
+    const spec: NetworkPolicySpec = {
+      egress: [{
+        to: [{
+          namespaceSelector: {},
+        }],
+      }],
+      podSelector: {},
+    };
+    const policy = new NetworkPolicy({ metadata: {} as any, spec } as any);
+    const { container } = render(<NetworkPolicyDetails object={policy} />);
+
+    expect(container).toBeInstanceOf(HTMLElement);
+  });
 });

src/renderer/components/+network-policies/network-policy-details.module.css

@@ -29,4 +29,13 @@
       padding-bottom: 16px;
     }
   }
+
+  ul.policySelectorList {
+    list-style: disc;
+  }
+
+  .policySelectorList ul {
+    list-style: circle;
+    list-style-position: inside;
+  }
 }

src/renderer/components/+network-policies/network-policy-details.tsx

@@ -23,13 +23,15 @@ import styles from "./network-policy-details.module.css";
 
 import React from "react";
 import { DrawerItem, DrawerTitle } from "../drawer";
-import { IPolicyIpBlock, IPolicySelector, NetworkPolicy, NetworkPolicyPeer, NetworkPolicyPort } from "../../../common/k8s-api/endpoints/network-policy.api";
+import { IPolicyIpBlock, NetworkPolicy, NetworkPolicyPeer, NetworkPolicyPort } from "../../../common/k8s-api/endpoints/network-policy.api";
 import { Badge } from "../badge";
 import { SubTitle } from "../layout/sub-title";
 import { observer } from "mobx-react";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
 import { KubeObjectMeta } from "../kube-object-meta";
 import logger from "../../../common/logger";
+import type { LabelMatchExpression, LabelSelector } from "../../../common/k8s-api/kube-object";
+import { isEmpty } from "lodash";
 
 interface Props extends KubeObjectDetailsProps<NetworkPolicy> {
 }
@@ -60,20 +62,57 @@ export class NetworkPolicyDetails extends React.Component<Props> {
     );
   }
 
-  renderIPolicySelector(name: string, selector: IPolicySelector | undefined) {
+  renderMatchLabels(matchLabels: Record<string, string | undefined> | undefined) {
+    if (!matchLabels) {
+      return null;
+    }
+
+    return Object.entries(matchLabels)
+      .map(([key, value]) => <li key={key}>{key}: {value}</li>);
+  }
+
+  renderMatchExpressions(matchExpressions: LabelMatchExpression[] | undefined) {
+    if (!matchExpressions) {
+      return null;
+    }
+
+    return matchExpressions.map(expr => {
+      switch (expr.operator) {
+        case "DoesNotExist":
+        case "Exists":
+          return <li key={expr.key}>{expr.key} ({expr.operator})</li>;
+        case "In":
+        case "NotIn":
+          return (
+            <li key={expr.key}>
+              {expr.key}({expr.operator})
+              <ul>
+                {expr.values.map((value, index) => <li key={index}>{value}</li>)}
+              </ul>
+            </li>
+          );
+      }
+    });
+  }
+
+  renderIPolicySelector(name: string, selector: LabelSelector | undefined) {
     if (!selector) {
       return null;
     }
 
+    const { matchLabels, matchExpressions } = selector;
+
     return (
       <DrawerItem name={name}>
-        {
-          Object
-            .entries(selector.matchLabels)
-            .map(data => data.join(": "))
-            .join(", ")
-          || "(empty)"
-        }
+        <ul className={styles.policySelectorList}>
+          {this.renderMatchLabels(matchLabels)}
+          {this.renderMatchExpressions(matchExpressions)}
+          {
+            (isEmpty(matchLabels) && isEmpty(matchExpressions)) && (
+              <li>(empty)</li>
+            )
+          }
+        </ul>
       </DrawerItem>
     );
   }

src/renderer/components/app.scss

@@ -97,17 +97,6 @@ html, body {
   }
 }
 
-#draggable-top {
-  @include set-draggable;
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: var(--main-layout-header);
-  z-index: 1000;
-  pointer-events: none;
-}
-
 body {
   font: $font-size $font-main;
 }

src/renderer/components/clipboard/clipboard.scss

@@ -1,24 +0,0 @@
-/**
- * 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.
- */
-
-.Clipboard {
-  cursor: pointer;
-}

src/renderer/components/clipboard/clipboard.tsx

@@ -1,88 +0,0 @@
-/**
- * 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 "./clipboard.scss";
-import React from "react";
-import { findDOMNode } from "react-dom";
-import { boundMethod } from "../../../common/utils";
-import { Notifications } from "../notifications";
-import { copyToClipboard } from "../../utils/copyToClipboard";
-import logger from "../../../main/logger";
-import { cssNames } from "../../utils";
-
-export interface CopyToClipboardProps {
-  resetSelection?: boolean;
-  showNotification?: boolean;
-  cssSelectorLimit?: string; // allows to copy partial content with css-selector in children-element context
-  getNotificationMessage?(copiedText: string): React.ReactNode;
-}
-
-export const defaultProps: Partial<CopyToClipboardProps> = {
-  getNotificationMessage(copiedText: string) {
-    return <p>Copied to clipboard: <em>{copiedText}</em></p>;
-  },
-};
-
-export class Clipboard extends React.Component<CopyToClipboardProps> {
-  static displayName = "Clipboard";
-  static defaultProps = defaultProps as object;
-
-  get rootElem(): HTMLElement {
-    // eslint-disable-next-line react/no-find-dom-node
-    return findDOMNode(this) as HTMLElement;
-  }
-
-  get rootReactElem(): React.ReactElement<React.HTMLProps<any>> {
-    return React.Children.only(this.props.children) as React.ReactElement;
-  }
-
-  @boundMethod
-  onClick(evt: React.MouseEvent) {
-    if (this.rootReactElem.props.onClick) {
-      this.rootReactElem.props.onClick(evt); // pass event to children-root-element if any
-    }
-    const { showNotification, resetSelection, getNotificationMessage, cssSelectorLimit } = this.props;
-    const contentElem = this.rootElem.querySelector<any>(cssSelectorLimit) || this.rootElem;
-
-    if (contentElem) {
-      const { copiedText, copied } = copyToClipboard(contentElem, { resetSelection });
-
-      if (copied && showNotification) {
-        Notifications.ok(getNotificationMessage(copiedText));
-      }
-    }
-  }
-
-  render() {
-    try {
-      const rootElem = this.rootReactElem;
-
-      return React.cloneElement(rootElem, {
-        className: cssNames(Clipboard.displayName, rootElem.props.className),
-        onClick: this.onClick,
-      });
-    } catch (err) {
-      logger.error(`Invalid usage components/CopyToClick usage. Children must contain root html element.`, { err: String(err) });
-
-      return this.rootReactElem;
-    }
-  }
-}

src/renderer/components/clipboard/index.ts

@@ -1,22 +0,0 @@
-/**
- * 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 * from "./clipboard";

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

@@ -153,7 +153,7 @@ export class ClusterStatus extends React.Component<Props> {
     return (
       <div className={cssNames(styles.status, "flex column box center align-center justify-center", this.props.className)}>
         <div className="flex items-center column gaps">
-          <h2>{this.entity.getName()}</h2>
+          <h2>{this.entity?.getName() ?? this.cluster.name}</h2>
           {this.renderStatusIcon()}
           {this.renderAuthenticationOutput()}
           {this.renderReconnectionHelp()}

src/renderer/components/cluster-settings/components/cluster-icon-settings.tsx

@@ -65,7 +65,11 @@ export class ClusterIconSetting extends React.Component<Props> {
   }
 
   clearIcon() {
-    this.props.cluster.preferences.icon = undefined;
+    /**
+     * NOTE: this needs to be `null` rather than `undefined` so that we can
+     * tell the difference between it not being there and being cleared.
+     */
+    this.props.cluster.preferences.icon = null;
   }
 
   @boundMethod

src/renderer/components/dialog/logs-dialog.tsx

@@ -24,10 +24,10 @@ import "./logs-dialog.scss";
 import React from "react";
 import { Dialog, DialogProps } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
-import { copyToClipboard } from "../../utils";
 import { Notifications } from "../notifications";
 import { Button } from "../button";
 import { Icon } from "../icon";
+import { clipboard } from "electron";
 
 // todo: make as external BrowserWindow (?)
 
@@ -40,9 +40,8 @@ export class LogsDialog extends React.Component<Props> {
   public logsElem: HTMLElement;
 
   copyToClipboard = () => {
-    if (copyToClipboard(this.logsElem)) {
-      Notifications.ok(`Logs copied to clipboard.`);
-    }
+    clipboard.writeText(this.props.logs);
+    Notifications.ok(`Logs copied to clipboard.`);
   };
 
   render() {

src/renderer/components/kubeconfig-dialog/kubeconfig-dialog.tsx

@@ -25,7 +25,7 @@ import { makeObservable, observable } from "mobx";
 import { observer } from "mobx-react";
 import yaml from "js-yaml";
 import type { ServiceAccount } from "../../../common/k8s-api/endpoints";
-import { copyToClipboard, saveFileDialog } from "../../utils";
+import { saveFileDialog } from "../../utils";
 import { Button } from "../button";
 import { Dialog, DialogProps } from "../dialog";
 import { Icon } from "../icon";
@@ -33,6 +33,7 @@ import { Notifications } from "../notifications";
 import { Wizard, WizardStep } from "../wizard";
 import { apiBase } from "../../api";
 import { MonacoEditor } from "../monaco-editor";
+import { clipboard } from "electron";
 
 interface IKubeconfigDialogData {
   title?: React.ReactNode;
@@ -49,7 +50,6 @@ const dialogState = observable.object({
 
 @observer
 export class KubeConfigDialog extends React.Component<Props> {
-  @observable.ref configTextArea: HTMLTextAreaElement; // required for coping config text
   @observable config = ""; // parsed kubeconfig in yaml format
 
   constructor(props: Props) {
@@ -89,9 +89,8 @@ export class KubeConfigDialog extends React.Component<Props> {
   }
 
   copyToClipboard = () => {
-    if (this.config && copyToClipboard(this.configTextArea)) {
-      Notifications.ok("Config copied to clipboard");
-    }
+    clipboard.writeText(this.config);
+    Notifications.ok("Config copied to clipboard");
   };
 
   download = () => {
@@ -131,11 +130,6 @@ export class KubeConfigDialog extends React.Component<Props> {
               className={styles.editor}
               value={yamlConfig}
             />
-            <textarea
-              className={styles.configCopy}
-              readOnly defaultValue={yamlConfig}
-              ref={e => this.configTextArea = e}
-            />
           </WizardStep>
         </Wizard>
       </Dialog>

src/renderer/components/layout/__tests__/sidebar-cluster.test.tsx

@@ -57,18 +57,25 @@ describe("<SidebarCluster/>", () => {
   });
 
   it("renders cluster avatar and name", () => {
-    const { getByText } = render(<SidebarCluster clusterEntity={clusterEntity}/>);
+    const { getByText, getAllByText } = render(<SidebarCluster clusterEntity={clusterEntity}/>);
 
     expect(getByText("tc")).toBeInTheDocument();
-    expect(getByText("test-cluster")).toBeInTheDocument();
+
+    const v = getAllByText("test-cluster");
+
+    expect(v.length).toBeGreaterThan(0);
+
+    for (const e of v) {
+      expect(e).toBeInTheDocument();
+    }
   });
 
-  it("renders cluster menu", async () => {
+  it("renders cluster menu", () => {
     const { getByTestId, getByText } = render(<SidebarCluster clusterEntity={clusterEntity}/>);
     const link = getByTestId("sidebar-cluster-dropdown");
 
     fireEvent.click(link);
-    expect(await getByText("Add to Hotbar")).toBeInTheDocument();
+    expect(getByText("Add to Hotbar")).toBeInTheDocument();
   });
 });
 

src/renderer/components/layout/__tests__/topbar-win-linux.test.tsx

@@ -0,0 +1,115 @@
+/**
+ * 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 React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+import { TopBar } from "../topbar";
+import { TopBarRegistry } from "../../../../extensions/registries";
+import { IpcMainWindowEvents } from "../../../../main/window-manager";
+import { broadcastMessage } from "../../../../common/ipc";
+import * as vars from "../../../../common/vars";
+
+const mockConfig = vars as { isWindows: boolean, isLinux: boolean };
+
+jest.mock("../../../../common/ipc");
+
+jest.mock("../../../../common/vars", () => {
+  return {
+    __esModule: true,
+    isWindows: null,
+    isLinux: null,
+  };
+});
+
+const mockMinimize = jest.fn();
+const mockMaximize = jest.fn();
+const mockUnmaximize = jest.fn();
+const mockClose = jest.fn();
+
+jest.mock("@electron/remote", () => {
+  return {
+    getCurrentWindow: () => ({
+      minimize: () => mockMinimize(),
+      maximize: () => mockMaximize(),
+      unmaximize: () => mockUnmaximize(),
+      close: () => mockClose(),
+      isMaximized: () => false,
+    }),
+  };
+});
+
+describe("<Tobar/> in Windows and Linux", () => {
+  beforeEach(() => {
+    TopBarRegistry.createInstance();
+  });
+
+  afterEach(() => {
+    TopBarRegistry.resetInstance();
+  });
+
+  it("shows window controls on Windows", () => {
+    mockConfig.isWindows = true;
+    mockConfig.isLinux = false;
+
+    const { getByTestId } = render(<TopBar/>);
+
+    expect(getByTestId("window-menu")).toBeInTheDocument();
+    expect(getByTestId("window-minimize")).toBeInTheDocument();
+    expect(getByTestId("window-maximize")).toBeInTheDocument();
+    expect(getByTestId("window-close")).toBeInTheDocument();
+  });
+
+  it("shows window controls on Linux", () => {
+    mockConfig.isWindows = false;
+    mockConfig.isLinux = true;
+
+    const { getByTestId } = render(<TopBar/>);
+
+    expect(getByTestId("window-menu")).toBeInTheDocument();
+    expect(getByTestId("window-minimize")).toBeInTheDocument();
+    expect(getByTestId("window-maximize")).toBeInTheDocument();
+    expect(getByTestId("window-close")).toBeInTheDocument();
+  });
+
+  it("triggers ipc events on click", () => {
+    mockConfig.isWindows = true;
+
+    const { getByTestId } = render(<TopBar/>);
+
+    const menu = getByTestId("window-menu");
+    const minimize = getByTestId("window-minimize");
+    const maximize = getByTestId("window-maximize");
+    const close = getByTestId("window-close");
+
+    fireEvent.click(menu);
+    expect(broadcastMessage).toHaveBeenCalledWith(IpcMainWindowEvents.OPEN_CONTEXT_MENU);
+
+    fireEvent.click(minimize);
+    expect(mockMinimize).toHaveBeenCalled();
+
+    fireEvent.click(maximize);
+    expect(mockMaximize).toHaveBeenCalled();
+
+    fireEvent.click(close);
+    expect(mockClose).toHaveBeenCalled();
+  });
+});

src/renderer/components/layout/__tests__/topbar.test.tsx

@@ -25,6 +25,12 @@ import "@testing-library/jest-dom/extend-expect";
 import { TopBar } from "../topbar";
 import { TopBarRegistry } from "../../../../extensions/registries";
 
+jest.mock("../../../../common/vars", () => {
+  return {
+    isMac: true,
+  };
+});
+
 jest.mock(
   "electron",
   () => ({
@@ -65,6 +71,7 @@ jest.mock("@electron/remote", () => {
         }];
       },
     },
+    getCurrentWindow: () => jest.fn(),
   };
 });
 
@@ -134,4 +141,13 @@ describe("<TopBar/>", () => {
 
     expect(await getByTestId(testId)).toHaveTextContent(text);
   });
+
+  it("doesn't show windows title buttons", () => {
+    const { queryByTestId } = render(<TopBar/>);
+
+    expect(queryByTestId("window-menu")).not.toBeInTheDocument();
+    expect(queryByTestId("window-minimize")).not.toBeInTheDocument();
+    expect(queryByTestId("window-maximize")).not.toBeInTheDocument();
+    expect(queryByTestId("window-close")).not.toBeInTheDocument();
+  });
 });

src/renderer/components/layout/setting-layout.tsx

@@ -26,6 +26,7 @@ import { observer } from "mobx-react";
 import { cssNames, IClassName } from "../../utils";
 import { navigation } from "../../navigation";
 import { Icon } from "../icon";
+import { catalogURL } from "../../../common/routes";
 
 export interface SettingLayoutProps extends React.DOMAttributes<any> {
   className?: IClassName;
@@ -39,7 +40,13 @@ export interface SettingLayoutProps extends React.DOMAttributes<any> {
 const defaultProps: Partial<SettingLayoutProps> = {
   provideBackButtonNavigation: true,
   contentGaps: true,
-  back: () => navigation.goBack(),
+  back: () => {
+    if (navigation.length <= 1) {
+      navigation.push(catalogURL());
+    } else {
+      navigation.goBack();
+    }
+  },
 };
 
 /**

src/renderer/components/layout/sidebar-cluster.module.css

@@ -61,4 +61,51 @@
 .avatar {
   font-weight: 500;
   margin-right: 1.25rem;
-}
+}
+
+.loadingAvatar {
+  position: relative;
+  pointer-events: none;
+  &:after {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 0;
+    height: 100%;
+    background: transparentize(white, .85);
+    animation: waiting 1.5s infinite linear;
+  }
+}
+
+.loadingClusterName {
+  position: relative;
+  pointer-events: none;
+  width: 80%;
+  height: 16px;
+  &:after {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 0;
+    height: 100%;
+    background: transparentize(white, .85);
+    animation: waiting 1.5s infinite linear;
+  }
+}
+
+@keyframes waiting {
+  0% {
+    left: 0;
+    width: 0;
+  }
+  50% {
+    left: 25%;
+    width: 75%;
+  }
+  75% {
+    left: 100%;
+    width: 0;
+  }
+}

src/renderer/components/layout/sidebar-cluster.tsx

@@ -31,6 +31,7 @@ import { Icon } from "../icon";
 import { navigate } from "../../navigation";
 import { Menu, MenuItem } from "../menu";
 import { ConfirmDialog } from "../confirm-dialog";
+import { Tooltip } from "../tooltip";
 
 const contextMenu: CatalogEntityContextMenuContext = observable({
   menuItems: [],
@@ -60,11 +61,25 @@ function onMenuItemClick(menuItem: CatalogEntityContextMenu) {
   }
 }
 
+function renderLoadingSidebarCluster() {
+  return (
+    <div className={styles.SidebarCluster}>
+      <Avatar
+        title="??"
+        background="var(--halfGray)"
+        size={40}
+        className={styles.loadingAvatar}
+      />
+      <div className={styles.loadingClusterName} />
+    </div>
+  );
+}
+
 export function SidebarCluster({ clusterEntity }: { clusterEntity: CatalogEntity }) {
   const [opened, setOpened] = useState(false);
 
   if (!clusterEntity) {
-    return null;
+    return renderLoadingSidebarCluster();
   }
 
   const onMenuOpen = () => {
@@ -95,6 +110,7 @@ export function SidebarCluster({ clusterEntity }: { clusterEntity: CatalogEntity
 
   const { metadata, spec } = clusterEntity;
   const id = `cluster-${metadata.uid}`;
+  const tooltipId = `tooltip-${id}`;
 
   return (
     <div
@@ -112,9 +128,12 @@ export function SidebarCluster({ clusterEntity }: { clusterEntity: CatalogEntity
         src={spec.icon?.src}
         className={styles.avatar}
       />
-      <div className={styles.clusterName}>
+      <div className={styles.clusterName} id={tooltipId}>
         {metadata.name}
       </div>
+      <Tooltip targetId={tooltipId}>
+        {metadata.name}
+      </Tooltip>
       <Icon material="arrow_drop_down" className={styles.dropdown}/>
       <Menu
         usePortal

src/renderer/components/layout/topbar.module.css

@@ -20,22 +20,44 @@
  */
 
 .topBar {
-  display: grid;
-  grid-template-columns: [title] 1fr [controls] auto;
-  grid-template-rows: var(--main-layout-header);
-  grid-template-areas: "title controls";
+  display: flex;
   background-color: var(--layoutBackground);
   z-index: 2;
   width: 100%;
   grid-area: topbar;
+  height: var(--main-layout-header);
+  justify-content: space-between;
+
+  /* Use topbar as draggable region */
+  -webkit-user-select: none;
+  -webkit-app-region: drag;
 }
 
 :global(.is-mac) .topBar {
   padding-left: var(--hotbar-width);
 }
 
+.winMenu {
+  width: var(--hotbar-width);
+
+  > div {
+    @apply flex items-center justify-center;
+    width: 40px;
+    height: 40px;
+
+    &:hover {
+      background-color: var(--borderFaintColor);
+    }
+
+    &:active {
+      background-color: var(--borderColor);
+    }
+  }
+}
+
 .tools {
   @apply flex items-center;
+  -webkit-app-region: no-drag;
 }
 
 .controls {
@@ -44,4 +66,63 @@
   align-items: center;
   display: flex;
   height: 100%;
+  -webkit-app-region: no-drag;
 }
+
+.windowButtons {
+  display: flex;
+  margin-left: 1.5rem;
+  margin-right: -1.5rem;
+
+  > div {
+    @apply flex items-center justify-center;
+    width: 40px;
+    height: 40px;
+
+    svg {
+      width: 12px;
+      height: 12px;
+    }
+  }
+
+  &.linuxButtons {
+    > div {
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+      margin-right: 1.1rem;
+      color: var(--textColorAccent);
+
+      svg {
+        width: 8px;
+        height: 8px;
+      }
+    }
+
+    .close {
+      color: white;
+      background-color: #e63e02; /* Standard close button bg color on ubuntu */
+    }
+
+    .close:hover {
+      background-color: #ff5a23;
+    }
+  }
+}
+
+.minimize, .maximize {
+  &:hover {
+    background-color: var(--borderFaintColor);
+  }
+
+  &:active {
+    background-color: var(--borderColor);
+  }
+}
+
+.close {
+  &:hover {
+    color: white;
+    background-color: #ef4b4e;
+  }
+}

src/renderer/components/layout/topbar.tsx

@@ -20,16 +20,19 @@
  */
 
 import styles from "./topbar.module.css";
-import React, { useEffect } from "react";
+import React, { useEffect, useMemo, useRef } from "react";
 import { observer } from "mobx-react";
 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";
+import { IpcMainWindowEvents } from "../../../main/window-manager";
+import { isLinux, isWindows } from "../../../common/vars";
+import { cssNames } from "../../utils";
 
 interface Props extends React.HTMLAttributes<any> {
 }
@@ -46,6 +49,9 @@ ipcRendererOn("history:can-go-forward", (event, state: boolean) => {
 });
 
 export const TopBar = observer(({ children, ...rest }: Props) => {
+  const elem = useRef<HTMLDivElement>();
+  const window = useMemo(() => getCurrentWindow(), []);
+
   const renderRegisteredItems = () => {
     const items = TopBarRegistry.getInstance().getItems();
 
@@ -70,6 +76,10 @@ export const TopBar = observer(({ children, ...rest }: Props) => {
     );
   };
 
+  const openContextMenu = () => {
+    broadcastMessage(IpcMainWindowEvents.OPEN_CONTEXT_MENU);
+  };
+
   const goHome = () => {
     navigate(catalogURL());
   };
@@ -82,9 +92,20 @@ export const TopBar = observer(({ children, ...rest }: Props) => {
     webContents.getAllWebContents().find((webContent) => webContent.getType() === "window")?.goForward();
   };
 
-  const windowSizeToggle = () => {
-    const window = getCurrentWindow();
+  const windowSizeToggle = (evt: React.MouseEvent) => {
+    if (elem.current != evt.target) {
+      // Skip clicking on child elements
+      return;
+    }
 
+    toggleMaximize();
+  };
+
+  const minimizeWindow = () => {
+    window.minimize();
+  };
+
+  const toggleMaximize = () => {
     if (window.isMaximized()) {
       window.unmaximize();
     } else {
@@ -92,6 +113,10 @@ export const TopBar = observer(({ children, ...rest }: Props) => {
     }
   };
 
+  const closeWindow = () => {
+    window.close();
+  };
+
   useEffect(() => {
     const disposer = watchHistoryState();
 
@@ -99,8 +124,15 @@ export const TopBar = observer(({ children, ...rest }: Props) => {
   }, []);
 
   return (
-    <div className={styles.topBar} {...rest}>
-      <div className={styles.tools} onDoubleClick={windowSizeToggle}>
+    <div className={styles.topBar} onDoubleClick={windowSizeToggle} ref={elem} {...rest}>
+      <div className={styles.tools}>
+        {(isWindows || isLinux) && (
+          <div className={styles.winMenu}>
+            <div onClick={openContextMenu} data-testid="window-menu">
+              <svg width="12" height="12" viewBox="0 0 12 12" shapeRendering="crispEdges"><path fill="currentColor" d="M0,8.5h12v1H0V8.5z"/><path fill="currentColor" d="M0,5.5h12v1H0V5.5z"/><path fill="currentColor" d="M0,2.5h12v1H0V2.5z"/></svg>
+            </div>
+          </div>
+        )}
         <Icon
           data-testid="home-button"
           material="home"
@@ -126,6 +158,18 @@ export const TopBar = observer(({ children, ...rest }: Props) => {
       <div className={styles.controls}>
         {renderRegisteredItems()}
         {children}
+        {(isWindows || isLinux) && (
+          <div className={cssNames(styles.windowButtons, { [styles.linuxButtons]: isLinux })}>
+            <div className={styles.minimize} data-testid="window-minimize" onClick={minimizeWindow}>
+              <svg shapeRendering="crispEdges" viewBox="0 0 12 12"><rect fill="currentColor" width="10" height="1" x="1" y="9"></rect></svg></div>
+            <div className={styles.maximize} data-testid="window-maximize" onClick={toggleMaximize}>
+              <svg shapeRendering="crispEdges" viewBox="0 0 12 12"><rect width="9" height="9" x="1.5" y="1.5" fill="none" stroke="currentColor"></rect></svg>
+            </div>
+            <div className={styles.close} data-testid="window-close" onClick={closeWindow}>
+              <svg shapeRendering="crispEdges" viewBox="0 0 12 12"><polygon fill="currentColor" points="11 1.576 6.583 6 11 10.424 10.424 11 6 6.583 1.576 11 1 10.424 5.417 6 1 1.576 1.576 1 6 5.417 10.424 1"></polygon></svg>
+            </div>
+          </div>
+        )}
       </div>
     </div>
   );

src/renderer/initializers/catalog-category-registry.tsx

@@ -61,11 +61,11 @@ export function initCatalogCategoryRegistryEntries() {
       ctx.menuItems.push(
         {
           icon: "create_new_folder",
-          title: "Sync kubeconfig folders(s)",
+          title: "Sync kubeconfig folder(s)",
           defaultAction: true,
           onClick: async () => {
             await PathPicker.pick({
-              label: "Sync folders(s)",
+              label: "Sync folder(s)",
               buttonLabel: "Sync",
               properties: ["showHiddenFiles", "multiSelections", "openDirectory"],
               onPick: addSyncEntries,

src/renderer/utils/copyToClipboard.ts

@@ -1,52 +0,0 @@
-/**
- * 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.
- */
-
-// Helper for selecting element's text content and copy in clipboard
-
-export function copyToClipboard(elem: HTMLElement, { resetSelection = true } = {}) {
-  let clearSelection: () => void;
-
-  if (isSelectable(elem)) {
-    elem.select();
-    clearSelection = () => elem.setSelectionRange(0, 0);
-  } else {
-    const selection = window.getSelection();
-
-    selection.selectAllChildren(elem);
-    clearSelection = () => selection.removeAllRanges();
-  }
-  const selectedText = document.getSelection().toString();
-  const isCopied = document.execCommand("copy");
-
-  if (resetSelection) {
-    clearSelection();
-  }
-
-  return {
-    copied: isCopied,
-    copiedText: selectedText,
-    clearSelection,
-  };
-}
-
-function isSelectable(elem: HTMLElement): elem is HTMLInputElement {
-  return !!(elem as HTMLInputElement).select;
-}

src/renderer/utils/index.ts

@@ -24,7 +24,6 @@
 export * from "../../common/utils";
 export * from "../../common/event-emitter";
 
-export * from "./copyToClipboard";
 export * from "./createStorage";
 export * from "./cssNames";
 export * from "./cssVar";

yarn.lock

@@ -1210,14 +1210,14 @@
     lz-string "^1.4.4"
     pretty-format "^26.6.2"
 
-"@testing-library/jest-dom@^5.15.0":
-  version "5.15.0"
-  resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-5.15.0.tgz#4f5295dbc476a14aec3b07176434b3d51aae5da7"
-  integrity sha512-lOMuQidnL1tWHLEWIhL6UvSZC1Qt3OkNe1khvi2h6xFiqpe5O8arYs46OU0qyUGq0cSTbroQyMktYNXu3a7sAA==
+"@testing-library/jest-dom@^5.16.1":
+  version "5.16.1"
+  resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-5.16.1.tgz#3db7df5ae97596264a7da9696fe14695ba02e51f"
+  integrity sha512-ajUJdfDIuTCadB79ukO+0l8O+QwN0LiSxDaYUTI4LndbbUsGi6rWU1SCexXzBA2NSjlVB9/vbkasQIL3tmPBjw==
   dependencies:
     "@babel/runtime" "^7.9.2"
     "@types/testing-library__jest-dom" "^5.9.1"
-    aria-query "^4.2.2"
+    aria-query "^5.0.0"
     chalk "^3.0.0"
     css "^3.0.0"
     css.escape "^1.5.1"
@@ -2653,6 +2653,11 @@ aria-query@^4.2.2:
     "@babel/runtime" "^7.10.2"
     "@babel/runtime-corejs3" "^7.10.2"
 
+aria-query@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.0.0.tgz#210c21aaf469613ee8c9a62c7f86525e058db52c"
+  integrity sha512-V+SM7AbUwJ+EBnB8+DXs0hPZHO0W6pqBcc0dW90OwtVG02PswOu/teuARoLQjdDOH+t9pJgGnW5/Qmouf3gPJg==
+
 arr-diff@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520"
@@ -9573,10 +9578,10 @@ mobx@^6.3.7:
   resolved "https://registry.yarnpkg.com/mobx/-/mobx-6.3.7.tgz#9ed85561e86da45141134c8fa20cf5f9c7246c3d"
   integrity sha512-X7yU7eOEyxIBk4gjIi2UIilwdw48gXh0kcZ5ex3Rc+COJsJmJ4SNpf42uYea3aUqb1hedTv5xzJrq5Q55p0P5g==
 
-mock-fs@^4.14.0:
-  version "4.14.0"
-  resolved "https://registry.yarnpkg.com/mock-fs/-/mock-fs-4.14.0.tgz#ce5124d2c601421255985e6e94da80a7357b1b18"
-  integrity sha512-qYvlv/exQ4+svI3UOvPUpLDF0OMX5euvUH0Ny4N5QyRyhNdgAgUrVH3iUINSzEPLvx0kbo/Bp28GJKIqvE7URw==
+mock-fs@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/mock-fs/-/mock-fs-5.1.2.tgz#6fa486e06d00f8793a8d2228de980eff93ce6db7"
+  integrity sha512-YkjQkdLulFrz0vD4BfNQdQRVmgycXTV7ykuHMlyv+C8WCHazpkiQRDthwa02kSyo8wKnY9wRptHfQLgmf0eR+A==
 
 modern-normalize@^1.1.0:
   version "1.1.0"
@@ -11086,14 +11091,14 @@ postcss@^6.0.14, postcss@^6.0.2:
     source-map "^0.6.1"
     supports-color "^5.4.0"
 
-postcss@^8.1.6, postcss@^8.2.1, postcss@^8.2.15, postcss@^8.3.0, postcss@^8.3.11:
-  version "8.3.11"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.11.tgz#c3beca7ea811cd5e1c4a3ec6d2e7599ef1f8f858"
-  integrity sha512-hCmlUAIlUiav8Xdqw3Io4LcpA1DOt7h3LSTAC4G6JGHFFaWzI6qvFt9oilvl8BmkbBRX1IhM90ZAmpk68zccQA==
+postcss@^8.1.6, postcss@^8.2.1, postcss@^8.2.15, postcss@^8.3.0, postcss@^8.4.5:
+  version "8.4.5"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.5.tgz#bae665764dfd4c6fcc24dc0fdf7e7aa00cc77f95"
+  integrity sha512-jBDboWM8qpaqwkMwItqTQTiFikhs/67OYVvblFFTM7MrZjt6yMKd6r2kgXizEbTTljacm4NldIlZnhbjr84QYg==
   dependencies:
     nanoid "^3.1.30"
     picocolors "^1.0.0"
-    source-map-js "^0.6.2"
+    source-map-js "^1.0.1"
 
 postinstall-postinstall@^2.1.0:
   version "2.1.0"
@@ -12694,10 +12699,10 @@ source-list-map@^2.0.0, source-list-map@^2.0.1:
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
   integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
 
-source-map-js@^0.6.2:
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e"
-  integrity sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==
+source-map-js@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.1.tgz#a1741c131e3c77d048252adfa24e23b908670caf"
+  integrity sha512-4+TN2b3tqOCd/kaGRJ/sTYA0tR0mdXx26ipdolxcwtJVqEnqNYvlCAt1q3ypy4QMlYus+Zh34RNtYLoq2oQ4IA==
 
 source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
   version "0.5.3"