From dbce47bef4aef48fd7a026cd92c508c9c27b55fc Mon Sep 17 00:00:00 2001
From: alexfront <alex.andreev.email@gmail.com>
Date: Wed, 5 Aug 2020 17:25:39 +0300
Subject: [PATCH] ClusterProxySetting refactoring

Signed-off-by: alexfront <alex.andreev.email@gmail.com>
---
 .../components/cluster-proxy-setting.tsx      | 119 +++++-------------
 1 file changed, 28 insertions(+), 91 deletions(-)

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 3ddcf25c7f..8707d90dfe 100644
--- a/src/renderer/components/+cluster-settings/components/cluster-proxy-setting.tsx
+++ b/src/renderer/components/+cluster-settings/components/cluster-proxy-setting.tsx
@@ -1,105 +1,42 @@
 import React from "react";
-import { Cluster } from "../../../../main/cluster";
-import { Input } from "../../input";
-import { Spinner } from "../../spinner";
-import { clusterStore } from "../../../../common/cluster-store"
-import { Icon } from "../../icon";
-import { Tooltip, TooltipPosition } from "../../tooltip";
-import { autobind } from "../../../utils";
-import { TextInputStatus } from "./statuses"
+import throttle from "lodash/throttle";
 import { observable } from "mobx";
 import { observer } from "mobx-react";
+import { Cluster } from "../../../../main/cluster";
+import { Input } from "../../input";
+import { isUrl } from "../../input/input.validators";
+import { SubTitle } from "../../layout/sub-title";
 
 interface Props {
-    cluster: Cluster;
+  cluster: Cluster;
 }
 
 @observer
 export class ClusterProxySetting extends React.Component<Props> {
   @observable proxy = this.props.cluster.preferences.httpsProxy || "";
-  @observable status = TextInputStatus.CLEAN;
-  @observable errorText?: string;
+
+  save = throttle((value: string) => {
+    this.props.cluster.preferences.httpsProxy = value;
+  }, 500);
+
+  onChange = (value: string) => {
+    this.proxy = value;
+    this.save(value);
+  }
 
   render() {
-    return <>
-      <h4>HTTPS Proxy</h4>
-      <p>HTTPS Proxy server. Used for communicating with Kubernetes API.</p>
-      <Input
-        theme="round-black"
-        className="box grow"
-        value={this.proxy}
-        onSubmit={this.updateClusterProxy}
-        onChange={this.changeProxyState}
-        iconRight={this.getIconRight()}
-        placeholder="https://<address>:<port>"
-      />
-    </>;
-  }
-
-  @autobind()
-  changeProxyState(proxy: string, _e: React.ChangeEvent) {
-    if (this.status === TextInputStatus.UPDATING) {
-      console.log("prevent changing cluster proxy while updating");
-      return;
-    }
-    
-    this.status = this.proxyDiffers(proxy);
-    this.proxy = proxy;
-  }
-  
-  proxyDiffers(proxy: string): TextInputStatus {
-    const { httpsProxy = "" } = this.props.cluster.preferences;
-
-    return proxy === httpsProxy ? TextInputStatus.CLEAN : TextInputStatus.DIRTY;
-  }
-  
-  getIconRight(): React.ReactNode {
-    switch (this.status) {
-    case TextInputStatus.CLEAN:
-      return null;
-    case TextInputStatus.DIRTY:
-      return <Icon size="16px" material="fiber_manual_record"/>;
-    case TextInputStatus.UPDATED:
-      return <Icon size="16px" className="updated" material="done"/>;
-    case TextInputStatus.UPDATING:
-      return <Spinner />;
-    case TextInputStatus.ERROR:
-      return <Icon id="cluster-proxy-setting-error-icon" size="16px" material="error">
-        <Tooltip targetId="cluster-proxy-setting-error-icon" position={TooltipPosition.TOP}>
-          {this.errorText}
-        </Tooltip>
-      </Icon>
-    }
-  }
-
-  @autobind()
-  updateClusterProxy(proxy: string) {
-    if (this.proxyDiffers(proxy) !== TextInputStatus.DIRTY) {
-      return;
-    }
-
-    try {
-      const url = new URL(proxy);
-      
-      if (url.protocol !== "https") {
-        this.status = TextInputStatus.ERROR
-        this.errorText= `Proxy's protocol should be "https"`
-        return
-      }
-      if (url.port === "") {
-        this.status = TextInputStatus.ERROR
-        this.errorText= "Proxy should include a port"
-        return
-      }
-    } catch (e) {
-      this.status = TextInputStatus.ERROR
-      this.errorText= "Invalid URL"
-      return
-    }
-
-    this.status = TextInputStatus.UPDATING
-    this.props.cluster.preferences.httpsProxy = proxy;
-    this.proxy = proxy;
-    this.status = TextInputStatus.UPDATED
+    return (
+      <>
+        <SubTitle title="HTTP Proxy"/>
+        <p>HTTP Proxy server. Used for communicating with Kubernetes API.</p>
+        <Input
+          theme="round-black"
+          value={this.proxy}
+          onChange={this.onChange}
+          placeholder="http://<address>:<port>"
+          validators={isUrl}
+        />
+      </>
+    );
   }
 }
\ No newline at end of file