connect: improved error handling, layout, labels

Author: rueckstiess

src/connect/index.jade

@@ -1,23 +1,22 @@
-.page
+.page.connect
   .content.with-sidebar
     .container-fluid
       form.form-horizontal
         .message.alert(style='margin-top: 10px;', data-hook='message')
-        hr
         .form-group
           label.col-sm-2.control-label Hostname
           .col-sm-10
             input.form-control(type='text', name='hostname', placeholder='localhost', data-hook='hostname')
         .form-group
           label.col-sm-2.control-label Port
           .col-sm-10
-            input.form-control(type='number', name='port', placeholder='27017', data-hook='port')
+            input.form-control(type='number', name='port', placeholder='27017', data-hook='port', min=0)
+        hr
         .form-group
-          label.col-sm-2.control-label Connection Name (optional)
-          i.fa.fa-info-circle(tabindex="0", role="button", data-toggle="popover", data-trigger="focus", title="Connection Name", data-content="You can choose a friendly connection name for this connection, for example \"Development Server\". The connection will appear on the left side under this name.")
-            
+          label.col-sm-2.control-label Save As... (optional)
+          i.fa.fa-info-circle(tabindex="0", role="button", data-toggle="popover", data-trigger="focus", data-content="You can choose a friendly connection name for this connection, for example \"Development Server\". If you enter a name here, the connection will be saved and appears on the left side.")
           .col-sm-10
-            input.form-control(type='text', name='name', placeholder='My Localhost', data-hook='name')
+            input.form-control(type='text', name='name', placeholder='Connection Name', data-hook='name')
         .form-group
           .col-sm-offset-2.col-sm-10
             button.btn.btn-primary(type='submit') Connect

src/connect/index.js

@@ -19,7 +19,7 @@ var ConnectionView = View.extend({
     }
   },
   events: {
-    click: 'onClick',
+    'click a': 'onClick',
     dblclick: 'onDoubleClick',
     mouseover: 'onMouseOver',
     mouseout: 'onMouseOut',
@@ -119,37 +119,47 @@ var ConnectView = View.extend({
     ]
   },
   events: {
-    'click .btn-info': 'onInfoClicked',
     'input [data-hook=name]': 'onNameChanged',
     'input [data-hook=port]': 'onPortChanged',
     'input [data-hook=hostname]': 'onHostNameChanged',
     'submit form': 'onSubmit'
   },
-  onInfoClicked: function(evt) {
-    evt.stopPropagation();
-    // debug('info clicked');
-  },
   onNameChanged: function(evt) {
     this.displayedConnection.name = evt.target.value;
   },
   onPortChanged: function(evt) {
-    this.displayedConnection.port = parseInt(evt.target.value, 10);
+    this.displayedConnection.portString = evt.target.value;
   },
   onHostNameChanged: function(evt) {
     this.displayedConnection.hostname = evt.target.value;
   },
   initialize: function() {
     document.title = 'Connect to MongoDB';
+    this.displayedConnection.set({
+      name: '',
+      portString: '',
+      hostname: ''
+    });
     this.connections.fetch();
   },
   onSubmit: function(event) {
     event.stopPropagation();
     event.preventDefault();
 
+    // choose default connection values if unset
+    if (!this.displayedConnection.hostname) {
+      this.displayedConnection.unset('hostname');
+    }
+    if (!this.displayedConnection.portString) {
+      this.displayedConnection.unset('portString');
+    }
+
     this.has_error = false;
 
     var existingConnection = this.connections.get(this.displayedConnection.uri);
-    if (existingConnection && existingConnection.name !== this.displayedConnection.name) {
+    if (this.displayedConnection.name !== ''
+      && existingConnection
+      && existingConnection.name !== this.displayedConnection.name) {
       // the connection uri (`host:port`) exists already, but under a different name
       app.statusbar.hide();
       this.has_error = true;
@@ -162,19 +172,20 @@ var ConnectView = View.extend({
 
     // now test if the connection name already exists with another uri
     existingConnection = this.connections.get(this.displayedConnection.name, 'name');
-    if (existingConnection && existingConnection.uri !== this.displayedConnection.uri) {
+    if (this.displayedConnection.name !== ''
+      && existingConnection
+      && existingConnection.uri !== this.displayedConnection.uri) {
       // the connection name exists already, but with a different uri
       app.statusbar.hide();
       this.has_error = true;
-      this.message = format('A different connection with the name "%s" already exists. Please '
+      this.message = format('Another connection with the name "%s" already exists. Please '
       + 'choose a different name.',
         existingConnection.name);
       return;
     }
 
     // now test if the server is reachable
     app.statusbar.show();
-    this.message = format('Testing connection...');
     this.displayedConnection.test(this.onConnectionTested.bind(this));
   },
   onConnectionTested: function(err, model) {
@@ -184,15 +195,17 @@ var ConnectView = View.extend({
       this.message = format('Could not connect to %s, please check that a MongoDB instance '
         + 'is running there.', model.uri);
     } else {
-      model.save();
-      this.connections.add(model);
-      this.message = 'Connected!';
+      if (model.name !== '') {
+        // only store if the user chose a name to save the connection
+        model.save();
+        this.connections.add(model);
+      }
       window.open(format('%s?uri=%s#schema', window.location.origin, model.uri));
 
       setTimeout(this.set.bind(this, {
         message: ''
       }), 500);
-      // setTimeout(window.close, 1000);
+      setTimeout(window.close, 1000);
     }
   },
   render: function() {

src/connect/index.less

@@ -0,0 +1,3 @@
+.connect form {
+  margin-top: 30px;
+}

src/connect/sidebar.jade

@@ -1,7 +1,7 @@
 div
   .sidebar.panel
     .panel-heading(style='padding: 10px;')
-      .panel-title My Connections
+      .panel-title Saved Connections
     ul.list-group(data-hook='connection-list', style='top: 32px;')
 
   .sidebar-bg

src/index.less

@@ -3,6 +3,7 @@
 
 // Components
 @import "./src/collection-stats/index.less";
+@import "./src/connect/index.less";
 @import "./src/document-list/index.less";
 @import "./src/field-list/index.less";
 @import "./src/home/index.less";

src/models/connection.js

@@ -16,28 +16,37 @@ module.exports = Model.extend({
      */
     name: {
       type: 'string',
-      default: 'Local'
+      default: '',
+      required: true
     },
     /**
      * Hostname or IP address of the Instance to connect to in the Deployment.
      */
     hostname: {
       type: 'string',
-      default: 'localhost'
+      default: 'localhost',
+      required: true
     },
     /**
      * Port the Instance to connect to in the Deployment is listening on.
      */
-    port: {
-      type: 'number',
-      default: 27017
+    portString: {
+      type: 'string',
+      default: '27017',
+      required: true
     },
     /**
      * Updated on each successful connection to the Deployment.
      */
     last_used: 'date'
   },
   derived: {
+    port: {
+      deps: ['portString'],
+      fn: function() {
+        return parseInt(this.portString, 10);
+      }
+    },
     uri: {
       deps: ['hostname', 'port'],
       fn: function() {
@@ -47,7 +56,7 @@ module.exports = Model.extend({
   },
   use: function(uri) {
     var data = types.url(uri).data;
-    this.port = data.hosts[0].port;
+    this.portString = '' + data.hosts[0].port;
     this.hostname = data.hosts[0].host.toLowerCase();
     this.fetch();
   },