Refresh input values on cluster change (#814)

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

src/renderer/components/+cluster-settings/components/cluster-home-dir-setting.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { observable } from "mobx";
+import { observable, autorun } from "mobx";
-import { observer } from "mobx-react";
+import { observer, disposeOnUnmount } from "mobx-react";
 import { Cluster } from "../../../../main/cluster";
 import { Input } from "../../input";
 import { SubTitle } from "../../layout/sub-title";
@@ -11,7 +11,15 @@ interface Props {
 
 @observer
 export class ClusterHomeDirSetting extends React.Component<Props> {
-  @observable directory = this.props.cluster.preferences.terminalCWD || "";
+  @observable directory = "";
+
+  componentDidMount() {
+    disposeOnUnmount(this,
+      autorun(() => {
+        this.directory = this.props.cluster.preferences.terminalCWD || "";
+      })
+    );
+  }
 
   save = () => {
     this.props.cluster.preferences.terminalCWD = this.directory;

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

@@ -1,8 +1,8 @@
 import React from "react";
 import { Cluster } from "../../../../main/cluster";
 import { Input } from "../../input";
-import { observable } from "mobx";
+import { observable, autorun } from "mobx";
-import { observer } from "mobx-react";
+import { observer, disposeOnUnmount } from "mobx-react";
 import { SubTitle } from "../../layout/sub-title";
 import { isRequired } from "../../input/input.validators";
 
@@ -12,7 +12,15 @@ interface Props {
 
 @observer
 export class ClusterNameSetting extends React.Component<Props> {
-  @observable name = this.props.cluster.preferences.clusterName || "";
+  @observable name = "";
+
+  componentDidMount() {
+    disposeOnUnmount(this,
+      autorun(() => {
+        this.name = this.props.cluster.preferences.clusterName;
+      })
+    );
+  }
 
   save = () => {
     this.props.cluster.preferences.clusterName = this.name;

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

@@ -1,11 +1,11 @@
 import React from "react";
-import { observer } from "mobx-react";
+import { observer, disposeOnUnmount } from "mobx-react";
 import { prometheusProviders } from "../../../../common/prometheus-providers";
 import { Cluster } from "../../../../main/cluster";
 import { SubTitle } from "../../layout/sub-title";
 import { Select, SelectOption } from "../../select";
 import { Input } from "../../input";
-import { observable, computed } from "mobx";
+import { observable, computed, autorun } from "mobx";
 
 const options: SelectOption<string>[] = [
   { value: "", label: "Auto detect" },
@@ -27,14 +27,22 @@ export class ClusterPrometheusSetting extends React.Component<Props> {
   }
 
   componentDidMount() {
-    const { prometheus, prometheusProvider } = this.props.cluster.preferences;
+    disposeOnUnmount(this,
-    if (prometheus) {
+      autorun(() => {
-      const prefix = prometheus.prefix || "";
+        const { prometheus, prometheusProvider } = this.props.cluster.preferences;
-      this.path = `${prometheus.namespace}/${prometheus.service}:${prometheus.port}${prefix}`;
+        if (prometheus) {
-    }
+          const prefix = prometheus.prefix || "";
-    if (prometheusProvider) {
+          this.path = `${prometheus.namespace}/${prometheus.service}:${prometheus.port}${prefix}`;
-      this.provider = prometheusProvider.type;
+        } else {
-    }
+          this.path = "";
+        }
+        if (prometheusProvider) {
+          this.provider = prometheusProvider.type;
+        } else {
+          this.provider = "";
+        }
+      })
+    );
   }
 
   parsePrometheusPath = () => {

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

@@ -1,6 +1,6 @@
 import React from "react";
-import { observable } from "mobx";
+import { observable, autorun } from "mobx";
-import { observer } from "mobx-react";
+import { observer, disposeOnUnmount } from "mobx-react";
 import { Cluster } from "../../../../main/cluster";
 import { Input } from "../../input";
 import { isUrl } from "../../input/input.validators";
@@ -12,7 +12,15 @@ interface Props {
 
 @observer
 export class ClusterProxySetting extends React.Component<Props> {
-  @observable proxy = this.props.cluster.preferences.httpsProxy || "";
+  @observable proxy = "";
+
+  componentDidMount() {
+    disposeOnUnmount(this,
+      autorun(() => {
+        this.proxy = this.props.cluster.preferences.httpsProxy || "";
+      })
+    );
+  }
 
   save = () => {
     this.props.cluster.preferences.httpsProxy = this.proxy;

src/renderer/components/cluster-manager/clusters-menu.tsx

@@ -22,8 +22,6 @@ import { clusterIpc } from "../../../common/cluster-ipc";
 import { clusterViewURL, getMatchedClusterId } from "./cluster-view.route";
 import { DragDropContext, Droppable, Draggable, DropResult, DroppableProvided, DraggableProvided } from "react-beautiful-dnd";
 
-// fixme: allow to rearrange clusters with drag&drop
-
 interface Props {
   className?: IClassName;
 }