replaced browse/reset buttons to icons, extended drop area for custom kube-config file

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

locales/en/messages.po

@@ -87,7 +87,7 @@ msgstr "Account Name"
 msgid "Active"
 msgstr "Active"
 
-#: src/renderer/components/+add-cluster/add-cluster.tsx:225
+#: src/renderer/components/+add-cluster/add-cluster.tsx:228
 #: src/renderer/components/cluster-manager/clusters-menu.tsx:116
 msgid "Add Cluster"
 msgstr "Add Cluster"
@@ -112,7 +112,7 @@ msgstr "Add bindings to {name}"
 #~ msgid "Add cluster"
 #~ msgstr "Add cluster"
 
-#: src/renderer/components/+add-cluster/add-cluster.tsx:243
+#: src/renderer/components/+add-cluster/add-cluster.tsx:246
 msgid "Add cluster(s)"
 msgstr "Add cluster(s)"
 
@@ -319,7 +319,7 @@ msgstr "Binding targets"
 msgid "Bindings"
 msgstr "Bindings"
 
-#: src/renderer/components/+add-cluster/add-cluster.tsx:218
+#: src/renderer/components/+add-cluster/add-cluster.tsx:210
 msgid "Browse"
 msgstr "Browse"
 
@@ -1860,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:231
+#: src/renderer/components/+add-cluster/add-cluster.tsx:234
 msgid "Proxy settings"
 msgstr "Proxy settings"
 
@@ -2041,7 +2041,7 @@ msgstr "Required Drop Capabilities"
 msgid "Required field"
 msgstr "Required field"
 
-#: src/renderer/components/+add-cluster/add-cluster.tsx:217
+#: src/renderer/components/+add-cluster/add-cluster.tsx:209
 #: src/renderer/components/item-object-list/page-filters-list.tsx:31
 msgid "Reset"
 msgstr "Reset"
@@ -2245,7 +2245,7 @@ msgstr "Secret type"
 msgid "Secrets"
 msgstr "Secrets"
 
-#: src/renderer/components/+add-cluster/add-cluster.tsx:228
+#: src/renderer/components/+add-cluster/add-cluster.tsx:231
 msgid "Select a context"
 msgstr "Select a context"
 

locales/fi/messages.po

@@ -87,7 +87,7 @@ msgstr ""
 msgid "Active"
 msgstr ""
 
-#: src/renderer/components/+add-cluster/add-cluster.tsx:225
+#: src/renderer/components/+add-cluster/add-cluster.tsx:228
 #: src/renderer/components/cluster-manager/clusters-menu.tsx:116
 msgid "Add Cluster"
 msgstr ""
@@ -112,7 +112,7 @@ msgstr ""
 #~ msgid "Add cluster"
 #~ msgstr ""
 
-#: src/renderer/components/+add-cluster/add-cluster.tsx:243
+#: src/renderer/components/+add-cluster/add-cluster.tsx:246
 msgid "Add cluster(s)"
 msgstr ""
 
@@ -319,7 +319,7 @@ msgstr ""
 msgid "Bindings"
 msgstr ""
 
-#: src/renderer/components/+add-cluster/add-cluster.tsx:218
+#: src/renderer/components/+add-cluster/add-cluster.tsx:210
 msgid "Browse"
 msgstr ""
 
@@ -1843,7 +1843,7 @@ msgstr ""
 msgid "Proxy is used only for non-cluster communication."
 msgstr ""
 
-#: src/renderer/components/+add-cluster/add-cluster.tsx:231
+#: src/renderer/components/+add-cluster/add-cluster.tsx:234
 msgid "Proxy settings"
 msgstr ""
 
@@ -2024,7 +2024,7 @@ msgstr ""
 msgid "Required field"
 msgstr ""
 
-#: src/renderer/components/+add-cluster/add-cluster.tsx:217
+#: src/renderer/components/+add-cluster/add-cluster.tsx:209
 #: src/renderer/components/item-object-list/page-filters-list.tsx:31
 msgid "Reset"
 msgstr ""
@@ -2228,7 +2228,7 @@ msgstr ""
 msgid "Secrets"
 msgstr ""
 
-#: src/renderer/components/+add-cluster/add-cluster.tsx:228
+#: src/renderer/components/+add-cluster/add-cluster.tsx:231
 msgid "Select a context"
 msgstr ""
 

locales/ru/messages.po

@@ -88,7 +88,7 @@ msgstr "Название аккаунта"
 msgid "Active"
 msgstr "Активный"
 
-#: src/renderer/components/+add-cluster/add-cluster.tsx:225
+#: src/renderer/components/+add-cluster/add-cluster.tsx:228
 #: src/renderer/components/cluster-manager/clusters-menu.tsx:116
 msgid "Add Cluster"
 msgstr ""
@@ -113,7 +113,7 @@ msgstr "Добавить привязки к {name}"
 #~ msgid "Add cluster"
 #~ msgstr ""
 
-#: src/renderer/components/+add-cluster/add-cluster.tsx:243
+#: src/renderer/components/+add-cluster/add-cluster.tsx:246
 msgid "Add cluster(s)"
 msgstr ""
 
@@ -320,7 +320,7 @@ msgstr "Цели привязки"
 msgid "Bindings"
 msgstr "Привязки"
 
-#: src/renderer/components/+add-cluster/add-cluster.tsx:218
+#: src/renderer/components/+add-cluster/add-cluster.tsx:210
 msgid "Browse"
 msgstr ""
 
@@ -1861,7 +1861,7 @@ msgstr "Комиссия"
 msgid "Proxy is used only for non-cluster communication."
 msgstr ""
 
-#: src/renderer/components/+add-cluster/add-cluster.tsx:231
+#: src/renderer/components/+add-cluster/add-cluster.tsx:234
 msgid "Proxy settings"
 msgstr ""
 
@@ -2042,7 +2042,7 @@ msgstr ""
 msgid "Required field"
 msgstr "Обязательное поле"
 
-#: src/renderer/components/+add-cluster/add-cluster.tsx:217
+#: src/renderer/components/+add-cluster/add-cluster.tsx:209
 #: src/renderer/components/item-object-list/page-filters-list.tsx:31
 msgid "Reset"
 msgstr "Сбросить"
@@ -2246,7 +2246,7 @@ msgstr "Тип секрета"
 msgid "Secrets"
 msgstr "Secrets"
 
-#: src/renderer/components/+add-cluster/add-cluster.tsx:228
+#: src/renderer/components/+add-cluster/add-cluster.tsx:231
 msgid "Select a context"
 msgstr ""
 

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

@@ -1,4 +1,12 @@
 .AddCluster {
+  .droppable {
+    box-shadow: 0 0 0 5px inset $primary;
+
+    > * {
+      pointer-events: none;
+    }
+  }
+
   .Select {
     .kube-context {
       --flex-gap: #{$padding};
@@ -9,19 +17,7 @@
     }
   }
 
-  .kube-config-select {
+  code {
-    &.droppable {
+    color: $pink-400;
-      box-shadow: 0 0 3px 2px $primary;
-
-      > * {
-        pointer-events: none;
-      }
-    }
-  }
-
-  .info-col {
-    code {
-      color: $pink-400;
-    }
   }
 }

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

@@ -24,7 +24,7 @@ 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 manually input kube-config file path (edit + save on blur + auto-replace "~" => os.homedir()
 // todo: allow to create multiple clusters at once (multi-select)
 
 enum KubeConfigSourceTab {
@@ -216,21 +216,7 @@ export class AddCluster extends React.Component {
           />
         </Tabs>
         {this.sourceTab === KubeConfigSourceTab.FILE && (
-          <div
+          <div className="kube-config-select flex gaps align-center">
-            className={cssNames("kube-config-select flex gaps align-center", {
-              droppable: this.dropAreaActive
-            })}
-            onDragEnter={event => this.dropAreaActive = true}
-            onDragLeave={event => this.dropAreaActive = false}
-            onDragOver={event => {
-              event.preventDefault(); // enable onDrop()-callback
-              event.dataTransfer.dropEffect = "move"
-            }}
-            onDrop={event => {
-              this.dropAreaActive = false
-              this.kubeConfigPath = event.dataTransfer.files[0].path;
-            }}
-          >
             <Input
               autoSelectOnFocus
               theme="round-black"
@@ -239,9 +225,17 @@ export class AddCluster extends React.Component {
               onChange={value => console.log('change', value)}
             />
             {this.kubeConfigPath !== kubeConfigDefaultPath && (
-              <Button accent label={<Trans>Reset</Trans>} onClick={this.resetKubeConfig}/>
+              <Icon
+                material="settings_backup_restore"
+                onClick={this.resetKubeConfig}
+                tooltip={<Trans>Reset</Trans>}
+              />
             )}
-            <Button primary label={<Trans>Browse</Trans>} onClick={this.selectKubeConfig}/>
+            <Icon
+              material="folder"
+              onClick={this.selectKubeConfig}
+              tooltip={<Trans>Browse</Trans>}
+            />
           </div>
         )}
         {this.sourceTab === KubeConfigSourceTab.TEXT && (
@@ -259,7 +253,23 @@ export class AddCluster extends React.Component {
 
   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.dropAreaActive = false
+            this.kubeConfigPath = event.dataTransfer.files[0].path;
+          }
+        }}
+      >
         <h2><Trans>Add Cluster</Trans></h2>
         {this.renderKubeConfigSource()}
         <Select

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 && (