reworks -- part 1

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

locales/en/messages.po

@@ -37,6 +37,10 @@ msgstr "(empty) (Allowing the specific traffic to all pods in this namespace)"
 #~ msgid "(new)"
 #~ msgstr "(new)"
 
+#: src/renderer/components/+add-cluster/add-cluster.tsx:213
+#~ msgid "* Choose how to import clusters: from selected kube-config file or by manually pasting kube-config's content as a text"
+#~ msgstr "* Choose how to import clusters: from selected kube-config file or by manually pasting kube-config's content as a text"
+
 #: src/renderer/components/item-object-list/item-list-layout.tsx:224
 msgid "<0>Filtered</0>: {itemsCount} / {allItemsCount}"
 msgstr "<0>Filtered</0>: {itemsCount} / {allItemsCount}"
@@ -83,7 +87,7 @@ msgstr "Account Name"
 msgid "Active"
 msgstr "Active"
 
-#: src/renderer/components/+add-cluster/add-cluster.tsx:196
+#: src/renderer/components/+add-cluster/add-cluster.tsx:225
 #: src/renderer/components/cluster-manager/clusters-menu.tsx:116
 msgid "Add Cluster"
 msgstr "Add Cluster"
@@ -108,7 +112,7 @@ msgstr "Add bindings to {name}"
 #~ msgid "Add cluster"
 #~ msgstr "Add cluster"
 
-#: src/renderer/components/+add-cluster/add-cluster.tsx:223
+#: src/renderer/components/+add-cluster/add-cluster.tsx:243
 msgid "Add cluster(s)"
 msgstr "Add cluster(s)"
 
@@ -315,6 +319,10 @@ msgstr "Binding targets"
 msgid "Bindings"
 msgstr "Bindings"
 
+#: src/renderer/components/+add-cluster/add-cluster.tsx:218
+msgid "Browse"
+msgstr "Browse"
+
 #: src/renderer/components/error-boundary/error-boundary.tsx:37
 #~ msgid "Build version"
 #~ msgstr "Build version"
@@ -440,6 +448,18 @@ msgstr "Charts"
 #~ msgid "Checking update"
 #~ msgstr "Checking update"
 
+#: src/renderer/components/+add-cluster/add-cluster.tsx:218
+#~ msgid "Choose how to import clusters: from selected kube-config file or by manually pasting kube-config's content as a text"
+#~ msgstr "Choose how to import clusters: from selected kube-config file or by manually pasting kube-config's content as a text"
+
+#: src/renderer/components/+add-cluster/add-cluster.tsx:218
+#~ msgid "Choose how to import clusters: from selected kube-config file or from manually pasted configuration contents"
+#~ msgstr "Choose how to import clusters: from selected kube-config file or from manually pasted configuration contents"
+
+#: src/renderer/components/+add-cluster/add-cluster.tsx:218
+#~ msgid "Choose how to import clusters: from selected kube-config file or from pasted yaml configuration"
+#~ msgstr "Choose how to import clusters: from selected kube-config file or from pasted yaml configuration"
+
 #: src/renderer/components/+storage-volumes/volume-details.tsx:68
 #: src/renderer/components/+storage-volumes/volumes.tsx:43
 msgid "Claim"
@@ -710,9 +730,9 @@ msgstr "Currently applied filters:"
 msgid "Custom Resources"
 msgstr "Custom Resources"
 
-#: src/renderer/components/+add-cluster/add-cluster.tsx:141
+#: src/renderer/components/+add-cluster/add-cluster.tsx:155
-msgid "Custom.."
+#~ msgid "Custom.."
-msgstr "Custom.."
+#~ msgstr "Custom.."
 
 #: src/renderer/components/+custom-resources/certmanager.k8s.io/certificate-details.tsx:95
 msgid "DNS Provider"
@@ -1710,6 +1730,10 @@ msgstr "Parallelism"
 msgid "Parameters"
 msgstr "Parameters"
 
+#: src/renderer/components/+add-cluster/add-cluster.tsx:205
+msgid "Paste as text"
+msgstr "Paste as text"
+
 #: src/renderer/components/+custom-resources/certmanager.k8s.io/issuer-details.tsx:94
 #: src/renderer/components/+custom-resources/certmanager.k8s.io/issuer-details.tsx:102
 #: src/renderer/components/+network-ingresses/ingress-details.tsx:42
@@ -1730,7 +1754,7 @@ msgstr "Persistent Volume Claims"
 msgid "Persistent Volumes"
 msgstr "Persistent Volumes"
 
-#: src/renderer/components/+add-cluster/add-cluster.tsx:78
+#: src/renderer/components/+add-cluster/add-cluster.tsx:92
 msgid "Please select kube-config's context"
 msgstr "Please select kube-config's context"
 
@@ -1836,7 +1860,7 @@ msgstr "Provisioner"
 msgid "Proxy is used only for non-cluster communication."
 msgstr "Proxy is used only for non-cluster communication."
 
-#: src/renderer/components/+add-cluster/add-cluster.tsx:207
+#: src/renderer/components/+add-cluster/add-cluster.tsx:231
 msgid "Proxy settings"
 msgstr "Proxy settings"
 
@@ -2017,6 +2041,7 @@ msgstr "Required Drop Capabilities"
 msgid "Required field"
 msgstr "Required field"
 
+#: src/renderer/components/+add-cluster/add-cluster.tsx:217
 #: src/renderer/components/item-object-list/page-filters-list.tsx:31
 msgid "Reset"
 msgstr "Reset"
@@ -2220,7 +2245,7 @@ msgstr "Secret type"
 msgid "Secrets"
 msgstr "Secrets"
 
-#: src/renderer/components/+add-cluster/add-cluster.tsx:204
+#: src/renderer/components/+add-cluster/add-cluster.tsx:228
 msgid "Select a context"
 msgstr "Select a context"
 
@@ -2232,15 +2257,23 @@ msgstr "Select a quota.."
 #~ msgid "Select context"
 #~ msgstr "Select context"
 
-#: src/renderer/components/+add-cluster/add-cluster.tsx:52
+#: src/renderer/components/+add-cluster/add-cluster.tsx:62
-#: src/renderer/components/+add-cluster/add-cluster.tsx:52
+#: src/renderer/components/+add-cluster/add-cluster.tsx:62
 msgid "Select custom kube-config file"
 msgstr "Select custom kube-config file"
 
+#: src/renderer/components/+add-cluster/add-cluster.tsx:212
+#~ msgid "Select file"
+#~ msgstr "Select file"
+
 #: src/renderer/components/+add-cluster/add-cluster.tsx:173
 #~ msgid "Select kubeconfig"
 #~ msgstr "Select kubeconfig"
 
+#: src/renderer/components/+add-cluster/add-cluster.tsx:204
+msgid "Select or drop file"
+msgstr "Select or drop file"
+
 #: src/renderer/components/+preferences/preferences.tsx:88
 #~ msgid "Select repository"
 #~ msgstr "Select repository"
@@ -2579,8 +2612,8 @@ msgstr "Upgrade version"
 msgid "Usage"
 msgstr "Usage"
 
-#: src/renderer/components/+add-cluster/add-cluster.tsx:53
+#: src/renderer/components/+add-cluster/add-cluster.tsx:63
-#: src/renderer/components/+add-cluster/add-cluster.tsx:53
+#: src/renderer/components/+add-cluster/add-cluster.tsx:63
 msgid "Use configuration"
 msgstr "Use configuration"
 

locales/fi/messages.po

@@ -37,6 +37,10 @@ msgstr ""
 #~ msgid "(new)"
 #~ msgstr ""
 
+#: src/renderer/components/+add-cluster/add-cluster.tsx:213
+#~ msgid "* Choose how to import clusters: from selected kube-config file or by manually pasting kube-config's content as a text"
+#~ msgstr ""
+
 #: src/renderer/components/item-object-list/item-list-layout.tsx:224
 msgid "<0>Filtered</0>: {itemsCount} / {allItemsCount}"
 msgstr ""
@@ -83,7 +87,7 @@ msgstr ""
 msgid "Active"
 msgstr ""
 
-#: src/renderer/components/+add-cluster/add-cluster.tsx:196
+#: src/renderer/components/+add-cluster/add-cluster.tsx:225
 #: src/renderer/components/cluster-manager/clusters-menu.tsx:116
 msgid "Add Cluster"
 msgstr ""
@@ -108,7 +112,7 @@ msgstr ""
 #~ msgid "Add cluster"
 #~ msgstr ""
 
-#: src/renderer/components/+add-cluster/add-cluster.tsx:223
+#: src/renderer/components/+add-cluster/add-cluster.tsx:243
 msgid "Add cluster(s)"
 msgstr ""
 
@@ -315,6 +319,10 @@ msgstr ""
 msgid "Bindings"
 msgstr ""
 
+#: src/renderer/components/+add-cluster/add-cluster.tsx:218
+msgid "Browse"
+msgstr ""
+
 #: src/renderer/components/error-boundary/error-boundary.tsx:37
 #~ msgid "Build version"
 #~ msgstr ""
@@ -436,6 +444,18 @@ msgstr ""
 msgid "Charts"
 msgstr ""
 
+#: src/renderer/components/+add-cluster/add-cluster.tsx:218
+#~ msgid "Choose how to import clusters: from selected kube-config file or by manually pasting kube-config's content as a text"
+#~ msgstr ""
+
+#: src/renderer/components/+add-cluster/add-cluster.tsx:218
+#~ msgid "Choose how to import clusters: from selected kube-config file or from manually pasted configuration contents"
+#~ msgstr ""
+
+#: src/renderer/components/+add-cluster/add-cluster.tsx:218
+#~ msgid "Choose how to import clusters: from selected kube-config file or from pasted yaml configuration"
+#~ msgstr ""
+
 #: src/renderer/components/+storage-volumes/volume-details.tsx:68
 #: src/renderer/components/+storage-volumes/volumes.tsx:43
 msgid "Claim"
@@ -706,9 +726,9 @@ msgstr ""
 msgid "Custom Resources"
 msgstr ""
 
-#: src/renderer/components/+add-cluster/add-cluster.tsx:141
+#: src/renderer/components/+add-cluster/add-cluster.tsx:155
-msgid "Custom.."
+#~ msgid "Custom.."
-msgstr ""
+#~ msgstr ""
 
 #: src/renderer/components/+custom-resources/certmanager.k8s.io/certificate-details.tsx:95
 msgid "DNS Provider"
@@ -1693,6 +1713,10 @@ msgstr ""
 msgid "Parameters"
 msgstr ""
 
+#: src/renderer/components/+add-cluster/add-cluster.tsx:205
+msgid "Paste as text"
+msgstr ""
+
 #: src/renderer/components/+custom-resources/certmanager.k8s.io/issuer-details.tsx:94
 #: src/renderer/components/+custom-resources/certmanager.k8s.io/issuer-details.tsx:102
 #: src/renderer/components/+network-ingresses/ingress-details.tsx:42
@@ -1713,7 +1737,7 @@ msgstr ""
 msgid "Persistent Volumes"
 msgstr ""
 
-#: src/renderer/components/+add-cluster/add-cluster.tsx:78
+#: src/renderer/components/+add-cluster/add-cluster.tsx:92
 msgid "Please select kube-config's context"
 msgstr ""
 
@@ -1819,7 +1843,7 @@ msgstr ""
 msgid "Proxy is used only for non-cluster communication."
 msgstr ""
 
-#: src/renderer/components/+add-cluster/add-cluster.tsx:207
+#: src/renderer/components/+add-cluster/add-cluster.tsx:231
 msgid "Proxy settings"
 msgstr ""
 
@@ -2000,6 +2024,7 @@ msgstr ""
 msgid "Required field"
 msgstr ""
 
+#: src/renderer/components/+add-cluster/add-cluster.tsx:217
 #: src/renderer/components/item-object-list/page-filters-list.tsx:31
 msgid "Reset"
 msgstr ""
@@ -2203,7 +2228,7 @@ msgstr ""
 msgid "Secrets"
 msgstr ""
 
-#: src/renderer/components/+add-cluster/add-cluster.tsx:204
+#: src/renderer/components/+add-cluster/add-cluster.tsx:228
 msgid "Select a context"
 msgstr ""
 
@@ -2215,15 +2240,23 @@ msgstr ""
 #~ msgid "Select context"
 #~ msgstr ""
 
-#: src/renderer/components/+add-cluster/add-cluster.tsx:52
+#: src/renderer/components/+add-cluster/add-cluster.tsx:62
-#: src/renderer/components/+add-cluster/add-cluster.tsx:52
+#: src/renderer/components/+add-cluster/add-cluster.tsx:62
 msgid "Select custom kube-config file"
 msgstr ""
 
+#: src/renderer/components/+add-cluster/add-cluster.tsx:212
+#~ msgid "Select file"
+#~ msgstr ""
+
 #: src/renderer/components/+add-cluster/add-cluster.tsx:173
 #~ msgid "Select kubeconfig"
 #~ msgstr ""
 
+#: src/renderer/components/+add-cluster/add-cluster.tsx:204
+msgid "Select or drop file"
+msgstr ""
+
 #: src/renderer/components/+preferences/preferences.tsx:88
 #~ msgid "Select repository"
 #~ msgstr ""
@@ -2562,8 +2595,8 @@ msgstr ""
 msgid "Usage"
 msgstr ""
 
-#: src/renderer/components/+add-cluster/add-cluster.tsx:53
+#: src/renderer/components/+add-cluster/add-cluster.tsx:63
-#: src/renderer/components/+add-cluster/add-cluster.tsx:53
+#: src/renderer/components/+add-cluster/add-cluster.tsx:63
 msgid "Use configuration"
 msgstr ""
 

locales/ru/messages.po

@@ -38,6 +38,10 @@ msgstr "(Пусто) (Допускается трафик ко всем пода
 #~ msgid "(new)"
 #~ msgstr ""
 
+#: src/renderer/components/+add-cluster/add-cluster.tsx:213
+#~ msgid "* Choose how to import clusters: from selected kube-config file or by manually pasting kube-config's content as a text"
+#~ msgstr ""
+
 #: src/renderer/components/item-object-list/item-list-layout.tsx:224
 msgid "<0>Filtered</0>: {itemsCount} / {allItemsCount}"
 msgstr "<0>Отфильтровано</0>: {itemsCount} / {allItemsCount}"
@@ -84,7 +88,7 @@ msgstr "Название аккаунта"
 msgid "Active"
 msgstr "Активный"
 
-#: src/renderer/components/+add-cluster/add-cluster.tsx:196
+#: src/renderer/components/+add-cluster/add-cluster.tsx:225
 #: src/renderer/components/cluster-manager/clusters-menu.tsx:116
 msgid "Add Cluster"
 msgstr ""
@@ -109,7 +113,7 @@ msgstr "Добавить привязки к {name}"
 #~ msgid "Add cluster"
 #~ msgstr ""
 
-#: src/renderer/components/+add-cluster/add-cluster.tsx:223
+#: src/renderer/components/+add-cluster/add-cluster.tsx:243
 msgid "Add cluster(s)"
 msgstr ""
 
@@ -316,6 +320,10 @@ msgstr "Цели привязки"
 msgid "Bindings"
 msgstr "Привязки"
 
+#: src/renderer/components/+add-cluster/add-cluster.tsx:218
+msgid "Browse"
+msgstr ""
+
 #: src/renderer/components/error-boundary/error-boundary.tsx:37
 #~ msgid "Build version"
 #~ msgstr "Версия билда"
@@ -441,6 +449,18 @@ msgstr "Чарты"
 #~ msgid "Checking update"
 #~ msgstr "Проверка обновлений"
 
+#: src/renderer/components/+add-cluster/add-cluster.tsx:218
+#~ msgid "Choose how to import clusters: from selected kube-config file or by manually pasting kube-config's content as a text"
+#~ msgstr ""
+
+#: src/renderer/components/+add-cluster/add-cluster.tsx:218
+#~ msgid "Choose how to import clusters: from selected kube-config file or from manually pasted configuration contents"
+#~ msgstr ""
+
+#: src/renderer/components/+add-cluster/add-cluster.tsx:218
+#~ msgid "Choose how to import clusters: from selected kube-config file or from pasted yaml configuration"
+#~ msgstr ""
+
 #: src/renderer/components/+storage-volumes/volume-details.tsx:68
 #: src/renderer/components/+storage-volumes/volumes.tsx:43
 msgid "Claim"
@@ -711,9 +731,9 @@ msgstr "Текущие фильтры:"
 msgid "Custom Resources"
 msgstr ""
 
-#: src/renderer/components/+add-cluster/add-cluster.tsx:141
+#: src/renderer/components/+add-cluster/add-cluster.tsx:155
-msgid "Custom.."
+#~ msgid "Custom.."
-msgstr ""
+#~ msgstr ""
 
 #: src/renderer/components/+custom-resources/certmanager.k8s.io/certificate-details.tsx:95
 msgid "DNS Provider"
@@ -1711,6 +1731,10 @@ msgstr "Параллелизм"
 msgid "Parameters"
 msgstr "Параметры"
 
+#: src/renderer/components/+add-cluster/add-cluster.tsx:205
+msgid "Paste as text"
+msgstr ""
+
 #: src/renderer/components/+custom-resources/certmanager.k8s.io/issuer-details.tsx:94
 #: src/renderer/components/+custom-resources/certmanager.k8s.io/issuer-details.tsx:102
 #: src/renderer/components/+network-ingresses/ingress-details.tsx:42
@@ -1731,7 +1755,7 @@ msgstr "Persistent Volume Claims"
 msgid "Persistent Volumes"
 msgstr "Persistent Volumes"
 
-#: src/renderer/components/+add-cluster/add-cluster.tsx:78
+#: src/renderer/components/+add-cluster/add-cluster.tsx:92
 msgid "Please select kube-config's context"
 msgstr ""
 
@@ -1837,7 +1861,7 @@ msgstr "Комиссия"
 msgid "Proxy is used only for non-cluster communication."
 msgstr ""
 
-#: src/renderer/components/+add-cluster/add-cluster.tsx:207
+#: src/renderer/components/+add-cluster/add-cluster.tsx:231
 msgid "Proxy settings"
 msgstr ""
 
@@ -2018,6 +2042,7 @@ msgstr ""
 msgid "Required field"
 msgstr "Обязательное поле"
 
+#: src/renderer/components/+add-cluster/add-cluster.tsx:217
 #: src/renderer/components/item-object-list/page-filters-list.tsx:31
 msgid "Reset"
 msgstr "Сбросить"
@@ -2221,7 +2246,7 @@ msgstr "Тип секрета"
 msgid "Secrets"
 msgstr "Secrets"
 
-#: src/renderer/components/+add-cluster/add-cluster.tsx:204
+#: src/renderer/components/+add-cluster/add-cluster.tsx:228
 msgid "Select a context"
 msgstr ""
 
@@ -2233,15 +2258,23 @@ msgstr "Выберите квоту..."
 #~ msgid "Select context"
 #~ msgstr ""
 
-#: src/renderer/components/+add-cluster/add-cluster.tsx:52
+#: src/renderer/components/+add-cluster/add-cluster.tsx:62
-#: src/renderer/components/+add-cluster/add-cluster.tsx:52
+#: src/renderer/components/+add-cluster/add-cluster.tsx:62
 msgid "Select custom kube-config file"
 msgstr ""
 
+#: src/renderer/components/+add-cluster/add-cluster.tsx:212
+#~ msgid "Select file"
+#~ msgstr ""
+
 #: src/renderer/components/+add-cluster/add-cluster.tsx:173
 #~ msgid "Select kubeconfig"
 #~ msgstr ""
 
+#: src/renderer/components/+add-cluster/add-cluster.tsx:204
+msgid "Select or drop file"
+msgstr ""
+
 #: src/renderer/components/+preferences/preferences.tsx:88
 #~ msgid "Select repository"
 #~ msgstr ""
@@ -2580,8 +2613,8 @@ msgstr "Обновить версию"
 msgid "Usage"
 msgstr "Использование"
 
-#: src/renderer/components/+add-cluster/add-cluster.tsx:53
+#: src/renderer/components/+add-cluster/add-cluster.tsx:63
-#: src/renderer/components/+add-cluster/add-cluster.tsx:53
+#: src/renderer/components/+add-cluster/add-cluster.tsx:63
 msgid "Use configuration"
 msgstr ""
 

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

@@ -10,31 +10,18 @@
   }
 
   .kube-config-select {
-    border: 1px solid $borderFaintColor;
+    &.droppable {
-    padding: $padding / 2 $padding;
+      box-shadow: 0 0 3px 2px $primary;
-    border-radius: $radius;
-    transition: border 200ms ease-in-out;
 
-    &.droppable,
+      > * {
-    &:hover {
+        pointer-events: none;
-      border-color: $primary;
+      }
-      cursor: pointer;
-    }
-
-    > * {
-      pointer-events: none;
-    }
-
-    > .title {
-      white-space: nowrap;
-    }
-
-    code {
-      word-break: break-all;
     }
   }
 
-  code {
+  .info-col {
-    color: $pink-400;
+    code {
+      color: $pink-400;
+    }
   }
 }

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

@@ -21,14 +21,24 @@ 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";
+
+// todo: improve UI/UX kube-config consuming: FILE (input + button) | PASTE TEXT (editor)
+// todo: allow to manually input kube-config file path
+// todo: allow to create multiple clusters at once (multi-select)
+
+enum KubeConfigSourceTab {
+  FILE = "file",
+  TEXT = "text"
+}
 
 @observer
 export class AddCluster extends React.Component {
-  readonly custom: any = "custom"
   @observable.ref localKubeConfig: KubeConfig;
   @observable.ref newClusterConfig: KubeConfig;
   @observable.ref error: React.ReactNode;
 
+  @observable sourceTab = KubeConfigSourceTab.FILE;
   @observable isWaiting = false
   @observable showSettings = false
   @observable dropAreaActive = false;
@@ -74,8 +84,8 @@ export class AddCluster extends React.Component {
     }
   }
 
-  @computed get isCustom() {
+  resetKubeConfig = () => {
-    return this.newClusterConfig === this.custom;
+    this.kubeConfigPath = kubeConfigDefaultPath;
   }
 
   @computed get clusterOptions() {
@@ -92,10 +102,6 @@ export class AddCluster extends React.Component {
         }
       })
     }
-    options.push({
-      label: <Trans>Custom..</Trans>,
-      value: this.custom,
-    });
     return options;
   }
 
@@ -113,13 +119,14 @@ export class AddCluster extends React.Component {
     return label;
   };
 
+  // fixme: support adding multiple clusters
   addCluster = async () => {
     const { newClusterConfig, customConfig, proxyServer } = this;
     const clusterId = uuid();
     this.isWaiting = true
     this.error = ""
     try {
-      const config = this.isCustom ? loadConfig(customConfig) : newClusterConfig;
+      const config = this.sourceTab == KubeConfigSourceTab.TEXT ? loadConfig(customConfig) : newClusterConfig;
       if (!config) {
         this.error = <Trans>Please select kube-config's context</Trans>
         return;
@@ -194,16 +201,25 @@ export class AddCluster extends React.Component {
     )
   }
 
-  render() {
+  renderKubeConfigSource() {
     return (
-      <WizardLayout className="AddCluster" infoPanel={this.renderInfo()}>
+      <>
-        <h2><Trans>Add Cluster</Trans></h2>
+        <Tabs withBorder onChange={v => this.sourceTab = v}>
-        <div className="flex gaps align-center">
+          <Tab
-          <label
+            value={KubeConfigSourceTab.FILE}
-            className={cssNames("kube-config-select flex gaps align-center box grow", {
+            label={<Trans>Select or drop 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={cssNames("kube-config-select flex gaps align-center", {
               droppable: this.dropAreaActive
             })}
-            onClick={this.selectKubeConfig}
             onDragEnter={event => this.dropAreaActive = true}
             onDragLeave={event => this.dropAreaActive = false}
             onDragOver={event => {
@@ -215,24 +231,44 @@ export class AddCluster extends React.Component {
               this.kubeConfigPath = event.dataTransfer.files[0].path;
             }}
           >
-            <span className="title">Kubeconfig file</span>
+            <Input
-            <code>{this.kubeConfigPath}</code>
+              autoSelectOnFocus
-          </label>
+              theme="round-black"
-          {this.kubeConfigPath !== kubeConfigDefaultPath && (
+              className="kube-config-path box grow"
-            <Icon
+              value={this.kubeConfigPath}
-              material="settings_backup_restore"
+              onChange={value => console.log('change', value)}
-              onClick={() => this.kubeConfigPath = kubeConfigDefaultPath}
-              tooltip="Reset to defaults"
             />
-          )}
+            {this.kubeConfigPath !== kubeConfigDefaultPath && (
-        </div>
+              <Button accent label={<Trans>Reset</Trans>} onClick={this.resetKubeConfig}/>
+            )}
+            <Button primary label={<Trans>Browse</Trans>} onClick={this.selectKubeConfig}/>
+          </div>
+        )}
+        {this.sourceTab === KubeConfigSourceTab.TEXT && (
+          <AceEditor
+            autoFocus
+            showGutter={false}
+            mode="yaml"
+            value={this.customConfig}
+            onChange={value => this.customConfig = value}
+          />
+        )}
+      </>
+    )
+  }
+
+  render() {
+    return (
+      <WizardLayout className="AddCluster" infoPanel={this.renderInfo()}>
+        <h2><Trans>Add Cluster</Trans></h2>
+        {this.renderKubeConfigSource()}
         <Select
+          id="kubecontext-select" // todo: provide better mapping for integration tests (e.g. data-test-id="..")
           placeholder={<Trans>Select a context</Trans>}
           value={this.newClusterConfig}
           options={this.clusterOptions}
           onChange={({ value }: SelectOption) => this.newClusterConfig = value}
           formatOptionLabel={this.formatClusterContextLabel}
-          id="kubecontext-select"
         />
         <div className="cluster-settings">
           <a href="#" onClick={() => this.showSettings = !this.showSettings}>
@@ -253,18 +289,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>
         )}

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 */
+    const {
-    let { multiLine, showValidationLine, validators, theme, maxRows, children, iconLeft, iconRight, ...inputProps } = this.props;
+      multiLine, showValidationLine, validators, theme, maxRows, children,
-    let { className, maxLength, rows, disabled, } = this.props;
+      maxLength, rows, disabled, autoSelectOnFocus,
-    /* eslint-enable */
+      ...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,
@@ -272,6 +274,7 @@ export class Input extends React.Component<InputProps, State> {
     });
 
     // normalize icons
+    let { iconLeft, iconRight } = this.props;
     if (isString(iconLeft)) iconLeft = <Icon material={iconLeft}/>
     if (isString(iconRight)) iconRight = <Icon material={iconRight}/>
 

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/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 {
+    const { center, wrap, onChange, value, autoFocus, scrollable = true, withBorder, ...elemProps } = this.props;
-      center, wrap, onChange, value, autoFocus,
+    const className = cssNames("Tabs", this.props.className, {
-      scrollable = true,
+      center: center,
-      ...elemProps
+      wrap: wrap,
-    } = this.props;
+      scrollable: scrollable,
-    let { className } = this.props;
+      withBorder: withBorder,
-    className = cssNames("Tabs", className, {
-      "center": center,
-      "wrap": wrap,
-      "scrollable": scrollable,
     });
     return (
       <TabsContext.Provider value={{ autoFocus, value, onChange }}>