From a4eff11ee29914d4ce2798dd44c7b9ccf36cf222 Mon Sep 17 00:00:00 2001 From: Alex Andreev Date: Tue, 8 Sep 2020 10:42:53 +0300 Subject: [PATCH] Refresh input values on cluster change (#814) Signed-off-by: Alex Andreev --- .../components/cluster-home-dir-setting.tsx | 14 ++++++++-- .../components/cluster-name-setting.tsx | 14 ++++++++-- .../components/cluster-prometheus-setting.tsx | 28 ++++++++++++------- .../components/cluster-proxy-setting.tsx | 14 ++++++++-- .../cluster-manager/clusters-menu.tsx | 2 -- 5 files changed, 51 insertions(+), 21 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 f998035b44..acb23da08a 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,6 +1,6 @@ import React from "react"; -import { observable } from "mobx"; -import { observer } from "mobx-react"; +import { observable, autorun } from "mobx"; +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 { - @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; 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 8e2f8a2afa..a11f8aed6e 100644 --- a/src/renderer/components/+cluster-settings/components/cluster-name-setting.tsx +++ b/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 { observer } from "mobx-react"; +import { observable, autorun } from "mobx"; +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 { - @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; 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 729090629d..a7f42a7c85 100644 --- a/src/renderer/components/+cluster-settings/components/cluster-prometheus-setting.tsx +++ b/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[] = [ { value: "", label: "Auto detect" }, @@ -27,14 +27,22 @@ export class ClusterPrometheusSetting extends React.Component { } componentDidMount() { - const { prometheus, prometheusProvider } = this.props.cluster.preferences; - if (prometheus) { - const prefix = prometheus.prefix || ""; - this.path = `${prometheus.namespace}/${prometheus.service}:${prometheus.port}${prefix}`; - } - if (prometheusProvider) { - this.provider = prometheusProvider.type; - } + disposeOnUnmount(this, + autorun(() => { + const { prometheus, prometheusProvider } = this.props.cluster.preferences; + if (prometheus) { + const prefix = prometheus.prefix || ""; + this.path = `${prometheus.namespace}/${prometheus.service}:${prometheus.port}${prefix}`; + } else { + this.path = ""; + } + if (prometheusProvider) { + this.provider = prometheusProvider.type; + } else { + this.provider = ""; + } + }) + ); } parsePrometheusPath = () => { 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 1b94992e5b..f7b4327c52 100644 --- a/src/renderer/components/+cluster-settings/components/cluster-proxy-setting.tsx +++ b/src/renderer/components/+cluster-settings/components/cluster-proxy-setting.tsx @@ -1,6 +1,6 @@ import React from "react"; -import { observable } from "mobx"; -import { observer } from "mobx-react"; +import { observable, autorun } from "mobx"; +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 { - @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; diff --git a/src/renderer/components/cluster-manager/clusters-menu.tsx b/src/renderer/components/cluster-manager/clusters-menu.tsx index 07780830ff..b8d7a232b6 100644 --- a/src/renderer/components/cluster-manager/clusters-menu.tsx +++ b/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; }