From 843a687186e83c50138a9ec1182d2d966b9975c9 Mon Sep 17 00:00:00 2001
From: Roman <ixrock@gmail.com>
Date: Tue, 25 Aug 2020 14:01:29 +0300
Subject: [PATCH] enable drag-n-drop for custom kube-config file

Signed-off-by: Roman <ixrock@gmail.com>
---
 .../components/+add-cluster/add-cluster.scss   | 13 +++++++++----
 .../components/+add-cluster/add-cluster.tsx    | 18 +++++++++++++++++-
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/renderer/components/+add-cluster/add-cluster.scss b/src/renderer/components/+add-cluster/add-cluster.scss
index 17e41f7648..2716d22911 100644
--- a/src/renderer/components/+add-cluster/add-cluster.scss
+++ b/src/renderer/components/+add-cluster/add-cluster.scss
@@ -15,15 +15,20 @@
     border-radius: $radius;
     transition: border 200ms ease-in-out;
 
-    > .title {
-      white-space: nowrap;
-    }
-
+    &.droppable,
     &:hover {
       border-color: $primary;
       cursor: pointer;
     }
 
+    > * {
+      pointer-events: none;
+    }
+
+    > .title {
+      white-space: nowrap;
+    }
+
     code {
       word-break: break-all;
     }
diff --git a/src/renderer/components/+add-cluster/add-cluster.tsx b/src/renderer/components/+add-cluster/add-cluster.tsx
index fe03fa904e..50c1330186 100644
--- a/src/renderer/components/+add-cluster/add-cluster.tsx
+++ b/src/renderer/components/+add-cluster/add-cluster.tsx
@@ -31,6 +31,7 @@ export class AddCluster extends React.Component {
 
   @observable isWaiting = false
   @observable showSettings = false
+  @observable dropAreaActive = false;
   @observable proxyServer = ""
   @observable customConfig = ""
 
@@ -198,7 +199,22 @@ export class AddCluster extends React.Component {
       <WizardLayout className="AddCluster" infoPanel={this.renderInfo()}>
         <h2><Trans>Add Cluster</Trans></h2>
         <div className="flex gaps align-center">
-          <label className="kube-config-select flex gaps align-center box grow" onClick={this.selectKubeConfig}>
+          <label
+            className={cssNames("kube-config-select flex gaps align-center box grow", {
+              droppable: this.dropAreaActive
+            })}
+            onClick={this.selectKubeConfig}
+            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;
+            }}
+          >
             <span className="title">Kubeconfig file</span>
             <code>{this.kubeConfigPath}</code>
           </label>