Close Preferences and Cluster Setting on Esc keypress (#804)

* Close Preferences on Esc key

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

* Close Cluster Settings on Esc

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

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

@@ -1,7 +1,6 @@
 import "./cluster-settings.scss";
 
 import React from "react";
-import { Link } from "react-router-dom";
 import { observer } from "mobx-react";
 import { Features } from "./features";
 import { Removal } from "./removal";
@@ -15,6 +14,25 @@ import { navigate } from "../../navigation";
 
 @observer
 export class ClusterSettings extends React.Component {
+  async componentDidMount() {
+    window.addEventListener('keydown', this.onEscapeKey);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('keydown', this.onEscapeKey);
+  }
+
+  onEscapeKey = (evt: KeyboardEvent) => {
+    if (evt.code === "Escape") {
+      evt.stopPropagation();
+      this.close();
+    }
+  }
+
+  close() {
+    navigate("/");
+  }
+
   render() {
     const cluster = getMatchedCluster();
     if (!cluster) return null;
@@ -26,7 +44,7 @@ export class ClusterSettings extends React.Component {
           showTooltip={false}
         />
         <h2>{cluster.preferences.clusterName}</h2>
-        <Icon material="close" onClick={() => navigate("/")} big/>
+        <Icon material="close" onClick={this.close} big/>
       </>
     );
     return (

src/renderer/components/+preferences/preferences.tsx

@@ -28,6 +28,8 @@ export class Preferences extends React.Component {
     { value: "china", label: "China (Azure)" },
   ]
 
+  @observable httpProxy = userStore.preferences.httpsProxy || "";
+
   @computed get themeOptions(): SelectOption<string>[] {
     return themeStore.themes.map(theme => ({
       label: theme.name,
@@ -43,9 +45,21 @@ export class Preferences extends React.Component {
   }
 
   async componentDidMount() {
+    window.addEventListener('keydown', this.onEscapeKey);
     await this.loadHelmRepos();
   }
 
+  componentWillUnmount() {
+    window.removeEventListener('keydown', this.onEscapeKey);
+  }
+
+  onEscapeKey = (evt: KeyboardEvent) => {
+    if (evt.code === "Escape") {
+      evt.stopPropagation();
+      history.goBack();
+    }
+  }
+
   @action
   async loadHelmRepos() {
     this.helmLoading = true;
@@ -162,8 +176,9 @@ export class Preferences extends React.Component {
           <Input
             theme="round-black"
             placeholder={_i18n._(t`Type HTTP proxy url (example: http://proxy.acme.org:8080)`)}
-            value={preferences.httpsProxy || ""}
-            onChange={v => preferences.httpsProxy = v}
+            value={this.httpProxy}
+            onChange={v => this.httpProxy = v}
+            onBlur={() => preferences.httpsProxy = this.httpProxy}
           />
           <small className="hint">
             <Trans>Proxy is used only for non-cluster communication.</Trans>