INT-793 help window

gulpfile.js

@@ -95,6 +95,7 @@ gulp.task('watch', function() {
   gulp.watch(['src/*.jade'], ['build:pages']);
   gulp.watch('images/{*,**/*}', ['copy:images']);
   gulp.watch('fonts/*', ['copy:fonts']);
+  gulp.watch('src/help/entries/*.md', ['copy:text']);
   gulp.watch(['src/electron/{*,**/*}'], ['copy:js']);
   gulp.watch('package.json', function() {
     gutil.log('package.json changed!');
@@ -232,8 +233,12 @@ gulp.task('copy:package.json', function() {
 });
 
 gulp.task('copy:text', function() {
-  return gulp.src(['README.md'])
-    .pipe(gulp.dest('build/'));
+  return merge(
+    gulp.src('README.md')
+      .pipe(gulp.dest('build/')),
+    gulp.src('src/help/entries/*.md')
+      .pipe(gulp.dest('build/src/help/entries'))
+  );
 });
 
 // Copy non-UI js into the build.

package.json

@@ -76,8 +76,10 @@
   "dependencies": {
     "debug": "^2.2.0",
     "electron-squirrel-startup": "^0.1.4",
+    "highlight.js": "^8.9.1",
     "keytar": "mongodb-js/node-keytar",
     "localforage": "^1.3.0",
+    "marky-mark": "^1.2.1",
     "mongodb-collection-model": "^0.1.1",
     "mongodb-connection-model": "^3.0.7",
     "mongodb-instance-model": "^1.0.2",

src/app.js

@@ -28,6 +28,7 @@ var MongoDBInstance = require('./models/mongodb-instance');
 var User = require('./models/user');
 var Router = require('./router');
 var Statusbar = require('./statusbar');
+var $ = require('jquery');
 
 var debug = require('debug')('scout:app');
 
@@ -119,7 +120,12 @@ var Application = View.extend({
     user: User
   },
   events: {
-    'click a': 'onLinkClick'
+    'click a': 'onLinkClick',
+    'click i.help': 'onHelpClicked'
+  },
+  onHelpClicked: function(evt) {
+    var id = $(evt.target).attr('data-hook');
+    app.sendMessage('show help window', id);
   },
   onClientReady: function() {
     debug('Client ready! Took %dms to become readable',
@@ -284,12 +290,12 @@ app.extend({
   setFeature: function(id, bool) {
     FEATURES[id] = bool;
   },
-  sendMessage: function(msg, arg1) {
-    ipc.send('message', msg, arg1);
+  sendMessage: function(msg, arg) {
+    ipc.send('message', msg, arg);
   },
-  onMessageReceived: function(msg) {
-    debug('message received from main process:', msg);
-    this.trigger(msg);
+  onMessageReceived: function(msg, arg) {
+    debug('message received from main process:', msg, arg);
+    this.trigger(msg, arg);
   },
   metrics: metrics,
   init: function() {

src/connect/authentication.js

@@ -37,8 +37,9 @@ var MONGODB = {
     new InputView({
       template: inputTemplate,
       name: 'mongodb_database_name',
-      label: 'Database Name',
+      label: 'Authentication Database',
       placeholder: 'admin',
+      helpEntry: 'connect-userpass-auth-db',
       required: false
     })
   ]
@@ -56,13 +57,15 @@ var KERBEROS = {
       name: 'kerberos_service_name',
       label: 'Kerberos Service Name',
       placeholder: 'mongodb',
+      helpEntry: 'connect-kerberos-service-name',
       required: false
     }),
     new InputView({
       template: inputTemplate,
       name: 'kerberos_principal',
       label: 'Kerberos Principal',
       placeholder: '',
+      helpEntry: 'connect-kerberos-principal',
       required: true
     }),
     new InputView({

src/connect/connect-form-view.js

@@ -187,6 +187,7 @@ var ConnectFormView = FormView.extend({
         name: 'name',
         label: 'Favorite Name',
         placeholder: 'e.g. Shared Dev, QA Box, PRODUCTION',
+        helpEntry: 'connect-favorite-name',
         required: false
       })
     ];

src/connect/filereader-default.jade

@@ -1,5 +1,8 @@
 .form-item 
-  label(data-hook='label')= label
+  label
+    span(data-hook='label')= label
+    if helpEntry
+      i.help(data-hook='#{helpEntry}')
   .message.message-below.message-error(data-hook='message-container')
     p(data-hook='message-text')
   .form-item-file

src/connect/filereader-view.js

@@ -30,6 +30,10 @@ module.exports = InputView.extend({
       type: 'boolean',
       required: true,
       default: false
+    },
+    helpEntry: {
+      type: 'string',
+      default: null
     }
   },
   derived: {
@@ -91,6 +95,9 @@ module.exports = InputView.extend({
     _.defaults(spec, {
       value: []
     });
+    if (spec.helpEntry) {
+      this.helpEntry = spec.helpEntry;
+    }
     this.invalidClass = 'has-error';
     this.validityClassSelector = '.form-item-file';
     InputView.prototype.initialize.call(this, spec);

src/connect/input-default.jade

@@ -1,5 +1,8 @@
 .form-item
-  label(data-hook='label')= label
+  label
+    span(data-hook='label')= label
+    if helpEntry
+      i.help(data-hook='#{helpEntry}')
   .message.message-above.message-error(data-hook='message-container')
     p(data-hook='message-text')
   input.form-control(placeholder='#{placeholder}')

src/connect/input-view.js

@@ -6,7 +6,17 @@ var InputView = require('ampersand-input-view');
  * so that label gets correctly rendered on subsequent render() calls.
  */
 module.exports = InputView.extend({
-  initialize: function() {
+  props: {
+    helpEntry: {
+      type: 'string',
+      default: null
+    }
+  },
+  initialize: function(spec) {
+    spec = spec || {};
+    if (spec.helpEntry) {
+      this.helpEntry = spec.helpEntry;
+    }
     this.invalidClass = 'has-error';
     this.validityClassSelector = '.form-item';
     InputView.prototype.initialize.apply(this, arguments);

src/connect/select-default.jade

@@ -1,5 +1,8 @@
 .form-item
-  label(data-hook='label')= label
+  label
+    span(data-hook='label')= label
+    if helpEntry
+      i.help(data-hook='#{helpEntry}')
   .message.message-below.message-error(data-hook='message-container')
     p(data-hook='message-text')
   select.form-control(type='select')

src/connect/ssl.js

@@ -41,6 +41,7 @@ var SERVER = {
       name: 'ssl_ca',
       multi: true,
       label: 'Certificate Authority',
+      helpEntry: 'connect-ssl-certificate-authority',
       required: true
     })
   ]
@@ -59,22 +60,26 @@ var ALL = {
       name: 'ssl_ca',
       multi: true,
       label: 'Certificate Authority',
+      helpEntry: 'connect-ssl-certificate-authority',
       required: true
     }),
     new FileReaderView({
       name: 'ssl_private_key',
       label: 'Client Certificate Key',
+      helpEntry: 'connect-ssl-client-certificate-key',
       required: true
     }),
     new FileReaderView({
       name: 'ssl_certificate',
       label: 'Client Certificate',
+      helpEntry: 'connect-ssl-client-certificate',
       required: true
     }),
     new InputView({
       template: inputTemplate,
       name: 'ssl_private_key_password',
       label: 'Client Key Password',
+      helpEntry: 'connect-ssl-private-key-password',
       required: false
     })
   ]

src/electron/help.js

@@ -0,0 +1,39 @@
+var path = require('path');
+var ipc = require('ipc');
+var mm = require('marky-mark');
+var _ = require('lodash');
+var highlight = require('highlight.js');
+
+var debug = require('debug')('scout:electron:help');
+
+debug('adding ipc listener for `/help/entries`...');
+ipc.on('/help/entries', function(evt) {
+  var dir = path.join(__dirname, '..', 'help', 'entries');
+  debug('parsing entries with marky-mark from `%s`', dir);
+
+  // add syntax highlighting options, pass through to `marked` module
+  var options = {
+    marked: {
+      highlight: function(code) {
+        var result = highlight.highlightAuto(code).value;
+        return result;
+      }
+    }
+  };
+
+  mm.parseDirectory(dir, options, function(err, posts) {
+    if (err) {
+      debug('error parsing entries', err);
+      evt.sender.send('/help/entries/error', err);
+      return;
+    }
+    debug('successfully parsed!', posts);
+    // in production don't return the dev-only entries
+    if (process.env.NODE_ENV === 'production') {
+      posts = _.filter(posts, function(post) {
+        return !post.meta.devOnly;
+      });
+    }
+    evt.sender.send('/help/entries/success', posts);
+  });
+});

src/electron/index.js

@@ -40,4 +40,8 @@ if (!require('electron-squirrel-startup')) {
   var AppMenu = require('./menu');
   AppMenu.init();
   require('./window-manager');
+
+  app.on('ready', function() {
+    require('./help');
+  });
 }