archive remote button (with confirm). edit remote button in remote:show

This commit is contained in:
sawka 2022-10-04 11:15:35 -07:00
parent 0173cbce23
commit 788ef1f33d
3 changed files with 66 additions and 1 deletions

View File

@ -768,6 +768,11 @@ class InfoRemoteShow extends React.Component<{}, {}> {
GlobalCommandRunner.installCancelRemote(remoteId);
}
@boundMethod
editRemote(remoteId : string) {
GlobalCommandRunner.openEditRemote(remoteId);
}
renderConnectButton(remote : RemoteType) : any {
if (remote.status == "connected" || remote.status == "connecting") {
return <div onClick={() => this.disconnectRemote(remote.remoteid)} className="text-button disconnect-button">[disconnect remote]</div>
@ -777,6 +782,10 @@ class InfoRemoteShow extends React.Component<{}, {}> {
}
}
renderEditButton(remote : RemoteType) : any {
return <div onClick={() => this.editRemote(remote.remoteid)} className="text-button">[edit remote]</div>
}
renderInstallButton(remote : RemoteType) : any {
if (remote.status == "connected" || remote.status == "connecting") {
return "(must disconnect to install)";
@ -855,7 +864,7 @@ class InfoRemoteShow extends React.Component<{}, {}> {
</div>
<div key="remoteid" className="remote-field">
<div className="remote-field-def"> remoteid</div>
<div className="remote-field-val">{remote.remoteid}</div>
<div className="remote-field-val">{remote.remoteid} | {this.renderEditButton(remote)}</div>
</div>
<div key="type" className="remote-field">
<div className="remote-field-def"> type</div>
@ -918,6 +927,7 @@ class InfoRemoteEdit extends React.Component<{}, {}> {
sudoBool : mobx.IObservableValue<boolean>;
autoInstallBool : mobx.IObservableValue<boolean>;
authMode : mobx.IObservableValue<string>;
archiveConfirm : mobx.IObservableValue<boolean> = mobx.observable.box(false);
constructor(props) {
super(props);
@ -991,6 +1001,26 @@ class InfoRemoteEdit extends React.Component<{}, {}> {
})();
}
@boundMethod
updateArchiveConfirm(e : any) : void {
mobx.action(() => {
this.archiveConfirm.set(e.target.checked);
})();
}
@boundMethod
doArchiveRemote(e : any) {
e.preventDefault();
if (!this.archiveConfirm.get()) {
return;
}
let redit = this.getRemoteEdit();
if (redit == null || isBlank(redit.remoteid)) {
return;
}
GlobalCommandRunner.archiveRemote(redit.remoteid);
}
@boundMethod
doSubmitRemote() {
let redit = this.getRemoteEdit();
@ -1320,6 +1350,9 @@ class InfoRemoteEdit extends React.Component<{}, {}> {
<div key="controls" style={{marginTop: 15, marginBottom: 10}} className="remote-input-field">
<a tabIndex={0} style={{marginRight: 20}} onClick={this.doSubmitRemote} onKeyDown={this.keyDownCreateRemote} className="text-button success-button">[{isEditMode ? "update" : "create"} remote]</a>
{"|"}
<a tabIndex={0} style={{marginLeft: 20, marginRight: 5}} onClick={this.doArchiveRemote} onKeyDown={this.keyDownCreateRemote} className={cn("text-button", (this.archiveConfirm.get() ? "error-button" : "disabled-button"))}>[archive remote]</a>
<input onChange={this.updateArchiveConfirm} checked={this.archiveConfirm.get()} style={{marginRight: 20}} type="checkbox"/>
{"|"}
<a tabIndex={0} style={{marginLeft: 20}} onClick={this.doCancel} onKeyDown={this.keyDownCancel} className="text-button grey-button">[cancel (ESC)]</a>
</div>
</form>

View File

@ -1908,6 +1908,10 @@ class CommandRunner {
openEditRemote(remoteid : string) : void {
GlobalModel.submitCommand("remote", "edit", null, {"remote": remoteid, "nohist": "1", "visual": "1"}, true);
}
archiveRemote(remoteid : string) {
GlobalModel.submitCommand("remote", "archive", null, {"remote": remoteid, "nohist": "1"}, true);
}
};
let GlobalModel : Model = null;

View File

@ -948,6 +948,10 @@ body .xterm .xterm-viewport {
}
}
input[type=checkbox] {
cursor: pointer;
}
.text-button {
.mono-font(12px, 600);
color: @term-white;
@ -956,28 +960,52 @@ body .xterm .xterm-viewport {
outline: 2px solid #171717;
&:hover, &:focus {
color: @term-white;
background-color: #333;
outline: 2px solid #333;
}
&.connect-button {
color: @term-green;
&:hover {
color: @term-green;
}
}
&.disconnect-button {
color: @term-red;
&:hover {
color: @term-red;
}
}
&.success-button {
color: @term-green;
&:hover {
color: @term-green;
}
}
&.error-button {
color: @term-red;
&:hover {
color: @term-red;
}
}
&.grey-button {
color: #666;
&:hover {
color: #666;
}
}
&.disabled-button {
&:hover, &:focus {
outline: none;
background-color: #171717;
}
cursor: default;
}
}