WIP: error handling and optional connectio name

Author: rueckstiess

src/connect/index.jade

@@ -4,20 +4,22 @@
       form.form-horizontal
         .message.alert(style='margin-top: 10px;', data-hook='message')
         hr
-        .form-group
-          label.col-sm-2.control-label Name
-          .col-sm-10
-            input.form-control(type='text', name='name', placeholder='Local')
         .form-group
           label.col-sm-2.control-label Hostname
           .col-sm-10
-            input.form-control(type='text', name='hostname', placeholder='localhost')
+            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')
+            input.form-control(type='number', name='port', placeholder='27017', data-hook='port')
+        .form-group
+          label.col-sm-2.control-label Connection Name (optional)
+          a.btn.btn-info.btn-circle.btn-circle-micro(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.")
+            i.fa.fa-question
+          .col-sm-10
+            input.form-control(type='text', name='name', placeholder='My Localhost', data-hook='name')
         .form-group
           .col-sm-offset-2.col-sm-10
             button.btn.btn-primary(type='submit') Connect
-
+            
   div(data-hook='sidebar-subview')

src/connect/index.js

@@ -5,6 +5,11 @@ var format = require('util').format;
 var $ = require('jquery');
 var app = require('ampersand-app');
 
+// var debug = require('debug')('scout:connect:index');
+
+require('bootstrap/js/popover');
+require('bootstrap/js/tooltip');
+
 var ConnectionView = View.extend({
   props: {
     model: Connection,
@@ -34,9 +39,8 @@ var ConnectionView = View.extend({
     event.stopPropagation();
     event.preventDefault();
 
-    $('[name=hostname]').val(this.model.hostname);
-    $('[name=port]').val(this.model.port);
-    $('[name=name]').val(this.model.name);
+    // fill in the form with the clicked connection details
+    this.parent.parent.displayedConnection.set(this.model.serialize());
   },
   onDoubleClick: function(event) {
     this.onClick(event);
@@ -55,6 +59,7 @@ var ConnectionView = View.extend({
   }
 });
 
+
 var SidebarView = View.extend({
   template: require('./sidebar.jade'),
   render: function() {
@@ -67,6 +72,10 @@ var SidebarView = View.extend({
  * @todo (imlucas) Use ampersand-form-view.
  */
 var ConnectView = View.extend({
+  template: require('./index.jade'),
+  children: {
+    displayedConnection: Connection
+  },
   collections: {
     connections: ConnectionCollection
   },
@@ -81,6 +90,18 @@ var ConnectView = View.extend({
     }
   },
   bindings: {
+    'displayedConnection.name': {
+      type: 'value',
+      hook: 'name'
+    },
+    'displayedConnection.hostname': {
+      type: 'value',
+      hook: 'hostname'
+    },
+    'displayedConnection.port': {
+      type: 'value',
+      hook: 'port'
+    },
     has_error: {
       hook: 'message',
       type: 'booleanClass',
@@ -98,34 +119,57 @@ 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);
+  },
+  onHostNameChanged: function(evt) {
+    this.displayedConnection.hostname = evt.target.value;
+  },
   initialize: function() {
     document.title = 'Connect to MongoDB';
     this.connections.fetch();
   },
   onSubmit: function(event) {
     event.stopPropagation();
     event.preventDefault();
-    app.statusbar.show();
-    this.message = format('Testing connection...');
-    this.has_error = false;
 
-    var hostname = $(this.el).find('[name=hostname]').val() || 'localhost';
-    var port = parseInt($(this.el).find('[name=port]').val() || 27017, 10);
-    var name = $(this.el).find('[name=name]').val() || 'Local';
+    this.has_error = false;
 
-    new Connection({
-      name: name,
-      hostname: hostname,
-      port: port
-    }).test(this.onConnectionTested.bind(this));
+    var existingConnection = this.connections.get(this.displayedConnection.uri);
+    if (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;
+      this.message = format('A connection to this host and port already exists '
+      + 'under the name "%s". Click "Connect" again to connect to this host.',
+        existingConnection.name);
+      this.displayedConnection.name = existingConnection.name;
+    } else {
+      // 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) {
     app.statusbar.hide();
     if (err) {
       this.has_error = true;
-      this.message = format('Could not connect to %s', model.uri);
+      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);
@@ -135,10 +179,19 @@ var ConnectView = View.extend({
       setTimeout(this.set.bind(this, {
         message: ''
       }), 500);
-      setTimeout(window.close, 1000);
+      // setTimeout(window.close, 1000);
     }
   },
-  template: require('./index.jade'),
+  render: function() {
+    this.renderWithTemplate(this);
+    // enable popovers
+    $(this.query('[data-toggle="popover"]'))
+      .popover({
+        container: 'body',
+        placement: 'top',
+        trigger: 'hover'
+      });
+  },
   subviews: {
     sidebar: {
       waitFor: 'connections',

src/connect/sidebar.jade

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

src/models/connection.js

@@ -8,7 +8,7 @@ var debug = require('debug')('scout:models:connection');
  * Configuration for connecting to a MongoDB Deployment.
  */
 module.exports = Model.extend({
-  namespace: 'Connection',
+  modelType: 'Connection',
   idAttribute: 'uri',
   props: {
     /**