Allow user to select Kubeconfig from filesystem (#740)

* Allow user to select Kubeconfig from filesystem, fix #738

Signed-off-by: Roman <ixrock@gmail.com>

Co-authored-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>
Co-authored-by: Alex Andreev <alex.andreev.email@gmail.com>

src/common/cluster-store.ts

@@ -1,5 +1,6 @@
 import type { WorkspaceId } from "./workspace-store";
-import { ipcRenderer } from "electron";
+import path from "path";
+import { app, ipcRenderer, remote } from "electron";
 import { unlink } from "fs-extra";
 import { action, computed, observable, toJS } from "mobx";
 import { BaseStore } from "./base-store";
@@ -7,6 +8,9 @@ import { Cluster, ClusterState } from "../main/cluster";
 import migrations from "../migrations/cluster-store"
 import logger from "../main/logger";
 import { tracker } from "./tracker";
+import { dumpConfigYaml } from "./kube-helpers";
+import { saveToAppFiles } from "./utils/saveToAppFiles";
+import { KubeConfig } from "@kubernetes/client-node";
 
 export interface ClusterIconUpload {
   clusterId: string;
@@ -49,6 +53,17 @@ export interface ClusterPreferences {
 }
 
 export class ClusterStore extends BaseStore<ClusterStoreModel> {
+  static getCustomKubeConfigPath(clusterId: ClusterId): string {
+    return path.resolve((app || remote.app).getPath("userData"), "kubeconfigs", 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);
+    return filePath;
+  }
+
   private constructor() {
     super({
       configName: "lens-cluster-store",
@@ -81,6 +96,7 @@ export class ClusterStore extends BaseStore<ClusterStoreModel> {
     return this.activeClusterId === id;
   }
 
+  @action
   setActive(id: ClusterId) {
     this.activeClusterId = id;
   }
@@ -102,12 +118,12 @@ export class ClusterStore extends BaseStore<ClusterStoreModel> {
   }
 
   @action
-  async addCluster(model: ClusterModel, activate = true): Promise<Cluster> {
-    tracker.event("cluster", "add");
-    const cluster = new Cluster(model);
-    this.clusters.set(model.id, cluster);
-    if (activate) this.activeClusterId = model.id;
-    return cluster;
+  addCluster(...models: ClusterModel[]) {
+    models.forEach(model => {
+      tracker.event("cluster", "add");
+      const cluster = new Cluster(model);
+      this.clusters.set(model.id, cluster);
+    })
   }
 
   @action
@@ -119,7 +135,10 @@ export class ClusterStore extends BaseStore<ClusterStoreModel> {
       if (this.activeClusterId === clusterId) {
         this.activeClusterId = null;
       }
-      unlink(cluster.kubeConfigPath).catch(() => null);
+      // remove only custom kubeconfigs (pasted as text)
+      if (cluster.kubeConfigPath == ClusterStore.getCustomKubeConfigPath(clusterId)) {
+        unlink(cluster.kubeConfigPath).catch(() => null);
+      }
     }
   }
 

src/common/cluster-store_test.ts

@@ -4,7 +4,6 @@ import yaml from "js-yaml";
 import { Cluster } from "../main/cluster";
 import { ClusterStore } from "./cluster-store";
 import { workspaceStore } from "./workspace-store";
-import { saveConfigToAppFiles } from "./kube-helpers";
 
 const testDataIcon = fs.readFileSync("test-data/cluster-store-migration-icon.png")
 
@@ -37,7 +36,7 @@ describe("empty config", () => {
         icon: "data:image/jpeg;base64, iVBORw0KGgoAAAANSUhEUgAAA1wAAAKoCAYAAABjkf5",
         clusterName: "minikube"
       },
-      kubeConfigPath: saveConfigToAppFiles("foo", "fancy foo config"),
+      kubeConfigPath: ClusterStore.embedCustomKubeConfig("foo", "fancy foo config"),
       workspace: workspaceStore.currentWorkspaceId
     });
     clusterStore.addCluster(cluster);
@@ -58,7 +57,7 @@ describe("empty config", () => {
       preferences: {
         clusterName: "prod"
       },
-      kubeConfigPath: saveConfigToAppFiles("prod", "fancy config"),
+      kubeConfigPath: ClusterStore.embedCustomKubeConfig("prod", "fancy config"),
       workspace: "workstation"
     });
     const devCluster = new Cluster({
@@ -66,7 +65,7 @@ describe("empty config", () => {
       preferences: {
         clusterName: "dev"
       },
-      kubeConfigPath: saveConfigToAppFiles("dev", "fancy config"),
+      kubeConfigPath: ClusterStore.embedCustomKubeConfig("dev", "fancy config"),
       workspace: "workstation"
     });
     clusterStore.addCluster(prodCluster);
@@ -84,17 +83,13 @@ describe("empty config", () => {
     expect(wsClusters[1].id).toBe("dev");
   })
 
-  it("checks if last added cluster becomes active", () => {
-    expect(clusterStore.activeCluster.id).toBe("dev");
-  })
-
   it("sets active cluster", () => {
     clusterStore.setActive("foo");
     expect(clusterStore.activeCluster.id).toBe("foo");
   })
 
   it("check if cluster's kubeconfig file saved", () => {
-    const file = saveConfigToAppFiles("boo", "kubeconfig");
+    const file = ClusterStore.embedCustomKubeConfig("boo", "kubeconfig");
     expect(fs.readFileSync(file, "utf8")).toBe("kubeconfig");
   })
 

src/common/kube-helpers.ts

@@ -1,11 +1,12 @@
-import { app, remote } from "electron";
 import { KubeConfig, V1Node, V1Pod } from "@kubernetes/client-node"
-import fse, { ensureDirSync, readFile, writeFileSync } from "fs-extra";
+import fse from "fs-extra";
 import path from "path"
 import os from "os"
 import yaml from "js-yaml"
 import logger from "../main/logger";
 
+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());
@@ -139,29 +140,3 @@ export function getNodeWarningConditions(node: V1Node) {
     c.status.toLowerCase() === "true" && c.type !== "Ready" && c.type !== "HostUpgrades"
   )
 }
-
-// Write kubeconfigs to "embedded" store, i.e. "/Users/ixrock/Library/Application Support/Lens/kubeconfigs"
-export function saveConfigToAppFiles(clusterId: string, kubeConfig: KubeConfig | string): string {
-  const userData = (app || remote.app).getPath("userData");
-  const kubeConfigFile = path.join(userData, `kubeconfigs/${clusterId}`)
-  const kubeConfigContents = typeof kubeConfig == "string" ? kubeConfig : dumpConfigYaml(kubeConfig);
-
-  ensureDirSync(path.dirname(kubeConfigFile));
-  writeFileSync(kubeConfigFile, kubeConfigContents);
-  return kubeConfigFile;
-}
-
-export async function getKubeConfigLocal(): Promise<string> {
-  try {
-    const configFile = path.join(os.homedir(), '.kube', 'config');
-    const file = await readFile(configFile, "utf8");
-    const obj = yaml.safeLoad(file);
-    if (obj.contexts) {
-      obj.contexts = obj.contexts.filter((ctx: any) => ctx?.context?.cluster && ctx?.name)
-    }
-    return yaml.safeDump(obj);
-  } catch (err) {
-    logger.debug(`Cannot read local kube-config: ${err}`)
-    return "";
-  }
-}

src/common/user-store.ts

@@ -1,13 +1,16 @@
 import type { ThemeId } from "../renderer/theme.store";
 import semver from "semver"
+import { readFile } from "fs-extra"
 import { action, observable, reaction, toJS } from "mobx";
 import { BaseStore } from "./base-store";
 import migrations from "../migrations/user-store"
 import { getAppVersion } from "./utils/app-version";
-import { getKubeConfigLocal, loadConfig } from "./kube-helpers";
+import { kubeConfigDefaultPath, loadConfig } from "./kube-helpers";
 import { tracker } from "./tracker";
+import logger from "../main/logger";
 
 export interface UserStoreModel {
+  kubeConfigPath: string;
   lastSeenAppVersion: string;
   seenContexts: string[];
   preferences: UserPreferences;
@@ -37,10 +40,11 @@ export class UserStore extends BaseStore<UserStoreModel> {
 
     // refresh new contexts
     this.whenLoaded.then(this.refreshNewContexts);
-    reaction(() => this.seenContexts.size, this.refreshNewContexts);
+    reaction(() => this.kubeConfigPath, this.refreshNewContexts);
   }
 
   @observable lastSeenAppVersion = "0.0.0"
+  @observable kubeConfigPath = kubeConfigDefaultPath; // used in add-cluster page for providing context
   @observable seenContexts = observable.set<string>();
   @observable newContexts = observable.set<string>();
 
@@ -55,6 +59,11 @@ export class UserStore extends BaseStore<UserStoreModel> {
     return semver.gt(getAppVersion(), this.lastSeenAppVersion);
   }
 
+  @action
+  resetKubeConfigPath() {
+    this.kubeConfigPath = kubeConfigDefaultPath;
+  }
+
   @action
   resetTheme() {
     this.preferences.colorTheme = UserStore.defaultTheme;
@@ -67,14 +76,18 @@ export class UserStore extends BaseStore<UserStoreModel> {
   }
 
   protected refreshNewContexts = async () => {
-    const kubeConfig = await getKubeConfigLocal();
-    if (kubeConfig) {
-      this.newContexts.clear();
-      const localContexts = loadConfig(kubeConfig).getContexts();
-      localContexts
-        .filter(ctx => ctx.cluster)
-        .filter(ctx => !this.seenContexts.has(ctx.name))
-        .forEach(ctx => this.newContexts.add(ctx.name));
+    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();
     }
   }
 
@@ -86,17 +99,21 @@ export class UserStore extends BaseStore<UserStoreModel> {
   }
 
   @action
-  protected fromStore(data: Partial<UserStoreModel> = {}) {
-    const { lastSeenAppVersion, seenContexts = [], preferences } = data
+  protected async fromStore(data: Partial<UserStoreModel> = {}) {
+    const { lastSeenAppVersion, seenContexts = [], preferences, kubeConfigPath } = data
     if (lastSeenAppVersion) {
       this.lastSeenAppVersion = lastSeenAppVersion;
     }
+    if (kubeConfigPath) {
+      this.kubeConfigPath = kubeConfigPath;
+    }
     this.seenContexts.replace(seenContexts);
     Object.assign(this.preferences, preferences);
   }
 
   toJSON(): UserStoreModel {
     const model: UserStoreModel = {
+      kubeConfigPath: this.kubeConfigPath,
       lastSeenAppVersion: this.lastSeenAppVersion,
       seenContexts: Array.from(this.seenContexts),
       preferences: this.preferences,

src/common/utils/saveToAppFiles.ts

@@ -0,0 +1,11 @@
+// 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";
+
+export function saveToAppFiles(filePath: string, contents: any): string {
+  const absPath = path.resolve((app || remote.app).getPath("userData"), filePath);
+  ensureDirSync(path.dirname(absPath));
+  writeFileSync(absPath, contents);
+  return absPath;
+}

src/migrations/cluster-store/3.6.0-beta.1.ts

@@ -5,8 +5,8 @@ import path from "path"
 import { app, remote } from "electron"
 import { migration } from "../migration-wrapper";
 import fse from "fs-extra"
-import { ClusterModel } from "../../common/cluster-store";
-import { loadConfig, saveConfigToAppFiles } from "../../common/kube-helpers";
+import { ClusterModel, ClusterStore } from "../../common/cluster-store";
+import { loadConfig } from "../../common/kube-helpers";
 import makeSynchronous from "make-synchronous"
 
 const AsyncFunction = Object.getPrototypeOf(async function () { return }).constructor;
@@ -17,7 +17,7 @@ export default migration({
   version: "3.6.0-beta.1",
   run(store, printLog) {
     const userDataPath = (app || remote.app).getPath("userData")
-    const kubeConfigBase = path.join(userDataPath, "kubeconfigs")
+    const kubeConfigBase = ClusterStore.getCustomKubeConfigPath("");
     const storedClusters: ClusterModel[] = store.get("clusters") || [];
 
     if (!storedClusters.length) return;
@@ -31,7 +31,7 @@ export default migration({
          */
         try {
           // take the embedded kubeconfig and dump it into a file
-          cluster.kubeConfigPath = saveConfigToAppFiles(cluster.id, cluster.kubeConfig)
+          cluster.kubeConfigPath = ClusterStore.embedCustomKubeConfig(cluster.id, cluster.kubeConfig);
           cluster.contextName = loadConfig(cluster.kubeConfigPath).getCurrentContext();
           delete cluster.kubeConfig;
 

src/renderer/components/+add-cluster/add-cluster.scss

@@ -1,5 +1,39 @@
 .AddCluster {
+  .droppable {
+    box-shadow: 0 0 0 5px inset $primary;
+
+    > * {
+      pointer-events: none;
+    }
+  }
+
+  .hint {
+    margin-top: -$padding;
+    color: $textColorSecondary;
+
+    > * {
+      vertical-align: middle;
+    }
+  }
+
+  .AceEditor {
+    min-height: 200px;
+    max-height: 400px;
+  }
+
   .Select {
+    .kube-context {
+      --flex-gap: #{$padding};
+    }
+
+    // todo: extract to component, merge with namespace-select.scss
+    &__placeholder {
+      width: 100%;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
     &__control {
       box-shadow: 0 0 0 1px $borderFaintColor;
     }
@@ -8,4 +42,4 @@
   code {
     color: $pink-400;
   }
-}
+}

src/renderer/components/+add-cluster/add-cluster.tsx

@@ -1,112 +1,163 @@
 import "./add-cluster.scss"
+import os from "os";
 import React, { Fragment } from "react";
 import { observer } from "mobx-react";
-import { computed, observable } from "mobx";
+import { action, observable, runInAction } from "mobx";
+import { remote } from "electron";
 import { KubeConfig } from "@kubernetes/client-node";
-import { t, Trans } from "@lingui/macro";
 import { _i18n } from "../../i18n";
+import { t, Trans } from "@lingui/macro";
 import { Select, SelectOption } from "../select";
 import { Input } from "../input";
 import { AceEditor } from "../ace-editor";
 import { Button } from "../button";
 import { Icon } from "../icon";
 import { WizardLayout } from "../layout/wizard-layout";
-import { getKubeConfigLocal, loadConfig, saveConfigToAppFiles, splitConfig, validateConfig } from "../../../common/kube-helpers";
-import { clusterStore } from "../../../common/cluster-store";
+import { kubeConfigDefaultPath, loadConfig, splitConfig, validateConfig } from "../../../common/kube-helpers";
+import { ClusterModel, ClusterStore, clusterStore } from "../../../common/cluster-store";
 import { workspaceStore } from "../../../common/workspace-store";
 import { v4 as uuid } from "uuid"
 import { navigate } from "../../navigation";
 import { userStore } from "../../../common/user-store";
 import { clusterViewURL } from "../cluster-manager/cluster-view.route";
+import { cssNames } from "../../utils";
+import { Notifications } from "../notifications";
+import { Tab, Tabs } from "../tabs";
+
+enum KubeConfigSourceTab {
+  FILE = "file",
+  TEXT = "text"
+}
 
 @observer
 export class AddCluster extends React.Component {
-  readonly custom: any = "custom"
-  @observable.ref clusterConfig: KubeConfig;
-  @observable.ref kubeConfig: KubeConfig; // local ~/.kube/config (if available)
+  @observable.ref kubeConfigLocal: KubeConfig;
   @observable.ref error: React.ReactNode;
 
+  @observable kubeContexts = observable.map<string, KubeConfig>(); // available contexts from kubeconfig-file or user-input
+  @observable selectedContexts = observable.array<string>();
+  @observable sourceTab = KubeConfigSourceTab.FILE;
+  @observable kubeConfigPath = "";
+  @observable customConfig = ""
+  @observable proxyServer = ""
   @observable isWaiting = false
   @observable showSettings = false
-  @observable proxyServer = ""
-  @observable customConfig = ""
+  @observable dropAreaActive = false;
 
-  async componentDidMount() {
-    const kubeConfig: string = await getKubeConfigLocal()
-    if (kubeConfig) {
-      this.kubeConfig = loadConfig(kubeConfig)
-    }
+  componentDidMount() {
+    this.setKubeConfig(userStore.kubeConfigPath);
   }
 
   componentWillUnmount() {
     userStore.markNewContextsAsSeen();
   }
 
-  @computed get isCustom() {
-    return this.clusterConfig === this.custom;
-  }
-
-  @computed get clusterOptions() {
-    const options: SelectOption<KubeConfig>[] = [];
-    if (this.kubeConfig) {
-      splitConfig(this.kubeConfig).forEach(kubeConfig => {
-        const context = kubeConfig.currentContext;
-        const hasContext = clusterStore.hasContext(context);
-        if (!hasContext) {
-          options.push({
-            value: kubeConfig,
-            label: context,
-          });
-        }
-      })
-    }
-    options.push({
-      label: <Trans>Custom..</Trans>,
-      value: this.custom,
-    });
-    return options;
-  }
-
-  protected formatClusterContextLabel = ({ value, label }: SelectOption<KubeConfig>) => {
-    if (value instanceof KubeConfig) {
-      const context = value.currentContext;
-      const isNew = userStore.newContexts.has(context);
-      const className = `${context} kube-context flex gaps align-center`
-      return (
-        <div className={className}>
-          <span>{context}</span>
-          {isNew && <Icon material="fiber_new"/>}
-        </div>
-      )
-    }
-    return label;
-  };
-
-  addCluster = async () => {
-    const { clusterConfig, customConfig, proxyServer } = this;
-    const clusterId = uuid();
-    this.isWaiting = true
-    this.error = ""
+  @action
+  setKubeConfig(filePath: string, { throwError = false } = {}) {
     try {
-      const config = this.isCustom ? loadConfig(customConfig) : clusterConfig;
-      if (!config) {
-        this.error = <Trans>Please select kubeconfig</Trans>
+      this.kubeConfigLocal = loadConfig(filePath);
+      validateConfig(this.kubeConfigLocal);
+      this.refreshContexts();
+      this.kubeConfigPath = filePath;
+      userStore.kubeConfigPath = filePath; // save to store
+    } catch (err) {
+      Notifications.error(
+        <div>Can't setup <code>{filePath}</code> as kubeconfig: {String(err)}</div>
+      );
+      if (throwError) {
+        throw err;
+      }
+    }
+  }
+
+  @action
+  refreshContexts() {
+    this.selectedContexts.clear();
+    this.kubeContexts.clear();
+
+    switch (this.sourceTab) {
+    case KubeConfigSourceTab.FILE:
+      const contexts = this.getContexts(this.kubeConfigLocal);
+      this.kubeContexts.replace(contexts);
+      break;
+
+    case KubeConfigSourceTab.TEXT:
+      try {
+        this.error = ""
+        const contexts = this.getContexts(loadConfig(this.customConfig || "{}"));
+        this.kubeContexts.replace(contexts);
+      } catch (err) {
+        this.error = String(err);
+      }
+      break;
+    }
+  }
+
+  getContexts(config: KubeConfig): Map<string, KubeConfig> {
+    const contexts = new Map();
+    splitConfig(config).forEach(config => {
+      const isExists = clusterStore.hasContext(config.currentContext);
+      if (!isExists) {
+        contexts.set(config.currentContext, config);
+      }
+    })
+    return contexts
+  }
+
+  selectKubeConfigDialog = async () => {
+    const { dialog, BrowserWindow } = remote;
+    const { canceled, filePaths } = await dialog.showOpenDialog(BrowserWindow.getFocusedWindow(), {
+      defaultPath: this.kubeConfigPath,
+      properties: ["openFile", "showHiddenFiles"],
+      message: _i18n._(t`Select custom kubeconfig file`),
+      buttonLabel: _i18n._(t`Use configuration`),
+    });
+    if (!canceled && filePaths.length) {
+      this.setKubeConfig(filePaths[0]);
+    }
+  }
+
+  addClusters = () => {
+    try {
+      if (!this.selectedContexts.length) {
+        this.error = <Trans>Please select at least one cluster context</Trans>
         return;
       }
-      validateConfig(config);
-      await clusterStore.addCluster({
-        id: clusterId,
-        kubeConfigPath: saveConfigToAppFiles(clusterId, config),
-        workspace: workspaceStore.currentWorkspaceId,
-        contextName: config.currentContext,
-        preferences: {
-          clusterName: config.currentContext,
-          httpsProxy: proxyServer || undefined,
-        },
+      this.error = ""
+      this.isWaiting = true
+      const newClusters: ClusterModel[] = this.selectedContexts.map(context => {
+        const clusterId = uuid();
+        const kubeConfig = this.kubeContexts.get(context);
+        const kubeConfigPath = this.sourceTab === KubeConfigSourceTab.FILE
+          ? this.kubeConfigPath // save link to original kubeconfig in file-system
+          : ClusterStore.embedCustomKubeConfig(clusterId, kubeConfig); // save in app-files folder
+        return {
+          id: clusterId,
+          kubeConfigPath: kubeConfigPath,
+          workspace: workspaceStore.currentWorkspaceId,
+          contextName: kubeConfig.currentContext,
+          preferences: {
+            clusterName: kubeConfig.currentContext,
+            httpsProxy: this.proxyServer || undefined,
+          },
+        }
       });
-      navigate(clusterViewURL({ params: { clusterId } }))
+      runInAction(() => {
+        clusterStore.addCluster(...newClusters);
+        if (newClusters.length === 1) {
+          const clusterId = newClusters[0].id;
+          clusterStore.setActive(clusterId);
+          navigate(clusterViewURL({ params: { clusterId } }));
+        } else {
+          Notifications.ok(
+            <Trans>Successfully imported <b>{newClusters.length}</b> cluster(s)</Trans>
+          );
+        }
+      })
+      this.refreshContexts();
     } catch (err) {
       this.error = String(err);
+      Notifications.error(<Trans>Error while adding cluster(s): {this.error}</Trans>);
     } finally {
       this.isWaiting = false;
     }
@@ -163,19 +214,156 @@ export class AddCluster extends React.Component {
     )
   }
 
+  renderKubeConfigSource() {
+    return (
+      <>
+        <Tabs withBorder onChange={this.onKubeConfigTabChange}>
+          <Tab
+            value={KubeConfigSourceTab.FILE}
+            label={<Trans>Select kubeconfig file</Trans>}
+            active={this.sourceTab == KubeConfigSourceTab.FILE}/>
+          <Tab
+            value={KubeConfigSourceTab.TEXT}
+            label={<Trans>Paste as text</Trans>}
+            active={this.sourceTab == KubeConfigSourceTab.TEXT}
+          />
+        </Tabs>
+        {this.sourceTab === KubeConfigSourceTab.FILE && (
+          <>
+            <div className="kube-config-select flex gaps align-center">
+              <Input
+                theme="round-black"
+                className="kube-config-path box grow"
+                value={this.kubeConfigPath}
+                onChange={v => this.kubeConfigPath = v}
+                onBlur={this.onKubeConfigInputBlur}
+              />
+              {this.kubeConfigPath !== kubeConfigDefaultPath && (
+                <Icon
+                  material="settings_backup_restore"
+                  onClick={() => this.setKubeConfig(kubeConfigDefaultPath)}
+                  tooltip={<Trans>Reset</Trans>}
+                />
+              )}
+              <Icon
+                material="folder"
+                onClick={this.selectKubeConfigDialog}
+                tooltip={<Trans>Browse</Trans>}
+              />
+            </div>
+            <small className="hint">
+              <Trans>Pro-Tip: you can also drag-n-drop kubeconfig file to this area</Trans>
+            </small>
+          </>
+        )}
+        {this.sourceTab === KubeConfigSourceTab.TEXT && (
+          <>
+            <AceEditor
+              autoFocus
+              showGutter={false}
+              mode="yaml"
+              value={this.customConfig}
+              onChange={value => {
+                this.customConfig = value;
+                this.refreshContexts();
+              }}
+            />
+            <small className="hint">
+              <Trans>Pro-Tip: paste kubeconfig to get available contexts</Trans>
+            </small>
+          </>
+        )}
+      </>
+    )
+  }
+
+  renderContextSelector() {
+    const allContexts = Array.from(this.kubeContexts.keys());
+    const placeholder = this.selectedContexts.length > 0
+      ? <Trans>Selected contexts: <b>{this.selectedContexts.length}</b></Trans>
+      : <Trans>Select contexts</Trans>;
+    return (
+      <>
+        <Select
+          id="kubecontext-select" // todo: provide better mapping for integration tests (e.g. data-test-id="..")
+          placeholder={placeholder}
+          controlShouldRenderValue={false}
+          closeMenuOnSelect={false}
+          isOptionSelected={() => false}
+          options={allContexts}
+          formatOptionLabel={this.formatContextLabel}
+          noOptionsMessage={() => _i18n._(t`No contexts available or they have been added already`)}
+          onChange={({ value: ctx }: SelectOption<string>) => {
+            if (this.selectedContexts.includes(ctx)) {
+              this.selectedContexts.remove(ctx)
+            } else {
+              this.selectedContexts.push(ctx);
+            }
+          }}
+        />
+        {this.selectedContexts.length > 0 && (
+          <small className="hint">
+            <span>Applying contexts:</span>{" "}
+            <code>{this.selectedContexts.join(", ")}</code>
+          </small>
+        )}
+      </>
+    )
+  }
+
+  onKubeConfigInputBlur = (evt: React.FocusEvent<HTMLInputElement>) => {
+    const isChanged = this.kubeConfigPath !== userStore.kubeConfigPath;
+    if (isChanged) {
+      this.kubeConfigPath = this.kubeConfigPath.replace("~", os.homedir());
+      try {
+        this.setKubeConfig(this.kubeConfigPath, { throwError: true });
+      } catch (err) {
+        this.setKubeConfig(userStore.kubeConfigPath); // revert to previous valid path
+      }
+    }
+  }
+
+  onKubeConfigTabChange = (tabId: KubeConfigSourceTab) => {
+    this.sourceTab = tabId;
+    this.error = "";
+    this.refreshContexts();
+  }
+
+  protected formatContextLabel = ({ value: context }: SelectOption<string>) => {
+    const isNew = userStore.newContexts.has(context);
+    const isSelected = this.selectedContexts.includes(context);
+    return (
+      <div className={cssNames("kube-context flex gaps align-center", context)}>
+        <span>{context}</span>
+        {isNew && <Icon small material="fiber_new"/>}
+        {isSelected && <Icon small material="check" className="box right"/>}
+      </div>
+    )
+  };
+
   render() {
     return (
-      <WizardLayout className="AddCluster" infoPanel={this.renderInfo()}>
+      <WizardLayout
+        className="AddCluster"
+        infoPanel={this.renderInfo()}
+        contentClass={{ droppable: this.dropAreaActive }}
+        contentProps={{
+          onDragEnter: event => this.dropAreaActive = true,
+          onDragLeave: event => this.dropAreaActive = false,
+          onDragOver: event => {
+            event.preventDefault(); // enable onDrop()-callback
+            event.dataTransfer.dropEffect = "move"
+          },
+          onDrop: event => {
+            this.sourceTab = KubeConfigSourceTab.FILE;
+            this.dropAreaActive = false
+            this.setKubeConfig(event.dataTransfer.files[0].path)
+          }
+        }}
+      >
         <h2><Trans>Add Cluster</Trans></h2>
-        <p>Choose config:</p>
-        <Select
-          placeholder={<Trans>Select kubeconfig</Trans>}
-          value={this.clusterConfig}
-          options={this.clusterOptions}
-          onChange={({ value }: SelectOption) => this.clusterConfig = value}
-          formatOptionLabel={this.formatClusterContextLabel}
-          id="kubecontext-select"
-        />
+        {this.renderKubeConfigSource()}
+        {this.renderContextSelector()}
         <div className="cluster-settings">
           <a href="#" onClick={() => this.showSettings = !this.showSettings}>
             <Trans>Proxy settings</Trans>
@@ -195,18 +383,6 @@ export class AddCluster extends React.Component {
             </small>
           </div>
         )}
-        {this.isCustom && (
-          <div className="custom-kubeconfig flex column gaps box grow">
-            <p>Kubeconfig:</p>
-            <AceEditor
-              autoFocus
-              showGutter={false}
-              mode="yaml"
-              value={this.customConfig}
-              onChange={value => this.customConfig = value}
-            />
-          </div>
-        )}
         {this.error && (
           <div className="error">{this.error}</div>
         )}
@@ -214,7 +390,7 @@ export class AddCluster extends React.Component {
           <Button
             primary
             label={<Trans>Add cluster(s)</Trans>}
-            onClick={this.addCluster}
+            onClick={this.addClusters}
             waiting={this.isWaiting}
           />
         </div>

src/renderer/components/ace-editor/ace-editor.tsx

@@ -3,17 +3,19 @@
 import "./ace-editor.scss"
 
 import React from "react"
-import { observer, disposeOnUnmount } from "mobx-react";
-import AceBuild, { Ace } from "ace-builds"
-import { autobind, cssNames } from "../../utils";
-import { themeStore } from "../../theme.store";
 import { reaction } from "mobx";
+import { disposeOnUnmount, observer } from "mobx-react";
+import AceBuild, { Ace } from "ace-builds"
+import { autobind, cssNames, noop } from "../../utils";
+import { themeStore } from "../../theme.store";
 
 interface Props extends Partial<Ace.EditorOptions> {
   className?: string;
   autoFocus?: boolean;
   hidden?: boolean;
   cursorPos?: Ace.Point;
+  onFocus?(evt: FocusEvent, value: string): void;
+  onBlur?(evt: FocusEvent, value: string): void;
   onChange?(value: string, delta: Ace.Delta): void;
   onCursorPosChange?(point: Ace.Point): void;
 }
@@ -30,6 +32,8 @@ const defaultProps: Partial<Props> = {
   foldStyle: "markbegin",
   printMargin: false,
   useWorker: false,
+  onBlur: noop,
+  onFocus: noop,
 };
 
 @observer
@@ -64,7 +68,7 @@ export class AceEditor extends React.Component<Props, State> {
   async componentDidMount() {
     const {
       mode, autoFocus, className, hidden, cursorPos,
-      onChange, onCursorPosChange, children,
+      onBlur, onFocus, onChange, onCursorPosChange, children,
       ...options
     } = this.props;
 
@@ -75,6 +79,8 @@ export class AceEditor extends React.Component<Props, State> {
     this.setCursorPos(cursorPos);
 
     // bind events
+    this.editor.on("blur", (evt: any) => onBlur(evt, this.getValue()));
+    this.editor.on("focus", (evt: any) => onFocus(evt, this.getValue()));
     this.editor.on("change", this.onChange);
     this.editor.selection.on("changeCursor", this.onCursorPosChange);
 

src/renderer/components/cluster-manager/clusters-menu.tsx

@@ -76,8 +76,10 @@ export class ClustersMenu extends React.Component<Props> {
             label: _i18n._(t`Remove`),
           },
           ok: () => {
+            if (clusterStore.activeClusterId === cluster.id) {
+              navigate(landingURL());
+            }
             clusterStore.removeById(cluster.id);
-            navigate(landingURL());
           },
           message: <p>Are you sure want to remove cluster <b title={cluster.id}>{cluster.contextName}</b>?</p>,
         })
@@ -94,7 +96,7 @@ export class ClustersMenu extends React.Component<Props> {
     const clusters = clusterStore.getByWorkspaceId(workspaceStore.currentWorkspaceId);
     const noClustersInScope = clusters.length === 0;
     const isLanding = navigation.getPath() === landingURL();
-    const showStartupHint = this.showHint && isLanding && noClustersInScope;
+    const showStartupHint = this.showHint && isLanding && noClustersInScope; // fixme: broken, move to landing.tsx
     return (
       <div
         className={cssNames("ClustersMenu flex column", className)}

src/renderer/components/dock/dock.scss

@@ -24,8 +24,12 @@
   &:not(.isOpen) {
     height: auto !important;
 
-    .Tab:not(:focus):after {
-      display: none;
+    .Tab {
+      --color-active: inherit;
+
+      &:not(:focus):after {
+        display: none;
+      }
     }
   }
 

src/renderer/components/input/file-input.tsx

@@ -0,0 +1,66 @@
+import React, { InputHTMLAttributes } from "react";
+
+export interface FileInputSelection<T = string> {
+  file: File;
+  data?: T | any; // not available when readAsTexts={false}
+  error?: string;
+}
+
+interface Props extends InputHTMLAttributes<any> {
+  id?: string; // could be used with <label htmlFor={id}/> to open filesystem dialog
+  accept?: string; // allowed file types to select, e.g. "application/json"
+  readAsText?: boolean; // provide files content as text in selection-callback
+  multiple?: boolean;
+  onSelectFiles(...selectedFiles: FileInputSelection[]): void;
+}
+
+export class FileInput extends React.Component<Props> {
+  protected input: HTMLInputElement;
+
+  protected style: React.CSSProperties = {
+    position: "absolute",
+    display: "none",
+  };
+
+  selectFiles = () => {
+    this.input.click(); // opens system dialog for selecting files
+  }
+
+  protected onChange = async (evt: React.ChangeEvent<HTMLInputElement>) => {
+    const fileList = Array.from(evt.target.files);
+    if (!fileList.length) {
+      return;
+    }
+    let selectedFiles: FileInputSelection[] = fileList.map(file => ({ file }));
+    if (this.props.readAsText) {
+      const readingFiles: Promise<FileInputSelection>[] = fileList.map(file => {
+        return new Promise((resolve) => {
+          const reader = new FileReader();
+          reader.onloadend = () => {
+            resolve({
+              file: file,
+              data: reader.result,
+              error: reader.error ? String(reader.error) : null,
+            })
+          };
+          reader.readAsText(file);
+        })
+      });
+      selectedFiles = await Promise.all(readingFiles);
+    }
+    this.props.onSelectFiles(...selectedFiles);
+  }
+
+  render() {
+    const { onSelectFiles, readAsText, ...props } = this.props;
+    return (
+      <input
+        type="file"
+        style={this.style}
+        onChange={this.onChange}
+        ref={e => this.input = e}
+        {...props}
+      />
+    )
+  }
+}

src/renderer/components/input/index.ts

@@ -1,2 +1,3 @@
 export * from './input'
 export * from './search-input'
+export * from './file-input'

src/renderer/components/input/input.tsx

@@ -17,6 +17,7 @@ export type InputProps<T = string> = Omit<InputElementProps, "onChange" | "onSub
   theme?: "round-black";
   className?: string;
   value?: T;
+  autoSelectOnFocus?: boolean
   multiLine?: boolean; // use text-area as input field
   maxRows?: number; // when multiLine={true} define max rows size
   dirty?: boolean; // show validation errors even if the field wasn't touched yet
@@ -112,8 +113,7 @@ export class Input extends React.Component<InputProps, State> {
       const result = validator.validate(value, this.props);
       if (isBoolean(result) && !result) {
         errors.push(this.getValidatorError(value, validator));
-      }
-      else if (result instanceof Promise) {
+      } else if (result instanceof Promise) {
         if (!validationId) {
           this.validationId = validationId = uniqueId("validation_id_");
         }
@@ -176,8 +176,9 @@ export class Input extends React.Component<InputProps, State> {
 
   @autobind()
   onFocus(evt: React.FocusEvent<InputElement>) {
-    const { onFocus } = this.props;
+    const { onFocus, autoSelectOnFocus } = this.props;
     if (onFocus) onFocus(evt);
+    if (autoSelectOnFocus) this.select();
     this.setState({ focused: true });
   }
 
@@ -255,13 +256,14 @@ export class Input extends React.Component<InputProps, State> {
   }
 
   render() {
-    /* eslint-disable */
-    let { multiLine, showValidationLine, validators, theme, maxRows, children, iconLeft, iconRight, ...inputProps } = this.props;
-    let { className, maxLength, rows, disabled, } = this.props;
-    /* eslint-enable */
+    const {
+      multiLine, showValidationLine, validators, theme, maxRows, children,
+      maxLength, rows, disabled, autoSelectOnFocus, iconLeft, iconRight,
+      ...inputProps
+    } = this.props;
     const { focused, dirty, valid, validating, errors } = this.state;
 
-    className = cssNames("Input", className, {
+    const className = cssNames("Input", this.props.className, {
       [`theme ${theme}`]: theme,
       focused: focused,
       disabled: disabled,
@@ -271,10 +273,6 @@ export class Input extends React.Component<InputProps, State> {
       validatingLine: validating && showValidationLine,
     });
 
-    // normalize icons
-    if (isString(iconLeft)) iconLeft = <Icon material={iconLeft}/>
-    if (isString(iconRight)) iconRight = <Icon material={iconRight}/>
-
     // prepare input props
     Object.assign(inputProps, {
       className: "input box grow",
@@ -291,9 +289,9 @@ export class Input extends React.Component<InputProps, State> {
     return (
       <div className={className}>
         <label className="input-area flex gaps align-center">
-          {iconLeft}
+          {isString(iconLeft) ? <Icon material={iconLeft}/> : iconLeft}
           {multiLine ? <textarea {...inputProps as any}/> : <input {...inputProps as any}/>}
-          {iconRight}
+          {isString(iconRight) ? <Icon material={iconRight}/> : iconRight}
         </label>
         <div className="input-info flex gaps">
           {!valid && dirty && (

src/renderer/components/layout/main-layout.scss

@@ -11,10 +11,6 @@
   > .Tabs {
     grid-area: tabs;
     background: $layoutTabsBackground;
-
-    .Tab {
-      --color-active: #{$layoutTabsActiveColor};
-    }
   }
 
   header {

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

@@ -48,11 +48,14 @@ export class MainLayout extends React.Component<Props> {
     const { className, contentClass, headerClass, tabs, footer, footerClass, children } = this.props;
     const routePath = navigation.location.pathname;
     const cluster = getHostedCluster();
+    if (!cluster) {
+      return null; // fix: skip render when removing active (visible) cluster
+    }
     return (
       <div className={cssNames("MainLayout", className)}>
         <header className={cssNames("flex gaps align-center", headerClass)}>
           <span className="cluster">
-            {cluster.preferences?.clusterName || cluster.contextName}
+            {cluster.preferences.clusterName || cluster.contextName}
           </span>
         </header>
 

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

@@ -3,7 +3,7 @@ import React from "react";
 import { observer } from "mobx-react";
 import { cssNames, IClassName } from "../../utils";
 
-interface Props {
+interface Props extends React.DOMAttributes<any> {
   className?: IClassName;
   header?: React.ReactNode;
   headerClass?: IClassName;
@@ -11,22 +11,26 @@ interface Props {
   infoPanelClass?: IClassName;
   infoPanel?: React.ReactNode;
   centered?: boolean;  // Centering content horizontally
+  contentProps?: React.DOMAttributes<HTMLElement>
 }
 
 @observer
 export class WizardLayout extends React.Component<Props> {
   render() {
-    const { className, contentClass, infoPanelClass, infoPanel, header, headerClass, centered, children: content } = this.props;
+    const {
+      className, contentClass, infoPanelClass, infoPanel, header, headerClass, centered,
+      children, contentProps = {}, ...props
+    } = this.props;
     return (
-      <div className={cssNames("WizardLayout", { centered }, className)}>
+      <div {...props} className={cssNames("WizardLayout", { centered }, className)}>
         {header && (
           <div className={cssNames("head-col flex gaps align-center", headerClass)}>
             {header}
           </div>
         )}
-        <div className={cssNames("content-col flex column gaps", contentClass)}>
+        <div {...contentProps} className={cssNames("content-col flex column gaps", contentClass)}>
           <div className="flex column gaps">
-            {content}
+            {children}
           </div>
         </div>
         {infoPanel && (

src/renderer/components/notifications/notifications.tsx

@@ -29,11 +29,12 @@ export class Notifications extends React.Component {
     });
   }
 
-  static info(message: IMessage) {
+  static info(message: IMessage, customOpts: Partial<INotification> = {}) {
     return notificationsStore.add({
-      message: message,
+      status: "info",
       timeout: 0,
-      status: "info"
+      message: message,
+      ...customOpts,
     });
   }
 

src/renderer/components/select/select.tsx

@@ -36,6 +36,7 @@ export class Select extends React.Component<SelectProps> {
   static defaultProps: SelectProps = {
     autoConvertOptions: true,
     menuPortalTarget: document.body,
+    menuPlacement: "auto",
   }
 
   @computed get theme() {

src/renderer/components/tabs/tabs.scss

@@ -4,6 +4,10 @@
   -webkit-user-select: none; /* safari */
   -moz-user-select: none; /* firefox */
 
+  &.withBorder {
+    border-bottom: 1px solid $borderFaintColor;
+  }
+
   &.wrap {
     flex-wrap: wrap;
   }
@@ -24,7 +28,7 @@
 }
 
 .Tab {
-  --color-active: inherit;
+  --color-active: #{$layoutTabsActiveColor};
   --line-color-active: #{$primary};
   --line-color-focus: currentColor;
 

src/renderer/components/tabs/tabs.tsx

@@ -7,6 +7,7 @@ const TabsContext = React.createContext<TabsContextValue>({});
 
 interface TabsContextValue<D = any> {
   autoFocus?: boolean;
+  withBorder?: boolean;
   value?: D;
   onChange?(value: D): void;
 }
@@ -29,16 +30,12 @@ export class Tabs extends React.PureComponent<TabsProps> {
   }
 
   render() {
-    const {
-      center, wrap, onChange, value, autoFocus,
-      scrollable = true,
-      ...elemProps
-    } = this.props;
-    let { className } = this.props;
-    className = cssNames("Tabs", className, {
-      "center": center,
-      "wrap": wrap,
-      "scrollable": scrollable,
+    const { center, wrap, onChange, value, autoFocus, scrollable = true, withBorder, ...elemProps } = this.props;
+    const className = cssNames("Tabs", this.props.className, {
+      center: center,
+      wrap: wrap,
+      scrollable: scrollable,
+      withBorder: withBorder,
     });
     return (
       <TabsContext.Provider value={{ autoFocus, value, onChange }}>