From af7220c29f0e991cedd7fdbdae2ac296f03d82d6 Mon Sep 17 00:00:00 2001
From: alexfront <alex.andreev.email@gmail.com>
Date: Thu, 6 Aug 2020 13:03:45 +0300
Subject: [PATCH] ClusterHomeDirSetting refactoring

Signed-off-by: alexfront <alex.andreev.email@gmail.com>
---
 .../components/cluster-home-dir-setting.tsx   | 102 ++++++------------
 1 file changed, 30 insertions(+), 72 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 c8779c692a..b6fdd46156 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,86 +1,44 @@
 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 { SubTitle } from "../../layout/sub-title";
 
 interface Props {
-    cluster: Cluster;
+  cluster: Cluster;
 }
 
 @observer
 export class ClusterHomeDirSetting extends React.Component<Props> {
   @observable directory = this.props.cluster.preferences.terminalCWD || "";
-  @observable status = TextInputStatus.CLEAN;
-  @observable errorText?: string;
+
+  save = throttle((value: string) => {
+    this.props.cluster.preferences.terminalCWD = value;
+  }, 500);
+
+  onChange = (value: string) => {
+    this.directory = value;
+    this.save(value);
+  }
 
   render() {
-    return <>
-      <h4>Working Directory</h4>
-      <p>Set initial working directory for terminals. When set it will the `pwd` when a new terminal instance is opened for this cluster.</p>
-      <Input
-        theme="round-black"
-        className="box grow"
-        value={this.directory}
-        onSubmit={this.onWorkingDirectorySubmit}
-        onChange={this.onWorkingDirectoryChange}
-        iconRight={this.getIconRight()}
-        placeholder="$HOME"
-      />
-    </>;
-  }
-
-  @autobind()
-  onWorkingDirectoryChange(directory: string, _e: React.ChangeEvent) {
-    if (this.status === TextInputStatus.UPDATING) {
-      console.log("prevent changing cluster directory while updating");
-      return;
-    }
-    
-    this.status = this.dirDiffers(directory);
-    this.directory = directory;
-  }
-  
-  dirDiffers(directory: string): TextInputStatus {
-    const { terminalCWD = "" } = this.props.cluster.preferences;
-
-    return directory === terminalCWD ? 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-directory-setting-error-icon" size="16px" material="error">
-        <Tooltip targetId="cluster-directory-setting-error-icon" position={TooltipPosition.TOP}>
-          {this.errorText}
-        </Tooltip>
-      </Icon>
-    }
-  }
-
-  @autobind()
-  onWorkingDirectorySubmit(directory: string) {
-    if (this.dirDiffers(directory) !== TextInputStatus.DIRTY) {
-      return;
-    }
-
-    this.status = TextInputStatus.UPDATING
-    this.props.cluster.preferences.terminalCWD = directory;
-    this.directory = directory;
-    this.status = TextInputStatus.UPDATED
+    return (
+      <>
+        <SubTitle title="Working Directory"/>
+        <p>Terminal working directory.</p>
+        <Input
+          theme="round-black"
+          value={this.directory}
+          onChange={this.onChange}
+          placeholder="$HOME"
+        />
+        <span className="hint">
+          An explicit start path where the terminal will be launched,{" "}
+          this is used as the current working directory (cwd) for the shell process.
+        </span>
+      </>
+    );
   }
 }
\ No newline at end of file