Merge branch 'master' into extensions/validate-lens-engine-version

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>
2025-05-20 05:10:56 +00:00 · 2021-06-09 06:58:13 +03:00 · 2021-06-09 06:58:13 +03:00 · 2643665f3d
commit 2643665f3d
parent ff9dd1a8c6 6044d08a74
51 changed files with 986 additions and 1252 deletions
--- a/.github/workflows/publish-master-npm.yml
+++ b/.github/workflows/publish-master-npm.yml
@ -1,10 +1,8 @@
 name: Publish NPM Package `master`
 on:
-  pull_request:
+  push:
    branches:
      - master
-    types:
-      - closed
 jobs:
  publish:
    name: Publish NPM Package `master`
--- a/9
+++ b/9
@ -3,6 +3,7 @@ CMD_ARGS = $(filter-out $@,$(MAKECMDGOALS))
 %:
  @:

+NPM_RELEASE_TAG ?= latest
 EXTENSIONS_DIR = ./extensions
 extensions = $(foreach dir, $(wildcard $(EXTENSIONS_DIR)/*), ${dir})
 extension_node_modules = $(foreach dir, $(wildcard $(EXTENSIONS_DIR)/*), ${dir}/node_modules)
@ -82,8 +83,12 @@ $(extension_node_modules): node_modules
 $(extension_dists): src/extensions/npm/extensions/dist
 	cd $(@:/dist=) && ../../node_modules/.bin/npm run build

+.PHONY: clean-old-extensions
+clean-old-extensions:
+	find ./extensions -mindepth 1 -maxdepth 1 -type d '!' -exec test -e '{}/package.json' \; -exec rm -rf {} \;
+
 .PHONY: build-extensions
-build-extensions: node_modules $(extension_node_modules) $(extension_dists)
+build-extensions: node_modules clean-old-extensions $(extension_node_modules) $(extension_dists)

 .PHONY: test-extensions
 test-extensions: $(extension_node_modules)
@ -110,7 +115,7 @@ build-extension-types: node_modules src/extensions/npm/extensions/dist
 .PHONY: publish-npm
 publish-npm: node_modules build-npm
 	./node_modules/.bin/npm config set '//registry.npmjs.org/:_authToken' "${NPM_TOKEN}"
-	cd src/extensions/npm/extensions && npm publish --access=public --tag=${NPM_RELEASE_TAG:-latest}
+	cd src/extensions/npm/extensions && npm publish --access=public --tag=$(NPM_RELEASE_TAG)
 	git restore src/extensions/npm/extensions/package.json

 .PHONY: docs
--- a/docs/extensions/typedoc-readme.md.tpl
+++ b/docs/extensions/typedoc-readme.md.tpl
@ -2,6 +2,6 @@

 ## APIs

- [Common](modules/_common_api_index_.md)
- [Main](modules/_main_api_index_.md)
- [Renderer](modules/_renderer_api_index_.md)
+- [Common](modules/common.md)
+- [Main](modules/main.md)
+- [Renderer](modules/renderer.md)
--- a/extensions/pod-menu/renderer.tsx
+++ b/extensions/pod-menu/renderer.tsx
@ -20,12 +20,20 @@
 */

 import { Renderer } from "@k8slens/extensions";
+import { PodAttachMenu, PodAttachMenuProps } from "./src/attach-menu";
 import { PodShellMenu, PodShellMenuProps } from "./src/shell-menu";
 import { PodLogsMenu, PodLogsMenuProps } from "./src/logs-menu";
 import React from "react";

 export default class PodMenuRendererExtension extends Renderer.LensExtension {
  kubeObjectMenuItems = [
+    {
+      kind: "Pod",
+      apiVersions: ["v1"],
+      components: {
+        MenuItem: (props: PodAttachMenuProps) => <PodAttachMenu {...props} />
+      }
+    }, 
    {
      kind: "Pod",
      apiVersions: ["v1"],
--- a/extensions/pod-menu/src/attach-menu.tsx
+++ b/extensions/pod-menu/src/attach-menu.tsx
@ -0,0 +1,101 @@
+/**
+ * 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 { Renderer, Common } from "@k8slens/extensions";
+
+type Pod = Renderer.K8sApi.Pod;
+
+const {
+  Component: {
+    createTerminalTab,
+    terminalStore,
+    MenuItem,
+    Icon,
+    SubMenu,
+    StatusBrick,
+  },
+  Navigation,
+} = Renderer;
+const {
+  Util,
+} = Common;
+
+export interface PodAttachMenuProps extends Renderer.Component.KubeObjectMenuProps<Pod> {
+}
+
+export class PodAttachMenu extends React.Component<PodAttachMenuProps> {
+  async attachToPod(container?: string) {
+    const { object: pod } = this.props;
+    const containerParam = container ? `-c ${container}` : "";
+    let command = `kubectl attach -i -t -n ${pod.getNs()} ${pod.getName()} ${containerParam}`;
+
+    if (window.navigator.platform !== "Win32") {
+      command = `exec ${command}`;
+    }
+
+    const shell = createTerminalTab({
+      title: `Pod: ${pod.getName()} (namespace: ${pod.getNs()}) [Attached]`
+    });
+
+    terminalStore.sendCommand(command, {
+      enter: true,
+      tabId: shell.id
+    });
+    
+    Navigation.hideDetails();
+  }
+
+  render() {
+    const { object, toolbar } = this.props;
+    const containers = object.getRunningContainers();
+
+    if (!containers.length) return null;
+
+    return (
+      <MenuItem onClick={Util.prevDefault(() => this.attachToPod(containers[0].name))}>
+        <Icon material="pageview" interactive={toolbar} title="Attach to Pod"/>
+        <span className="title">Attach Pod</span>
+        {containers.length > 1 && (
+          <>
+            <Icon className="arrow" material="keyboard_arrow_right"/>
+            <SubMenu>
+              {
+                containers.map(container => {
+                  const { name } = container;
+
+                  return (
+                    <MenuItem key={name} onClick={Util.prevDefault(() => this.attachToPod(name))} className="flex align-center">
+                      <StatusBrick/>
+                      <span>{name}</span>
+                    </MenuItem>
+                  );
+                })
+              }
+            </SubMenu>
+          </>
+        )}
+      </MenuItem>
+    );
+  }
+}
--- a/integration/tests/cluster-pages.tests.ts
+++ b/integration/tests/cluster-pages.tests.ts
@ -410,7 +410,7 @@ describe("Lens cluster pages", () => {
        await app.client.click(".list .TableRow:first-child");
        await app.client.waitForVisible(".Drawer");
        await app.client.waitForVisible(`ul.KubeObjectMenu li.MenuItem i[title="Logs"]`);
-        await app.client.click(".drawer-title .Menu li:nth-child(2)");
+        await app.client.click("ul.KubeObjectMenu li.MenuItem i[title='Logs']");
        // Check if controls are available
        await app.client.waitForVisible(".LogList .VirtualList");
        await app.client.waitForVisible(".LogResourceSelector");
--- a/package.json
+++ b/package.json
@ -3,7 +3,7 @@
  "productName": "OpenLens",
  "description": "OpenLens - Open Source IDE for Kubernetes",
  "homepage": "https://github.com/lensapp/lens",
-  "version": "5.0.0-beta.6",
+  "version": "5.0.0-beta.7",
  "main": "static/build/main.js",
  "copyright": "© 2021 OpenLens Authors",
  "license": "MIT",
@ -39,8 +39,8 @@
    "lint": "yarn run eslint --ext js,ts,tsx --max-warnings=0 .",
    "lint:fix": "yarn run lint --fix",
    "mkdocs-serve-local": "docker build -t mkdocs-serve-local:latest mkdocs/ && docker run --rm -it -p 8000:8000 -v ${PWD}:/docs mkdocs-serve-local:latest",
-    "verify-docs": "docker build -t mkdocs-serve-local:latest mkdocs/ && docker run --rm -v ${PWD}:/docs mkdocs-serve-local:latest build --strict",
-    "typedocs-extensions-api": "yarn run typedoc --ignoreCompilerErrors --readme docs/extensions/typedoc-readme.md.tpl --name @k8slens/extensions --out docs/extensions/api --mode library --excludePrivate --hideBreadcrumbs --includes src/ src/extensions/extension-api.ts",
+    "verify-docs": "docker build -t mkdocs-serve-local:latest mkdocs/ && docker run --rm -v ${PWD}:/docs mkdocs-serve-local:latest build",
+    "typedocs-extensions-api": "yarn run typedoc src/extensions/extension-api.ts",
    "version-checkout": "cat package.json | jq '.version' -r | xargs printf \"release/v%s\" | xargs git checkout -b",
    "version-commit": "cat package.json | jq '.version' -r | xargs printf \"release v%s\" | git commit --no-edit -s -F -",
    "version": "yarn run version-checkout && git add package.json && yarn run version-commit",
@ -181,7 +181,7 @@
  "dependencies": {
    "@hapi/call": "^8.0.1",
    "@hapi/subtext": "^7.0.3",
-    "@kubernetes/client-node": "^0.12.0",
+    "@kubernetes/client-node": "^0.14.3",
    "abort-controller": "^3.0.0",
    "array-move": "^3.0.1",
    "auto-bind": "^4.0.0",
@ -203,6 +203,7 @@
    "handlebars": "^4.7.7",
    "http-proxy": "^1.18.1",
    "immer": "^8.0.1",
+    "joi": "^17.4.0",
    "js-yaml": "^3.14.0",
    "jsdom": "^16.4.0",
    "jsonpath": "^1.0.2",
@ -214,7 +215,7 @@
    "mobx-observable-history": "^2.0.1",
    "mobx-react": "^7.1.0",
    "mock-fs": "^4.12.0",
-    "moment": "^2.26.0",
+    "moment": "^2.29.1",
    "moment-timezone": "^0.5.33",
    "node-pty": "^0.9.0",
    "npm": "^6.14.8",
@ -227,7 +228,7 @@
    "react-router": "^5.2.0",
    "readable-stream": "^3.6.0",
    "request": "^2.88.2",
-    "request-promise-native": "^1.0.8",
+    "request-promise-native": "^1.0.9",
    "semver": "^7.3.2",
    "serializr": "^2.0.3",
    "shell-env": "^3.0.1",
@ -273,14 +274,14 @@
    "@types/mini-css-extract-plugin": "^0.9.1",
    "@types/mock-fs": "^4.10.0",
    "@types/module-alias": "^2.0.0",
-    "@types/node": "^12.12.45",
+    "@types/node": "12.20",
    "@types/npm": "^2.0.31",
    "@types/progress-bar-webpack-plugin": "^2.1.0",
    "@types/proper-lockfile": "^4.1.1",
    "@types/randomcolor": "^0.5.5",
    "@types/react": "^17.0.0",
    "@types/react-beautiful-dnd": "^13.0.0",
-    "@types/react-dom": "^17.0.0",
+    "@types/react-dom": "^17.0.6",
    "@types/react-router-dom": "^5.1.6",
    "@types/react-select": "3.1.2",
    "@types/react-table": "^7.7.0",
@ -289,7 +290,7 @@
    "@types/request": "^2.48.5",
    "@types/request-promise-native": "^1.0.17",
    "@types/semver": "^7.2.0",
-    "@types/sharp": "^0.26.0",
+    "@types/sharp": "^0.28.3",
    "@types/shelljs": "^0.8.8",
    "@types/spdy": "^3.4.4",
    "@types/tar": "^4.0.4",
@ -335,7 +336,7 @@
    "jest-mock-extended": "^1.0.10",
    "make-plural": "^6.2.2",
    "mini-css-extract-plugin": "^1.6.0",
-    "node-loader": "^0.6.0",
+    "node-loader": "^1.0.3",
    "node-sass": "^4.14.1",
    "nodemon": "^2.0.4",
    "open": "^7.3.1",
@ -363,8 +364,8 @@
    "ts-node": "^8.10.2",
    "type-fest": "^1.0.2",
    "typed-emitter": "^1.3.1",
-    "typedoc": "0.17.0-3",
-    "typedoc-plugin-markdown": "^2.4.0",
+    "typedoc": "0.21.0-beta.2",
+    "typedoc-plugin-markdown": "^3.9.0",
    "typeface-roboto": "^0.0.75",
    "typescript": "^4.3.2",
    "typescript-plugin-css-modules": "^3.2.0",
--- a/src/common/tests/cluster-store.test.ts
+++ b/src/common/tests/cluster-store.test.ts
@ -22,8 +22,10 @@
 import fs from "fs";
 import mockFs from "mock-fs";
 import yaml from "js-yaml";
+import path from "path";
+import fse from "fs-extra";
 import { Cluster } from "../../main/cluster";
-import { ClusterStore, getClusterIdFromHost } from "../cluster-store";
+import { ClusterId, ClusterStore, getClusterIdFromHost } from "../cluster-store";
 import { Console } from "console";
 import { stdout, stderr } from "process";

@ -54,6 +56,15 @@ users:
    token: kubeconfig-user-q4lm4:xxxyyyy
 `;

+function embed(clusterId: ClusterId, contents: any): string {
+  const absPath = ClusterStore.getCustomKubeConfigPath(clusterId);
+
+  fse.ensureDirSync(path.dirname(absPath));
+  fse.writeFileSync(absPath, contents, { encoding: "utf-8", mode: 0o600 });
+
+  return absPath;
+}
+
 jest.mock("electron", () => {
  return {
    app: {
@ -102,7 +113,7 @@ describe("empty config", () => {
            icon: "data:image/jpeg;base64, iVBORw0KGgoAAAANSUhEUgAAA1wAAAKoCAYAAABjkf5",
            clusterName: "minikube"
          },
-          kubeConfigPath: ClusterStore.embedCustomKubeConfig("foo", kubeconfig)
+          kubeConfigPath: embed("foo", kubeconfig)
        })
      );
    });
@ -130,7 +141,7 @@ describe("empty config", () => {
          preferences: {
            clusterName: "prod"
          },
-          kubeConfigPath: ClusterStore.embedCustomKubeConfig("prod", kubeconfig)
+          kubeConfigPath: embed("prod", kubeconfig)
        }),
        new Cluster({
          id: "dev",
@ -138,7 +149,7 @@ describe("empty config", () => {
          preferences: {
            clusterName: "dev"
          },
-          kubeConfigPath: ClusterStore.embedCustomKubeConfig("dev", kubeconfig)
+          kubeConfigPath: embed("dev", kubeconfig)
        })
      );
    });
@ -149,7 +160,7 @@ describe("empty config", () => {
    });

    it("check if cluster's kubeconfig file saved", () => {
-      const file = ClusterStore.embedCustomKubeConfig("boo", "kubeconfig");
+      const file = embed("boo", "kubeconfig");

      expect(fs.readFileSync(file, "utf8")).toBe("kubeconfig");
    });
@ -160,6 +171,7 @@ describe("config with existing clusters", () => {
  beforeEach(() => {
    ClusterStore.resetInstance();
    const mockOpts = {
+      "temp-kube-config": kubeconfig,
      "tmp": {
        "lens-cluster-store.json": JSON.stringify({
          __internal__: {
@ -170,20 +182,20 @@ describe("config with existing clusters", () => {
          clusters: [
            {
              id: "cluster1",
-              kubeConfigPath: kubeconfig,
+              kubeConfigPath: "./temp-kube-config",
              contextName: "foo",
              preferences: { terminalCWD: "/foo" },
              workspace: "default"
            },
            {
              id: "cluster2",
-              kubeConfigPath: kubeconfig,
+              kubeConfigPath: "./temp-kube-config",
              contextName: "foo2",
              preferences: { terminalCWD: "/foo2" }
            },
            {
              id: "cluster3",
-              kubeConfigPath: kubeconfig,
+              kubeConfigPath: "./temp-kube-config",
              contextName: "foo",
              preferences: { terminalCWD: "/foo" },
              workspace: "foo",
@ -256,6 +268,8 @@ users:

    ClusterStore.resetInstance();
    const mockOpts = {
+      "invalid-kube-config": invalidKubeconfig,
+      "valid-kube-config": kubeconfig,
      "tmp": {
        "lens-cluster-store.json": JSON.stringify({
          __internal__: {
@ -266,14 +280,14 @@ users:
          clusters: [
            {
              id: "cluster1",
-              kubeConfigPath: invalidKubeconfig,
+              kubeConfigPath: "./invalid-kube-config",
              contextName: "test",
              preferences: { terminalCWD: "/foo" },
              workspace: "foo",
            },
            {
              id: "cluster2",
-              kubeConfigPath: kubeconfig,
+              kubeConfigPath: "./valid-kube-config",
              contextName: "foo",
              preferences: { terminalCWD: "/foo" },
              workspace: "default"
--- a/src/common/tests/kube-helpers.test.ts
+++ b/src/common/tests/kube-helpers.test.ts
@ -20,7 +20,7 @@
 */

 import { KubeConfig } from "@kubernetes/client-node";
-import { validateKubeConfig, loadConfig, getNodeWarningConditions } from "../kube-helpers";
+import { validateKubeConfig, loadConfigFromString, getNodeWarningConditions } from "../kube-helpers";

 const kubeconfig = `
 apiVersion: v1
@ -59,8 +59,6 @@ users:
      command: foo
 `;

-const kc = new KubeConfig();
-
 interface kubeconfig {
  apiVersion: string,
  clusters: [{
@ -88,6 +86,8 @@ let mockKubeConfig: kubeconfig;

 describe("kube helpers", () => {
  describe("validateKubeconfig", () => {
+    const kc = new KubeConfig();
+
    beforeAll(() => {
      kc.loadFromString(kubeconfig);
    });
@ -164,12 +164,12 @@ describe("kube helpers", () => {
      it("invalid yaml string", () => {
        const invalidYAMLString = "fancy foo config";

-        expect(() => loadConfig(invalidYAMLString)).toThrowError("must be an object");
+        expect(loadConfigFromString(invalidYAMLString).error).toBeInstanceOf(Error);
      });
      it("empty contexts", () => {
-        const emptyContexts = `apiVersion: v1\ncontexts:`;
+        const emptyContexts = `apiVersion: v1\ncontexts: []`;

-        expect(() => loadConfig(emptyContexts)).not.toThrow();
+        expect(loadConfigFromString(emptyContexts).error).toBeUndefined();
      });
    });

@ -200,17 +200,17 @@ describe("kube helpers", () => {
      });

      it("single context is ok", async () => {
-        const kc:KubeConfig = loadConfig(JSON.stringify(mockKubeConfig));
+        const { config } = loadConfigFromString(JSON.stringify(mockKubeConfig));

-        expect(kc.getCurrentContext()).toBe("minikube");
+        expect(config.getCurrentContext()).toBe("minikube");
      });

      it("multiple context is ok", async () => {
        mockKubeConfig.contexts.push({context: {cluster: "cluster-2", user: "cluster-2"}, name: "cluster-2"});
-        const kc:KubeConfig = loadConfig(JSON.stringify(mockKubeConfig));
+        const { config } = loadConfigFromString(JSON.stringify(mockKubeConfig));

-        expect(kc.getCurrentContext()).toBe("minikube");
-        expect(kc.contexts.length).toBe(2);
+        expect(config.getCurrentContext()).toBe("minikube");
+        expect(config.contexts.length).toBe(2);
      });
    });

@ -243,40 +243,40 @@ describe("kube helpers", () => {
      it("empty name in context causes it to be removed", async () => {
        mockKubeConfig.contexts.push({context: {cluster: "cluster-2", user: "cluster-2"}, name: ""});
        expect(mockKubeConfig.contexts.length).toBe(2);
-        const kc:KubeConfig = loadConfig(JSON.stringify(mockKubeConfig));
+        const { config } = loadConfigFromString(JSON.stringify(mockKubeConfig));

-        expect(kc.getCurrentContext()).toBe("minikube");
-        expect(kc.contexts.length).toBe(1);
+        expect(config.getCurrentContext()).toBe("minikube");
+        expect(config.contexts.length).toBe(1);
      });

      it("empty cluster in context causes it to be removed", async () => {
        mockKubeConfig.contexts.push({context: {cluster: "", user: "cluster-2"}, name: "cluster-2"});
        expect(mockKubeConfig.contexts.length).toBe(2);
-        const kc:KubeConfig = loadConfig(JSON.stringify(mockKubeConfig));
+        const { config } = loadConfigFromString(JSON.stringify(mockKubeConfig));

-        expect(kc.getCurrentContext()).toBe("minikube");
-        expect(kc.contexts.length).toBe(1);
+        expect(config.getCurrentContext()).toBe("minikube");
+        expect(config.contexts.length).toBe(1);
      });

      it("empty user in context causes it to be removed", async () => {
        mockKubeConfig.contexts.push({context: {cluster: "cluster-2", user: ""}, name: "cluster-2"});
        expect(mockKubeConfig.contexts.length).toBe(2);
-        const kc:KubeConfig = loadConfig(JSON.stringify(mockKubeConfig));
+        const { config } = loadConfigFromString(JSON.stringify(mockKubeConfig));

-        expect(kc.getCurrentContext()).toBe("minikube");
-        expect(kc.contexts.length).toBe(1);
+        expect(config.getCurrentContext()).toBe("minikube");
+        expect(config.contexts.length).toBe(1);
      });

      it("invalid context in between valid contexts is removed", async () => {
        mockKubeConfig.contexts.push({context: {cluster: "cluster-2", user: ""}, name: "cluster-2"});
        mockKubeConfig.contexts.push({context: {cluster: "cluster-3", user: "cluster-3"}, name: "cluster-3"});
        expect(mockKubeConfig.contexts.length).toBe(3);
-        const kc:KubeConfig = loadConfig(JSON.stringify(mockKubeConfig));
+        const { config } = loadConfigFromString(JSON.stringify(mockKubeConfig));

-        expect(kc.getCurrentContext()).toBe("minikube");
-        expect(kc.contexts.length).toBe(2);
-        expect(kc.contexts[0].name).toBe("minikube");
-        expect(kc.contexts[1].name).toBe("cluster-3");
+        expect(config.getCurrentContext()).toBe("minikube");
+        expect(config.contexts.length).toBe(2);
+        expect(config.contexts[0].name).toBe("minikube");
+        expect(config.contexts[1].name).toBe("cluster-3");
      });
    });
  });
--- a/src/common/tests/user-store.test.ts
+++ b/src/common/tests/user-store.test.ts
@ -66,19 +66,6 @@ describe("user store tests", () => {
      expect(us.lastSeenAppVersion).toBe("1.2.3");
    });

-    it("allows adding and listing seen contexts", () => {
-      const us = UserStore.getInstance();
-
-      us.seenContexts.add("foo");
-      expect(us.seenContexts.size).toBe(1);
-
-      us.seenContexts.add("foo");
-      us.seenContexts.add("bar");
-      expect(us.seenContexts.size).toBe(2); // check 'foo' isn't added twice
-      expect(us.seenContexts.has("foo")).toBe(true);
-      expect(us.seenContexts.has("bar")).toBe(true);
-    });
-
    it("allows setting and getting preferences", () => {
      const us = UserStore.getInstance();

--- a/src/common/cluster-store.ts
+++ b/src/common/cluster-store.ts
@ -26,11 +26,9 @@ import { action, comparer, computed, makeObservable, observable, reaction } from
 import { BaseStore } from "./base-store";
 import { Cluster, ClusterState } from "../main/cluster";
 import migrations from "../migrations/cluster-store";
+import * as uuid from "uuid";
 import logger from "../main/logger";
 import { appEventBus } from "./event-bus";
-import { dumpConfigYaml } from "./kube-helpers";
-import { saveToAppFiles } from "./utils/saveToAppFiles";
-import type { KubeConfig } from "@kubernetes/client-node";
 import { handleRequest, requestMain, subscribeToBroadcast, unsubscribeAllFromBroadcast } from "./ipc";
 import { disposer, noop, toJS } from "./utils";

@ -116,19 +114,10 @@ export class ClusterStore extends BaseStore<ClusterStoreModel> {
    return path.resolve((app || remote.app).getPath("userData"), "kubeconfigs");
  }

-  static getCustomKubeConfigPath(clusterId: ClusterId): string {
+  static getCustomKubeConfigPath(clusterId: ClusterId = uuid.v4()): string {
    return path.resolve(ClusterStore.storedKubeConfigFolder, clusterId);
  }

-  static embedCustomKubeConfig(clusterId: ClusterId, kubeConfig: KubeConfig | string): string {
-    const filePath = ClusterStore.getCustomKubeConfigPath(clusterId);
-    const fileContents = typeof kubeConfig == "string" ? kubeConfig : dumpConfigYaml(kubeConfig);
-
-    saveToAppFiles(filePath, fileContents, { mode: 0o600 });
-
-    return filePath;
-  }
-
  @observable clusters = observable.map<ClusterId, Cluster>();
  @observable removedClusters = observable.map<ClusterId, Cluster>();

--- a/src/common/kube-helpers.ts
+++ b/src/common/kube-helpers.ts
@ -28,6 +28,8 @@ import logger from "../main/logger";
 import commandExists from "command-exists";
 import { ExecValidationNotFoundError } from "./custom-errors";
 import { Cluster, Context, newClusters, newContexts, newUsers, User } from "@kubernetes/client-node/dist/config_types";
+import { resolvePath } from "./utils";
+import Joi from "joi";

 export type KubeConfigValidationOpts = {
  validateCluster?: boolean;
@ -37,50 +39,108 @@ export type KubeConfigValidationOpts = {

 export const kubeConfigDefaultPath = path.join(os.homedir(), ".kube", "config");

-function resolveTilde(filePath: string) {
-  if (filePath[0] === "~" && (filePath[1] === "/" || filePath.length === 1)) {
-    return filePath.replace("~", os.homedir());
-  }
+export function loadConfigFromFileSync(filePath: string): ConfigResult {
+  const content = fse.readFileSync(resolvePath(filePath), "utf-8");

-  return filePath;
+  return loadConfigFromString(content);
 }

-function readResolvedPathSync(filePath: string): string {
-  return fse.readFileSync(path.resolve(resolveTilde(filePath)), "utf8");
+export async function loadConfigFromFile(filePath: string): Promise<ConfigResult> {
+  const content = await fse.readFile(resolvePath(filePath), "utf-8");
+
+  return loadConfigFromString(content);
 }

-function checkRawCluster(rawCluster: any): boolean {
-  return Boolean(rawCluster?.name && rawCluster?.cluster?.server);
-}
+const clusterSchema = Joi.object({
+  name: Joi
+    .string()
+    .min(1)
+    .required(),
+  cluster: Joi
+    .object({
+      server: Joi
+        .string()
+        .min(1)
+        .required(),
+    })
+    .required(),
+});

-function checkRawUser(rawUser: any): boolean {
-  return Boolean(rawUser?.name);
-}
+const userSchema = Joi.object({
+  name: Joi.string()
+    .min(1)
+    .required(),
+});

-function checkRawContext(rawContext: any): boolean {
-  return Boolean(rawContext.name && rawContext.context?.cluster && rawContext.context?.user);
-}
+const contextSchema = Joi.object({
+  name: Joi.string()
+    .min(1)
+    .required(),
+  context: Joi.object({
+    cluster: Joi.string()
+      .min(1)
+      .required(),
+    user: Joi.string()
+      .min(1)
+      .required(),
+  }),
+});
+
+const kubeConfigSchema = Joi
+  .object({
+    users: Joi
+      .array()
+      .items(userSchema)
+      .optional(),
+    clusters: Joi
+      .array()
+      .items(clusterSchema)
+      .optional(),
+    contexts: Joi
+      .array()
+      .items(contextSchema)
+      .optional(),
+    "current-context": Joi
+      .string()
+      .min(1)
+      .optional(),
+  })
+  .required();

 export interface KubeConfigOptions {
  clusters: Cluster[];
  users: User[];
  contexts: Context[];
-  currentContext: string;
+  currentContext?: string;
 }

-function loadToOptions(rawYaml: string): KubeConfigOptions {
-  const obj = yaml.safeLoad(rawYaml);
+export interface OptionsResult {
+  options: KubeConfigOptions;
+  error: Joi.ValidationError;
+}

-  if (typeof obj !== "object" || !obj) {
-    throw new TypeError("KubeConfig root entry must be an object");
-  }
+function loadToOptions(rawYaml: string): OptionsResult {
+  const parsed = yaml.safeLoad(rawYaml);
+  const { error } = kubeConfigSchema.validate(parsed, {
+    abortEarly: false,
+    allowUnknown: true,
+  });
+  const { value } = kubeConfigSchema.validate(parsed, {
+    abortEarly: false,
+    allowUnknown: true,
+    stripUnknown: {
+      arrays: true,
+    }
+  });
+  const { clusters: rawClusters, users: rawUsers, contexts: rawContexts, "current-context": currentContext } = value ?? {};
+  const clusters = newClusters(rawClusters);
+  const users = newUsers(rawUsers);
+  const contexts = newContexts(rawContexts);

-  const { clusters: rawClusters, users: rawUsers, contexts: rawContexts, "current-context": currentContext } = obj;
-  const clusters = newClusters(rawClusters?.filter(checkRawCluster));
-  const users = newUsers(rawUsers?.filter(checkRawUser));
-  const contexts = newContexts(rawContexts?.filter(checkRawContext));
-
-  return { clusters, users, contexts, currentContext };
+  return {
+    options: { clusters, users, contexts, currentContext },
+    error,
+  };
 }

 export function loadFromOptions(options: KubeConfigOptions): KubeConfig {
@ -92,67 +152,44 @@ export function loadFromOptions(options: KubeConfigOptions): KubeConfig {
  return kc;
 }

-export function loadConfig(pathOrContent?: string): KubeConfig {
-  return loadConfigFromString(
-    fse.pathExistsSync(pathOrContent)
-      ? readResolvedPathSync(pathOrContent)
-      : pathOrContent
-  );
+export interface ConfigResult {
+  config: KubeConfig;
+  error: Joi.ValidationError;
 }

-export function loadConfigFromString(content: string): KubeConfig {
-  return loadFromOptions(loadToOptions(content));
+export function loadConfigFromString(content: string): ConfigResult {
+  const { options, error } = loadToOptions(content);
+
+  return {
+    config: loadFromOptions(options),
+    error,
+  };
 }

-/**
- * KubeConfig is valid when there's at least one of each defined:
- * - User
- * - Cluster
- * - Context
- * @param config KubeConfig to check
- */
-export function validateConfig(config: KubeConfig | string): KubeConfig {
-  if (typeof config == "string") {
-    config = loadConfig(config);
-  }
-  logger.debug(`validating kube config: ${JSON.stringify(config)}`);
-
-  if (!config.users || config.users.length == 0) {
-    throw new Error("No users provided in config");
-  }
-
-  if (!config.clusters || config.clusters.length == 0) {
-    throw new Error("No clusters provided in config");
-  }
-
-  if (!config.contexts || config.contexts.length == 0) {
-    throw new Error("No contexts provided in config");
-  }
-
-  return config;
+export interface SplitConfigEntry {
+  config: KubeConfig,
+  error?: string;
 }

 /**
 * Breaks kube config into several configs. Each context as it own KubeConfig object
 */
-export function splitConfig(kubeConfig: KubeConfig): KubeConfig[] {
-  const configs: KubeConfig[] = [];
+export function splitConfig(kubeConfig: KubeConfig): SplitConfigEntry[] {
+  const { contexts = [] } = kubeConfig;

-  if (!kubeConfig.contexts) {
-    return configs;
-  }
-  kubeConfig.contexts.forEach(ctx => {
-    const kc = new KubeConfig();
+  return contexts.map(context => {
+    const config = new KubeConfig();

-    kc.clusters = [kubeConfig.getCluster(ctx.cluster)].filter(n => n);
-    kc.users = [kubeConfig.getUser(ctx.user)].filter(n => n);
-    kc.contexts = [kubeConfig.getContextObject(ctx.name)].filter(n => n);
-    kc.setCurrentContext(ctx.name);
+    config.clusters = [kubeConfig.getCluster(context.cluster)].filter(Boolean);
+    config.users = [kubeConfig.getUser(context.user)].filter(Boolean);
+    config.contexts = [kubeConfig.getContextObject(context.name)].filter(Boolean);
+    config.setCurrentContext(context.name);

-    configs.push(kc);
+    return {
+      config,
+      error: validateKubeConfig(config, context.name)?.toString(),
+    };
  });
-
-  return configs;
 }

 export function dumpConfigYaml(kubeConfig: Partial<KubeConfig>): string {
@ -230,7 +267,7 @@ export function getNodeWarningConditions(node: V1Node) {
 *
 * Note: This function returns an error instead of throwing it, returning `undefined` if the validation passes
 */
-export function validateKubeConfig(config: KubeConfig, contextName: string, validationOpts: KubeConfigValidationOpts = {}): Error | void {
+export function validateKubeConfig(config: KubeConfig, contextName: string, validationOpts: KubeConfigValidationOpts = {}): Error | undefined {
  try {
    // we only receive a single context, cluster & user object here so lets validate them as this
    // will be called when we add a new cluster to Lens
@ -267,6 +304,8 @@ export function validateKubeConfig(config: KubeConfig, contextName: string, vali
        return new ExecValidationNotFoundError(execCommand, isAbsolute);
      }
    }
+
+    return undefined;
  } catch (error) {
    return error;
  }
--- a/src/common/user-store.ts
+++ b/src/common/user-store.ts
@ -22,24 +22,19 @@
 import type { ThemeId } from "../renderer/theme.store";
 import { app, remote } from "electron";
 import semver from "semver";
-import { readFile } from "fs-extra";
 import { action, computed, observable, reaction, makeObservable } from "mobx";
 import moment from "moment-timezone";
 import { BaseStore } from "./base-store";
 import migrations from "../migrations/user-store";
 import { getAppVersion } from "./utils/app-version";
-import { kubeConfigDefaultPath, loadConfig } from "./kube-helpers";
 import { appEventBus } from "./event-bus";
-import logger from "../main/logger";
 import path from "path";
 import os from "os";
 import { fileNameMigration } from "../migrations/user-store";
 import { ObservableToggleSet, toJS } from "../renderer/utils";

 export interface UserStoreModel {
-  kubeConfigPath: string;
  lastSeenAppVersion: string;
-  seenContexts: string[];
  preferences: UserPreferencesModel;
 }

@ -47,7 +42,7 @@ export interface KubeconfigSyncEntry extends KubeconfigSyncValue {
  filePath: string;
 }

-export interface KubeconfigSyncValue {}
+export interface KubeconfigSyncValue { }

 export interface UserPreferencesModel {
  httpsProxy?: string;
@ -77,13 +72,6 @@ export class UserStore extends BaseStore<UserStoreModel> {
  }

  @observable lastSeenAppVersion = "0.0.0";
-
-  /**
-   * used in add-cluster page for providing context
-   */
-  @observable kubeConfigPath = kubeConfigDefaultPath;
-  @observable seenContexts = observable.set<string>();
-  @observable newContexts = observable.set<string>();
  @observable allowTelemetry = true;
  @observable allowUntrustedCAs = false;
  @observable colorTheme = UserStore.defaultTheme;
@ -121,10 +109,6 @@ export class UserStore extends BaseStore<UserStoreModel> {
    await fileNameMigration();
    await super.load();

-    // refresh new contexts
-    await this.refreshNewContexts();
-    reaction(() => this.kubeConfigPath, () => this.refreshNewContexts());
-
    if (app) {
      // track telemetry availability
      reaction(() => this.allowTelemetry, allowed => {
@ -180,15 +164,6 @@ export class UserStore extends BaseStore<UserStoreModel> {
    this.hiddenTableColumns.get(tableId)?.toggle(columnId);
  }

-  @action
-  resetKubeConfigPath() {
-    this.kubeConfigPath = kubeConfigDefaultPath;
-  }
-
-  @computed get isDefaultKubeConfigPath(): boolean {
-    return this.kubeConfigPath === kubeConfigDefaultPath;
-  }
-
  @action
  async resetTheme() {
    await this.whenLoaded;
@ -206,44 +181,14 @@ export class UserStore extends BaseStore<UserStoreModel> {
    this.localeTimezone = tz;
  }

-  protected async refreshNewContexts() {
-    try {
-      const kubeConfig = await readFile(this.kubeConfigPath, "utf8");
-
-      if (kubeConfig) {
-        this.newContexts.clear();
-        loadConfig(kubeConfig).getContexts()
-          .filter(ctx => ctx.cluster)
-          .filter(ctx => !this.seenContexts.has(ctx.name))
-          .forEach(ctx => this.newContexts.add(ctx.name));
-      }
-    } catch (err) {
-      logger.error(err);
-      this.resetKubeConfigPath();
-    }
-  }
-
-  @action
-  markNewContextsAsSeen() {
-    const { seenContexts, newContexts } = this;
-
-    this.seenContexts.replace([...seenContexts, ...newContexts]);
-    this.newContexts.clear();
-  }
-
  @action
  protected async fromStore(data: Partial<UserStoreModel> = {}) {
-    const { lastSeenAppVersion, seenContexts = [], preferences, kubeConfigPath } = data;
+    const { lastSeenAppVersion, preferences } = data;

    if (lastSeenAppVersion) {
      this.lastSeenAppVersion = lastSeenAppVersion;
    }

-    if (kubeConfigPath) {
-      this.kubeConfigPath = kubeConfigPath;
-    }
-    this.seenContexts.replace(seenContexts);
-
    if (!preferences) {
      return;
    }
@ -287,9 +232,7 @@ export class UserStore extends BaseStore<UserStoreModel> {
    }

    const model: UserStoreModel = {
-      kubeConfigPath: this.kubeConfigPath,
      lastSeenAppVersion: this.lastSeenAppVersion,
-      seenContexts: Array.from(this.seenContexts),
      preferences: {
        httpsProxy: toJS(this.httpsProxy),
        shell: toJS(this.shell),
--- a/src/common/utils/index.ts
+++ b/src/common/utils/index.ts
@ -21,7 +21,9 @@

 // Common utils (main OR renderer)

-export const noop: any = () => { /* empty */ };
+export function noop<T extends any[]>(...args: T): void {
+  return void args;
+}

 export * from "./app-version";
 export * from "./autobind";
@ -39,8 +41,8 @@ export * from "./escapeRegExp";
 export * from "./extended-map";
 export * from "./getRandId";
 export * from "./openExternal";
+export * from "./paths";
 export * from "./reject-promise";
-export * from "./saveToAppFiles";
 export * from "./singleton";
 export * from "./splitArray";
 export * from "./tar";
--- a/src/common/utils/saveToAppFiles.ts
+++ b/src/common/utils/saveToAppFiles.ts
@ -19,17 +19,17 @@
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */

-// Save file to electron app directory (e.g. "/Users/$USER/Library/Application Support/Lens" for MacOS)
 import path from "path";
-import { app, remote } from "electron";
-import { ensureDirSync, writeFileSync } from "fs-extra";
-import type { WriteFileOptions } from "fs";
+import os from "os";

-export function saveToAppFiles(filePath: string, contents: any, options?: WriteFileOptions): string {
-  const absPath = path.resolve((app || remote.app).getPath("userData"), filePath);
+function resolveTilde(filePath: string) {
+  if (filePath[0] === "~" && (filePath[1] === "/" || filePath.length === 1)) {
+    return filePath.replace("~", os.homedir());
+  }

-  ensureDirSync(path.dirname(absPath));
-  writeFileSync(absPath, contents, options);
-
-  return absPath;
+  return filePath;
+}
+
+export function resolvePath(filePath: string): string {
+  return path.resolve(resolveTilde(filePath));
 }
--- a/src/common/vars.ts
+++ b/src/common/vars.ts
@ -68,10 +68,5 @@ export const issuesTrackerUrl = "https://github.com/lensapp/lens/issues" as stri
 export const slackUrl = "https://join.slack.com/t/k8slens/shared_invite/enQtOTc5NjAyNjYyOTk4LWU1NDQ0ZGFkOWJkNTRhYTc2YjVmZDdkM2FkNGM5MjhiYTRhMDU2NDQ1MzIyMDA4ZGZlNmExOTc0N2JmY2M3ZGI" as string;
 export const supportUrl = "https://docs.k8slens.dev/latest/support/" as string;

-// This explicitly ignores the prerelease info on the package version
 export const appSemVer = new SemVer(packageInfo.version);
-const { major, minor, patch } = appSemVer;
-const mmpVersion = [major, minor, patch].join(".");
-const docsVersion = isProduction ? `v${mmpVersion}` : "latest";
-
-export const docsUrl = `https://docs.k8slens.dev/${docsVersion}`;
+export const docsUrl = `https://docs.k8slens.dev/main/` as string;
--- a/src/extensions/extension-loader.ts
+++ b/src/extensions/extension-loader.ts
@ -26,7 +26,7 @@ import { action, computed, makeObservable, observable, reaction, when } from "mo
 import path from "path";
 import { getHostedCluster } from "../common/cluster-store";
 import { broadcastMessage, handleRequest, requestMain, subscribeToBroadcast } from "../common/ipc";
-import { Singleton, toJS } from "../common/utils";
+import { Disposer, Singleton, toJS } from "../common/utils";
 import logger from "../main/logger";
 import type { InstalledExtension } from "./extension-discovery";
 import { ExtensionsStore } from "./extensions-store";
@ -296,7 +296,7 @@ export class ExtensionLoader extends Singleton {
    });
  }

-  protected autoInitExtensions(register: (ext: LensExtension) => Promise<Function[]>) {
+  protected autoInitExtensions(register: (ext: LensExtension) => Promise<Disposer[]>) {
    return reaction(() => this.toJSON(), installedExtensions => {
      for (const [extId, extension] of installedExtensions) {
        const alreadyInit = this.instances.has(extId);
@ -311,8 +311,7 @@ export class ExtensionLoader extends Singleton {

            const instance = new LensExtensionClass(extension);

-            instance.whenEnabled(() => register(instance));
-            instance.enable();
+            instance.enable(register);
            this.instances.set(extId, instance);
          } catch (err) {
            logger.error(`${logModule}: activation extension error`, { ext: extension, err });
--- a/src/extensions/lens-extension.ts
+++ b/src/extensions/lens-extension.ts
@ -20,12 +20,12 @@
 */

 import type { InstalledExtension } from "./extension-discovery";
-import { action, observable, reaction, makeObservable } from "mobx";
+import { action, observable, makeObservable } from "mobx";
 import { FilesystemProvisionerStore } from "../main/extension-filesystem";
 import logger from "../main/logger";
 import type { ProtocolHandlerRegistration } from "./registries";
-import { disposer } from "../common/utils";
 import type { PackageJson } from "type-fest";
+import { Disposer, disposer } from "../common/utils";

 export type LensExtensionId = string; // path to manifest (package.json)
 export type LensExtensionConstructor = new (...args: ConstructorParameters<typeof LensExtension>) => LensExtension;
@ -82,59 +82,44 @@ export class LensExtension {
  }

  @action
-  async enable() {
-    if (this.isEnabled) return;
-    this.isEnabled = true;
-    this.onActivate?.();
-    logger.info(`[EXTENSION]: enabled ${this.name}@${this.version}`);
+  async enable(register: (ext: LensExtension) => Promise<Disposer[]>) {
+    if (this.isEnabled) {
+      return;
+    }
+
+    try {
+      await this.onActivate();
+      this.isEnabled = true;
+
+      this[Disposers].push(...await register(this));
+      logger.info(`[EXTENSION]: enabled ${this.name}@${this.version}`);
+    } catch (error) {
+      logger.error(`[EXTENSION]: failed to activate ${this.name}@${this.version}: ${error}`);
+    }
  }

  @action
  async disable() {
-    if (!this.isEnabled) return;
-    this.isEnabled = false;
-    this.onDeactivate?.();
-    this[Disposers]();
-    logger.info(`[EXTENSION]: disabled ${this.name}@${this.version}`);
-  }
+    if (!this.isEnabled) {
+      return;
+    }

-  toggle(enable?: boolean) {
-    if (typeof enable === "boolean") {
-      enable ? this.enable() : this.disable();
-    } else {
-      this.isEnabled ? this.disable() : this.enable();
+    this.isEnabled = false;
+
+    try {
+      await this.onDeactivate();
+      this[Disposers]();
+      logger.info(`[EXTENSION]: disabled ${this.name}@${this.version}`);
+    } catch (error) {
+      logger.error(`[EXTENSION]: disabling ${this.name}@${this.version} threw an error: ${error}`);
    }
  }

-  async whenEnabled(handlers: () => Promise<Function[]>) {
-    const disposers: Function[] = [];
-    const unregisterHandlers = () => {
-      disposers.forEach(unregister => unregister());
-      disposers.length = 0;
-    };
-    const cancelReaction = reaction(() => this.isEnabled, async (isEnabled) => {
-      if (isEnabled) {
-        const handlerDisposers = await handlers();
-
-        disposers.push(...handlerDisposers);
-      } else {
-        unregisterHandlers();
-      }
-    }, {
-      fireImmediately: true
-    });
-
-    return () => {
-      unregisterHandlers();
-      cancelReaction();
-    };
-  }
-
-  protected onActivate(): void {
+  protected onActivate(): Promise<void> | void {
    return;
  }

-  protected onDeactivate(): void {
+  protected onDeactivate(): Promise<void> | void {
    return;
  }
 }
--- a/src/main/catalog-sources/kubeconfig-sync.ts
+++ b/src/main/catalog-sources/kubeconfig-sync.ts
@ -29,7 +29,7 @@ import type stream from "stream";
 import { Disposer, ExtendedObservableMap, iter, Singleton } from "../../common/utils";
 import logger from "../logger";
 import type { KubeConfig } from "@kubernetes/client-node";
-import { loadConfigFromString, splitConfig, validateKubeConfig } from "../../common/kube-helpers";
+import { loadConfigFromString, splitConfig } from "../../common/kube-helpers";
 import { Cluster } from "../cluster";
 import { catalogEntityFromCluster } from "../cluster-manager";
 import { UserStore } from "../../common/user-store";
@ -130,18 +130,16 @@ export class KubeconfigSyncManager extends Singleton {
 }

 // exported for testing
-export function configToModels(config: KubeConfig, filePath: string): UpdateClusterModel[] {
+export function configToModels(rootConfig: KubeConfig, filePath: string): UpdateClusterModel[] {
  const validConfigs = [];

-  for (const contextConfig of splitConfig(config)) {
-    const error = validateKubeConfig(contextConfig, contextConfig.currentContext);
-
+  for (const { config, error } of splitConfig(rootConfig)) {
    if (error) {
-      logger.debug(`${logPrefix} context failed validation: ${error}`, { context: contextConfig.currentContext, filePath });
+      logger.debug(`${logPrefix} context failed validation: ${error}`, { context: config.currentContext, filePath });
    } else {
      validConfigs.push({
        kubeConfigPath: filePath,
-        contextName: contextConfig.currentContext,
+        contextName: config.currentContext,
      });
    }
  }
@ -156,7 +154,13 @@ type RootSource = ObservableMap<string, RootSourceValue>;
 export function computeDiff(contents: string, source: RootSource, filePath: string): void {
  runInAction(() => {
    try {
-      const rawModels = configToModels(loadConfigFromString(contents), filePath);
+      const { config, error } = loadConfigFromString(contents);
+
+      if (error) {
+        logger.warn(`${logPrefix} encountered errors while loading config: ${error.message}`, { filePath, details: error.details });
+      }
+
+      const rawModels = configToModels(config, filePath);
      const models = new Map(rawModels.map(m => [m.contextName, m]));

      logger.debug(`${logPrefix} File now has ${models.size} entries`, { filePath });
--- a/src/main/cluster.ts
+++ b/src/main/cluster.ts
@ -27,7 +27,7 @@ import { ContextHandler } from "./context-handler";
 import { AuthorizationV1Api, CoreV1Api, HttpError, KubeConfig, V1ResourceAttributes } from "@kubernetes/client-node";
 import { Kubectl } from "./kubectl";
 import { KubeconfigManager } from "./kubeconfig-manager";
-import { loadConfig, validateKubeConfig } from "../common/kube-helpers";
+import { loadConfigFromFile, loadConfigFromFileSync, validateKubeConfig } from "../common/kube-helpers";
 import { apiResourceRecord, apiResources, KubeApiResource, KubeResource } from "../common/rbac";
 import logger from "./logger";
 import { VersionDetector } from "./cluster-detectors/version-detector";
@ -258,14 +258,14 @@ export class Cluster implements ClusterModel, ClusterState {
    this.id = model.id;
    this.updateModel(model);

-    const kubeconfig = this.getKubeconfig();
-    const error = validateKubeConfig(kubeconfig, this.contextName, { validateCluster: true, validateUser: false, validateExec: false});
+    const { config } = loadConfigFromFileSync(this.kubeConfigPath);
+    const validationError = validateKubeConfig(config, this.contextName);

-    if (error) {
-      throw error;
+    if (validationError) {
+      throw validationError;
    }

-    this.apiUrl = kubeconfig.getCluster(kubeconfig.getContextObject(this.contextName).cluster).server;
+    this.apiUrl = config.getCluster(config.getContextObject(this.contextName).cluster).server;

    if (ipcMain) {
      // for the time being, until renderer gets its own cluster type
@ -470,17 +470,20 @@ export class Cluster implements ClusterModel, ClusterState {
    this.allowedResources = await this.getAllowedResources();
  }

-  protected getKubeconfig(): KubeConfig {
-    return loadConfig(this.kubeConfigPath);
+  async getKubeconfig(): Promise<KubeConfig> {
+    const { config } = await loadConfigFromFile(this.kubeConfigPath);
+
+    return config;
  }

  /**
   * @internal
   */
  async getProxyKubeconfig(): Promise<KubeConfig> {
-    const kubeconfigPath = await this.getProxyKubeconfigPath();
+    const proxyKCPath = await this.getProxyKubeconfigPath();
+    const { config } = await loadConfigFromFile(proxyKCPath);

-    return loadConfig(kubeconfigPath);
+    return config;
  }

  /**
--- a/src/main/index.ts
+++ b/src/main/index.ts
@ -93,11 +93,7 @@ if (!app.requestSingleInstanceLock()) {

  for (const arg of process.argv) {
    if (arg.toLowerCase().startsWith("lens://")) {
-      try {
-        lprm.route(arg);
-      } catch (error) {
-        logger.error(`${LensProtocolRouterMain.LoggingPrefix}: an error occured`, { error, rawUrl: arg });
-      }
+      lprm.route(arg);
    }
  }
 }
@ -107,11 +103,7 @@ app.on("second-instance", (event, argv) => {

  for (const arg of argv) {
    if (arg.toLowerCase().startsWith("lens://")) {
-      try {
-        lprm.route(arg);
-      } catch (error) {
-        logger.error(`${LensProtocolRouterMain.LoggingPrefix}: an error occured`, { error, rawUrl: arg });
-      }
+      lprm.route(arg);
    }
  }

@ -196,7 +188,7 @@ app.on("ready", async () => {
  installDeveloperTools();

  if (!startHidden) {
-    windowManager.initMainWindow();
+    windowManager.ensureMainWindow();
  }

  ipcMain.on(IpcRendererNavigationEvents.LOADED, () => {
@ -244,7 +236,7 @@ app.on("activate", (event, hasVisibleWindows) => {
  logger.info("APP:ACTIVATE", { hasVisibleWindows });

  if (!hasVisibleWindows) {
-    WindowManager.getInstance(false)?.initMainWindow(false);
+    WindowManager.getInstance(false)?.ensureMainWindow(false);
  }
 });

@ -274,12 +266,7 @@ app.on("will-quit", (event) => {
 app.on("open-url", (event, rawUrl) => {
  // lens:// protocol handler
  event.preventDefault();
-
-  try {
-    LensProtocolRouterMain.getInstance().route(rawUrl);
-  } catch (error) {
-    logger.error(`${LensProtocolRouterMain.LoggingPrefix}: an error occured`, { error, rawUrl });
-  }
+  LensProtocolRouterMain.getInstance().route(rawUrl);
 });

 /**
--- a/src/main/kubeconfig-manager.ts
+++ b/src/main/kubeconfig-manager.ts
@ -25,7 +25,7 @@ import type { ContextHandler } from "./context-handler";
 import { app } from "electron";
 import path from "path";
 import fs from "fs-extra";
-import { dumpConfigYaml, loadConfig } from "../common/kube-helpers";
+import { dumpConfigYaml } from "../common/kube-helpers";
 import logger from "./logger";
 import { LensProxy } from "./proxy/lens-proxy";

@ -86,9 +86,9 @@ export class KubeconfigManager {
   */
  protected async createProxyKubeconfig(): Promise<string> {
    const { configDir, cluster } = this;
-    const { contextName, kubeConfigPath, id } = cluster;
-    const tempFile = path.normalize(path.join(configDir, `kubeconfig-${id}`));
-    const kubeConfig = loadConfig(kubeConfigPath);
+    const { contextName, id } = cluster;
+    const tempFile = path.join(configDir, `kubeconfig-${id}`);
+    const kubeConfig = await cluster.getKubeconfig();
    const proxyConfig: Partial<KubeConfig> = {
      currentContext: contextName,
      clusters: [
--- a/src/main/window-manager.ts
+++ b/src/main/window-manager.ts
@ -21,19 +21,23 @@

 import type { ClusterId } from "../common/cluster-store";
 import { makeObservable, observable } from "mobx";
-import { app, BrowserWindow, dialog, shell, webContents } from "electron";
+import { app, BrowserWindow, dialog, ipcMain, shell, webContents } from "electron";
 import windowStateKeeper from "electron-window-state";
 import { appEventBus } from "../common/event-bus";
 import { subscribeToBroadcast } from "../common/ipc";
 import { initMenu } from "./menu";
 import { initTray } from "./tray";
-import { Singleton } from "../common/utils";
+import { delay, 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 { LensProxy } from "./proxy/lens-proxy";

+function isHideable(window: BrowserWindow | null): boolean {
+  return Boolean(window && !window.isDestroyed());
+}
+
 export class WindowManager extends Singleton {
  protected mainWindow: BrowserWindow;
  protected splashWindow: BrowserWindow;
@ -54,7 +58,7 @@ export class WindowManager extends Singleton {
    return `http://localhost:${LensProxy.getInstance().port}`;
  }

-  async initMainWindow(showSplash = true) {
+  private async initMainWindow(showSplash: boolean) {
    // Manage main window size and position with state persistence
    if (!this.windowState) {
      this.windowState = windowStateKeeper({
@ -120,13 +124,8 @@ export class WindowManager extends Singleton {
      if (showSplash) await this.showSplash();
      logger.info(`[WINDOW-MANAGER]: Loading Main window from url: ${this.mainUrl} ...`);
      await this.mainWindow.loadURL(this.mainUrl);
-      this.mainWindow.show();
-      this.splashWindow?.close();
-      setTimeout(() => {
-        appEventBus.emit({ name: "app", action: "start" });
-      }, 1000);
    } catch (error) {
-      logger.error("Showing main window failed", { error });
+      logger.error("Loading main window failed", { error });
      dialog.showErrorBox("ERROR!", error.toString());
    }
  }
@ -146,9 +145,32 @@ export class WindowManager extends Singleton {
    });
  }

-  async ensureMainWindow(): Promise<BrowserWindow> {
-    if (!this.mainWindow) await this.initMainWindow();
-    this.mainWindow.show();
+  async ensureMainWindow(showSplash = true): Promise<BrowserWindow> {
+    // This needs to be ready to hear the IPC message before the window is loaded
+    let viewHasLoaded = Promise.resolve();
+
+    if (!this.mainWindow) {
+      viewHasLoaded = new Promise<void>(resolve => {
+        ipcMain.once(IpcRendererNavigationEvents.LOADED, () => resolve());
+      });
+      await this.initMainWindow(showSplash);
+    }
+
+    try {
+      await viewHasLoaded;
+      await delay(50); // wait just a bit longer to let the first round of rendering happen
+      logger.info("[WINDOW-MANAGER]: Main window has reported that it has loaded");
+
+      this.mainWindow.show();
+      this.splashWindow?.close();
+      this.splashWindow = undefined;
+      setTimeout(() => {
+        appEventBus.emit({ name: "app", action: "start" });
+      }, 1000);
+    } catch (error) {
+      logger.error(`Showing main window failed: ${error.stack || error}`);
+      dialog.showErrorBox("ERROR!", error.toString());
+    }

    return this.mainWindow;
  }
@ -206,8 +228,13 @@ export class WindowManager extends Singleton {
  }

  hide() {
-    if (this.mainWindow && !this.mainWindow.isDestroyed()) this.mainWindow.hide();
-    if (this.splashWindow && !this.splashWindow.isDestroyed()) this.splashWindow.hide();
+    if (isHideable(this.mainWindow)) {
+      this.mainWindow.hide();
+    }
+
+    if (isHideable(this.splashWindow)) {
+      this.splashWindow.hide();
+    }
  }

  destroy() {
--- a/src/migrations/cluster-store/3.6.0-beta.1.ts
+++ b/src/migrations/cluster-store/3.6.0-beta.1.ts
@ -27,7 +27,7 @@ import { app, remote } from "electron";
 import { migration } from "../migration-wrapper";
 import fse from "fs-extra";
 import { ClusterModel, ClusterStore } from "../../common/cluster-store";
-import { loadConfig } from "../../common/kube-helpers";
+import { loadConfigFromFileSync } from "../../common/kube-helpers";

 export default migration({
  version: "3.6.0-beta.1",
@ -46,9 +46,13 @@ export default migration({
         * migrate kubeconfig
         */
        try {
+          const absPath = ClusterStore.getCustomKubeConfigPath(cluster.id);
+
+          fse.ensureDirSync(path.dirname(absPath));
+          fse.writeFileSync(absPath, cluster.kubeConfig, { encoding: "utf-8", mode: 0o600 });
          // take the embedded kubeconfig and dump it into a file
-          cluster.kubeConfigPath = ClusterStore.embedCustomKubeConfig(cluster.id, cluster.kubeConfig);
-          cluster.contextName = loadConfig(cluster.kubeConfigPath).getCurrentContext();
+          cluster.kubeConfigPath = absPath;
+          cluster.contextName = loadConfigFromFileSync(cluster.kubeConfigPath).config.getCurrentContext();
          delete cluster.kubeConfig;

        } catch (error) {
--- a/src/renderer/api/kube-watch-api.ts
+++ b/src/renderer/api/kube-watch-api.ts
@ -26,8 +26,8 @@ import type { KubeObjectStore } from "../kube-object.store";
 import type { ClusterContext } from "../components/context";

 import plimit from "p-limit";
-import { comparer, IReactionDisposer, observable, reaction, makeObservable } from "mobx";
-import { autoBind, noop } from "../utils";
+import { comparer, observable, reaction, makeObservable } from "mobx";
+import { autoBind, Disposer, noop } from "../utils";
 import type { KubeApi } from "./kube-api";
 import type { KubeJsonApiData } from "./kube-json-api";
 import { isDebugging, isProduction } from "../../common/vars";
@ -80,7 +80,7 @@ export class KubeWatchApi {
    };
  }

-  subscribeStores(stores: KubeObjectStore[], opts: IKubeWatchSubscribeStoreOptions = {}): () => void {
+  subscribeStores(stores: KubeObjectStore[], opts: IKubeWatchSubscribeStoreOptions = {}): Disposer {
    const { preload = true, waitUntilLoaded = true, loadOnce = false, } = opts;
    const subscribingNamespaces = opts.namespaces ?? this.context?.allNamespaces ?? [];
    const unsubscribeList: Function[] = [];
@ -88,7 +88,7 @@ export class KubeWatchApi {

    const load = (namespaces = subscribingNamespaces) => this.preloadStores(stores, { namespaces, loadOnce });
    let preloading = preload && load();
-    let cancelReloading: IReactionDisposer = noop;
+    let cancelReloading: Disposer = noop;

    const subscribe = () => {
      if (isUnsubscribed) return;
--- a/src/renderer/components/+add-cluster/add-cluster.tsx
+++ b/src/renderer/components/+add-cluster/add-cluster.tsx
@ -20,35 +20,48 @@
 */

 import "./add-cluster.scss";
-import React from "react";
+
+import type { KubeConfig } from "@kubernetes/client-node";
+import fse from "fs-extra";
+import { debounce } from "lodash";
+import { action, computed, observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
-import { action, observable, runInAction, makeObservable } from "mobx";
-import { KubeConfig } from "@kubernetes/client-node";
+import path from "path";
+import React from "react";
+
+import { catalogURL } from "../+catalog";
+import { ClusterStore } from "../../../common/cluster-store";
+import { appEventBus } from "../../../common/event-bus";
+import { loadConfigFromString, splitConfig } from "../../../common/kube-helpers";
+import { docsUrl } from "../../../common/vars";
+import { navigate } from "../../navigation";
+import { iter } from "../../utils";
 import { AceEditor } from "../ace-editor";
 import { Button } from "../button";
-import { loadConfig, splitConfig, validateKubeConfig } from "../../../common/kube-helpers";
-import { ClusterStore } from "../../../common/cluster-store";
-import { v4 as uuid } from "uuid";
-import { navigate } from "../../navigation";
-import { UserStore } from "../../../common/user-store";
-import { Notifications } from "../notifications";
-import { ExecValidationNotFoundError } from "../../../common/custom-errors";
-import { appEventBus } from "../../../common/event-bus";
 import { PageLayout } from "../layout/page-layout";
-import { docsUrl } from "../../../common/vars";
-import { catalogURL } from "../+catalog";
-import { preferencesURL } from "../+preferences";
-import { Input } from "../input";
+import { Notifications } from "../notifications";
+
+interface Option {
+  config: KubeConfig;
+  error?: string;
+}
+
+function getContexts(config: KubeConfig): Map<string, Option> {
+  return new Map(
+    splitConfig(config)
+      .map(({ config, error }) => [config.currentContext, {
+        config,
+        error,
+      }])
+  );
+}
+
@observer
 export class AddCluster extends React.Component {
-  @observable.ref kubeConfigLocal: KubeConfig;
-  @observable.ref error: React.ReactNode;
+  @observable kubeContexts = observable.map<string, Option>();
  @observable customConfig = "";
-  @observable proxyServer = "";
  @observable isWaiting = false;
-  @observable showSettings = false;
-
-  kubeContexts = observable.map<string, KubeConfig>();
+  @observable errorText: string;

  constructor(props: {}) {
    super(props);
@ -59,159 +72,75 @@ export class AddCluster extends React.Component {
    appEventBus.emit({ name: "cluster-add", action: "start" });
  }

-  componentWillUnmount() {
-    UserStore.getInstance().markNewContextsAsSeen();
+  @computed get allErrors(): string[] {
+    return [
+      this.errorText,
+      ...iter.map(this.kubeContexts.values(), ({ error }) => error)
+    ].filter(Boolean);
  }

  @action
-  refreshContexts() {
-    this.kubeContexts.clear();
+  refreshContexts = debounce(() => {
+    const { config, error } = loadConfigFromString(this.customConfig.trim() || "{}");

-    try {
-      this.error = "";
-      const contexts = this.getContexts(loadConfig(this.customConfig || "{}"));
-
-      console.log(contexts);
-
-      this.kubeContexts.replace(contexts);
-    } catch (err) {
-      this.error = String(err);
-    }
-  }
-
-  getContexts(config: KubeConfig): Map<string, KubeConfig> {
-    const contexts = new Map();
-
-    splitConfig(config).forEach(config => {
-      contexts.set(config.currentContext, config);
-    });
-
-    return contexts;
-  }
+    this.kubeContexts.replace(getContexts(config));
+    this.errorText = error?.toString();
+  }, 500);

  @action
-  addClusters = (): void => {
+  addClusters = async () => {
+    this.isWaiting = true;
+    appEventBus.emit({ name: "cluster-add", action: "click" });
+
    try {
+      const absPath = ClusterStore.getCustomKubeConfigPath();

-      this.error = "";
-      this.isWaiting = true;
-      appEventBus.emit({ name: "cluster-add", action: "click" });
-      const newClusters = Array.from(this.kubeContexts.keys()).filter(context => {
-        const kubeConfig = this.kubeContexts.get(context);
-        const error = validateKubeConfig(kubeConfig, context);
+      await fse.ensureDir(path.dirname(absPath));
+      await fse.writeFile(absPath, this.customConfig.trim(), { encoding: "utf-8", mode: 0o600 });

-        if (error) {
-          this.error = error.toString();
+      Notifications.ok(`Successfully added ${this.kubeContexts.size} new cluster(s)`);

-          if (error instanceof ExecValidationNotFoundError) {
-            Notifications.error(<>Error while adding cluster(s): {this.error}</>);
-          }
-        }
-
-        return Boolean(!error);
-      }).map(context => {
-        const clusterId = uuid();
-        const kubeConfig = this.kubeContexts.get(context);
-        const kubeConfigPath = ClusterStore.embedCustomKubeConfig(clusterId, kubeConfig); // save in app-files folder
-
-        return {
-          id: clusterId,
-          kubeConfigPath,
-          contextName: kubeConfig.currentContext,
-          preferences: {
-            clusterName: kubeConfig.currentContext,
-            httpsProxy: this.proxyServer || undefined,
-          },
-        };
-      });
-
-      runInAction(() => {
-        ClusterStore.getInstance().addClusters(...newClusters);
-
-        Notifications.ok(
-          <>Successfully imported <b>{newClusters.length}</b> cluster(s)</>
-        );
-
-        navigate(catalogURL());
-      });
-      this.refreshContexts();
-    } catch (err) {
-      this.error = String(err);
-      Notifications.error(<>Error while adding cluster(s): {this.error}</>);
-    } finally {
-      this.isWaiting = false;
+      return navigate(catalogURL());
+    } catch (error) {
+      Notifications.error(`Failed to add clusters: ${error}`);
    }
  };

-  renderInfo() {
+  render() {
    return (
-      <p>
-        Paste kubeconfig as a text from the clipboard to the textarea below.
-        If you want to add clusters from kubeconfigs that exists on filesystem, please add those files (or folders) to kubeconfig sync via <a onClick={() => navigate(preferencesURL())}>Preferences</a>.
-        Read more about adding clusters <a href={`${docsUrl}/clusters/adding-clusters/`} rel="noreferrer" target="_blank">here</a>.
-      </p>
-    );
-  }
-
-  renderKubeConfigSource() {
-    return (
-      <>
+      <PageLayout className="AddClusters" showOnTop={true}>
+        <h2>Add Clusters from Kubeconfig</h2>
+        <p>
+          Clusters added here are <b>not</b> merged into the <code>~/.kube/config</code> file.
+          Read more about adding clusters <a href={`${docsUrl}/clusters/adding-clusters/`} rel="noreferrer" target="_blank">here</a>.
+        </p>
        <div className="flex column">
          <AceEditor
            autoFocus
            showGutter={false}
            mode="yaml"
            value={this.customConfig}
-            wrap={true}
            onChange={value => {
              this.customConfig = value;
+              this.errorText = "";
              this.refreshContexts();
            }}
          />
        </div>
-      </>
-    );
-  }
-
-  render() {
-    const submitDisabled = this.kubeContexts.size === 0;
-
-    return (
-      <PageLayout className="AddClusters" showOnTop={true}>
-        <h2>Add Clusters from Kubeconfig</h2>
-        {this.renderInfo()}
-        {this.renderKubeConfigSource()}
-        <div className="cluster-settings">
-          <a href="#" onClick={() => this.showSettings = !this.showSettings}>
-            Proxy settings
-          </a>
-        </div>
-        {this.showSettings && (
-          <div className="proxy-settings">
-            <p>HTTP Proxy server. Used for communicating with Kubernetes API.</p>
-            <Input
-              autoFocus
-              value={this.proxyServer}
-              onChange={value => this.proxyServer = value}
-              theme="round-black"
-            />
-            <small className="hint">
-              {"A HTTP proxy server URL (format: http://<address>:<port>)."}
-            </small>
-          </div>
+        {this.allErrors.length > 0 && (
+          <>
+            <h3>KubeConfig Yaml Validation Errors:</h3>
+            {...this.allErrors.map(error => <div key={error} className="error">{error}</div>)}
+          </>
        )}
-        {this.error && (
-          <div className="error">{this.error}</div>
-        )}
-
        <div className="actions-panel">
          <Button
            primary
-            disabled={submitDisabled}
-            label={this.kubeContexts.keys.length < 2 ? "Add cluster" : "Add clusters"}
+            disabled={this.kubeContexts.size === 0}
+            label={this.kubeContexts.size === 1 ? "Add cluster" : "Add clusters"}
            onClick={this.addClusters}
            waiting={this.isWaiting}
-            tooltip={submitDisabled ? "Paste a valid kubeconfig." : undefined}
+            tooltip={this.kubeContexts.size === 0 || "Paste in at least one cluster to add."}
            tooltipOverrideDisabled
          />
        </div>
--- a/src/renderer/components/+apps-helm-charts/helm-charts.tsx
+++ b/src/renderer/components/+apps-helm-charts/helm-charts.tsx
@ -30,7 +30,6 @@ import type { HelmChart } from "../../api/endpoints/helm-charts.api";
 import { HelmChartDetails } from "./helm-chart-details";
 import { navigation } from "../../navigation";
 import { ItemListLayout } from "../item-object-list/item-list-layout";
-import { SearchInputUrl } from "../input";

 enum columnId {
  name = "name",
@ -92,9 +91,12 @@ export class HelmCharts extends Component<Props> {
            (chart: HelmChart) => chart.getAppVersion(),
            (chart: HelmChart) => chart.getKeywords(),
          ]}
-          customizeHeader={() => (
-            <SearchInputUrl placeholder="Search Helm Charts" />
-          )}
+          customizeHeader={({ searchProps }) => ({
+            searchProps: {
+              ...searchProps,
+              placeholder: "Search Helm Charts...",
+            },
+          })}
          renderTableHeader={[
            { className: "icon", showWithColumn: columnId.name },
            { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
--- a/src/renderer/components/+apps-releases/releases.tsx
+++ b/src/renderer/components/+apps-releases/releases.tsx
@ -117,16 +117,20 @@ export class HelmReleases extends Component<Props> {
            (release: HelmRelease) => release.getStatus(),
            (release: HelmRelease) => release.getVersion(),
          ]}
-          renderHeaderTitle="Releases"
-          customizeHeader={({ filters, ...headerPlaceholders }) => ({
+          customizeHeader={({ filters, searchProps, ...headerPlaceholders }) => ({
            filters: (
              <>
                {filters}
                <NamespaceSelectFilter />
              </>
            ),
+            searchProps: {
+              ...searchProps,
+              placeholder: "Search Releases...",
+            },
            ...headerPlaceholders,
          })}
+          renderHeaderTitle="Releases"
          renderTableHeader={[
            { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
            { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
--- a/src/renderer/components/+catalog/catalog.scss
+++ b/src/renderer/components/+catalog/catalog.scss
@ -1,120 +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.
- */
-
-.CatalogPage {
-  --width: 100%;
-  --height: 100%;
-  --nav-column-width: 200px;
-
-  .sidebarRegion {
-    justify-content: flex-start;
-    background-color: var(--sidebarBackground);
-
-    .sidebarHeader {
-      background: var(--sidebarLogoBackground);
-      height: var(--main-layout-header);
-      padding: 4px;
-      color: var(--textColorAccent);
-      font-weight: bold;
-      font-size: 14px;
-      display: flex;
-      align-items: center;
-      padding-left: 10px;
-    }
-
-    > .sidebar {
-      width: 100%;
-      padding: 0;
-
-      .sidebarTabs {
-        margin-top: 5px;
-
-        .Tab {
-          padding: 7px 10px;
-          font-weight: normal;
-          font-size: 14px;
-          border-radius: 0;
-          height: 36px;
-
-          &.active {
-            background-color: var(--blue);
-            color: white;
-          }
-        }
-      }
-    }
-  }
-
-  .contentRegion {
-    > .content {
-      padding: 20px 20px;
-    }
-  }
-
-  .TableCell.icon {
-    max-width: 40px;
-    display: flex;
-    align-items: center;
-  }
-
-  .TableCell.kind {
-    max-width: 150px;
-  }
-
-  .TableCell.source {
-    max-width: 100px;
-  }
-
-  .TableCell.status {
-    max-width: 100px;
-    &.connected {
-      color: var(--colorSuccess);
-    }
-
-    &.disconnected {
-      color: var(--halfGray);
-    }
-  }
-
-  .TableCell.labels {
-    overflow-x: scroll;
-    text-overflow: unset;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-
-    .Badge {
-      overflow: unset;
-      text-overflow: unset;
-      max-width: unset;
-
-      &:not(:first-child) {
-        margin-left: 0.5em;
-      }
-    }
-  }
-
-  .catalogIcon {
-    font-size: 10px;
-    -webkit-font-smoothing: auto;
-  }
-}
--- a/src/renderer/components/+catalog/catalog.tsx
+++ b/src/renderer/components/+catalog/catalog.tsx
@ -205,7 +205,6 @@ export class Catalog extends React.Component<Props> {
    return (
      <ItemListLayout
        renderHeaderTitle={this.catalogEntityStore.activeCategory?.metadata.name ?? "Browse All"}
-        isSearchable={true}
        isSelectable={false}
        className="CatalogItemList"
        store={this.catalogEntityStore}
@ -219,11 +218,11 @@ export class Catalog extends React.Component<Props> {
          (entity: CatalogEntityItem) => entity.searchFields,
        ]}
        renderTableHeader={[
-          { title: "", className: "icon" },
-          { title: "Name", className: "name", sortBy: sortBy.name },
-          { title: "Source", className: "source", sortBy: sortBy.source },
-          { title: "Labels", className: "labels" },
-          { title: "Status", className: "status", sortBy: sortBy.status },
+          { title: "", className: styles.iconCell },
+          { title: "Name", className: styles.nameCell, sortBy: sortBy.name },
+          { title: "Source", className: styles.sourceCell, sortBy: sortBy.source },
+          { title: "Labels", className: styles.labelsCell },
+          { title: "Status", className: styles.statusCell, sortBy: sortBy.status },
        ]}
        renderTableContents={(item: CatalogEntityItem) => [
          this.renderIcon(item),
@ -242,7 +241,6 @@ export class Catalog extends React.Component<Props> {
    return (
      <ItemListLayout
        renderHeaderTitle={this.catalogEntityStore.activeCategory?.metadata.name ?? "Browse All"}
-        isSearchable={true}
        isSelectable={false}
        className="CatalogItemList"
        store={this.catalogEntityStore}
@ -257,12 +255,11 @@ export class Catalog extends React.Component<Props> {
          (entity: CatalogEntityItem) => entity.searchFields,
        ]}
        renderTableHeader={[
-          { title: "", className: "icon" },
-          { title: "Name", className: "name", sortBy: sortBy.name },
-          { title: "Kind", className: "kind", sortBy: sortBy.kind },
-          { title: "Source", className: "source", sortBy: sortBy.source },
-          { title: "Labels", className: "labels" },
-          { title: "Status", className: "status", sortBy: sortBy.status },
+          { title: "", className: styles.iconCell },
+          { title: "Name", className: styles.nameCell, sortBy: sortBy.name },
+          { title: "Source", className: styles.sourceCell, sortBy: sortBy.source },
+          { title: "Labels", className: styles.labelsCell },
+          { title: "Status", className: styles.statusCell, sortBy: sortBy.status },
        ]}
        renderTableContents={(item: CatalogEntityItem) => [
          this.renderIcon(item),
--- a/src/renderer/components/+custom-resources/crd-list.scss
+++ b/src/renderer/components/+custom-resources/crd-list.scss
@ -42,4 +42,8 @@
      }
    }
  }
-}
+
+  .SearchInput {
+    width: 300px;
+  }
+}
--- a/src/renderer/components/+custom-resources/crd-list.tsx
+++ b/src/renderer/components/+custom-resources/crd-list.tsx
@ -95,7 +95,7 @@ export class CrdList extends React.Component {
        sortingCallbacks={sortingCallbacks}
        searchFilters={Object.values(sortingCallbacks)}
        renderHeaderTitle="Custom Resources"
-        customizeHeader={() => {
+        customizeHeader={({ filters, ...headerPlaceholders }) => {
          let placeholder = <>All groups</>;

          if (selectedGroups.length == 1) placeholder = <>Group: {selectedGroups[0]}</>;
@ -104,26 +104,30 @@ export class CrdList extends React.Component {
          return {
            // todo: move to global filters
            filters: (
-              <Select
-                className="group-select"
-                placeholder={placeholder}
-                options={Object.keys(crdStore.groups)}
-                onChange={({ value: group }: SelectOption) => this.toggleSelection(group)}
-                closeMenuOnSelect={false}
-                controlShouldRenderValue={false}
-                formatOptionLabel={({ value: group }: SelectOption) => {
-                  const isSelected = selectedGroups.includes(group);
-
-                  return (
-                    <div className="flex gaps align-center">
-                      <Icon small material="folder"/>
-                      <span>{group}</span>
-                      {isSelected && <Icon small material="check" className="box right"/>}
-                    </div>
-                  );
-                }}
-              />
-            )
+              <>
+                {filters}
+                <Select
+                  className="group-select"
+                  placeholder={placeholder}
+                  options={Object.keys(crdStore.groups)}
+                  onChange={({ value: group }: SelectOption) => this.toggleSelection(group)}
+                  closeMenuOnSelect={false}
+                  controlShouldRenderValue={false}
+                  formatOptionLabel={({ value: group }: SelectOption) => {
+                    const isSelected = selectedGroups.includes(group);
+  
+                    return (
+                      <div className="flex gaps align-center">
+                        <Icon small material="folder"/>
+                        <span>{group}</span>
+                        {isSelected && <Icon small material="check" className="box right"/>}
+                      </div>
+                    );
+                  }}
+                />
+              </>
+            ),
+            ...headerPlaceholders,
          };
        }}
        renderTableHeader={[
--- a/src/renderer/components/+custom-resources/crd-resources.tsx
+++ b/src/renderer/components/+custom-resources/crd-resources.tsx
@ -101,6 +101,13 @@ export class CrdResources extends React.Component<Props> {
          (item: KubeObject) => item.getSearchFields(),
        ]}
        renderHeaderTitle={crd.getResourceTitle()}
+        customizeHeader={({ searchProps, ...headerPlaceholders }) => ({
+          searchProps: {
+            ...searchProps,
+            placeholder: `Search ${crd.getResourceTitle()}...`,
+          },
+          ...headerPlaceholders
+        })}
        renderTableHeader={[
          { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
          isNamespaced && { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
--- a/src/renderer/components/+events/events.tsx
+++ b/src/renderer/components/+events/events.tsx
@ -30,7 +30,7 @@ import { EventStore, eventStore } from "./event.store";
 import { getDetailsUrl, KubeObjectListLayout, KubeObjectListLayoutProps } from "../kube-object";
 import type { KubeEvent } from "../../api/endpoints/events.api";
 import type { TableSortCallbacks, TableSortParams, TableProps } from "../table";
-import type { IHeaderPlaceholders } from "../item-object-list";
+import type { HeaderCustomizer } from "../item-object-list";
 import { Tooltip } from "../tooltip";
 import { Link } from "react-router-dom";
 import { cssNames, IClassName, stopPropagation } from "../../utils";
@ -112,19 +112,21 @@ export class Events extends React.Component<Props> {
    return this.items;
  }

-  customizeHeader = ({ info, title }: IHeaderPlaceholders) => {
+  customizeHeader: HeaderCustomizer = ({ info, title, ...headerPlaceholders }) => {
    const { compact } = this.props;
    const { store, items, visibleItems } = this;
    const allEventsAreShown = visibleItems.length === items.length;

    // handle "compact"-mode header
    if (compact) {
-      if (allEventsAreShown) return title; // title == "Events"
+      if (allEventsAreShown) {
+        return { title };
+      }

-      return <>
-        {title}
-        <span> ({visibleItems.length} of <Link to={eventsURL()}>{items.length}</Link>)</span>
-      </>;
+      return {
+        title,
+        info: <span> ({visibleItems.length} of <Link to={eventsURL()}>{items.length}</Link>)</span>,
+      };
    }

    return {
@ -136,7 +138,9 @@ export class Events extends React.Component<Props> {
          className="help-icon"
          tooltip={`Limited to ${store.limit}`}
        />
-      </>
+      </>,
+      title, 
+      ...headerPlaceholders
    };
  };

--- a/src/renderer/components/+namespaces/namespace-select-filter.tsx
+++ b/src/renderer/components/+namespaces/namespace-select-filter.tsx
@ -26,8 +26,6 @@ import { observer } from "mobx-react";
 import { components, PlaceholderProps } from "react-select";

 import { Icon } from "../icon";
-import { FilterIcon } from "../item-object-list/filter-icon";
-import { FilterType } from "../item-object-list/page-filters.store";
 import { NamespaceSelect } from "./namespace-select";
 import { namespaceStore } from "./namespace.store";

@ -63,7 +61,7 @@ export class NamespaceSelectFilter extends React.Component<SelectProps> {

      return (
        <div className="flex gaps align-center">
-          <FilterIcon type={FilterType.NAMESPACE}/>
+          <Icon small material="layers" />
          <span>{namespace}</span>
          {isSelected && <Icon small material="check" className="box right"/>}
        </div>
--- a/src/renderer/components/cluster-manager/cluster-status.tsx
+++ b/src/renderer/components/cluster-manager/cluster-status.tsx
@ -19,21 +19,23 @@
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */

-import type { KubeAuthProxyLog } from "../../../main/kube-auth-proxy";
-
 import "./cluster-status.scss";
-import React from "react";
-import { observer } from "mobx-react";
+
 import { ipcRenderer } from "electron";
 import { computed, observable, makeObservable } from "mobx";
-import { requestMain, subscribeToBroadcast } from "../../../common/ipc";
-import { Icon } from "../icon";
-import { Button } from "../button";
-import { cssNames, IClassName } from "../../utils";
-import type { Cluster } from "../../../main/cluster";
-import { ClusterId, ClusterStore } from "../../../common/cluster-store";
-import { CubeSpinner } from "../spinner";
+import { observer } from "mobx-react";
+import React from "react";
 import { clusterActivateHandler } from "../../../common/cluster-ipc";
+import { ClusterId, ClusterStore } from "../../../common/cluster-store";
+import { requestMain, subscribeToBroadcast } from "../../../common/ipc";
+import type { Cluster } from "../../../main/cluster";
+import { cssNames, IClassName } from "../../utils";
+import { Button } from "../button";
+import { Icon } from "../icon";
+import { CubeSpinner } from "../spinner";
+import type { KubeAuthProxyLog } from "../../../main/kube-auth-proxy";
+import { navigate } from "../../navigation";
+import { entitySettingsURL } from "../+entity-settings";

 interface Props {
  className?: IClassName;
@ -82,6 +84,15 @@ export class ClusterStatus extends React.Component<Props> {
    this.isReconnecting = false;
  };

+  manageProxySettings = () => {
+    navigate(entitySettingsURL({
+      params: {
+        entityId: this.props.clusterId,
+      },
+      fragment: "http-proxy",
+    }));
+  };
+
  renderContent() {
    const { authOutput, cluster, hasErrors } = this;
    const failureReason = cluster.failureReason;
@ -89,7 +100,7 @@ export class ClusterStatus extends React.Component<Props> {
    if (!hasErrors || this.isReconnecting) {
      return (
        <>
-          <CubeSpinner/>
+          <CubeSpinner />
          <pre className="kube-auth-out">
            <p>{this.isReconnecting ? "Reconnecting..." : "Connecting..."}</p>
            {authOutput.map(({ data, error }, index) => {
@ -102,7 +113,7 @@ export class ClusterStatus extends React.Component<Props> {

    return (
      <>
-        <Icon material="cloud_off" className="error"/>
+        <Icon material="cloud_off" className="error" />
        <h2>
          {cluster.preferences.clusterName}
        </h2>
@ -121,6 +132,12 @@ export class ClusterStatus extends React.Component<Props> {
          onClick={this.reconnect}
          waiting={this.isReconnecting}
        />
+        <Button
+          primary
+          label="Manage Proxy Settings"
+          className="box center"
+          onClick={this.manageProxySettings}
+        />
      </>
    );
  }
--- a/src/renderer/components/cluster-settings/components/cluster-proxy-setting.tsx
+++ b/src/renderer/components/cluster-settings/components/cluster-proxy-setting.tsx
@ -58,7 +58,7 @@ export class ClusterProxySetting extends React.Component<Props> {
  render() {
    return (
      <>
-        <SubTitle title="HTTP Proxy" />
+        <SubTitle title="HTTP Proxy" id="http-proxy" />
        <Input
          theme="round-black"
          value={this.proxy}
--- a/src/renderer/components/hotbar/hotbar-icon.scss
+++ b/src/renderer/components/hotbar/hotbar-icon.scss
@ -71,7 +71,7 @@

    &:hover {
      &:not(.active) {
-        box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px #ffffff30;
+        box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px #ffffff50;
      }
    }
  }
--- a/src/renderer/components/hotbar/hotbar-menu.scss
+++ b/src/renderer/components/hotbar/hotbar-menu.scss
@ -62,7 +62,7 @@
      height: var(--cellHeight);
      min-height: var(--cellHeight);
      margin: 12px;
-      background: var(--layoutBackground);
+      background: var(--clusterMenuCellBackground);
      border-radius: 6px;
      position: relative;

@ -136,4 +136,4 @@
  100% {
    margin-top: 2px;
  }
-}
+}
--- a/src/renderer/components/input/search-input-url.tsx
+++ b/src/renderer/components/input/search-input-url.tsx
@ -32,12 +32,12 @@ export const searchUrlParam = createPageParam({
  defaultValue: "",
 });

-interface Props extends InputProps {
+export interface SearchInputUrlProps extends InputProps {
  compact?: boolean; // show only search-icon when not focused
 }

@observer
-export class SearchInputUrl extends React.Component<Props> {
+export class SearchInputUrl extends React.Component<SearchInputUrlProps> {
  @observable inputVal = ""; // fix: use empty string on init to avoid react warnings

  @disposeOnUnmount
@ -62,7 +62,7 @@ export class SearchInputUrl extends React.Component<Props> {
    }
  };

-  constructor(props: Props) {
+  constructor(props: SearchInputUrlProps) {
    super(props);
    makeObservable(this);
  }
--- a/src/renderer/components/item-object-list/filter-icon.tsx
+++ b/src/renderer/components/item-object-list/filter-icon.tsx
@ -31,9 +31,6 @@ export function FilterIcon(props: Props) {
  const { type, ...iconProps } = props;

  switch (type) {
-    case FilterType.NAMESPACE:
-      return <Icon small material="layers" {...iconProps}/>;
-
    case FilterType.SEARCH:
      return <Icon small material="search" {...iconProps}/>;

--- a/src/renderer/components/item-object-list/item-list-layout.tsx
+++ b/src/renderer/components/item-object-list/item-list-layout.tsx
@ -32,31 +32,30 @@ import { AddRemoveButtons, AddRemoveButtonsProps } from "../add-remove-buttons";
 import { NoItems } from "../no-items";
 import { Spinner } from "../spinner";
 import type { ItemObject, ItemStore } from "../../item.store";
-import { SearchInputUrl } from "../input";
+import { SearchInputUrlProps, SearchInputUrl } from "../input";
 import { Filter, FilterType, pageFilters } from "./page-filters.store";
 import { PageFiltersList } from "./page-filters-list";
-import { PageFiltersSelect } from "./page-filters-select";
 import { ThemeStore } from "../../theme.store";
 import { MenuActions } from "../menu/menu-actions";
 import { MenuItem } from "../menu";
 import { Checkbox } from "../checkbox";
 import { UserStore } from "../../../common/user-store";
 import { namespaceStore } from "../+namespaces/namespace.store";
-import { KubeObjectStore } from "../../kube-object.store";
-import { NamespaceSelectFilter } from "../+namespaces/namespace-select-filter";

-// todo: refactor, split to small re-usable components
+

 export type SearchFilter<T extends ItemObject = any> = (item: T) => string | number | (string | number)[];
 export type ItemsFilter<T extends ItemObject = any> = (items: T[]) => T[];

-export interface IHeaderPlaceholders {
-  title: ReactNode;
-  search: ReactNode;
-  filters: ReactNode;
-  info: ReactNode;
+export interface HeaderPlaceholders {
+  title?: ReactNode;
+  searchProps?: SearchInputUrlProps;
+  filters?: ReactNode;
+  info?: ReactNode;
 }

+export type HeaderCustomizer = (placeholders: HeaderPlaceholders) => HeaderPlaceholders;
+
 export interface ItemListLayoutProps<T extends ItemObject = ItemObject> {
  tableId?: string;
  className: IClassName;
@ -73,12 +72,11 @@ export interface ItemListLayoutProps<T extends ItemObject = ItemObject> {
  showHeader?: boolean;
  headerClassName?: IClassName;
  renderHeaderTitle?: ReactNode | ((parent: ItemListLayout) => ReactNode);
-  customizeHeader?: (placeholders: IHeaderPlaceholders, content: ReactNode) => Partial<IHeaderPlaceholders> | ReactNode;
+  customizeHeader?: HeaderCustomizer | HeaderCustomizer[];

  // items list configuration
  isReady?: boolean; // show loading indicator while not ready
  isSelectable?: boolean; // show checkbox in rows for selecting items
-  isSearchable?: boolean; // apply search-filter & add search-input
  isConfigurable?: boolean;
  copyClassNameFromHeadCells?: boolean;
  sortingCallbacks?: { [sortBy: string]: TableSortCallback };
@ -102,12 +100,13 @@ export interface ItemListLayoutProps<T extends ItemObject = ItemObject> {

 const defaultProps: Partial<ItemListLayoutProps> = {
  showHeader: true,
-  isSearchable: true,
  isSelectable: true,
  isConfigurable: false,
  copyClassNameFromHeadCells: true,
  preloadStores: true,
  dependentStores: [],
+  searchFilters: [],
+  customizeHeader: [],
  filterItems: [],
  hasDetailsView: true,
  onDetails: noop,
@ -161,10 +160,10 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {

  private filterCallbacks: { [type: string]: ItemsFilter } = {
    [FilterType.SEARCH]: items => {
-      const { searchFilters, isSearchable } = this.props;
+      const { searchFilters } = this.props;
      const search = pageFilters.getValues(FilterType.SEARCH)[0] || "";

-      if (search && isSearchable && searchFilters) {
+      if (search && searchFilters.length) {
        const normalizeText = (text: string) => String(text).toLowerCase();
        const searchTexts = [search].map(normalizeText);

@ -179,16 +178,6 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {

      return items;
    },
-
-    [FilterType.NAMESPACE]: items => {
-      const filterValues = pageFilters.getValues(FilterType.NAMESPACE);
-
-      if (filterValues.length > 0) {
-        return items.filter(item => filterValues.includes(item.getNs()));
-      }
-
-      return items;
-    },
  };

  @computed get isReady() {
@ -201,9 +190,9 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {

  @computed get filters() {
    let { activeFilters } = pageFilters;
-    const { isSearchable, searchFilters } = this.props;
+    const { searchFilters } = this.props;

-    if (!(isSearchable && searchFilters)) {
+    if (searchFilters.length === 0) {
      activeFilters = activeFilters.filter(({ type }) => type !== FilterType.SEARCH);
    }

@ -359,18 +348,22 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {
    return this.items.map(item => this.getRow(item.getId()));
  }

-  renderHeaderContent(placeholders: IHeaderPlaceholders): ReactNode {
-    const { isSearchable, searchFilters } = this.props;
-    const { title, filters, search, info } = placeholders;
+  renderHeaderContent(placeholders: HeaderPlaceholders): ReactNode {
+    const { searchFilters } = this.props;
+    const { title, filters, searchProps, info } = placeholders;

    return (
      <>
        {title}
-        <div className="info-panel box grow">
-          {info}
-        </div>
+        {
+          info && (
+            <div className="info-panel box grow">
+              {info}
+            </div>
+          )
+        }
        {filters}
-        {isSearchable && searchFilters && search}
+        {searchFilters.length > 0 && searchProps && <SearchInputUrl {...searchProps} />}
      </>
    );
  }
@ -396,35 +389,15 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {
      return null;
    }

-    const showNamespaceSelectFilter = this.props.store instanceof KubeObjectStore && this.props.store.api.isNamespaced;
    const title = typeof renderHeaderTitle === "function" ? renderHeaderTitle(this) : renderHeaderTitle;
-    const placeholders: IHeaderPlaceholders = {
+    const customizeHeaders = [customizeHeader].flat().filter(Boolean);
+    const initialPlaceholders: HeaderPlaceholders = {
      title: <h5 className="title">{title}</h5>,
      info: this.renderInfo(),
-      filters: (
-        <>
-          {showNamespaceSelectFilter && <NamespaceSelectFilter />}
-          <PageFiltersSelect allowEmpty disableFilters={{
-            [FilterType.NAMESPACE]: true, // namespace-select used instead
-          }} />
-        </>
-      ),
-      search: <SearchInputUrl />,
+      searchProps: {},
    };
-    let header = this.renderHeaderContent(placeholders);
-
-    if (customizeHeader) {
-      const modifiedHeader = customizeHeader(placeholders, header) ?? {};
-
-      if (isReactNode(modifiedHeader)) {
-        header = modifiedHeader;
-      } else {
-        header = this.renderHeaderContent({
-          ...placeholders,
-          ...modifiedHeader as IHeaderPlaceholders,
-        });
-      }
-    }
+    const headerPlaceholders = customizeHeaders.reduce((prevPlaceholders, customizer) => customizer(prevPlaceholders), initialPlaceholders);
+    const header = this.renderHeaderContent(headerPlaceholders);

    return (
      <div className={cssNames("header flex gaps align-center", headerClassName)}>
--- a/src/renderer/components/item-object-list/page-filters-select.tsx
+++ b/src/renderer/components/item-object-list/page-filters-select.tsx
@ -1,136 +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 React from "react";
-import { observer } from "mobx-react";
-import { computed, makeObservable } from "mobx";
-import { GroupSelectOption, Select, SelectOption, SelectProps } from "../select";
-import { FilterType, pageFilters } from "./page-filters.store";
-import { namespaceStore } from "../+namespaces/namespace.store";
-import { Icon } from "../icon";
-import { FilterIcon } from "./filter-icon";
-
-export interface SelectOptionFilter extends SelectOption {
-  type: FilterType;
-  selected?: boolean;
-}
-
-interface Props extends SelectProps {
-  allowEmpty?: boolean;
-  disableFilters?: {
-    [filterType: string]: boolean;
-  };
-}
-
-@observer
-export class PageFiltersSelect extends React.Component<Props> {
-  static defaultProps: Props = {
-    allowEmpty: true,
-    disableFilters: {},
-  };
-
-  constructor(props: Props) {
-    super(props);
-    makeObservable(this);
-  }
-
-  @computed get groupedOptions() {
-    const options: GroupSelectOption<SelectOptionFilter>[] = [];
-    const { disableFilters } = this.props;
-
-    if (!disableFilters[FilterType.NAMESPACE]) {
-      const selectedValues = pageFilters.getValues(FilterType.NAMESPACE);
-
-      options.push({
-        label: "Namespace",
-        options: namespaceStore.items.map(ns => {
-          const name = ns.getName();
-
-          return {
-            type: FilterType.NAMESPACE,
-            value: name,
-            icon: <Icon small material="layers"/>,
-            selected: selectedValues.includes(name),
-          };
-        })
-      });
-    }
-
-    return options;
-  }
-
-  @computed get options(): SelectOptionFilter[] {
-    return this.groupedOptions.reduce((options, optGroup) => {
-      options.push(...optGroup.options);
-
-      return options;
-    }, []);
-  }
-
-  private formatLabel = (option: SelectOptionFilter) => {
-    const { label, value, type, selected } = option;
-
-    return (
-      <div className="flex gaps">
-        <FilterIcon type={type}/>
-        <span>{label || String(value)}</span>
-        {selected && <Icon small material="check" className="box right"/>}
-      </div>
-    );
-  };
-
-  private onSelect = (option: SelectOptionFilter) => {
-    const { type, value, selected } = option;
-    const { addFilter, removeFilter } = pageFilters;
-    const filter = { type, value };
-
-    if (!selected) {
-      addFilter(filter);
-    }
-    else {
-      removeFilter(filter);
-    }
-  };
-
-  render() {
-    const { groupedOptions, formatLabel, onSelect, options } = this;
-
-    if (!options.length && this.props.allowEmpty) {
-      return null;
-    }
-    const { allowEmpty, disableFilters, ...selectProps } = this.props;
-    const selectedOptions = options.filter(opt => opt.selected);
-
-    return (
-      <Select
-        {...selectProps}
-        placeholder={`Filters (${selectedOptions.length}/${options.length})`}
-        noOptionsMessage={() => `No filters available.`}
-        autoConvertOptions={false}
-        tabSelectsValue={false}
-        controlShouldRenderValue={false}
-        options={groupedOptions}
-        formatOptionLabel={formatLabel}
-        onChange={onSelect}
-      />
-    );
-  }
-}
--- a/src/renderer/components/item-object-list/page-filters.store.ts
+++ b/src/renderer/components/item-object-list/page-filters.store.ts
@ -25,7 +25,6 @@ import { searchUrlParam } from "../input/search-input-url";

 export enum FilterType {
  SEARCH = "search",
-  NAMESPACE = "namespace",
 }

 export interface Filter {
--- a/src/renderer/components/kube-object/kube-object-list-layout.tsx
+++ b/src/renderer/components/kube-object/kube-object-list-layout.tsx
@ -30,6 +30,8 @@ import { KubeObjectMenu } from "./kube-object-menu";
 import { kubeSelectedUrlParam, showDetails } from "./kube-object-details";
 import { kubeWatchApi } from "../../api/kube-watch-api";
 import { clusterContext } from "../context";
+import { NamespaceSelectFilter } from "../+namespaces/namespace-select-filter";
+import { ResourceKindMap, ResourceNames } from "../../utils/rbac";

 export interface KubeObjectListLayoutProps extends ItemListLayoutProps {
  store: KubeObjectStore;
@ -66,7 +68,8 @@ export class KubeObjectListLayout extends React.Component<KubeObjectListLayoutPr
  }

  render() {
-    const { className, store, items = store.contextItems, ...layoutProps } = this.props;
+    const { className, customizeHeader, store, items = store.contextItems, ...layoutProps } = this.props;
+    const placeholderString = ResourceNames[ResourceKindMap[store.api.kind]] || store.api.kind;

    return (
      <ItemListLayout
@ -76,6 +79,22 @@ export class KubeObjectListLayout extends React.Component<KubeObjectListLayoutPr
        items={items}
        preloadStores={false} // loading handled in kubeWatchApi.subscribeStores()
        detailsItem={this.selectedItem}
+        customizeHeader={[
+          ({ filters, searchProps, ...headerPlaceHolders }) => ({
+            filters: (
+              <>
+                {filters}
+                {store.api.isNamespaced && <NamespaceSelectFilter />}
+              </>
+            ),
+            searchProps: {
+              ...searchProps,
+              placeholder: `Search ${placeholderString}...`,
+            },
+            ...headerPlaceHolders,
+          }),
+          ...[customizeHeader].flat(),
+        ]}
        renderItemMenu={(item: KubeObject) => <KubeObjectMenu object={item} />} // safe because we are dealing with KubeObjects here
      />
    );
--- a/src/renderer/lens-app.tsx
+++ b/src/renderer/lens-app.tsx
@ -49,6 +49,9 @@ export class LensApp extends React.Component {
    window.addEventListener("online", () => broadcastMessage("network:online"));

    registerIpcHandlers();
+  }
+
+  componentDidMount() {
    ipcRenderer.send(IpcRendererNavigationEvents.LOADED);
  }

@ -57,11 +60,11 @@ export class LensApp extends React.Component {
      <Router history={history}>
        <ErrorBoundary>
          <Switch>
-            <Route component={ClusterManager}/>
+            <Route component={ClusterManager} />
          </Switch>
        </ErrorBoundary>
-        <Notifications/>
-        <ConfirmDialog/>
+        <Notifications />
+        <ConfirmDialog />
        <CommandContainer />
      </Router>
    );
--- a/src/renderer/themes/lens-dark.json
+++ b/src/renderer/themes/lens-dark.json
@ -106,6 +106,7 @@
    "drawerItemValueColor": "#a0a0a0",
    "clusterMenuBackground": "#252729",
    "clusterMenuBorderColor": "#252729",
+    "clusterMenuCellBackground": "#2e3136",
    "clusterSettingsBackground": "#1e2124",
    "addClusterIconColor": "#252729",
    "boxShadow": "#0000003a",
--- a/src/renderer/themes/lens-light.json
+++ b/src/renderer/themes/lens-light.json
@ -105,8 +105,9 @@
    "drawerSubtitleBackground": "#f1f1f1",
    "drawerItemNameColor": "#727272",
    "drawerItemValueColor": "#555555",
-    "clusterMenuBackground": "#e8e8e8",
+    "clusterMenuBackground": "#d7d8da",
    "clusterMenuBorderColor": "#c9cfd3",
+    "clusterMenuCellBackground": "#bbbbbb",
    "clusterSettingsBackground": "#ffffff",
    "addClusterIconColor": "#8d8d8d",
    "boxShadow": "#0000003a",
--- a/src/renderer/utils/rbac.ts
+++ b/src/renderer/utils/rbac.ts
@ -19,7 +19,7 @@
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */

-import type { KubeResource } from "../../common/rbac";
+import { apiResourceRecord, KubeResource } from "../../common/rbac";

 export const ResourceNames: Record<KubeResource, string> = {
  "namespaces": "Namespaces",
@ -53,3 +53,8 @@ export const ResourceNames: Record<KubeResource, string> = {
  "clusterroles": "Cluster Roles",
  "serviceaccounts": "Service Accounts"
 };
+
+export const ResourceKindMap: Record<string, KubeResource> = Object.fromEntries(
+  Object.entries(apiResourceRecord)
+    .map(([resource, { kind }]) => [kind, resource as KubeResource])
+);
--- a/typedoc.json
+++ b/typedoc.json
@ -0,0 +1,11 @@
+{
+  "readme": "docs/extensions/typedoc-readme.md.tpl",
+  "name": "@k8slens/extensions",
+  "out": "docs/extensions/api",
+  "excludePrivate": true,
+  "includes": [
+    "src/"
+  ],
+  "hideBreadcrumbs": true,
+  "disableSources": true
+}
--- a/yarn.lock
+++ b/yarn.lock