COMPASS-2287: Fixing SSH Tunnel Connections (#1305)

Fix styling of ssh tunnel status

Author: durran

package.json

@@ -140,7 +140,7 @@
     "@mongodb-js/compass-auth-kerberos": "^0.0.2",
     "@mongodb-js/compass-auth-ldap": "^0.0.2",
     "@mongodb-js/compass-auth-x509": "^0.0.3",
-    "@mongodb-js/compass-connect": "^0.0.8",
+    "@mongodb-js/compass-connect": "^0.1.0",
     "@mongodb-js/compass-crud": "0.7.1",
     "@mongodb-js/compass-deployment-awareness": "^5.0.0",
     "@mongodb-js/compass-document-validation": "^5.0.0",
@@ -200,8 +200,8 @@
     "marky": "^1.2.0",
     "moment": "^2.10.6",
     "mongodb-collection-model": "^0.4.0",
-    "mongodb-connection-model": "^10.4.0",
-    "mongodb-data-service": "^8.2.0",
+    "mongodb-connection-model": "^10.4.1",
+    "mongodb-data-service": "^8.3.0",
     "mongodb-database-model": "^0.1.2",
     "mongodb-explain-plan-model": "^0.2.2",
     "mongodb-extended-json": "^1.10.0",

src/internal-plugins/ssh-tunnel-status/lib/components/ssh-tunnel-status.jsx

@@ -22,14 +22,14 @@ class SSHTunnelStatusComponent extends React.Component {
           onMouseOver={this.props.actions.showFullHostPort}
           onMouseOut={this.props.actions.showTruncatedHostPort}>
         <FontAwesome name="lock" className="ssh-tunnel-status-icon ssh-tunnel-status-icon-lock"/>
-        <span className="ssh-tunnel-status-label">
-          <span className="ssh-tunnel-status-label-is-static">
+        <div className="ssh-tunnel-status-label">
+          <div className="ssh-tunnel-status-label-is-static">
             &nbsp;SSH connection via&nbsp;&nbsp;
-          </span>
-          <span className="ssh-tunnel-status-hostportstring">
+          </div>
+          <div className="ssh-tunnel-status-hostportstring">
             {this.props.sshTunnelHostPortString}
-          </span>
-        </span>
+          </div>
+        </div>
       </div>
     );
   }

src/internal-plugins/ssh-tunnel-status/styles/index.less

@@ -1,4 +1,8 @@
 .ssh-tunnel-status {
+  margin-left: 10px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 
   &-icon {
     &-lock { font-size: 12px; }
@@ -10,19 +14,14 @@
     flex-grow: 0;
     flex-shrink: 0;
     text-align: right;
-    padding-top: 5px;
   }
 
   &-label {
     color: @gray0;
-    flex-basis: auto;
-    flex-grow: 0;
-    flex-shrink: 0;
-    font-size: 14px;
-    line-height: 1;
-    padding-top: 3px;
-    padding-bottom: 8px;
-    padding-right: 20px;
+    font-size: 12px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
 
     &-is-static {
       font-size: 11px;