From 8629b68c5001e353189ae37249d08ffd92a0e379 Mon Sep 17 00:00:00 2001
From: alexfront <alex.andreev.email@gmail.com>
Date: Fri, 7 Aug 2020 15:48:25 +0300
Subject: [PATCH] Saving input fields on blur

Signed-off-by: alexfront <alex.andreev.email@gmail.com>
---
 .../components/cluster-home-dir-setting.tsx            |  9 ++++-----
 .../components/cluster-name-setting.tsx                | 10 ++++------
 .../components/cluster-prometheus-setting.tsx          |  8 +++++++-
 .../components/cluster-proxy-setting.tsx               |  9 ++++-----
 4 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/renderer/components/+cluster-settings/components/cluster-home-dir-setting.tsx b/src/renderer/components/+cluster-settings/components/cluster-home-dir-setting.tsx
index b6fdd46156..f998035b44 100644
--- a/src/renderer/components/+cluster-settings/components/cluster-home-dir-setting.tsx
+++ b/src/renderer/components/+cluster-settings/components/cluster-home-dir-setting.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import throttle from "lodash/throttle";
 import { observable } from "mobx";
 import { observer } from "mobx-react";
 import { Cluster } from "../../../../main/cluster";
@@ -14,13 +13,12 @@ interface Props {
 export class ClusterHomeDirSetting extends React.Component<Props> {
   @observable directory = this.props.cluster.preferences.terminalCWD || "";
 
-  save = throttle((value: string) => {
-    this.props.cluster.preferences.terminalCWD = value;
-  }, 500);
+  save = () => {
+    this.props.cluster.preferences.terminalCWD = this.directory;
+  };
 
   onChange = (value: string) => {
     this.directory = value;
-    this.save(value);
   }
 
   render() {
@@ -32,6 +30,7 @@ export class ClusterHomeDirSetting extends React.Component<Props> {
           theme="round-black"
           value={this.directory}
           onChange={this.onChange}
+          onBlur={this.save}
           placeholder="$HOME"
         />
         <span className="hint">
diff --git a/src/renderer/components/+cluster-settings/components/cluster-name-setting.tsx b/src/renderer/components/+cluster-settings/components/cluster-name-setting.tsx
index e09f610b85..8e2f8a2afa 100644
--- a/src/renderer/components/+cluster-settings/components/cluster-name-setting.tsx
+++ b/src/renderer/components/+cluster-settings/components/cluster-name-setting.tsx
@@ -5,7 +5,6 @@ import { observable } from "mobx";
 import { observer } from "mobx-react";
 import { SubTitle } from "../../layout/sub-title";
 import { isRequired } from "../../input/input.validators";
-import throttle from "lodash/throttle";
 
 interface Props {
   cluster: Cluster;
@@ -15,14 +14,12 @@ interface Props {
 export class ClusterNameSetting extends React.Component<Props> {
   @observable name = this.props.cluster.preferences.clusterName || "";
 
-  save = throttle((value: string) => {
-    if (!value) return;
-    this.props.cluster.preferences.clusterName = value;
-  }, 500);
+  save = () => {
+    this.props.cluster.preferences.clusterName = this.name;
+  };
 
   onChange = (value: string) => {
     this.name = value;
-    this.save(value);
   }
 
   render() {
@@ -35,6 +32,7 @@ export class ClusterNameSetting extends React.Component<Props> {
           validators={isRequired}
           value={this.name}
           onChange={this.onChange}
+          onBlur={this.save}
         />
       </>
     );
diff --git a/src/renderer/components/+cluster-settings/components/cluster-prometheus-setting.tsx b/src/renderer/components/+cluster-settings/components/cluster-prometheus-setting.tsx
index 9de265aaf4..e4f81bb18a 100644
--- a/src/renderer/components/+cluster-settings/components/cluster-prometheus-setting.tsx
+++ b/src/renderer/components/+cluster-settings/components/cluster-prometheus-setting.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import merge from "lodash/merge";
 import { observer } from "mobx-react";
 import { prometheusProviders } from "../../../../common/prometheus-providers";
 import { Cluster } from "../../../../main/cluster";
@@ -28,7 +29,12 @@ export class ClusterPrometheusSetting extends React.Component<Props> {
         <Select
           value={this.props.cluster.preferences.prometheusProvider?.type || ""}
           onChange={({value}) => {
-            this.props.cluster.preferences.prometheusProvider.type = value
+            const provider = {
+              prometheusProvider: {
+                type: value
+              }
+            }
+            merge(this.props.cluster.preferences, provider);
           }}
           options={options}
         />
diff --git a/src/renderer/components/+cluster-settings/components/cluster-proxy-setting.tsx b/src/renderer/components/+cluster-settings/components/cluster-proxy-setting.tsx
index 8707d90dfe..1b94992e5b 100644
--- a/src/renderer/components/+cluster-settings/components/cluster-proxy-setting.tsx
+++ b/src/renderer/components/+cluster-settings/components/cluster-proxy-setting.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import throttle from "lodash/throttle";
 import { observable } from "mobx";
 import { observer } from "mobx-react";
 import { Cluster } from "../../../../main/cluster";
@@ -15,13 +14,12 @@ interface Props {
 export class ClusterProxySetting extends React.Component<Props> {
   @observable proxy = this.props.cluster.preferences.httpsProxy || "";
 
-  save = throttle((value: string) => {
-    this.props.cluster.preferences.httpsProxy = value;
-  }, 500);
+  save = () => {
+    this.props.cluster.preferences.httpsProxy = this.proxy;
+  };
 
   onChange = (value: string) => {
     this.proxy = value;
-    this.save(value);
   }
 
   render() {
@@ -33,6 +31,7 @@ export class ClusterProxySetting extends React.Component<Props> {
           theme="round-black"
           value={this.proxy}
           onChange={this.onChange}
+          onBlur={this.save}
           placeholder="http://<address>:<port>"
           validators={isUrl}
         />