Merge branch 'INT-424-connect-name'

Author: kangas

src/connect/index.jade

@@ -1,23 +1,24 @@
-.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 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', min=0)
+        hr
+        .form-group
+          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='Connection Name', 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,
@@ -14,7 +19,7 @@ var ConnectionView = View.extend({
     }
   },
   events: {
-    click: 'onClick',
+    'click a': 'onClick',
     dblclick: 'onDoubleClick',
     mouseover: 'onMouseOver',
     mouseout: 'onMouseOut',
@@ -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,38 +119,88 @@ var ConnectView = View.extend({
     ]
   },
   events: {
+    'input [data-hook=name]': 'onNameChanged',
+    'input [data-hook=port]': 'onPortChanged',
+    'input [data-hook=hostname]': 'onHostNameChanged',
     'submit form': 'onSubmit'
   },
+  onNameChanged: function(evt) {
+    this.displayedConnection.name = evt.target.value;
+  },
+  onPortChanged: function(evt) {
+    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();
-    app.statusbar.show();
-    this.message = format('Testing connection...');
+
+    // 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 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';
+    var existingConnection = this.connections.get(this.displayedConnection.uri);
+    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;
+      this.message = format('This connection already exists '
+      + 'under the name "%s". Click "Connect" again to use this connection.',
+        existingConnection.name);
+      this.displayedConnection.name = existingConnection.name;
+      return;
+    }
 
-    new Connection({
-      name: name,
-      hostname: hostname,
-      port: port
-    }).test(this.onConnectionTested.bind(this));
+    // now test if the connection name already exists with another uri
+    existingConnection = this.connections.get(this.displayedConnection.name, 'name');
+    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('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 = '';
+    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);
-      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, {
@@ -138,7 +209,16 @@ var ConnectView = View.extend({
       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/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 Connections
+      .panel-title Saved Connections
     ul.list-group(data-hook='connection-list', style='top: 32px;')
 
   .sidebar-bg

src/electron/window-manager.js

@@ -15,13 +15,13 @@ var DEFAULT_HEIGHT = 700;
 var DEFAULT_HEIGHT_DIALOG;
 
 if (process.platform === 'win32') {
-  DEFAULT_HEIGHT_DIALOG = 460;
+  DEFAULT_HEIGHT_DIALOG = 500;
 } else if (process.platform === 'linux') {
-  DEFAULT_HEIGHT_DIALOG = 430;
+  DEFAULT_HEIGHT_DIALOG = 470;
 } else {
-  DEFAULT_HEIGHT_DIALOG = 400;
+  DEFAULT_HEIGHT_DIALOG = 440;
 }
-var DEFAULT_WIDTH_DIALOG = 600;
+var DEFAULT_WIDTH_DIALOG = 640;
 
 var connectWindow;
 var windowsOpenCount = 0;

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-collection.js

@@ -9,5 +9,6 @@ module.exports = Collection.extend(lodashMixin, restMixin, {
   model: Connection,
   comparator: 'last_used',
   mainIndex: 'uri',
+  indexes: ['name'],
   sync: connectionSync
 });

src/models/connection.js

@@ -8,36 +8,45 @@ 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: {
     /**
      * User specified name for this connection.
      */
     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();
   },