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

ClusterHomeDirSetting refactoring

Browse Source 
Signed-off-by: alexfront <alex.andreev.email@gmail.com>
This commit is contained in:
alexfront 2020-08-06 13:03:45 +03:00
parent 43e6e25955
commit af7220c29f
1 changed files with 30 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,86 +1,44 @@
import React from "react"; import React from "react";
import { Cluster } from "../../../../main/cluster"; import throttle from "lodash/throttle";
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 { Cluster } from "../../../../main/cluster";
import { Input } from "../../input";
import { SubTitle } from "../../layout/sub-title";
interface Props { interface Props {
cluster: Cluster; cluster: Cluster;
} }
@observer @observer
export class ClusterHomeDirSetting extends React.Component<Props> { export class ClusterHomeDirSetting extends React.Component<Props> {
@observable directory = this.props.cluster.preferences.terminalCWD || ""; @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() { render() {
return <> 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> <SubTitle title="Working Directory"/>
<Input <p>Terminal working directory.</p>
theme="round-black" <Input
className="box grow" theme="round-black"
value={this.directory} value={this.directory}
onSubmit={this.onWorkingDirectorySubmit} onChange={this.onChange}
onChange={this.onWorkingDirectoryChange} placeholder="$HOME"
iconRight={this.getIconRight()} />
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>
</>
@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
} }
} }