INT-793 Add help window

Squashed:

:construction: adding help window
:shirt:
make model/collection for help entries
Move help entries to markdown, add sidebar.
Fix router for help
ipc to parse help markdown entries via ipc
Finish laying in all of the groundwork for help
:shirt:
support local links via `[link](#help-entry)`
form fields support help entries, "not found" msg
add support for related help entries
added tags, devOnly entries, and how-help-works.md
:pencil: :add comment explaining template
:bug: fix issue connecting to schema window
consistent styling of i.help(), more entries
moved taxonomy and view hierarchy to help
syntax highlighting for code snippets in help
:pencil: more help entries

Author: rueckstiess

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.

images/help/dev/view_hierarchy.png

@@ -77,7 +77,9 @@
     "debug": "^2.2.0",
     "electron-squirrel-startup": "^0.1.4",
     "keytar": "mongodb-js/node-keytar",
+    "highlight.js": "^8.9.1",
     "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",

images/help/schema/sampling-results-full.png

@@ -28,6 +28,8 @@ var MongoDBInstance = require('./models/mongodb-instance');
 var User = require('./models/user');
 var Router = require('./router');
 var Statusbar = require('./statusbar');
+var Help = require('./help');
+var $ = require('jquery');
 
 var debug = require('debug')('scout:app');
 
@@ -119,7 +121,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');
+    Help.open(id);
   },
   onClientReady: function() {
     debug('Client ready! Took %dms to become readable',

images/help/schema/sampling-results-sample.png

@@ -38,8 +38,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
     })
   ]
@@ -57,6 +58,7 @@ var KERBEROS = {
       name: 'kerberos_principal',
       label: 'Principal',
       placeholder: '',
+      helpEntry: 'connect-kerberos-principal',
       required: true,
       tests: [
         function(value) {

package.json

@@ -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/app.js

@@ -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/authentication.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);