fix remote update bug, add 'connect now' button for disconnected remotes

src/linecomps.tsx

@@ -593,16 +593,20 @@ class Prompt extends React.Component<{rptr : RemotePtrType, festate : FeStateTyp
                 isRoot = true;
             }
         }
-        let colorClass = (isRoot ? "color-red" : "color-green");
+        let remoteColorClass = (isRoot ? "color-red" : "color-green");
         if (remote && remote.remoteopts && remote.remoteopts.color) {
-            colorClass = "color-" + remote.remoteopts.color;
+            remoteColorClass = "color-" + remote.remoteopts.color;
         }
         // TESTING cwd shortening with triple colon character
         // if (cwd.startsWith("~/work/gopath/src/github.com/scripthaus-dev")) {
         //     cwd = cwd.replace("~/work/gopath/src/github.com/scripthaus-dev", "\u22EEscripthaus-dev");
         // }
+        let remoteTitle : string = null;
+        if (remote && remote.remotecanonicalname) {
+            remoteTitle = "connected to " + remote.remotecanonicalname;
+        }
         return (
-            <span className={cn("term-prompt", colorClass)}>[{remoteStr}] {cwd} {isRoot ? "#" : "$"}</span>
+            <span className="term-prompt"><span title={remoteTitle} className={cn("term-prompt-remote", remoteColorClass)}>[{remoteStr}]</span> <span className="term-prompt-cwd">{cwd}</span> <span className="term-prompt-end">{isRoot ? "#" : "$"}</span></span>
         );
     }
 }

src/main.tsx

@@ -1587,6 +1587,11 @@ class CmdInput extends React.Component<{}, {}> {
             inputModel.openHistory();
         }
     }
+
+    @boundMethod
+    clickConnectRemote(remoteId : string) : void {
+        GlobalCommandRunner.connectRemote(remoteId);
+    }
     
     render() {
         let model = GlobalModel;
@@ -1627,6 +1632,12 @@ class CmdInput extends React.Component<{}, {}> {
                     <HistoryInfo/>
                 </If>
                 <InfoMsg key="infomsg"/>
+                <If condition={remote && remote.status != "connected"}>
+                    <div className="remote-status-warning">
+                        WARNING:&nbsp;<span className="remote-name">[{GlobalModel.resolveRemoteIdToFullRef(remote.remoteid)}]</span>&nbsp;is {remote.status}
+                        <If condition={remote.status != "connecting"}><div className="button is-prompt-green is-outlined is-small" onClick={() => this.clickConnectRemote(remote.remoteid)}>connect now</div></If>
+                    </div>
+                </If>
                 <div key="prompt" className="cmd-input-context">
                     <div className="has-text-white">
                         <Prompt rptr={rptr} festate={remoteState}/>
@@ -2475,7 +2486,7 @@ function getConnVal(r : RemoteType) : number {
     if (r.status == "connected") {
         return 1;
     }
-    if (r.status == "init" || r.status == "disconnected") {
+    if (r.status == "disconnected") {
         return 2;
     }
     if (r.status == "error") {

src/model.ts

@@ -356,10 +356,11 @@ class Screen {
             let oldSelectedLine = this.selectedLine.get();
             let oldFocusType = this.focusType.get();
             this.selectedLine.set(data.selectedline);
+            this.curRemote.set(data.curremote);
             this.focusType.set(data.focustype);
             this.refocusLine(data, oldFocusType, oldSelectedLine);
             this.shareMode.set(data.sharemode);
-            this.webShareOpts.set(data.webshreopts);
+            this.webShareOpts.set(data.webshareopts);
             // do not update anchorLine/anchorOffset (only stored)
         })();
     }
@@ -3199,6 +3200,17 @@ class Model {
         }
         return remote.remotecanonicalname;
     }
+
+    resolveRemoteIdToFullRef(remoteId : string) {
+        let remote = this.getRemote(remoteId)
+        if (remote == null) {
+            return "[unknown]";
+        }
+        if (!isBlank(remote.remotealias)) {
+            return remote.remotealias + " (" + remote.remotecanonicalname + ")";
+        }
+        return remote.remotecanonicalname;
+    }
 }
 
 class CommandRunner {

src/sh2.less

@@ -1845,6 +1845,22 @@ body .xterm .xterm-viewport {
         max-height: max(300px, 70%);
     }
 
+    .remote-status-warning {
+        display: flex;
+        flex-direction: row;
+        color: @term-yellow;
+        align-items: center;
+        font-size: 14px;
+
+        .button {
+            margin-left: 10px;
+        }
+
+        .remote-name {
+            .mono-font(14px)
+        }
+    }
+
     .input-minmax-control {
         position: absolute;
         top: 5px;
@@ -2268,7 +2284,7 @@ input[type=checkbox] {
     color: @term-bright-red;
 }
 
-#main .term-prompt {
+#main .term-prompt-remote {
     color: @term-bright-green;
     
     &.color-green {
@@ -2304,6 +2320,14 @@ input[type=checkbox] {
     }
 }
 
+#main .term-prompt-cwd {
+    color: @term-bright-green;
+}
+
+#main .term-prompt-end {
+    color: @term-bright-blue;
+}
+
 #main .screen-tabs .screen-tab {
     &.color-green {
         color: @tab-black-text;

src/types.ts

@@ -4,6 +4,7 @@ import * as mobx from "mobx";
 type ShareModeType = "local" | "web";
 type FocusTypeStrs = "input"|"cmd"|"cmd-fg";
 type HistoryTypeStrs = "global" | "session" | "screen";
+type RemoteStatusTypeStrs = "connected" | "connecting" | "disconnected" | "error";
 
 type OV<V> = mobx.IObservableValue<V>;
 
@@ -83,7 +84,7 @@ type RemoteType = {
     remotealias : string,
     remotecanonicalname : string,
     remotevars : Record<string, string>,
-    status : string,
+    status : RemoteStatusTypeStrs,
     errorstr : string,
     installstatus : string,
     installerrorstr : string,
@@ -481,4 +482,4 @@ type HistorySearchParams = {
 
 type RenderModeType = "normal" | "collapsed";
 
-export type {SessionDataType, LineType, RemoteType, RemoteStateType, RemoteInstanceType, HistoryItem, CmdRemoteStateType, FeCmdPacketType, TermOptsType, CmdStartPacketType, CmdDataType, ScreenDataType, ScreenOptsType, PtyDataUpdateType, ModelUpdateType, UpdateMessage, InfoType, CmdLineUpdateType, RemotePtrType, UIContextType, HistoryInfoType, HistoryQueryOpts, WatchScreenPacketType, TermWinSize, FeInputPacketType, RemoteInputPacketType, RemoteEditType, FeStateType, ContextMenuOpts, RendererContext, WindowSize, RendererModel, PtyDataType, BookmarkType, ClientDataType, PlaybookType, PlaybookEntryType, HistoryViewDataType, RenderModeType, AlertMessageType, HistorySearchParams, ScreenLinesType, FocusTypeStrs, HistoryTypeStrs, RendererOpts, RendererPluginType, SimpleBlobRendererComponent, RendererModelContainerApi, RendererModelInitializeParams, RendererOptsUpdate, ClientMigrationInfo, WebShareOpts};
+export type {SessionDataType, LineType, RemoteType, RemoteStateType, RemoteInstanceType, HistoryItem, CmdRemoteStateType, FeCmdPacketType, TermOptsType, CmdStartPacketType, CmdDataType, ScreenDataType, ScreenOptsType, PtyDataUpdateType, ModelUpdateType, UpdateMessage, InfoType, CmdLineUpdateType, RemotePtrType, UIContextType, HistoryInfoType, HistoryQueryOpts, WatchScreenPacketType, TermWinSize, FeInputPacketType, RemoteInputPacketType, RemoteEditType, FeStateType, ContextMenuOpts, RendererContext, WindowSize, RendererModel, PtyDataType, BookmarkType, ClientDataType, PlaybookType, PlaybookEntryType, HistoryViewDataType, RenderModeType, AlertMessageType, HistorySearchParams, ScreenLinesType, FocusTypeStrs, HistoryTypeStrs, RendererOpts, RendererPluginType, SimpleBlobRendererComponent, RendererModelContainerApi, RendererModelInitializeParams, RendererOptsUpdate, ClientMigrationInfo, WebShareOpts, RemoteStatusTypeStrs};