Merge branch 'rs-quick-submit' into 'master'

Add "Quick Submit" JS behavior

This takes the "Command+Enter" (or "Ctrl+Enter") quick-post behavior from the discussion field and expands it to fields throughout the application, most notably the issuable forms (e.g., New Issue, Edit Merge Request).

See merge request !1516

16 files changed, 120 insertions, 20 deletions

diff --git a/CHANGELOG b/CHANGELOG
index 8ab2d9f08da..74d9ff97326 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -37,6 +37,8 @@ v 8.1.0 (unreleased)
   - Use commit status in merge request widget as preffered source of CI status
   - Integrate CI commit and build pages into project pages
   - Move CI services page to project settings area
+  - Add "Quick Submit" behavior to input fields throughout the application. Use
+    Cmd+Enter on Mac and Ctrl+Enter on Windows/Linux.
 
 v 8.0.4
   - Fix Message-ID header to be RFC 2111-compliant to prevent e-mails being dropped (Stan Hu)
diff --git a/app/assets/javascripts/behaviors/quick_submit.js.coffee b/app/assets/javascripts/behaviors/quick_submit.js.coffee
new file mode 100644
index 00000000000..4ec8531d580
--- /dev/null
+++ b/app/assets/javascripts/behaviors/quick_submit.js.coffee
@@ -0,0 +1,29 @@
+# Quick Submit behavior
+#
+# When an input field with the `js-quick-submit` class receives a "Meta+Enter"
+# (Mac) or "Ctrl+Enter" (Linux/Windows) key combination, its parent form is
+# submitted.
+#
+#= require extensions/jquery
+#
+# ### Example Markup
+#
+#   <form action="/foo">
+#     <input type="text" class="js-quick-submit" />
+#     <textarea class="js-quick-submit"></textarea>
+#   </form>
+#
+$(document).on 'keydown.quick_submit', '.js-quick-submit', (e) ->
+  return if (e.originalEvent && e.originalEvent.repeat) || e.repeat
+  return unless e.keyCode == 13 # Enter
+
+  if navigator.userAgent.match(/Macintosh/)
+    return unless (e.metaKey && !e.altKey && !e.ctrlKey && !e.shiftKey)
+  else
+    return unless (e.ctrlKey && !e.altKey && !e.metaKey && !e.shiftKey)
+
+  e.preventDefault()
+
+  $form = $(e.target).closest('form')
+  $form.find('input[type=submit], button[type=submit]').disable()
+  $form.submit()
diff --git a/app/assets/javascripts/behaviors/requires_input.js.coffee b/app/assets/javascripts/behaviors/requires_input.js.coffee
index 8318fe435b3..79d750d1847 100644
--- a/app/assets/javascripts/behaviors/requires_input.js.coffee
+++ b/app/assets/javascripts/behaviors/requires_input.js.coffee
@@ -34,6 +34,5 @@ $.fn.requiresInput = ->
 
   $form.on 'change input', fieldSelector, requireInput
 
-# Triggered on standard document `ready` and on Turbolinks `page:load` events
-$(document).on 'ready page:load', ->
+$ ->
   $('form.js-requires-input').requiresInput()
diff --git a/app/assets/javascripts/notes.js.coffee b/app/assets/javascripts/notes.js.coffee
index 4b9f0d68912..ea75c656bcc 100644
--- a/app/assets/javascripts/notes.js.coffee
+++ b/app/assets/javascripts/notes.js.coffee
@@ -63,12 +63,6 @@ class @Notes
     # fetch notes when tab becomes visible
     $(document).on "visibilitychange", @visibilityChange
 
-    # Chrome doesn't fire keypress or keyup for Command+Enter, so we need keydown.
-    $(document).on 'keydown', '.js-note-text', (e) ->
-      return if e.originalEvent.repeat
-      if e.keyCode == 10 || ((e.metaKey || e.ctrlKey) && e.keyCode == 13)
-        $(@).closest('form').submit()
-
   cleanBinding: ->
     $(document).off "ajax:success", ".js-main-target-form"
     $(document).off "ajax:success", ".js-discussion-note-form"
@@ -82,7 +76,6 @@ class @Notes
     $(document).off "click", ".js-discussion-reply-button"
     $(document).off "click", ".js-add-diff-note-button"
     $(document).off "visibilitychange"
-    $(document).off "keydown", ".js-note-text"
     $(document).off "keyup", ".js-note-text"
     $(document).off "click", ".js-note-target-reopen"
     $(document).off "click", ".js-note-target-close"
diff --git a/app/views/projects/blob/_editor.html.haml b/app/views/projects/blob/_editor.html.haml
index 9c3e1703c89..f1ad0c3c403 100644
--- a/app/views/projects/blob/_editor.html.haml
+++ b/app/views/projects/blob/_editor.html.haml
@@ -11,7 +11,7 @@
       - if current_action?(:new) || current_action?(:create)
         \/
         = text_field_tag 'file_name', params[:file_name], placeholder: "File name",
-          required: true, class: 'form-control new-file-name'
+          required: true, class: 'form-control new-file-name js-quick-submit'
       .pull-right
         = select_tag :encoding, options_for_select([ "base64", "text" ], "text"), class: 'form-control'
 
diff --git a/app/views/projects/blob/new.html.haml b/app/views/projects/blob/new.html.haml
index d7987e24ef3..7975137c37f 100644
--- a/app/views/projects/blob/new.html.haml
+++ b/app/views/projects/blob/new.html.haml
@@ -15,7 +15,7 @@
         = label_tag 'branch', class: 'control-label' do
           Branch
         .col-sm-10
-          = text_field_tag 'new_branch', @ref, class: "form-control"
+          = text_field_tag 'new_branch', @ref, class: "form-control js-quick-submit"
 
     = hidden_field_tag 'content', '', id: 'file-content'
     = render 'projects/commit_button', ref: @ref,
diff --git a/app/views/projects/labels/_form.html.haml b/app/views/projects/labels/_form.html.haml
index 534c545329b..4cf13492e99 100644
--- a/app/views/projects/labels/_form.html.haml
+++ b/app/views/projects/labels/_form.html.haml
@@ -10,7 +10,7 @@
   .form-group
     = f.label :title, class: 'control-label'
     .col-sm-10
-      = f.text_field :title, class: "form-control", required: true
+      = f.text_field :title, class: "form-control js-quick-submit", required: true
   .form-group
     = f.label :color, "Background Color", class: 'control-label'
     .col-sm-10
diff --git a/app/views/projects/milestones/_form.html.haml b/app/views/projects/milestones/_form.html.haml
index 74e9668052d..255ddab479f 100644
--- a/app/views/projects/milestones/_form.html.haml
+++ b/app/views/projects/milestones/_form.html.haml
@@ -16,13 +16,13 @@
       .form-group
         = f.label :title, "Title", class: "control-label"
         .col-sm-10
-          = f.text_field :title, maxlength: 255, class: "form-control", required: true
+          = f.text_field :title, maxlength: 255, class: "form-control js-quick-submit", required: true
           %p.hint Required
       .form-group.milestone-description
         = f.label :description, "Description", class: "control-label"
         .col-sm-10
           = render layout: 'projects/md_preview', locals: { preview_class: "md-preview" } do
-            = render 'projects/zen', f: f, attr: :description, classes: 'description form-control'
+            = render 'projects/zen', f: f, attr: :description, classes: 'description form-control js-quick-submit'
             .hint
               .pull-left Milestones are parsed with #{link_to "GitLab Flavored Markdown", help_page_path("markdown", "markdown"), target: '_blank'}.
               .pull-left Attach files by dragging & dropping or #{link_to "selecting them", '#', class: 'markdown-selector' }.
diff --git a/app/views/projects/notes/_edit_form.html.haml b/app/views/projects/notes/_edit_form.html.haml
index a0e26f9827e..a21c019986a 100644
--- a/app/views/projects/notes/_edit_form.html.haml
+++ b/app/views/projects/notes/_edit_form.html.haml
@@ -2,7 +2,7 @@
   = form_for note, url: namespace_project_note_path(@project.namespace, @project, note), method: :put, remote: true, authenticity_token: true do |f|
     = note_target_fields(note)
     = render layout: 'projects/md_preview', locals: { preview_class: 'md-preview' } do
-      = render 'projects/zen', f: f, attr: :note, classes: 'note_text js-note-text js-task-list-field'
+      = render 'projects/zen', f: f, attr: :note, classes: 'note_text js-note-text js-task-list-field js-quick-submit'
       = render 'projects/notes/hints'
 
     .note-form-actions
diff --git a/app/views/projects/notes/_form.html.haml b/app/views/projects/notes/_form.html.haml
index 512ccd48b38..13dfa0a1bb3 100644
--- a/app/views/projects/notes/_form.html.haml
+++ b/app/views/projects/notes/_form.html.haml
@@ -8,7 +8,7 @@
   = f.hidden_field :noteable_type
 
   = render layout: 'projects/md_preview', locals: { preview_class: "md-preview", referenced_users: true } do
-    = render 'projects/zen', f: f, attr: :note, classes: 'note_text js-note-text'
+    = render 'projects/zen', f: f, attr: :note, classes: 'note_text js-note-text js-quick-submit'
     = render 'projects/notes/hints'
     .error-alert
 
diff --git a/app/views/projects/wikis/_form.html.haml b/app/views/projects/wikis/_form.html.haml
index 05d754adbe5..261d4a92d7d 100644
--- a/app/views/projects/wikis/_form.html.haml
+++ b/app/views/projects/wikis/_form.html.haml
@@ -22,7 +22,7 @@
     = f.label :content, class: 'control-label'
     .col-sm-10
       = render layout: 'projects/md_preview', locals: { preview_class: "md-preview" } do
-        = render 'projects/zen', f: f, attr: :content, classes: 'description form-control'
+        = render 'projects/zen', f: f, attr: :content, classes: 'description form-control js-quick-submit'
         .col-sm-12.hint
           .pull-left Wiki content is parsed with #{link_to "GitLab Flavored Markdown", help_page_path("markdown", "markdown"), target: '_blank'}
           .pull-right Attach files by dragging &amp; dropping or #{link_to "selecting them", '#', class: 'markdown-selector' }.
diff --git a/app/views/shared/_commit_message_container.html.haml b/app/views/shared/_commit_message_container.html.haml
index 5071ff640f1..cc3f1268f8b 100644
--- a/app/views/shared/_commit_message_container.html.haml
+++ b/app/views/shared/_commit_message_container.html.haml
@@ -6,7 +6,7 @@
       .max-width-marker
       = text_area_tag 'commit_message',
           (params[:commit_message] || local_assigns[:text]),
-          class: 'form-control', placeholder: local_assigns[:placeholder],
+          class: 'form-control js-quick-submit', placeholder: local_assigns[:placeholder],
           required: true, rows: (local_assigns[:rows] || 3)
     - if local_assigns[:hint]
       %p.hint
diff --git a/app/views/shared/issuable/_form.html.haml b/app/views/shared/issuable/_form.html.haml
index 33ec726e93c..594e54f404c 100644
--- a/app/views/shared/issuable/_form.html.haml
+++ b/app/views/shared/issuable/_form.html.haml
@@ -10,7 +10,7 @@
     %strong= 'Title *'
   .col-sm-10
     = f.text_field :title, maxlength: 255, autofocus: true, autocomplete: 'off',
-        class: 'form-control pad js-gfm-input', required: true
+        class: 'form-control pad js-gfm-input js-quick-submit', required: true
 
     - if issuable.is_a?(MergeRequest)
       %p.help-block
@@ -26,7 +26,7 @@
 
     = render layout: 'projects/md_preview', locals: { preview_class: "md-preview", referenced_users: true } do
       = render 'projects/zen', f: f, attr: :description,
-                               classes: 'description form-control'
+                               classes: 'description form-control js-quick-submit'
       .col-sm-12.hint
         .pull-left
           Parsed with
diff --git a/spec/javascripts/behaviors/quick_submit_spec.js.coffee b/spec/javascripts/behaviors/quick_submit_spec.js.coffee
new file mode 100644
index 00000000000..09708c12ed4
--- /dev/null
+++ b/spec/javascripts/behaviors/quick_submit_spec.js.coffee
@@ -0,0 +1,70 @@
+#= require behaviors/quick_submit
+
+describe 'Quick Submit behavior', ->
+  fixture.preload('behaviors/quick_submit.html')
+
+  beforeEach ->
+    fixture.load('behaviors/quick_submit.html')
+
+    # Prevent a form submit from moving us off the testing page
+    $('form').submit (e) -> e.preventDefault()
+
+    @spies = {
+      submit: spyOnEvent('form', 'submit')
+    }
+
+  it 'does not respond to other keyCodes', ->
+    $('input').trigger(keydownEvent(keyCode: 32))
+
+    expect(@spies.submit).not.toHaveBeenTriggered()
+
+  it 'does not respond to Enter alone', ->
+    $('input').trigger(keydownEvent(ctrlKey: false, metaKey: false))
+
+    expect(@spies.submit).not.toHaveBeenTriggered()
+
+  it 'does not respond to repeated events', ->
+    $('input').trigger(keydownEvent(repeat: true))
+
+    expect(@spies.submit).not.toHaveBeenTriggered()
+
+  it 'disables submit buttons', ->
+    $('textarea').trigger(keydownEvent())
+
+    expect($('input[type=submit]')).toBeDisabled()
+    expect($('button[type=submit]')).toBeDisabled()
+
+  # We cannot stub `navigator.userAgent` for CI's `rake teaspoon` task, so we'll
+  # only run the tests that apply to the current platform
+  if navigator.userAgent.match(/Macintosh/)
+    it 'responds to Meta+Enter', ->
+      $('input').trigger(keydownEvent())
+
+      expect(@spies.submit).toHaveBeenTriggered()
+
+    it 'excludes other modifier keys', ->
+      $('input').trigger(keydownEvent(altKey: true))
+      $('input').trigger(keydownEvent(ctrlKey: true))
+      $('input').trigger(keydownEvent(shiftKey: true))
+
+      expect(@spies.submit).not.toHaveBeenTriggered()
+  else
+    it 'responds to Ctrl+Enter', ->
+      $('input').trigger(keydownEvent())
+
+      expect(@spies.submit).toHaveBeenTriggered()
+
+    it 'excludes other modifier keys', ->
+      $('input').trigger(keydownEvent(altKey: true))
+      $('input').trigger(keydownEvent(metaKey: true))
+      $('input').trigger(keydownEvent(shiftKey: true))
+
+      expect(@spies.submit).not.toHaveBeenTriggered()
+
+  keydownEvent = (options) ->
+    if navigator.userAgent.match(/Macintosh/)
+      defaults = { keyCode: 13, metaKey: true }
+    else
+      defaults = { keyCode: 13, ctrlKey: true }
+
+    $.Event('keydown', $.extend({}, defaults, options))
diff --git a/spec/javascripts/fixtures/behaviors/quick_submit.html.haml b/spec/javascripts/fixtures/behaviors/quick_submit.html.haml
new file mode 100644
index 00000000000..b80a28a33ea
--- /dev/null
+++ b/spec/javascripts/fixtures/behaviors/quick_submit.html.haml
@@ -0,0 +1,6 @@
+%form{ action: '/foo' }
+  %input.js-quick-submit{ type: 'text' }
+  %textarea.js-quick-submit
+
+  %input{ type: 'submit'} Submit
+  %button.btn{ type: 'submit' } Submit
diff --git a/spec/javascripts/spec_helper.coffee b/spec/javascripts/spec_helper.coffee
index 47b41dd2c81..90b02a6aec5 100644
--- a/spec/javascripts/spec_helper.coffee
+++ b/spec/javascripts/spec_helper.coffee
@@ -9,6 +9,7 @@
 # require the specific files that are being used in the spec that tests them.
 
 #= require jquery
+#= require jquery.turbolinks
 #= require bootstrap
 #= require underscore