From 788ef1f33def5238d31e43811632f6f60275c9a8 Mon Sep 17 00:00:00 2001
From: sawka <mike.sawka@gmail.com>
Date: Tue, 4 Oct 2022 11:15:35 -0700
Subject: [PATCH] archive remote button (with confirm).  edit remote button in
 remote:show

---
 src/main.tsx | 35 ++++++++++++++++++++++++++++++++++-
 src/model.ts |  4 ++++
 src/sh2.less | 28 ++++++++++++++++++++++++++++
 3 files changed, 66 insertions(+), 1 deletion(-)

diff --git a/src/main.tsx b/src/main.tsx
index 325fa378..d4e69b74 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -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>
diff --git a/src/model.ts b/src/model.ts
index 6bdad056..af8e1c43 100644
--- a/src/model.ts
+++ b/src/model.ts
@@ -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;
diff --git a/src/sh2.less b/src/sh2.less
index 5b5a7862..1be00dc3 100644
--- a/src/sh2.less
+++ b/src/sh2.less
@@ -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;
     }
 }