hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

ClusterNameSettings refactoring

Browse Source 
Signed-off-by: alexfront <alex.andreev.email@gmail.com>
This commit is contained in:
alexfront 2020-08-05 14:33:15 +03:00
parent dd4faf4297
commit f91e0e6a63
1 changed files with 26 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,14 +1,11 @@
import React from "react"; import React from "react";
import { Cluster } from "../../../../main/cluster"; import { Cluster } from "../../../../main/cluster";
import { Input } from "../../input"; 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 { observable } from "mobx";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { SubTitle } from "../../layout/sub-title";
import { isRequired } from "../../input/input.validators";
import throttle from "lodash/throttle";
interface Props { interface Props {
cluster: Cluster; cluster: Cluster;
@ -17,69 +14,29 @@ interface Props {
@observer @observer
export class ClusterNameSetting extends React.Component<Props> { export class ClusterNameSetting extends React.Component<Props> {
@observable name = this.props.cluster.preferences.clusterName || ""; @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() { render() {
return <> return (
<h4>Cluster Name</h4> <>
<p>Change cluster name:</p> <SubTitle title="Cluster Name"/>
<p>Define cluster name.</p>
<Input <Input
theme="round-black" theme="round-black"
className="box grow" validators={isRequired}
value={this.name} value={this.name}
onSubmit={this.onClusterNameSubmit} onChange={this.onChange}
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
} }
} }