From e11cbc19fed9f52ddcee1bd71d386d07bf820668 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Thu, 10 Sep 2020 09:31:23 +0300
Subject: [PATCH] Fixing Dialog Escape keypress behavior (#831)

* Replacing dialog keypress target

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Adding explanatory comments

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 src/common/cluster-store.ts                 | 3 +--
 src/renderer/components/dialog/dialog.tsx   | 5 +++--
 src/renderer/components/drawer/drawer.tsx   | 1 +
 src/renderer/components/layout/sidebar.scss | 2 +-
 4 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/common/cluster-store.ts b/src/common/cluster-store.ts
index 45bcad4d6f..fcee67cb8f 100644
--- a/src/common/cluster-store.ts
+++ b/src/common/cluster-store.ts
@@ -1,4 +1,3 @@
-import { WorkspaceId, workspaceStore } from "./workspace-store";
 import path from "path";
 import { app, ipcRenderer, remote } from "electron";
 import { unlink } from "fs-extra";
@@ -13,7 +12,7 @@ import { saveToAppFiles } from "./utils/saveToAppFiles";
 import { KubeConfig } from "@kubernetes/client-node";
 import _ from "lodash";
 import move from "array-move";
-import { is } from "immer/dist/internal";
+import type { WorkspaceId } from "./workspace-store";
 
 export interface ClusterIconUpload {
   clusterId: string;
diff --git a/src/renderer/components/dialog/dialog.tsx b/src/renderer/components/dialog/dialog.tsx
index 071c6aa811..5a4ce48f4e 100644
--- a/src/renderer/components/dialog/dialog.tsx
+++ b/src/renderer/components/dialog/dialog.tsx
@@ -92,7 +92,8 @@ export class Dialog extends React.PureComponent<DialogProps, DialogState> {
     this.props.onOpen();
     if (!this.props.pinned) {
       if (this.elem) this.elem.addEventListener('click', this.onClickOutside);
-      window.addEventListener('keydown', this.onEscapeKey);
+      // Using document.body target to handle keydown event before Drawer does
+      document.body.addEventListener('keydown', this.onEscapeKey);
     }
   }
 
@@ -100,7 +101,7 @@ export class Dialog extends React.PureComponent<DialogProps, DialogState> {
     this.props.onClose();
     if (!this.props.pinned) {
       if (this.elem) this.elem.removeEventListener('click', this.onClickOutside);
-      window.removeEventListener('keydown', this.onEscapeKey);
+      document.body.removeEventListener('keydown', this.onEscapeKey);
     }
   }
 
diff --git a/src/renderer/components/drawer/drawer.tsx b/src/renderer/components/drawer/drawer.tsx
index c4c1a3894a..d76e99f5c0 100644
--- a/src/renderer/components/drawer/drawer.tsx
+++ b/src/renderer/components/drawer/drawer.tsx
@@ -40,6 +40,7 @@ export class Drawer extends React.Component<DrawerProps> {
   });
 
   componentDidMount() {
+    // Using window target for events to make sure they will be catched after other places (e.g. Dialog)
     window.addEventListener("mousedown", this.onMouseDown)
     window.addEventListener("click", this.onClickOutside)
     window.addEventListener("keydown", this.onEscapeKey)
diff --git a/src/renderer/components/layout/sidebar.scss b/src/renderer/components/layout/sidebar.scss
index 46cf9c7d15..7b1406fb7b 100644
--- a/src/renderer/components/layout/sidebar.scss
+++ b/src/renderer/components/layout/sidebar.scss
@@ -40,7 +40,7 @@
     div.logo-text {
       position: absolute;
       left: 42px;
-      top: 11.5px;
+      top: 11px;
     }
 
     .logo-icon {