INT-780 custom file picker using electron dialog

HTML file picker cannot set the value programmatically for security reasons. But in electron land we can use their `showOpenDialog`.

Author: rueckstiess

package.json

@@ -88,6 +88,7 @@
     "ampersand-collection-filterable": "^0.2.1",
     "ampersand-collection-lodash-mixin": "^2.0.1",
     "ampersand-collection-rest-mixin": "^5.0.0",
+    "ampersand-dom-bindings": "^3.7.0",
     "ampersand-filtered-subcollection": "^2.0.4",
     "ampersand-form-view": "^5.1.1",
     "ampersand-input-view": "^5.0.0",

src/connect/connect-form-view.js

@@ -188,7 +188,7 @@ var ConnectFormView = FormView.extend({
         el: this.parent.queryByHook('saveas-subview'),
         name: 'name',
         label: 'Name',
-        placeholder: 'e.g. Shared Dev, Stats Box, PRODUCTION',
+        placeholder: 'e.g. Shared Dev, QA Box, PRODUCTION',
         required: false
       })
     ];

src/connect/filereader-default.jade

@@ -3,4 +3,7 @@
   .message.message-below.message-error(data-hook='message-container')
     p(data-hook='message-text')
   .form-item-file
-    input(type="file", name="uploadKeyFile", multiple)
+    .btn.btn-default(data-hook='load-file-button', style='text-transform: none;') 
+      i.fa.fa-file
+      |  
+      span(data-hook='button-label')= buttonTitle

src/connect/filereader-view.js

@@ -1,64 +1,182 @@
 var InputView = require('./input-view');
 var _ = require('lodash');
-// var path = require('path');
+var path = require('path');
+var remote = window.require('remote');
+var dialog = remote.require('dialog');
+var format = require('util').format;
+var bindings = require('ampersand-dom-bindings');
 var fileReaderTemplate = require('./filereader-default.jade');
 
 // var debug = require('debug')('scout:connect:filereader-view');
 
 module.exports = InputView.extend({
   template: fileReaderTemplate,
-  clean: function() {
-    var value;
-    value = _.chain(this.input.files)
-      .map(function(file) {
-        return _.get(file, 'path', null);
-      })
-      .filter()
-      .value();
-    if (value.length === 0) {
-      value = '';
+  props: {
+    inputValue: {
+      type: 'array',
+      required: true,
+      default: function() {
+        return [];
+      }
+    },
+    removed: {
+      type: 'boolean',
+      required: true,
+      default: false
     }
-    return value;
   },
-  setValue: function(value, skipValidation) {
-    if (!this.input) {
-      this.inputValue = value;
-      return;
+  derived: {
+    buttonTitle: {
+      deps: ['inputValue'],
+      fn: function() {
+        if (this.inputValue.length === 0) {
+          return 'Choose certificate(s)';
+        } else if (this.inputValue.length === 1) {
+          return path.basename(this.inputValue[0]);
+        }
+        return format('%d files selected', this.inputValue.length);
+      }
+    },
+    numSelectedFiles: {
+      deps: ['inputValue'],
+      fn: function() {
+        return this.inputValue.length;
+      }
+    }
+  },
+  events: {
+    'click [data-hook=load-file-button]': 'loadFileButtonClicked'
+  },
+  bindings: {
+    buttonTitle: {
+      type: 'text',
+      hook: 'button-label'
+    },
+    'label': [
+      {
+        hook: 'label'
+      },
+      {
+        type: 'toggle',
+        hook: 'label'
+      }
+    ],
+    'message': {
+      type: 'text',
+      hook: 'message-text'
+    },
+    'showMessage': {
+      type: 'toggle',
+      hook: 'message-container'
     }
-    this.input.value = '';
-    /**
-     * Cannot set input value for file types. @see INT-780
-     */
-    // if (value || value === 0) {
-    //   if (!_.isArray(value)) {
-    //     value = [value];
-    //   }
-    //   if (value.length <= 1) {
-    //     this.input.value = path.basename(value);
-    //   } else {
-    //     this.input.value = 'multiple files';
-    //   }
-    //   this.input.files = _.map(value, function(f) {
-    //     return {
-    //       name: path.basename(f),
-    //       path: f
-    //     };
-    //   });
-    // }
-    this.inputValue = this.clean();
+  },
+  /**
+   * Set value to empty array in spec, instead of '', set appropriate
+   * invalidClass and validityClassSelector and always validate.
+   * @param {Object} spec    the spec to set up this input view
+   */
+  initialize: function(spec) {
+    spec = spec || {};
+    _.defaults(spec, {value: []});
+    this.invalidClass = 'has-error';
+    this.validityClassSelector = '.form-item-file';
+    InputView.prototype.initialize.call(this, spec);
+  },
+  /**
+   * @todo (thomasr)
+   * Because ampersand-input-view still uses [email protected] where
+   * the render/remove/render cycle doesn't correctly set up the bindings
+   * again, we need to re-initialize the bindings manually here. Once they
+   * upgrade to [email protected] we can probably remove this entire
+   * render method.
+   *
+   * @return {Object}  this
+   */
+  render: function() {
+    this.renderWithTemplate(this);
+    this.input = this.queryByHook('load-file-button');
+    if (this.removed) {
+      this._parsedBindings = bindings(this.bindings, this);
+      this._initializeBindings();
+      this.removed = false;
+    }
+    this.setValue(this.inputValue, !this.required);
+    return this;
+  },
+  /**
+   * Turn into no-op, as we don't work on input elements
+   * @see ampersand-input-view.js#handleTypeChange
+   */
+  handleTypeChange: function() {
+  },
+  /**
+   * Turn into identity, as we don't need to trim the value
+   * @param  {Array} val   the value to pass through
+   * @return {Array}       return the unchanged value
+   */
+  clean: function(val) {
+    return val;
+  },
+  /**
+   * Turn into no-op, as we don't work on input elements
+   * @see ampersand-input-view.js#initInputBindings
+   */
+  // initInputBindings: function() {
+  // },
+  /**
+   * Only call ampersand-view's remove, we don't need to remove event listeners
+   * @see ampersand-input-view.js#remove
+   */
+  remove: function() {
+    this.removed = true;
+    InputView.prototype.remove.apply(this, arguments);
+  },
+  /**
+   * Not setting this.input.value here because our this.input is a div
+   * @param {Array} value     the value to assign to this.inputValue
+   * @param {Boolean} skipValidation    whether it should be validated or not
+   * @see ampersand-input-view.js#setValue
+   */
+  setValue: function(value, skipValidation) {
+    this.inputValue = value;
     if (!skipValidation && !this.getErrorMessage()) {
       this.shouldValidate = true;
     } else if (skipValidation) {
       this.shouldValidate = false;
     }
   },
-  handleChange: function() {
-    if (this.inputValue && this.changed) {
-      this.shouldValidate = true;
+  /**
+   * Need to change the value empty check to empty arrays instead
+   * @return {String} error message
+   * @see ampersand-input-view.js#getErrorMessage
+   */
+  getErrorMessage: function() {
+    var message = '';
+    if (this.required && this.value.length === 0) {
+      return this.requiredMessage;
     }
-    // for `file` type input fields, this is the only event and we need
-    // to set this.inputValue here again.
-    this.inputValue = this.clean();
+    (this.tests || []).some(function(test) {
+      message = test.call(this, this.value) || '';
+      return message;
+    }, this);
+    return message;
+  },
+  /**
+   * Don't access this.input.value as we don't work on input elements
+   * @see ampersand-input-view.js#beforeSubmit
+   */
+  beforeSubmit: function() {
+    // at the point where we've tried to submit, we want to validate
+    // everything from now on.
+    this.shouldValidate = true;
     this.runTests();
+  },
+  loadFileButtonClicked: function() {
+    dialog.showOpenDialog({
+      properties: ['openFile', 'multiSelections']
+    }, function(filenames) {
+      this.inputValue = filenames || [];
+      this.handleChange();
+    }.bind(this));
   }
 });

src/connect/index.jade

@@ -21,7 +21,9 @@
         - if (!method.enabled) classNames.push('hidden')
         - if (i === 0) classNames.push('active')
         div(class=classNames, id='auth-#{method._id}')
-              
+          
+      hr
+          
       div(data-hook='sslselect-subview')
 
       - for method, i in sslMethods

src/connect/index.js

@@ -95,7 +95,8 @@ var ConnectView = View.extend({
     'change input[name=name]': 'onNameInputChanged',
     'input input': 'onAnyInputChanged',
     'change input': 'onAnyInputChanged',
-    'change select': 'onAnyInputChanged'
+    'change select': 'onAnyInputChanged',
+    'click div.btn': 'onAnyInputChanged'
   },
 
   /**

src/connect/index.less

@@ -139,12 +139,12 @@
       overflow: auto;
     }
     label {
-      width: 32%;
+      width: 35%;
       text-align: right;
       padding: 5px 15px 0 0;
     }
     input, select, .form-item-file {
-      width: 68%;
+      width: 65%;
     }
     .form-item-file {
       input {

src/connect/ssl.js

@@ -39,9 +39,7 @@ var SERVER = {
   fields: [
     new FileReaderView({
       name: 'ssl_ca',
-      type: 'file',
       label: 'Certificate Authority',
-      placeholder: '',
       required: true
     })
   ]
@@ -58,31 +56,23 @@ var ALL = {
   fields: [
     new FileReaderView({
       name: 'ssl_ca',
-      type: 'file',
       label: 'Certificate Authority',
-      placeholder: '',
       required: true
     }),
     new FileReaderView({
       name: 'ssl_private_key',
-      type: 'file',
       label: 'Certificate Key',
-      placeholder: '',
       required: true
     }),
     new FileReaderView({
       name: 'ssl_certificate',
-      type: 'file',
       label: 'Certificate',
-      placeholder: '',
       required: true
     }),
     new InputView({
       template: inputTemplate,
       name: 'ssl_private_key_password',
-      type: 'password',
       label: 'Private Key Password',
-      placeholder: '',
       required: false
     })
   ]