adds keyboard shortcuts for run now and save (#628)

* adds keyboard shortcuts for `run now` and `save`

* adds deps for unit test

* using e-keyboard test helper

* minor tweaks

app/components/main-gist.js

@@ -4,10 +4,11 @@ import ColumnsMixin from "../mixins/columns";
 import FilesMixin from "../mixins/files";
 import TestFilesMixin from "../mixins/test-files";
 import AppBuilderMixin from "../mixins/app-builder";
+import { keyDown, EKMixin } from 'ember-keyboard';
 
-const { inject, computed, run } = Ember;
+const { inject, computed, run, on } = Ember;
 
-export default Ember.Component.extend(AppBuilderMixin, ColumnsMixin, FilesMixin, TestFilesMixin, {
+export default Ember.Component.extend(AppBuilderMixin, ColumnsMixin, FilesMixin, TestFilesMixin, EKMixin, {
   emberCli: inject.service(),
   dependencyResolver: inject.service(),
   notify: inject.service(),
@@ -24,9 +25,24 @@ export default Ember.Component.extend(AppBuilderMixin, ColumnsMixin, FilesMixin,
       isFastBoot: this.get('fastboot.isFastBoot')
     }));
     this.createColumns();
-    this.set('activeEditorCol', '1');
+    this.setProperties({
+      activeEditorCol: '1',
+      keyboardActivated: true
+    });
   },
 
+  // eslint-disable-next-line ember/no-on-calls-in-components
+  onReloadCommand: on(keyDown('Enter+cmd'), function () {
+    this.send('runNow');
+  }),
+
+  // eslint-disable-next-line ember/no-on-calls-in-components
+  onSaveCommand: on(keyDown('cmd+KeyS'), function (event) {
+    this.saveGist(this.get('model'));
+    this.send('runNow');
+    event.preventDefault();
+  }),
+
   /**
    * Output from the build, sets the `code` attr on the component
    * @type {String}

app/routes/gist.js

@@ -49,18 +49,21 @@ export default Ember.Route.extend({
   actions: {
     saveGist(gist) {
       var newGist = gist.get('isNew');
+      let controller = this.get('controller');
       if (!newGist && gist.get('ownerLogin') !== this.get('session.currentUser.login')) {
         this.send('fork', gist);
         return;
       }
+      controller.set('isGistSaving', true);
       gist.save().then(() => {
         this.get('notify').info(`Saved to Gist ${gist.get('id')} on Github`);
         this.send('setSaved');
         if(newGist) {
           gist.set('gistId', gist.get('id'));
           this.transitionTo('gist.edit', gist);
         }
-      }).catch((this.catchSaveError.bind(this)));
+      }).catch((this.catchSaveError.bind(this)))
+      .finally(() => controller.set('isGistSaving', false));
     },
 
     deleteGist(gist) {

app/templates/components/gist-header.hbs

@@ -2,7 +2,7 @@
   <div class="row toolbar visible-toolbar">
     <div class="title">
       {{title-input value=model.description titleChanged=(action this.attrs.titleChanged)}}
-      {{saved-state-indicator model=model unsaved=unsaved}}
+      {{saved-state-indicator model=model unsaved=unsaved isGistSaving=isGistSaving}}
     </div>
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsed-menu" aria-expanded="false">

app/templates/components/main-gist.hbs

@@ -1,6 +1,7 @@
 {{gist-header model=model
               session=session
               unsaved=unsaved
+              isGistSaving=isGistSaving
               activeEditorCol=activeEditorCol
               activeFile=activeFile
               isRevision=isRevision

app/templates/components/saved-state-indicator.hbs

@@ -1,4 +1,6 @@
-{{#if unsaved}}
+{{#if isGistSaving}}
+  <span>Saving...</span>
+{{else if unsaved}}
   <span class="test-unsaved-indicator">Unsaved</span>
 {{else}}
   <span>{{model.files.length}} files</span>

app/templates/gist.hbs

@@ -7,6 +7,8 @@
             route=route
             applicationUrl=applicationUrl
             unsaved=unsaved
+            isGistSaving=isGistSaving
+            saveGist=(route-action "saveGist")
             isRevision=isRevision
             transitionQueryParams=(action "transitionQueryParams")
             titleUpdated=(route-action "titleUpdated")

package.json

@@ -71,6 +71,7 @@
     "ember-export-application-global": "^2.0.0",
     "ember-git-version": "~0.1.2",
     "ember-inflector": "~2.0.0",
+    "ember-keyboard": "^3.0.2",
     "ember-load": "~0.0.12",
     "ember-load-initializers": "~1.0.0",
     "ember-lodash": "^4.18.0",

tests/acceptance/code-comment-test.js

@@ -21,8 +21,7 @@ test('checks javascript comment option', async function(assert) {
 
   await runGist(files);
 
-  let textboxNode = 'textarea:eq(1)';
-  textboxNode = '.CodeMirror textarea';
+  let textboxNode = '.CodeMirror textarea';
   await click(textboxNode);
 
   await triggerEvent(textboxNode, 'keydown', {

tests/acceptance/run-now-test.js

@@ -3,14 +3,14 @@ import moduleForAcceptance from 'ember-twiddle/tests/helpers/module-for-acceptan
 
 moduleForAcceptance('Acceptance | run now');
 
-test('Able to reload the Twiddle', function(assert) {
+const files = [
+  {
+    filename: "application.template.hbs",
+    content: `{{input value="initial value"}}`
+  }
+];
 
-  const files = [
-    {
-      filename: "application.template.hbs",
-      content: `{{input value="initial value"}}`
-    }
-  ];
+test('Able to reload the Twiddle', function(assert) {
 
   runGist(files);
 
@@ -34,3 +34,21 @@ test('Able to reload the Twiddle', function(assert) {
     assert.equal(outputPane().find('input').val(), 'initial value');
   });
 });
+
+test('Reload the Twiddle on command (Cmd+Enter)', async(assert) => {
+
+  runGist(files);
+
+  await click("#live-reload");
+  assert.equal(outputPane().find('input').val(), 'initial value');
+
+  await outputPane().find('input').val('new value');
+  assert.equal(outputPane().find('input').val(), 'new value');
+
+  await keyDown('Enter+cmd'); // eslint-disable-line no-undef
+
+  await waitForUnloadedIFrame();
+  await waitForLoadedIFrame();
+
+  assert.equal(outputPane().find('input').val(), 'initial value');
+});

tests/acceptance/save-test.js

@@ -75,3 +75,18 @@ test('can save a gist without an id', function(assert) {
     assert.equal(find('.test-unsaved-indicator').length, 0, "No unsaved indicator shown");
   });
 });
+
+test('gist save on cmd+s shortcut', async function(assert) {
+  // set owner of gist as currently logged in user
+  stubValidSession(this.application, {
+    currentUser: { login: "gokatz" },
+    "github-oauth2": {}
+  });
+
+  await visit('/');
+  assert.equal(find('.gist-link').length, 0, "No gist link is displayed for unsaved twiddle");
+
+  await keyDown('cmd+KeyS'); // eslint-disable-line no-undef
+
+  assert.equal(find('.gist-link').length, 1, "Gist link is shown for saved twiddle");
+});

tests/helpers/start-app.js

@@ -2,6 +2,7 @@ import Application from '../../app';
 import config from '../../config/environment';
 import { run } from '@ember/runloop';
 import { assign } from '@ember/polyfills';
+import keyboardRegisterTestHelpers from './ember-keyboard/register-test-helpers';
 
 export default function startApp(attrs) {
   let application;
@@ -12,6 +13,7 @@ export default function startApp(attrs) {
   run(() => {
     application = Application.create(attributes);
     application.setupForTesting();
+    keyboardRegisterTestHelpers();
     application.injectTestHelpers();
   });
 

tests/unit/components/main-gist-test.js

@@ -6,7 +6,8 @@ moduleForComponent('main-gist', 'Unit | Component | main gist', {
     'service:ember-cli',
     'service:dependency-resolver',
     'service:notify',
-    'service:fastboot'
+    'service:fastboot',
+    'service:keyboard'
   ]
 });
 

yarn.lock

@@ -3771,6 +3771,12 @@ ember-inflector@~2.0.0:
   dependencies:
     ember-cli-babel "^6.0.0"
 
+ember-keyboard@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/ember-keyboard/-/ember-keyboard-3.0.2.tgz#839ab5c32a6b3d3ce0b735728c1e1bc362107464"
+  dependencies:
+    ember-cli-babel "^6.6.0"
+
 ember-load-initializers@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/ember-load-initializers/-/ember-load-initializers-1.0.0.tgz#4919eaf06f6dfeca7e134633d8c05a6c9921e6e7"