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/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 }}>