ClusterNameSettings refactoring

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

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

@@ -1,85 +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 { 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;
+  cluster: Cluster;
 }
 
 @observer
 export class ClusterNameSetting extends React.Component<Props> {
   @observable name = this.props.cluster.preferences.clusterName || "";
-  @observable status = TextInputStatus.CLEAN;
-  @observable errorText?: string;
+
+  save = throttle((value: string) => {
+    if (!value) return;
+    this.props.cluster.preferences.clusterName = value;
+  }, 500);
+
+  onChange = (value: string) => {
+    this.name = value;
+    this.save(value);
+  }
 
   render() {
-    return <>
-      <h4>Cluster Name</h4>
-      <p>Change cluster name:</p>
-      <Input
-        theme="round-black"
-        className="box grow"
-        value={this.name}
-        onSubmit={this.onClusterNameSubmit}
-        onChange={this.onClusterNameChange}
-        iconRight={this.getIconRight()}
-      />
-    </>;
-  }
-
-  @autobind()
-  onClusterNameChange(name: string, _e: React.ChangeEvent) {
-    if (this.status === TextInputStatus.UPDATING) {
-      console.log("prevent changing cluster name while updating");
-      return;
-    }
-    
-    this.status = this.nameDiffers(name)
-    this.name = name;
-  }
-  
-  nameDiffers(name: string): TextInputStatus {
-    const { clusterName } = this.props.cluster.preferences;
-
-    return name === clusterName ? 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-name-setting-error-icon" size="16px" material="error">
-        <Tooltip targetId="cluster-name-setting-error-icon" position={TooltipPosition.TOP}>
-          {this.errorText}
-        </Tooltip>
-      </Icon>
-    }
-  }
-
-  @autobind()
-  onClusterNameSubmit(name: string) {
-    if (this.nameDiffers(name) !== TextInputStatus.DIRTY) {
-      return;
-    }
-
-    this.status = TextInputStatus.UPDATING 
-    this.props.cluster.preferences.clusterName = name;
-    this.name = name;
-    this.status = TextInputStatus.UPDATED
+    return (
+      <>
+        <SubTitle title="Cluster Name"/>
+        <p>Define cluster name.</p>
+        <Input
+          theme="round-black"
+          validators={isRequired}
+          value={this.name}
+          onChange={this.onChange}
+        />
+      </>
+    );
   }
 }