Merge branch 'master' into fix-cluster-delete

.azure-pipelines.yml

@@ -16,8 +16,8 @@ jobs:
       vmImage: windows-2019
     strategy:
       matrix:
-        node_12.x:
+        node_14.x:
-          node_version: 12.x
+          node_version: 14.x
     steps:
       - powershell: |
           $CI_BUILD_TAG = git describe --tags
@@ -48,12 +48,6 @@ jobs:
           GH_TOKEN: $(LENS_IDE_GH_TOKEN)
         displayName: Customize config
 
-      - script: make node_modules
-        displayName: Install dependencies
-
-      - script: make build-npm
-        displayName: Generate npm package
-
       - script: make build
         condition: "and(succeeded(), startsWith(variables['Build.SourceBranch'], 'refs/tags/'))"
         env:
@@ -62,15 +56,16 @@ jobs:
           AWS_ACCESS_KEY_ID: $(AWS_ACCESS_KEY_ID)
           AWS_SECRET_ACCESS_KEY: $(AWS_SECRET_ACCESS_KEY)
           BUILD_NUMBER: $(Build.BuildNumber)
+          ELECTRON_BUILDER_EXTRA_ARGS: "--x64 --ia32"
         displayName: Build
 
   - job: macOS
     pool:
-      vmImage: macOS-10.14
+      vmImage: macOS-11
     strategy:
       matrix:
-        node_12.x:
+        node_14.x:
-          node_version: 12.x
+          node_version: 14.x
     steps:
       - script: CI_BUILD_TAG=`git describe --tags` && echo "##vso[task.setvariable variable=CI_BUILD_TAG]$CI_BUILD_TAG"
         condition: "and(succeeded(), startsWith(variables['Build.SourceBranch'], 'refs/tags/'))"
@@ -99,12 +94,6 @@ jobs:
           GH_TOKEN: $(LENS_IDE_GH_TOKEN)
         displayName: Customize config
 
-      - script: make node_modules
-        displayName: Install dependencies
-
-      - script: make build-npm
-        displayName: Generate npm package
-
       - script: make build
         condition: "and(succeeded(), startsWith(variables['Build.SourceBranch'], 'refs/tags/'))"
         env:
@@ -115,6 +104,7 @@ jobs:
           AWS_ACCESS_KEY_ID: $(AWS_ACCESS_KEY_ID)
           AWS_SECRET_ACCESS_KEY: $(AWS_SECRET_ACCESS_KEY)
           BUILD_NUMBER: $(Build.BuildNumber)
+          ELECTRON_BUILDER_EXTRA_ARGS: "--x64 --arm64"
         displayName: Build
 
   - job: Linux
@@ -122,8 +112,8 @@ jobs:
       vmImage: ubuntu-16.04
     strategy:
       matrix:
-        node_12.x:
+        node_14.x:
-          node_version: 12.x
+          node_version: 14.x
     steps:
       - script: CI_BUILD_TAG=`git describe --tags` && echo "##vso[task.setvariable variable=CI_BUILD_TAG]$CI_BUILD_TAG"
         condition: "and(succeeded(), startsWith(variables['Build.SourceBranch'], 'refs/tags/'))"
@@ -152,23 +142,6 @@ jobs:
           GH_TOKEN: $(LENS_IDE_GH_TOKEN)
         displayName: Customize config
 
-      - script: make node_modules
-        displayName: Install dependencies
-
-      - script: make build-npm
-        displayName: Generate npm package
-
-      - bash: |
-          sudo chown root:root /
-          sudo apt-get update && sudo apt-get install -y snapd
-          sudo snap install snapcraft --classic
-          echo -n "${SNAP_LOGIN}" | base64 -i -d > snap_login
-          snapcraft login --with snap_login
-        condition: "and(succeeded(), startsWith(variables['Build.SourceBranch'], 'refs/tags/'))"
-        env:
-          SNAP_LOGIN: $(SNAP_LOGIN)
-        displayName: Setup snapcraft
-
       - script: make build
         condition: "and(succeeded(), startsWith(variables['Build.SourceBranch'], 'refs/tags/'))"
         env:

.github/workflows/test.yml

@@ -12,7 +12,7 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        os: [ubuntu-16.04, macos-10.15, windows-2019]
+        os: [ubuntu-16.04, macos-11, windows-2019]
         node-version: [14.x]
     steps:
       - name: Checkout Release from lens
@@ -83,6 +83,15 @@ jobs:
         if: runner.os == 'Linux'
 
       - run: make integration
-        name: Run integration tests
+        name: Run macOS integration tests
         shell: bash
-        if: runner.os != 'Linux'
+        env:
+          ELECTRON_BUILDER_EXTRA_ARGS: "--x64 --arm64"
+        if: runner.os == 'macOS'
+
+      - run: make integration
+        name: Run Windows integration tests
+        shell: bash
+        env:
+          ELECTRON_BUILDER_EXTRA_ARGS: "--x64 --ia32"
+        if: runner.os == 'Windows'

Makefile

@@ -4,6 +4,7 @@ CMD_ARGS = $(filter-out $@,$(MAKECMDGOALS))
   @:
 
 NPM_RELEASE_TAG ?= latest
+ELECTRON_BUILDER_EXTRA_ARGS ?=
 EXTENSIONS_DIR = ./extensions
 extensions = $(foreach dir, $(wildcard $(EXTENSIONS_DIR)/*), ${dir})
 extension_node_modules = $(foreach dir, $(wildcard $(EXTENSIONS_DIR)/*), ${dir}/node_modules)
@@ -62,10 +63,8 @@ build: node_modules binaries/client
 ifeq "$(DETECTED_OS)" "Windows"
 # https://github.com/ukoloff/win-ca#clear-pem-folder-on-publish
 	rm -rf node_modules/win-ca/pem
-	yarn run electron-builder --publish onTag --x64 --ia32
-else
-	yarn run electron-builder --publish onTag
 endif
+	yarn run electron-builder --publish onTag $(ELECTRON_BUILDER_EXTRA_ARGS)
 
 $(extension_node_modules): node_modules
 	cd $(@:/node_modules=) && ../../node_modules/.bin/npm install --no-audit --no-fund

build/download_helm.ts

@@ -18,6 +18,18 @@
  * 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 { helmCli } from "../src/main/helm/helm-cli";
+import packageInfo from "../package.json";
+import { isWindows } from "../src/common/vars";
+import { HelmCli } from "../src/main/helm/helm-cli";
+import * as path from "path";
 
-helmCli.ensureBinary();
+const helmVersion = packageInfo.config.bundledHelmVersion;
+
+if (!isWindows) {
+  Promise.all([
+    new HelmCli(path.join(process.cwd(), "binaries", "client", "x64"), helmVersion).ensureBinary(),
+    new HelmCli(path.join(process.cwd(), "binaries", "client", "arm64"), helmVersion).ensureBinary()
+  ]);
+} else {
+  new HelmCli(path.join(process.cwd(), "binaries", "client", "x64"), helmVersion).ensureBinary();
+}

build/download_kubectl.ts

@@ -26,6 +26,7 @@ import requestPromise from "request-promise-native";
 import { ensureDir, pathExists } from "fs-extra";
 import path from "path";
 import { noop } from "lodash";
+import { isLinux, isMac } from "../src/common/vars";
 
 class KubectlDownloader {
   public kubectlVersion: string;
@@ -115,15 +116,21 @@ class KubectlDownloader {
     });
   }
 }
-
 const downloadVersion = packageInfo.config.bundledKubectlVersion;
 const baseDir = path.join(__dirname, "..", "binaries", "client");
-const downloads = [
+
-  { platform: "linux", arch: "amd64", target: path.join(baseDir, "linux", "x64", "kubectl") },
+const downloads = [];
-  { platform: "darwin", arch: "amd64", target: path.join(baseDir, "darwin", "x64", "kubectl") },
+
-  { platform: "windows", arch: "amd64", target: path.join(baseDir, "windows", "x64", "kubectl.exe") },
+if (isMac) {
-  { platform: "windows", arch: "386", target: path.join(baseDir, "windows", "ia32", "kubectl.exe") }
+  downloads.push({ platform: "darwin", arch: "amd64", target: path.join(baseDir, "darwin", "x64", "kubectl") });
-];
+  downloads.push({ platform: "darwin", arch: "arm64", target: path.join(baseDir, "darwin", "arm64", "kubectl") });
+} else if (isLinux) {
+  downloads.push({ platform: "linux", arch: "amd64", target: path.join(baseDir, "linux", "x64", "kubectl") });
+  downloads.push({ platform: "linux", arch: "arm64", target: path.join(baseDir, "linux", "arm64", "kubectl") });
+} else {
+  downloads.push({ platform: "windows", arch: "amd64", target: path.join(baseDir, "windows", "x64", "kubectl.exe") });
+  downloads.push({ platform: "windows", arch: "386", target: path.join(baseDir, "windows", "ia32", "kubectl.exe") });
+}
 
 downloads.forEach((dlOpts) => {
   console.log(dlOpts);

integration/__tests__/app-preferences.tests.ts

@@ -63,7 +63,7 @@ describe("preferences page tests", () => {
     }
   }, 10*60*1000);
 
-  it("ensures helm repos", async () => {
+  utils.itIf(process.platform !== "win32")("ensures helm repos", async () => {
     await window.click("[data-testid=kubernetes-tab]");
     await window.waitForSelector("[data-testid=repository-name]", {
       timeout: 100_000,

package.json

@@ -3,7 +3,7 @@
   "productName": "OpenLens",
   "description": "OpenLens - Open Source IDE for Kubernetes",
   "homepage": "https://github.com/lensapp/lens",
-  "version": "5.2.0-beta.2",
+  "version": "5.2.0-beta.3",
   "main": "static/build/main.js",
   "copyright": "© 2021 OpenLens Authors",
   "license": "MIT",
@@ -30,7 +30,6 @@
     "build:win": "yarn run compile && electron-builder --win --dir",
     "integration": "jest --runInBand --detectOpenHandles --forceExit integration",
     "dist": "yarn run compile && electron-builder --publish onTag",
-    "dist:win": "yarn run compile && electron-builder --publish onTag --x64 --ia32",
     "dist:dir": "yarn run dist --dir -c.compression=store -c.mac.identity=null",
     "download-bins": "concurrently yarn:download:*",
     "download:kubectl": "yarn run ts-node build/download_kubectl.ts",
@@ -48,7 +47,7 @@
   },
   "config": {
     "bundledKubectlVersion": "1.21.2",
-    "bundledHelmVersion": "3.5.4",
+    "bundledHelmVersion": "3.6.3",
     "sentryDsn": ""
   },
   "engines": {
@@ -122,11 +121,11 @@
       ],
       "extraResources": [
         {
-          "from": "binaries/client/linux/x64/kubectl",
+          "from": "binaries/client/linux/${arch}/kubectl",
-          "to": "./x64/kubectl"
+          "to": "./${arch}/kubectl"
         },
         {
-          "from": "binaries/client/helm3/helm3",
+          "from": "binaries/client/${arch}/helm3/helm3",
           "to": "./helm3/helm3"
         }
       ]
@@ -138,11 +137,11 @@
       "entitlementsInherit": "build/entitlements.mac.plist",
       "extraResources": [
         {
-          "from": "binaries/client/darwin/x64/kubectl",
+          "from": "binaries/client/darwin/${arch}/kubectl",
-          "to": "./x64/kubectl"
+          "to": "./${arch}/kubectl"
         },
         {
-          "from": "binaries/client/helm3/helm3",
+          "from": "binaries/client/${arch}/helm3/helm3",
           "to": "./helm3/helm3"
         }
       ]
@@ -161,7 +160,7 @@
           "to": "./ia32/kubectl.exe"
         },
         {
-          "from": "binaries/client/helm3/helm3.exe",
+          "from": "binaries/client/x64/helm3/helm3.exe",
           "to": "./helm3/helm3.exe"
         }
       ]
@@ -288,7 +287,7 @@
     "@types/module-alias": "^2.0.0",
     "@types/node": "12.20",
     "@types/node-fetch": "^2.5.12",
-    "@types/npm": "^2.0.31",
+    "@types/npm": "^2.0.32",
     "@types/progress-bar-webpack-plugin": "^2.1.2",
     "@types/proper-lockfile": "^4.1.1",
     "@types/randomcolor": "^0.5.6",
@@ -326,11 +325,11 @@
     "concurrently": "^5.2.0",
     "css-loader": "^5.2.6",
     "deepdash": "^5.3.5",
-    "dompurify": "^2.0.17",
+    "dompurify": "^2.3.1",
     "electron": "^12.0.17",
     "electron-builder": "^22.10.5",
     "electron-notarize": "^0.3.0",
-    "esbuild": "^0.12.12",
+    "esbuild": "^0.12.24",
     "esbuild-loader": "^2.13.1",
     "eslint": "^7.7.0",
     "eslint-plugin-header": "^3.1.1",
@@ -351,12 +350,13 @@
     "json-to-pretty-yaml": "^1.2.2",
     "make-plural": "^6.2.2",
     "mini-css-extract-plugin": "^1.6.0",
+    "node-gyp": "7.1.2",
     "node-loader": "^1.0.3",
     "node-sass": "^4.14.1",
     "nodemon": "^2.0.12",
     "playwright": "^1.14.0",
     "postcss": "^8.3.6",
-    "postcss-loader": "4.0.3",
+    "postcss-loader": "4.3.0",
     "postinstall-postinstall": "^2.1.0",
     "progress-bar-webpack-plugin": "^2.1.0",
     "randomcolor": "^0.6.2",

src/common/cluster-types.ts

@@ -95,6 +95,7 @@ export interface ClusterPreferences extends ClusterPrometheusPreferences {
   hiddenMetrics?: string[];
   nodeShellImage?: string;
   imagePullSecret?: string;
+  defaultNamespace?: string;
 }
 
 /**

src/common/utils/__tests__/iter.test.ts

@@ -19,12 +19,16 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import React from "react";
+import { reduce } from "../iter";
-import { TopBar } from "../layout/topbar";
 
-export function WelcomeTopbar() {
+describe("iter", () => {
-  return (
+  describe("reduce", () => {
-    <TopBar label="Welcome">
+    it("can reduce a value", () => {
-    </TopBar>
+      expect(reduce([1, 2, 3], (acc: number[], current: number) => [current, ...acc], [0])).toEqual([3, 2, 1, 0]);
-  );
+    });
-}
+
+    it("can reduce an empty iterable", () => {
+      expect(reduce([], (acc: number[], current: number) => [acc[0] + current], [])).toEqual([]);
+    });
+  });
+});

src/common/utils/iter.ts

@@ -156,3 +156,22 @@ export function find<T>(src: Iterable<T>, match: (i: T) => any): T | undefined {
 
   return void 0;
 }
+
+/**
+ * Iterate over `src` calling `reducer` with the previous produced value and the current
+ * yielded value until `src` is exausted. Then return the final value.
+ * @param src The value to iterate over
+ * @param reducer A function for producing the next item from an accumilation and the current item
+ * @param initial The initial value for the iteration
+ */
+export function reduce<T, R>(src: Iterable<T>, reducer: (acc: Iterable<R>, cur: T) => Iterable<R>, initial: Iterable<R>): Iterable<R>;
+
+export function reduce<T, R = T>(src: Iterable<T>, reducer: (acc: R, cur: T) => R, initial: R): R {
+  let acc = initial;
+
+  for (const item of src) {
+    acc = reducer(acc, item);
+  }
+
+  return acc;
+}

src/extensions/common-api/index.ts

@@ -26,6 +26,7 @@ import * as Store from "./stores";
 import * as Util from "./utils";
 import * as Catalog from "./catalog";
 import * as Types from "./types";
+import logger from "../../common/logger";
 
 export {
   App,
@@ -34,4 +35,5 @@ export {
   Store,
   Types,
   Util,
+  logger
 };

src/extensions/lens-renderer-extension.ts

@@ -21,9 +21,11 @@
 
 import type * as registries from "./registries";
 import type { Cluster } from "../main/cluster";
-import { LensExtension } from "./lens-extension";
+import { Disposers, LensExtension } from "./lens-extension";
 import { getExtensionPageUrl } from "./registries/page-registry";
 import type { CatalogEntity } from "../common/catalog";
+import type { Disposer } from "../common/utils";
+import { catalogEntityRegistry, EntityFilter } from "../renderer/api/catalog-entity-registry";
 
 export class LensRendererExtension extends LensExtension {
   globalPages: registries.PageRegistration[] = [];
@@ -59,4 +61,17 @@ export class LensRendererExtension extends LensExtension {
   async isEnabledForCluster(cluster: Cluster): Promise<Boolean> {
     return (void cluster) || true;
   }
+
+  /**
+   * Add a filtering function for the catalog. This will be removed if the extension is disabled.
+   * @param fn The function which should return a truthy value for those entities which should be kepted
+   * @returns A function to clean up the filter
+   */
+  addCatalogFilter(fn: EntityFilter): Disposer {
+    const dispose = catalogEntityRegistry.addCatalogFilter(fn);
+
+    this[Disposers].push(dispose);
+
+    return dispose;
+  }
 }

src/main/catalog/catalog-entity-registry.ts

@@ -43,24 +43,20 @@ export class CatalogEntityRegistry {
   }
 
   @computed get items(): CatalogEntity[] {
-    const allItems = Array.from(iter.flatMap(this.sources.values(), source => source.get()));
+    return Array.from(
-
+      iter.filter(
-    return allItems.filter((entity) => this.categoryRegistry.getCategoryForEntity(entity) !== undefined);
+        iter.flatMap(this.sources.values(), source => source.get()),
+        entity => this.categoryRegistry.getCategoryForEntity(entity)
+      )
+    );
   }
 
   getById<T extends CatalogEntity>(id: string): T | undefined {
-    const item = this.items.find((entity) => entity.metadata.uid === id);
+    return this.items.find((entity) => entity.metadata.uid === id) as T | undefined;
-
-    if (item) return item as T;
-
-
-    return undefined;
   }
 
   getItemsForApiKind<T extends CatalogEntity>(apiVersion: string, kind: string): T[] {
-    const items = this.items.filter((item) => item.apiVersion === apiVersion && item.kind === kind);
+    return this.items.filter((item) => item.apiVersion === apiVersion && item.kind === kind) as T[];
-
-    return items as T[];
   }
 
   getItemsByEntityClass<T extends CatalogEntity>({ apiVersion, kind }: CatalogEntityKindData): T[] {

src/main/cluster.ts

@@ -216,6 +216,18 @@ export class Cluster implements ClusterModel, ClusterState {
     return toJS({ prometheus, prometheusProvider });
   }
 
+  /**
+   * defaultNamespace preference
+   *
+   * @computed
+   * @internal
+   */
+  @computed get defaultNamespace(): string {
+    const { defaultNamespace } = this.preferences;
+
+    return defaultNamespace;
+  }
+
   constructor(model: ClusterModel) {
     makeObservable(this);
     this.id = model.id;
@@ -298,10 +310,25 @@ export class Cluster implements ClusterModel, ClusterState {
           clearInterval(refreshTimer);
           clearInterval(refreshMetadataTimer);
         },
+        reaction(() => this.defaultNamespace, () => this.recreateProxyKubeconfig()),
       );
     }
   }
 
+  /**
+   * @internal
+   */
+  async recreateProxyKubeconfig() {
+    logger.info("Recreate proxy kubeconfig");
+
+    try {
+      this.kubeconfigManager.clear();
+    } catch {
+      // do nothing
+    }
+    this.getProxyKubeconfig();
+  }
+
   /**
    * internal
    */
@@ -706,11 +733,11 @@ export class Cluster implements ClusterModel, ClusterState {
   }
 
   get nodeShellImage(): string {
-    return this.preferences.nodeShellImage || initialNodeShellImage;
+    return this.preferences?.nodeShellImage || initialNodeShellImage;
   }
 
-  get imagePullSecret(): string {
+  get imagePullSecret(): string | undefined {
-    return this.preferences.imagePullSecret || "";
+    return this.preferences?.imagePullSecret;
   }
 
   isInLocalKubeconfig() {

src/main/helm/helm-cli.ts

@@ -58,7 +58,7 @@ const helmVersion = packageInfo.config.bundledHelmVersion;
 let baseDir = process.resourcesPath;
 
 if (!isProduction) {
-  baseDir = path.join(process.cwd(), "binaries", "client");
+  baseDir = path.join(process.cwd(), "binaries", "client", process.arch);
 }
 
 export const helmCli = new HelmCli(baseDir, helmVersion);

src/main/kubeconfig-manager.ts

@@ -56,6 +56,15 @@ export class KubeconfigManager {
     return this.tempFile;
   }
 
+  async clear() {
+    if (!this.tempFile) {
+      return;
+    }
+
+    logger.info(`Deleting temporary kubeconfig: ${this.tempFile}`);
+    await fs.unlink(this.tempFile);
+  }
+
   async unlink() {
     if (!this.tempFile) {
       return;
@@ -106,7 +115,7 @@ export class KubeconfigManager {
           user: "proxy",
           name: contextName,
           cluster: contextName,
-          namespace: kubeConfig.getContextObject(contextName).namespace,
+          namespace: cluster.defaultNamespace || kubeConfig.getContextObject(contextName).namespace,
         }
       ]
     };

src/main/lens-binary.ts

@@ -60,13 +60,13 @@ export class LensBinary {
     this.logger = console;
     let arch = null;
 
-    if (process.arch == "x64") {
+    if (process.env.BINARY_ARCH) {
+      arch = process.env.BINARY_ARCH;
+    } else if (process.arch == "x64") {
       arch = "amd64";
-    }
+    } else if (process.arch == "x86" || process.arch == "ia32") {
-    else if (process.arch == "x86" || process.arch == "ia32") {
       arch = "386";
-    }
+    } else {
-    else {
       arch = process.arch;
     }
     this.arch = arch;

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

@@ -25,6 +25,7 @@ import * as k8s from "@kubernetes/client-node";
 import type { KubeConfig } from "@kubernetes/client-node";
 import type { Cluster } from "../cluster";
 import { ShellOpenError, ShellSession } from "./shell-session";
+import { get } from "lodash";
 
 export class NodeShellSession extends ShellSession {
   ShellType = "node-shell";
@@ -49,7 +50,7 @@ export class NodeShellSession extends ShellSession {
       await this.waitForRunningPod();
     } catch (error) {
       this.deleteNodeShellPod();
-      this.sendResponse("Error occurred. ");
+      this.sendResponse(`Error occurred: ${get(error, "response.body.message", error?.toString() || "unknown error")}`);
 
       throw new ShellOpenError("failed to create node pod", error);
     }
@@ -57,10 +58,16 @@ export class NodeShellSession extends ShellSession {
     const args = ["exec", "-i", "-t", "-n", "kube-system", this.podId, "--", "sh", "-c", "((clear && bash) || (clear && ash) || (clear && sh))"];
     const env = await this.getCachedShellEnv();
 
-    super.open(shell, args, env);
+    await super.open(shell, args, env);
   }
 
   protected createNodeShellPod() {
+    const imagePullSecrets = this.cluster.imagePullSecret
+      ? [{
+        name: this.cluster.imagePullSecret,
+      }]
+      : undefined;
+
     return this
       .kc
       .makeApiClient(k8s.CoreV1Api)
@@ -88,9 +95,7 @@ export class NodeShellSession extends ShellSession {
             command: ["nsenter"],
             args: ["-t", "1", "-m", "-u", "-i", "-n", "sleep", "14000"]
           }],
-          imagePullSecrets: [{
+          imagePullSecrets,
-            name: this.cluster.imagePullSecret,
-          }]
         }
       });
   }

src/main/window-manager.ts

@@ -244,6 +244,7 @@ export class WindowManager extends Singleton {
       this.sendToView({ channel: IpcRendererNavigationEvents.RELOAD_PAGE, frameInfo });
     } else {
       webContents.getFocusedWebContents()?.reload();
+      webContents.getFocusedWebContents()?.clearHistory();
     }
   }
 

src/migrations/user-store/5.0.3-beta.1.ts

@@ -40,6 +40,9 @@ export default {
       syncPaths.add(path.join(os.homedir(), ".kube"));
 
       for (const cluster of clusters) {
+        if (!cluster.kubeConfigPath) {
+          continue;
+        }
         const dirOfKubeconfig = path.dirname(cluster.kubeConfigPath);
 
         if (dirOfKubeconfig === storedKubeConfigFolder()) {

src/renderer/api/__tests__/catalog-entity-registry.test.ts

@@ -23,7 +23,8 @@ import { CatalogEntityRegistry } from "../catalog-entity-registry";
 import "../../../common/catalog-entities";
 import { catalogCategoryRegistry } from "../../../common/catalog/catalog-category-registry";
 import { CatalogCategory, CatalogEntityData, CatalogEntityKindData } from "../catalog-entity";
-import { WebLink } from "../../../common/catalog-entities";
+import { KubernetesCluster, WebLink } from "../../../common/catalog-entities";
+import { observable } from "mobx";
 
 class TestCatalogEntityRegistry extends CatalogEntityRegistry {
   replaceItems(items: Array<CatalogEntityData & CatalogEntityKindData>) {
@@ -51,6 +52,49 @@ class FooBarCategory extends CatalogCategory {
     }
   };
 }
+const entity = new WebLink({
+  metadata: {
+    uid: "test",
+    name: "test-link",
+    source: "test",
+    labels: {}
+  },
+  spec: {
+    url: "https://k8slens.dev"
+  },
+  status: {
+    phase: "available"
+  }
+});
+const entity2 = new WebLink({
+  metadata: {
+    uid: "test2",
+    name: "test-link",
+    source: "test",
+    labels: {}
+  },
+  spec: {
+    url: "https://k8slens.dev"
+  },
+  status: {
+    phase: "available"
+  }
+});
+const entitykc = new KubernetesCluster({
+  metadata: {
+    uid: "test3",
+    name: "test-link",
+    source: "test",
+    labels: {}
+  },
+  spec: {
+    kubeconfigPath: "",
+    kubeconfigContext: "",
+  },
+  status: {
+    phase: "connected"
+  }
+});
 
 describe("CatalogEntityRegistry", () => {
   describe("updateItems", () => {
@@ -250,4 +294,25 @@ describe("CatalogEntityRegistry", () => {
     catalogCategoryRegistry.add(new FooBarCategory());
     expect(catalog.items.length).toBe(1);
   });
+
+  it("does not return items that are filtered out", () => {
+    const source = observable.array([entity, entity2, entitykc]);
+    const catalog = new TestCatalogEntityRegistry(catalogCategoryRegistry);
+
+    catalog.replaceItems(source);
+
+    expect(catalog.items.length).toBe(3);
+    expect(catalog.filteredItems.length).toBe(3);
+
+    const d = catalog.addCatalogFilter(entity => entity.kind === KubernetesCluster.kind);
+
+    expect(catalog.items.length).toBe(3);
+    expect(catalog.filteredItems.length).toBe(1);
+
+    // Remove filter
+    d();
+
+    expect(catalog.items.length).toBe(3);
+    expect(catalog.filteredItems.length).toBe(3);
+  });
 });

src/renderer/api/catalog-entity-registry.ts

@@ -25,10 +25,17 @@ import { CatalogCategory, CatalogEntity, CatalogEntityData, catalogCategoryRegis
 import "../../common/catalog-entities";
 import type { Cluster } from "../../main/cluster";
 import { ClusterStore } from "../../common/cluster-store";
+import { Disposer, iter } from "../utils";
+import { once } from "lodash";
+
+export type EntityFilter = (entity: CatalogEntity) => any;
 
 export class CatalogEntityRegistry {
   @observable.ref activeEntity: CatalogEntity;
   protected _entities = observable.map<string, CatalogEntity>([], { deep: true });
+  protected filters = observable.set<EntityFilter>([], {
+    deep: false,
+  });
 
   /**
    * Buffer for keeping entities that don't yet have CatalogCategory synced
@@ -95,27 +102,56 @@ export class CatalogEntityRegistry {
     return Array.from(this._entities.values());
   }
 
-  @computed get entities(): Map<string, CatalogEntity> {
+  @computed get filteredItems() {
-    this.processRawEntities();
+    return Array.from(
+      iter.reduce(
+        this.filters,
+        iter.filter,
+        this.items,
+      )
+    );
+  }
 
-    return this._entities;
+  @computed get entities(): Map<string, CatalogEntity> {
+    return new Map(
+      this.items.map(entity => [entity.getId(), entity])
+    );
+  }
+
+  @computed get filteredEntities(): Map<string, CatalogEntity> {
+    return new Map(
+      this.filteredItems.map(entity => [entity.getId(), entity])
+    );
   }
 
   getById<T extends CatalogEntity>(id: string) {
     return this.entities.get(id) as T;
   }
 
-  getItemsForApiKind<T extends CatalogEntity>(apiVersion: string, kind: string): T[] {
+  getItemsForApiKind<T extends CatalogEntity>(apiVersion: string, kind: string, { filtered = false } = {}): T[] {
-    const items = this.items.filter((item) => item.apiVersion === apiVersion && item.kind === kind);
+    const byApiKind = (item: CatalogEntity) => item.apiVersion === apiVersion && item.kind === kind;
+    const entities = filtered ? this.filteredItems : this.items;
 
-    return items as T[];
+    return entities.filter(byApiKind) as T[];
   }
 
-  getItemsForCategory<T extends CatalogEntity>(category: CatalogCategory): T[] {
+  getItemsForCategory<T extends CatalogEntity>(category: CatalogCategory, { filtered = false } = {}): T[] {
-    const supportedVersions = category.spec.versions.map((v) => `${category.spec.group}/${v.name}`);
+    const supportedVersions = new Set(category.spec.versions.map((v) => `${category.spec.group}/${v.name}`));
-    const items = this.items.filter((item) => supportedVersions.includes(item.apiVersion) && item.kind === category.spec.names.kind);
+    const byApiVersionKind = (item: CatalogEntity) => supportedVersions.has(item.apiVersion) && item.kind === category.spec.names.kind;
+    const entities = filtered ? this.filteredItems : this.items;
 
-    return items as T[];
+    return entities.filter(byApiVersionKind) as T[];
+  }
+
+  /**
+   * Add a new filter to the set of item filters
+   * @param fn The function that should return a truthy value if that entity should be sent currently "active"
+   * @returns A function to remove that filter
+   */
+  addCatalogFilter(fn: EntityFilter): Disposer {
+    this.filters.add(fn);
+
+    return once(() => void this.filters.delete(fn));
   }
 }
 

src/renderer/components/+catalog/catalog-entity.store.tsx

@@ -129,10 +129,10 @@ export class CatalogEntityStore extends ItemStore<CatalogEntityItem<CatalogEntit
 
   @computed get entities() {
     if (!this.activeCategory) {
-      return catalogEntityRegistry.items.map(entity => new CatalogEntityItem(entity));
+      return catalogEntityRegistry.filteredItems.map(entity => new CatalogEntityItem(entity));
     }
 
-    return catalogEntityRegistry.getItemsForCategory(this.activeCategory).map(entity => new CatalogEntityItem(entity));
+    return catalogEntityRegistry.getItemsForCategory(this.activeCategory, { filtered: true }).map(entity => new CatalogEntityItem(entity));
   }
 
   @computed get selectedItem() {

src/renderer/components/+catalog/catalog-menu.module.css

@@ -27,4 +27,9 @@
   @apply uppercase font-bold;
   color: var(--textColorAccent);
   font-size: small;
+}
+
+.catalog {
+  @apply p-5 font-bold text-2xl;
+  color: var(--textColorAccent);
 }

src/renderer/components/+catalog/catalog-menu.tsx

@@ -58,6 +58,7 @@ export function CatalogMenu(props: Props) {
     // Overwrite Material UI styles with injectFirst https://material-ui.com/guides/interoperability/#controlling-priority-4
     <StylesProvider injectFirst>
       <div className="flex flex-col w-full">
+        <div className={styles.catalog}>Catalog</div>
         <TreeView
           defaultExpanded={["catalog"]}
           defaultCollapseIcon={<Icon material="expand_more"/>}

src/renderer/components/+catalog/catalog.tsx

@@ -43,7 +43,7 @@ import { catalogURL, CatalogViewRouteParam } from "../../../common/routes";
 import { CatalogMenu } from "./catalog-menu";
 import { HotbarIcon } from "../hotbar/hotbar-icon";
 import { RenderDelay } from "../render-delay/render-delay";
-import { CatalogTopbar } from "../cluster-manager/catalog-topbar";
+import { TopBar } from "../layout/topbar";
 
 export const previousActiveTab = createAppStorage("catalog-previous-active-tab", "");
 
@@ -247,7 +247,7 @@ export class Catalog extends React.Component<Props> {
 
     return (
       <>
-        <CatalogTopbar/>
+        <TopBar/>
         <MainLayout sidebar={this.renderNavigation()}>
           <div className="p-6 h-full">
             { this.renderList() }

src/renderer/components/+welcome/__test__/welcome.test.tsx

@@ -26,6 +26,15 @@ import { Welcome } from "../welcome";
 import { TopBarRegistry, WelcomeMenuRegistry, WelcomeBannerRegistry } from "../../../../extensions/registries";
 import { defaultWidth } from "../welcome";
 
+jest.mock(
+  "electron",
+  () => ({
+    ipcRenderer: {
+      on: jest.fn(),
+    },
+  })
+);
+
 describe("<Welcome/>", () => {
   beforeEach(() => {
     TopBarRegistry.createInstance();

src/renderer/components/+welcome/welcome.tsx

@@ -26,8 +26,8 @@ import Carousel from "react-material-ui-carousel";
 import { Icon } from "../icon";
 import { productName, slackUrl } from "../../../common/vars";
 import { WelcomeMenuRegistry } from "../../../extensions/registries";
-import { WelcomeTopbar } from "../cluster-manager/welcome-topbar";
 import { WelcomeBannerRegistry } from "../../../extensions/registries";
+import { TopBar } from "../layout/topbar";
 
 export const defaultWidth = 320;
 
@@ -49,7 +49,7 @@ export class Welcome extends React.Component {
 
     return (
       <>
-        <WelcomeTopbar/>
+        <TopBar/>
         <div className="flex justify-center Welcome align-center">
           <div style={{ width: `${maxWidth}px` }} data-testid="welcome-banner-container">
             {welcomeBanner.length > 0 ? (

src/renderer/components/app.tsx

@@ -72,6 +72,7 @@ import { catalogEntityRegistry } from "../api/catalog-entity-registry";
 import { getHostedClusterId } from "../utils";
 import { ClusterStore } from "../../common/cluster-store";
 import type { ClusterId } from "../../common/cluster-types";
+import { watchHistoryState } from "../remote-helpers/history-updater";
 
 @observer
 export class App extends React.Component {
@@ -128,7 +129,9 @@ export class App extends React.Component {
     disposeOnUnmount(this, [
       kubeWatchApi.subscribeStores([podsStore, nodesStore, eventStore, namespaceStore], {
         preload: true,
-      })
+      }),
+
+      watchHistoryState()
     ]);
   }
 

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

@@ -1,61 +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 { observer } from "mobx-react";
-import React from "react";
-
-import { previousActiveTab } from "../+catalog";
-import { ClusterStore } from "../../../common/cluster-store";
-import { catalogURL } from "../../../common/routes";
-import { navigate } from "../../navigation";
-import { Icon } from "../icon";
-import { TopBar } from "../layout/topbar";
-
-import type { RouteComponentProps } from "react-router";
-import type { ClusterViewRouteParams } from "../../../common/routes";
-import type { Cluster } from "../../../main/cluster";
-import { TooltipPosition } from "../tooltip";
-
-interface Props extends RouteComponentProps<ClusterViewRouteParams> {
-}
-
-export const ClusterTopbar = observer((props: Props) => {
-  const getCluster = (): Cluster | undefined => {
-    return ClusterStore.getInstance().getById(props.match.params.clusterId);
-  };
-
-  return (
-    <TopBar label={getCluster()?.name}>
-      <div>
-        <Icon
-          style={{ cursor: "default" }}
-          material="close"
-          onClick={() => {
-            navigate(`${catalogURL()}/${previousActiveTab.get()}`);
-          }}
-          tooltip={{
-            preferredPositions: TooltipPosition.BOTTOM_RIGHT,
-            children: "Back to Catalog"
-          }}
-        />
-      </div>
-    </TopBar>
-  );
-});

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

@@ -34,7 +34,7 @@ import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
 import { navigate } from "../../navigation";
 import { catalogURL, ClusterViewRouteParams } from "../../../common/routes";
 import { previousActiveTab } from "../+catalog";
-import { ClusterTopbar } from "./cluster-topbar";
+import { TopBar } from "../layout/topbar";
 
 interface Props extends RouteComponentProps<ClusterViewRouteParams> {
 }
@@ -105,7 +105,7 @@ export class ClusterView extends React.Component<Props> {
   render() {
     return (
       <div className="ClusterView flex column align-center">
-        <ClusterTopbar {...this.props}/>
+        <TopBar/>
         {this.renderStatus()}
       </div>
     );

src/renderer/components/cluster-settings/components/cluster-home-dir-setting.tsx

@@ -33,43 +33,76 @@ interface Props {
 @observer
 export class ClusterHomeDirSetting extends React.Component<Props> {
   @observable directory = "";
+  @observable defaultNamespace = "";
 
   constructor(props: Props) {
     super(props);
     makeObservable(this);
   }
 
-  componentDidMount() {
+  async componentDidMount() {
+    const kubeconfig = await this.props.cluster.getKubeconfig();
+
+    const defaultNamespace = this.props.cluster.preferences?.defaultNamespace || kubeconfig.getContextObject(this.props.cluster.contextName).namespace;
+
     disposeOnUnmount(this,
       autorun(() => {
         this.directory = this.props.cluster.preferences.terminalCWD || "";
+        this.defaultNamespace = defaultNamespace || "";
       })
     );
   }
 
-  save = () => {
+  saveCWD = () => {
     this.props.cluster.preferences.terminalCWD = this.directory;
   };
 
-  onChange = (value: string) => {
+  onChangeTerminalCWD = (value: string) => {
     this.directory = value;
   };
 
+  saveDefaultNamespace = () => {
+    if (this.defaultNamespace) {
+      this.props.cluster.preferences.defaultNamespace = this.defaultNamespace;
+    } else {
+      this.props.cluster.preferences.defaultNamespace = undefined;
+    }
+  };
+
+  onChangeDefaultNamespace = (value: string) => {
+    this.defaultNamespace = value;
+  };
+
   render() {
     return (
       <>
-        <SubTitle title="Working Directory"/>
+        <section>
-        <Input
+          <SubTitle title="Working Directory"/>
-          theme="round-black"
+          <Input
-          value={this.directory}
+            theme="round-black"
-          onChange={this.onChange}
+            value={this.directory}
-          onBlur={this.save}
+            onChange={this.onChangeTerminalCWD}
-          placeholder="$HOME"
+            onBlur={this.saveCWD}
-        />
+            placeholder="$HOME"
-        <small className="hint">
+          />
-          An explicit start path where the terminal will be launched,{" "}
+          <small className="hint">
-          this is used as the current working directory (cwd) for the shell process.
+            An explicit start path where the terminal will be launched,{" "}
-        </small>
+            this is used as the current working directory (cwd) for the shell process.
+          </small>
+        </section>
+        <section>
+          <SubTitle title="Default Namespace"/>
+          <Input
+            theme="round-black"
+            value={this.defaultNamespace}
+            onChange={this.onChangeDefaultNamespace}
+            onBlur={this.saveDefaultNamespace}
+            placeholder={this.defaultNamespace}
+          />
+          <small className="hint">
+            Default namespace used for kubectl.
+          </small>
+        </section>
       </>
     );
   }

src/renderer/components/cluster-settings/components/cluster-node-shell-setting.tsx

@@ -20,11 +20,11 @@
  */
 
 import type { Cluster } from "../../../../main/cluster";
-import { autorun, makeObservable, observable } from "mobx";
+import { makeObservable, observable } from "mobx";
 import { SubTitle } from "../../layout/sub-title";
 import React from "react";
 import { Input } from "../../input/input";
-import { disposeOnUnmount, observer } from "mobx-react";
+import { observer } from "mobx-react";
 import { Icon } from "../../icon/icon";
 import { initialNodeShellImage } from "../../../../common/cluster-types";
 
@@ -34,59 +34,42 @@ interface Props {
 
 @observer
 export class ClusterNodeShellSetting extends React.Component<Props> {
-  @observable nodeShellImage = "";
+  @observable nodeShellImage = this.props.cluster.preferences?.nodeShellImage || "";
-  @observable imagePullSecret = "";
+  @observable imagePullSecret = this.props.cluster.preferences?.imagePullSecret || "";
 
   constructor(props: Props) {
     super(props);
     makeObservable(this);
   }
 
-  componentDidMount() {
+  componentWillUnmount() {
-    disposeOnUnmount(this,
+    this.props.cluster.preferences ??= {};
-      autorun(() => {
+    this.props.cluster.preferences.nodeShellImage = this.nodeShellImage || undefined;
-        this.nodeShellImage = this.props.cluster.nodeShellImage;
+    this.props.cluster.preferences.imagePullSecret = this.imagePullSecret || undefined;
-        this.imagePullSecret = this.props.cluster.imagePullSecret;
-      })
-    );
   }
 
-  onImageChange = (value: string) => {
-    this.nodeShellImage = value;
-  };
-
-  onSecretChange = (value: string) => {
-    this.imagePullSecret = value;
-  };
-
-  saveImage = () => {
-    this.props.cluster.preferences.nodeShellImage = this.nodeShellImage;
-  };
-
-  saveSecret = () => {
-    this.props.cluster.preferences.imagePullSecret = this.imagePullSecret;
-  };
-
-  resetImage = () => {
-    this.nodeShellImage = initialNodeShellImage; //revert to default
-  };
-
-  clearSecret = () => {
-    this.imagePullSecret = "";
-  };
-
   render() {
-
     return (
       <>
         <section>
           <SubTitle title="Node shell image" id="node-shell-image"/>
           <Input
             theme="round-black"
+            placeholder={`Default image: ${initialNodeShellImage}`}
             value={this.nodeShellImage}
-            onChange={this.onImageChange}
+            onChange={value => this.nodeShellImage = value}
-            onBlur={this.saveImage}
+            iconRight={
-            iconRight={<Icon small material="close" onClick={this.resetImage} tooltip="Reset"/>}
+              this.nodeShellImage
+                ? (
+                  <Icon
+                    smallest
+                    material="close"
+                    onClick={() => this.nodeShellImage = ""}
+                    tooltip="Reset"
+                  />
+                )
+                : undefined
+            }
           />
           <small className="hint">
             Node shell image. Used for creating node shell pod.
@@ -95,15 +78,25 @@ export class ClusterNodeShellSetting extends React.Component<Props> {
         <section>
           <SubTitle title="Image pull secret" id="image-pull-secret"/>
           <Input
-            placeholder={"Add a secret name..."}
+            placeholder="Specify a secret name..."
             theme="round-black"
             value={this.imagePullSecret}
-            onChange={this.onSecretChange}
+            onChange={value => this.imagePullSecret = value}
-            onBlur={this.saveSecret}
+            iconRight={
-            iconRight={<Icon small material="close" onClick={this.clearSecret} tooltip="Clear"/>}
+              this.imagePullSecret
+                ? (
+                  <Icon
+                    smallest
+                    material="close"
+                    onClick={() => this.imagePullSecret = ""}
+                    tooltip="Clear"
+                  />
+                )
+                : undefined
+            }
           />
           <small className="hint">
-            Name of a pre-existing secret (optional). Used for pulling image from a private registry.
+            Name of a pre-existing secret. An optional setting. Used for pulling image from a private registry.
           </small>
         </section>
       </>

src/renderer/components/hotbar/hotbar-menu.tsx

@@ -52,7 +52,7 @@ export class HotbarMenu extends React.Component<Props> {
       return null;
     }
 
-    return item ? catalogEntityRegistry.items.find((entity) => entity.metadata.uid === item.entity.uid) : null;
+    return catalogEntityRegistry.getById(item?.entity.uid) ?? null;
   }
 
   onDragEnd(result: DropResult) {

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

@@ -20,11 +20,46 @@
  */
 
 import React from "react";
-import { render } from "@testing-library/react";
+import { render, fireEvent } from "@testing-library/react";
 import "@testing-library/jest-dom/extend-expect";
 import { TopBar } from "../topbar";
 import { TopBarRegistry } from "../../../../extensions/registries";
 
+jest.mock(
+  "electron",
+  () => ({
+    ipcRenderer: {
+      on: jest.fn(
+        (channel: string, listener: (event: any, ...args: any[]) => void) => {
+          if (channel === "history:can-go-back") {
+            listener({}, true);
+          }
+
+          if (channel === "history:can-go-forward") {
+            listener({}, true);
+          }
+        }
+      ),
+    },
+  })
+);
+
+const goBack = jest.fn();
+const goForward = jest.fn();
+
+jest.mock("@electron/remote", () => {
+  return {
+    webContents: {
+      getFocusedWebContents: () => {
+        return {
+          goBack,
+          goForward
+        };
+      }
+    }
+  };
+});
+
 describe("<TopBar/>", () => {
   beforeEach(() => {
     TopBarRegistry.createInstance();
@@ -35,15 +70,38 @@ describe("<TopBar/>", () => {
   });
 
   it("renders w/o errors", () => {
-    const { container } = render(<TopBar label="test bar" />);
+    const { container } = render(<TopBar/>);
 
     expect(container).toBeInstanceOf(HTMLElement);
   });
 
-  it("renders title", async () => {
+  it("renders history arrows", async () => {
-    const { getByTestId } = render(<TopBar label="topbar" />);
+    const { getByTestId } = render(<TopBar/>);
 
-    expect(await getByTestId("topbarLabel")).toHaveTextContent("topbar");
+    expect(await getByTestId("history-back")).toBeInTheDocument();
+    expect(await getByTestId("history-forward")).toBeInTheDocument();
+  });
+
+  it("enables arrow by ipc event", async () => {
+    const { getByTestId } = render(<TopBar/>);
+
+    expect(await getByTestId("history-back")).not.toHaveClass("disabled");
+    expect(await getByTestId("history-forward")).not.toHaveClass("disabled");
+  });
+
+  it("triggers browser history back and forward", async () => {
+    const { getByTestId } = render(<TopBar/>);
+
+    const prevButton = await getByTestId("history-back");
+    const nextButton = await getByTestId("history-forward");
+
+    fireEvent.click(prevButton);
+
+    expect(goBack).toBeCalled();
+
+    fireEvent.click(nextButton);
+
+    expect(goForward).toBeCalled();
   });
 
   it("renders items", async () => {
@@ -58,7 +116,7 @@ describe("<TopBar/>", () => {
       }
     ]);
 
-    const { getByTestId } = render(<TopBar label="topbar" />);
+    const { getByTestId } = render(<TopBar/>);
 
     expect(await getByTestId(testId)).toHaveTextContent(text);
   });

src/renderer/components/layout/sidebar.scss

@@ -45,4 +45,12 @@
     padding: $padding;
     text-align: center;
   }
+
+  .cluster-name {
+    padding: 1.25rem;
+    font-weight: bold;
+    font-size: 1.5rem;
+    word-break: break-all;
+    color: var(--textColorAccent);
+  }
 }

src/renderer/components/layout/sidebar.tsx

@@ -40,6 +40,8 @@ import { SidebarItem } from "./sidebar-item";
 import { Apps } from "../+apps";
 import * as routes from "../../../common/routes";
 import { Config } from "../+config";
+import { ClusterStore } from "../../../common/cluster-store";
+import { App } from "../app";
 
 interface Props {
   className?: string;
@@ -181,6 +183,9 @@ export class Sidebar extends React.Component<Props> {
 
     return (
       <div className={cssNames(Sidebar.displayName, "flex column", className)}>
+        <div className="cluster-name">
+          {ClusterStore.getInstance().getById(App.clusterId)?.name}
+        </div>
         <div className={cssNames("sidebar-nav flex column box grow-fixed")}>
           <SidebarItem
             id="cluster"

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

@@ -30,11 +30,8 @@
   grid-area: topbar;
 }
 
-.title {
+.history {
-  @apply font-bold px-6;
+  @apply flex items-center;
-  color: var(--textColorAccent);
-  align-items: center;
-  display: flex;
 }
 
 .controls {

src/renderer/components/layout/topbar.tsx

@@ -20,15 +20,30 @@
  */
 
 import styles from "./topbar.module.css";
-import React from "react";
+import React, { useEffect } from "react";
 import { observer } from "mobx-react";
 import { TopBarRegistry } from "../../../extensions/registries";
+import { Icon } from "../icon";
+import { webContents } from "@electron/remote";
+import { observable } from "mobx";
+import { ipcRendererOn } from "../../../common/ipc";
+import { watchHistoryState } from "../../remote-helpers/history-updater";
 
 interface Props extends React.HTMLAttributes<any> {
-  label: React.ReactNode;
 }
 
-export const TopBar = observer(({ label, children, ...rest }: Props) => {
+const prevEnabled = observable.box(false);
+const nextEnabled = observable.box(false);
+
+ipcRendererOn("history:can-go-back", (event, state: boolean) => {
+  prevEnabled.set(state);
+});
+
+ipcRendererOn("history:can-go-forward", (event, state: boolean) => {
+  nextEnabled.set(state);
+});
+
+export const TopBar = observer(({ children, ...rest }: Props) => {
   const renderRegisteredItems = () => {
     const items = TopBarRegistry.getInstance().getItems();
 
@@ -37,7 +52,7 @@ export const TopBar = observer(({ label, children, ...rest }: Props) => {
     }
 
     return (
-      <div className="px-6">
+      <div>
         {items.map((registration, index) => {
           if (!registration?.components?.Item) {
             return null;
@@ -53,9 +68,38 @@ export const TopBar = observer(({ label, children, ...rest }: Props) => {
     );
   };
 
+  const goBack = () => {
+    webContents.getFocusedWebContents()?.goBack();
+  };
+
+  const goForward = () => {
+    webContents.getFocusedWebContents()?.goForward();
+  };
+
+  useEffect(() => {
+    const disposer = watchHistoryState();
+
+    return () => disposer();
+  }, []);
+
   return (
     <div className={styles.topBar} {...rest}>
-      <div className={styles.title} data-testid="topbarLabel">{label}</div>
+      <div className={styles.history}>
+        <Icon
+          data-testid="history-back"
+          material="arrow_back"
+          className="ml-5"
+          onClick={goBack}
+          disabled={!prevEnabled.get()}
+        />
+        <Icon
+          data-testid="history-forward"
+          material="arrow_forward"
+          className="ml-5"
+          onClick={goForward}
+          disabled={!nextEnabled.get()}
+        />
+      </div>
       <div className={styles.controls}>
         {renderRegisteredItems()}
         {children}

src/renderer/remote-helpers/history-updater.ts

@@ -19,23 +19,14 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import React from "react";
+import { webContents } from "@electron/remote";
-import { welcomeURL } from "../../../common/routes";
+import { reaction } from "mobx";
-import { navigate } from "../../navigation";
+import { broadcastMessage } from "../../common/ipc";
-import { Icon } from "../icon";
+import { navigation } from "../navigation";
-import { TopBar } from "../layout/topbar";
 
-export function CatalogTopbar() {
+export function watchHistoryState() {
-  return (
+  return reaction(() => navigation.location, () => {
-    <TopBar label="Catalog">
+    broadcastMessage("history:can-go-back", webContents.getFocusedWebContents()?.canGoBack());
-      <div>
+    broadcastMessage("history:can-go-forward", webContents.getFocusedWebContents()?.canGoForward());
-        <Icon
+  });
-          style={{ cursor: "default" }}
-          material="close"
-          onClick={() => navigate(welcomeURL())}
-          tooltip="Close Catalog"
-        />
-      </div>
-    </TopBar>
-  );
 }

yarn.lock

@@ -1717,10 +1717,10 @@
     "@types/node" "*"
     form-data "^3.0.0"
 
-"@types/node@*":
+"@types/node@*", "@types/node@^14.6.2":
-  version "14.14.41"
+  version "14.17.5"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.41.tgz#d0b939d94c1d7bd53d04824af45f1139b8c45615"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.17.5.tgz#b59daf6a7ffa461b5648456ca59050ba8e40ed54"
-  integrity sha512-dueRKfaJL4RTtSa7bWeTK1M+VH+Gns73oCgzvYfHZywRCoPSd8EkXBL0mZ9unPTveBn+D9phZBaxuzpwjWkW0g==
+  integrity sha512-bjqH2cX/O33jXT/UmReo2pM7DIJREPMnarixbQ57DOOzzFaI6D2+IcwaJQaJpv0M1E9TIhPCYVxrkcityLjlqA==
 
 "@types/node@12.20", "@types/node@^12.0.12":
   version "12.20.21"
@@ -1732,20 +1732,15 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-10.17.24.tgz#c57511e3a19c4b5e9692bb2995c40a3a52167944"
   integrity sha512-5SCfvCxV74kzR3uWgTYiGxrd69TbT1I6+cMx1A5kEly/IVveJBimtAMlXiEyVFn5DvUFewQWxOOiJhlxeQwxgA==
 
-"@types/node@^14.6.2":
-  version "14.17.5"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.17.5.tgz#b59daf6a7ffa461b5648456ca59050ba8e40ed54"
-  integrity sha512-bjqH2cX/O33jXT/UmReo2pM7DIJREPMnarixbQ57DOOzzFaI6D2+IcwaJQaJpv0M1E9TIhPCYVxrkcityLjlqA==
-
 "@types/normalize-package-data@^2.4.0":
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz#e486d0d97396d79beedd0a6e33f4534ff6b4973e"
   integrity sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==
 
-"@types/npm@^2.0.31":
+"@types/npm@^2.0.32":
-  version "2.0.31"
+  version "2.0.32"
-  resolved "https://registry.yarnpkg.com/@types/npm/-/npm-2.0.31.tgz#aad3aef7e165f2911a052abf548fbcc1bb468577"
+  resolved "https://registry.yarnpkg.com/@types/npm/-/npm-2.0.32.tgz#036682075b9c2116b510fe24b52a5b932e3a99d5"
-  integrity sha512-v4JpUx83wVGItleYsnYeZrM8NTLSnYDfTE/iGm4owy6zZPNFNmnsvvrxiYtG3cVHt/XutzTjUBQ9Bh8bnvEkCw==
+  integrity sha512-9Lg4woNVzJCtac0lET91H65lbO+8YXfk0nmlmoPGhHXMdaVEDloH6zOPIYMy2n39z/aCXXQR0nax66EDekAyIQ==
   dependencies:
     "@types/node" "*"
 
@@ -5065,10 +5060,10 @@ domhandler@^2.3.0:
   dependencies:
     domelementtype "1"
 
-dompurify@^2.0.17:
+dompurify@^2.3.1:
-  version "2.0.17"
+  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.0.17.tgz#505ffa126a580603df4007e034bdc9b6b738668e"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.3.1.tgz#a47059ca21fd1212d3c8f71fdea6943b8bfbdf6a"
-  integrity sha512-nNwwJfW55r8akD8MSFz6k75bzyT2y6JEa1O3JrZFBf+Y5R9JXXU4OsRl0B9hKoPgHTw2b7ER5yJ5Md97MMUJPg==
+  integrity sha512-xGWt+NHAQS+4tpgbOAI08yxW0Pr256Gu/FNE2frZVTbgrBUn8M7tz7/ktS/LZ2MHeGqz6topj0/xY+y8R5FBFw==
 
 domutils@1.5.1:
   version "1.5.1"
@@ -5500,10 +5495,10 @@ esbuild@^0.11.19:
   resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.11.23.tgz#c42534f632e165120671d64db67883634333b4b8"
   integrity sha512-iaiZZ9vUF5wJV8ob1tl+5aJTrwDczlvGP0JoMmnpC2B0ppiMCu8n8gmy5ZTGl5bcG081XBVn+U+jP+mPFm5T5Q==
 
-esbuild@^0.12.12:
+esbuild@^0.12.24:
-  version "0.12.12"
+  version "0.12.24"
-  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.12.12.tgz#2c3815c508e20f771cf6b2ffb03aa7349e651657"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.12.24.tgz#21966fad25a80f368ed308101e88102bce0dc68f"
-  integrity sha512-fdB/8HRg9u95Zi4/qV+osrfzpvLzubFKUr8SkZf/kUKImLiX61Y7qBzV14FCKphFk7YoXWY85nbPGkI6pq+Zeg==
+  integrity sha512-C0ibY+HsXzYB6L/pLWEiWjMpghKsIc58Q5yumARwBQsHl9DXPakW+5NI/Y9w4YXiz0PEP6XTGTT/OV4Nnsmb4A==
 
 escalade@^3.1.1:
   version "3.1.1"
@@ -6851,6 +6846,11 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.6.tgz#ff040b2b0853b23c3d31027523706f1885d76bee"
   integrity sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==
 
+graceful-fs@^4.2.3:
+  version "4.2.8"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.8.tgz#e412b8d33f5e006593cbd3cee6df9f2cebbe802a"
+  integrity sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==
+
 "graceful-readlink@>= 1.0.0":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
@@ -10014,6 +10014,22 @@ node-forge@^0.8.2:
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.8.5.tgz#57906f07614dc72762c84cef442f427c0e1b86ee"
   integrity sha512-vFMQIWt+J/7FLNyKouZ9TazT74PRV3wgv9UT4cRjC8BffxFbKXkgIWR42URCPSnHm/QDz6BOlb2Q0U4+VQT67Q==
 
+node-gyp@7.1.2:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-7.1.2.tgz#21a810aebb187120251c3bcec979af1587b188ae"
+  integrity sha512-CbpcIo7C3eMu3dL1c3d0xw449fHIGALIJsRP4DDPHpyiW8vcriNY7ubh9TE4zEKfSxscY7PjeFnshE7h75ynjQ==
+  dependencies:
+    env-paths "^2.2.0"
+    glob "^7.1.4"
+    graceful-fs "^4.2.3"
+    nopt "^5.0.0"
+    npmlog "^4.1.2"
+    request "^2.88.2"
+    rimraf "^3.0.2"
+    semver "^7.3.2"
+    tar "^6.0.2"
+    which "^2.0.2"
+
 node-gyp@^3.8.0:
   version "3.8.0"
   resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-3.8.0.tgz#540304261c330e80d0d5edce253a68cb3964218c"
@@ -10169,6 +10185,13 @@ nopt@^4.0.1, nopt@^4.0.3:
     abbrev "1"
     osenv "^0.1.4"
 
+nopt@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-5.0.0.tgz#530942bb58a512fccafe53fe210f13a25355dc88"
+  integrity sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==
+  dependencies:
+    abbrev "1"
+
 nopt@~1.0.10:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-1.0.10.tgz#6ddd21bd2a31417b92727dd585f8a6f37608ebee"
@@ -11305,16 +11328,16 @@ postcss-load-config@^3.0.1, postcss-load-config@^3.1.0:
     lilconfig "^2.0.3"
     yaml "^1.10.2"
 
-postcss-loader@4.0.3:
+postcss-loader@4.3.0:
-  version "4.0.3"
+  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-4.0.3.tgz#337f51bbdfb02269fb42f7db9fc7f0a93c1b2e3f"
+  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-4.3.0.tgz#2c4de9657cd4f07af5ab42bd60a673004da1b8cc"
-  integrity sha512-jHboC/AOnJLPu8/974hODCJ/rNAa2YhhJOclUeuRlAmFpKmEcBY6az8y1ejHyYc2LThzPl8qPRekh2Yz3CiRKA==
+  integrity sha512-M/dSoIiNDOo8Rk0mUqoj4kpGq91gcxCfb9PoyZVdZ76/AuhxylHDYZblNE8o+EQ9AMSASeMFEKxZf5aU6wlx1Q==
   dependencies:
     cosmiconfig "^7.0.0"
     klona "^2.0.4"
     loader-utils "^2.0.0"
-    schema-utils "^2.7.1"
+    schema-utils "^3.0.0"
-    semver "^7.3.2"
+    semver "^7.3.4"
 
 postcss-modules-extract-imports@^3.0.0:
   version "3.0.0"
@@ -12648,7 +12671,7 @@ schema-utils@^1.0.0:
     ajv-errors "^1.0.0"
     ajv-keywords "^3.1.0"
 
-schema-utils@^2.6.1, schema-utils@^2.6.5, schema-utils@^2.7.1:
+schema-utils@^2.6.1, schema-utils@^2.6.5:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.1.tgz#1ca4f32d1b24c590c203b8e7a50bf0ea4cd394d7"
   integrity sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==