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

Contextually teach the user about the quick submit hotkey

When a user tabs to the submit button (i.e., the "wrong" way), we
display a tooltip with the quick submit hotkey so they can learn the
"right" way.

See merge request !2802

22 files changed, 71 insertions, 45 deletions

diff --git a/app/assets/javascripts/behaviors/quick_submit.js.coffee b/app/assets/javascripts/behaviors/quick_submit.js.coffee
index 4ec8531d580..61c2e4f698c 100644
--- a/app/assets/javascripts/behaviors/quick_submit.js.coffee
+++ b/app/assets/javascripts/behaviors/quick_submit.js.coffee
@@ -1,23 +1,30 @@
 # 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.
+# When a child field of a form with a `js-quick-submit` class receives a
+# "Meta+Enter" (Mac) or "Ctrl+Enter" (Linux/Windows) key combination, the 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 action="/foo" class="js-quick-submit">
+#     <input type="text" />
+#     <textarea></textarea>
+#     <input type="submit" value="Submit" />
 #   </form>
 #
+isMac = ->
+  navigator.userAgent.match(/Macintosh/)
+
+keyCodeIs = (e, keyCode) ->
+  return false if (e.originalEvent && e.originalEvent.repeat) || e.repeat
+  return e.keyCode == keyCode
+
 $(document).on 'keydown.quick_submit', '.js-quick-submit', (e) ->
-  return if (e.originalEvent && e.originalEvent.repeat) || e.repeat
-  return unless e.keyCode == 13 # Enter
+  return unless keyCodeIs(e, 13) # Enter
 
-  if navigator.userAgent.match(/Macintosh/)
+  if isMac()
     return unless (e.metaKey && !e.altKey && !e.ctrlKey && !e.shiftKey)
   else
     return unless (e.ctrlKey && !e.altKey && !e.metaKey && !e.shiftKey)
@@ -27,3 +34,22 @@ $(document).on 'keydown.quick_submit', '.js-quick-submit', (e) ->
   $form = $(e.target).closest('form')
   $form.find('input[type=submit], button[type=submit]').disable()
   $form.submit()
+
+# If the user tabs to a submit button on a `js-quick-submit` form, display a
+# tooltip to let them know they could've used the hotkey
+$(document).on 'keyup.quick_submit', '.js-quick-submit input[type=submit], .js-quick-submit button[type=submit]', (e) ->
+  return unless keyCodeIs(e, 9) # Tab
+
+  if isMac()
+    title = "You can also press &#8984;-Enter"
+  else
+    title = "You can also press Ctrl-Enter"
+
+  $this = $(@)
+  $this.tooltip(
+    container: 'body'
+    html: 'true'
+    placement: 'auto top'
+    title: title
+    trigger: 'manual'
+  ).tooltip('show').one('blur', -> $this.tooltip('hide'))
diff --git a/app/views/abuse_reports/new.html.haml b/app/views/abuse_reports/new.html.haml
index f125ecf7be5..3bc1b24b5e2 100644
--- a/app/views/abuse_reports/new.html.haml
+++ b/app/views/abuse_reports/new.html.haml
@@ -2,7 +2,7 @@
 %h3.page-title Report abuse
 %p Please use this form to report users who create spam issues, comments or behave inappropriately.
 %hr
-= form_for @abuse_report, html: { class: 'form-horizontal js-requires-input'} do |f|
+= form_for @abuse_report, html: { class: 'form-horizontal js-quick-submit js-requires-input'} do |f|
   = f.hidden_field :user_id
   - if @abuse_report.errors.any?
     .alert.alert-danger
@@ -16,7 +16,7 @@
   .form-group
     = f.label :message, class: 'control-label'
     .col-sm-10
-      = f.text_area :message, class: "form-control js-quick-submit", rows: 2, required: true, value: sanitize(@ref_url)
+      = f.text_area :message, class: "form-control", rows: 2, required: true, value: sanitize(@ref_url)
       .help-block
         Explain the problem with this user. If appropriate, provide a link to the relevant issue or comment.
 
diff --git a/app/views/admin/broadcast_messages/_form.html.haml b/app/views/admin/broadcast_messages/_form.html.haml
index 5c9403fa0c2..b748460a9f7 100644
--- a/app/views/admin/broadcast_messages/_form.html.haml
+++ b/app/views/admin/broadcast_messages/_form.html.haml
@@ -3,7 +3,7 @@
   .js-broadcast-message-preview
     = render_broadcast_message(@broadcast_message.message.presence || "Your message here")
 
-= form_for [:admin, @broadcast_message], html: { class: 'broadcast-message-form form-horizontal js-requires-input'} do |f|
+= form_for [:admin, @broadcast_message], html: { class: 'broadcast-message-form form-horizontal js-quick-submit js-requires-input'} do |f|
   -if @broadcast_message.errors.any?
     .alert.alert-danger
       - @broadcast_message.errors.full_messages.each do |msg|
@@ -11,7 +11,7 @@
   .form-group
     = f.label :message, class: 'control-label'
     .col-sm-10
-      = f.text_area :message, class: "form-control js-quick-submit js-autosize",
+      = f.text_area :message, class: "form-control js-autosize",
         required: true,
         data: { preview_path: preview_admin_broadcast_messages_path }
   .form-group.js-toggle-colors-container
diff --git a/app/views/groups/milestones/new.html.haml b/app/views/groups/milestones/new.html.haml
index 3894a0ece74..a8e1ed77da9 100644
--- a/app/views/groups/milestones/new.html.haml
+++ b/app/views/groups/milestones/new.html.haml
@@ -8,18 +8,18 @@
   This will create milestone in every selected project
 %hr
 
-= form_for @milestone, url: group_milestones_path(@group), html: { class: 'form-horizontal milestone-form gfm-form js-requires-input' }  do |f|
+= form_for @milestone, url: group_milestones_path(@group), html: { class: 'form-horizontal milestone-form gfm-form js-quick-submit js-requires-input' }  do |f|
   .row
     .col-md-6
       .form-group
         = f.label :title, "Title", class: "control-label"
         .col-sm-10
-          = f.text_field :title, maxlength: 255, class: "form-control js-quick-submit", required: true, autofocus: true
+          = f.text_field :title, maxlength: 255, class: "form-control", required: true, autofocus: true
       .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 js-quick-submit'
+            = render 'projects/zen', f: f, attr: :description, classes: 'description form-control'
             .clearfix
             .error-alert
       .form-group
diff --git a/app/views/projects/blob/_editor.html.haml b/app/views/projects/blob/_editor.html.haml
index 10b02813733..f8b6fa253c4 100644
--- a/app/views/projects/blob/_editor.html.haml
+++ b/app/views/projects/blob/_editor.html.haml
@@ -10,7 +10,7 @@
       %span.editor-file-name
         \/
       = text_field_tag 'file_name', params[:file_name], placeholder: "File name",
-        required: true, class: 'form-control new-file-name js-quick-submit'
+        required: true, class: 'form-control new-file-name'
 
     .pull-right
       = select_tag :encoding, options_for_select([ "base64", "text" ], "text"), class: 'select2'
diff --git a/app/views/projects/blob/_new_dir.html.haml b/app/views/projects/blob/_new_dir.html.haml
index 084608bbba3..84694203d7d 100644
--- a/app/views/projects/blob/_new_dir.html.haml
+++ b/app/views/projects/blob/_new_dir.html.haml
@@ -5,7 +5,7 @@
         %a.close{href: "#", "data-dismiss" => "modal"} ×
         %h3.page-title Create New Directory
       .modal-body
-        = form_tag namespace_project_create_dir_path(@project.namespace, @project, @id), method: :post, remote: false, class: 'form-horizontal js-create-dir-form js-requires-input' do
+        = form_tag namespace_project_create_dir_path(@project.namespace, @project, @id), method: :post, remote: false, class: 'form-horizontal js-create-dir-form js-quick-submit js-requires-input' do
           .form-group
             = label_tag :dir_name, 'Directory name', class: 'control-label'
             .col-sm-10
diff --git a/app/views/projects/blob/_remove.html.haml b/app/views/projects/blob/_remove.html.haml
index 1cf19a7d3db..2e1f32fd15e 100644
--- a/app/views/projects/blob/_remove.html.haml
+++ b/app/views/projects/blob/_remove.html.haml
@@ -6,7 +6,7 @@
         %h3.page-title Delete #{@blob.name}
 
       .modal-body
-        = form_tag namespace_project_blob_path(@project.namespace, @project, @id), method: :delete, class: 'form-horizontal js-replace-blob-form js-requires-input' do
+        = form_tag namespace_project_blob_path(@project.namespace, @project, @id), method: :delete, class: 'form-horizontal js-replace-blob-form js-quick-submit js-requires-input' do
           = render 'shared/new_commit_form', placeholder: "Delete #{@blob.name}"
 
           .form-group
diff --git a/app/views/projects/blob/_upload.html.haml b/app/views/projects/blob/_upload.html.haml
index 676924dc6ca..b1f50eb5f34 100644
--- a/app/views/projects/blob/_upload.html.haml
+++ b/app/views/projects/blob/_upload.html.haml
@@ -5,7 +5,7 @@
         %a.close{href: "#", "data-dismiss" => "modal"} ×
         %h3.page-title #{title}
       .modal-body
-        = form_tag form_path, method: method, class: 'js-upload-blob-form form-horizontal' do
+        = form_tag form_path, method: method, class: 'js-quick-submit js-upload-blob-form form-horizontal' do
           .dropzone
             .dropzone-previews.blob-upload-dropzone-previews
               %p.dz-message.light
diff --git a/app/views/projects/blob/edit.html.haml b/app/views/projects/blob/edit.html.haml
index a279e6eda55..effcce5a1c4 100644
--- a/app/views/projects/blob/edit.html.haml
+++ b/app/views/projects/blob/edit.html.haml
@@ -13,7 +13,7 @@
         = icon('eye')
         = editing_preview_title(@blob.name)
 
-  = form_tag(namespace_project_update_blob_path(@project.namespace, @project, @id), method: :put, class: 'form-horizontal js-requires-input js-edit-blob-form') do
+  = form_tag(namespace_project_update_blob_path(@project.namespace, @project, @id), method: :put, class: 'form-horizontal js-quick-submit js-requires-input js-edit-blob-form') do
     = render 'projects/blob/editor', ref: @ref, path: @path, blob_data: @blob.data
     = render 'shared/new_commit_form', placeholder: "Update #{@blob.name}"
 
diff --git a/app/views/projects/blob/new.html.haml b/app/views/projects/blob/new.html.haml
index 167fa615182..1dd2b5c0af7 100644
--- a/app/views/projects/blob/new.html.haml
+++ b/app/views/projects/blob/new.html.haml
@@ -5,7 +5,7 @@
   New File
 
 .file-editor
-  = form_tag(namespace_project_create_blob_path(@project.namespace, @project, @id), method: :post, class: 'form-horizontal js-new-blob-form js-requires-input') do
+  = form_tag(namespace_project_create_blob_path(@project.namespace, @project, @id), method: :post, class: 'form-horizontal js-new-blob-form js-quick-submit js-requires-input') do
     = render 'projects/blob/editor', ref: @ref
     = render 'shared/new_commit_form', placeholder: "Add new file"
 
diff --git a/app/views/projects/issues/_form.html.haml b/app/views/projects/issues/_form.html.haml
index 6588d9bdbe1..33c48199ba5 100644
--- a/app/views/projects/issues/_form.html.haml
+++ b/app/views/projects/issues/_form.html.haml
@@ -1,4 +1,4 @@
-= form_for [@project.namespace.becomes(Namespace), @project, @issue], html: { class: 'form-horizontal issue-form gfm-form js-requires-input' } do |f|
+= form_for [@project.namespace.becomes(Namespace), @project, @issue], html: { class: 'form-horizontal issue-form gfm-form js-quick-submit js-requires-input' } do |f|
   = render 'shared/issuable/form', f: f, issuable: @issue
 
 :javascript
diff --git a/app/views/projects/labels/_form.html.haml b/app/views/projects/labels/_form.html.haml
index d63d3a3ec20..be7a0bb5628 100644
--- a/app/views/projects/labels/_form.html.haml
+++ b/app/views/projects/labels/_form.html.haml
@@ -1,4 +1,4 @@
-= form_for [@project.namespace.becomes(Namespace), @project, @label], html: { class: 'form-horizontal label-form js-requires-input' } do |f|
+= form_for [@project.namespace.becomes(Namespace), @project, @label], html: { class: 'form-horizontal label-form js-quick-submit js-requires-input' } do |f|
   -if @label.errors.any?
     .row
       .col-sm-offset-2.col-sm-10
@@ -10,7 +10,7 @@
   .form-group
     = f.label :title, class: 'control-label'
     .col-sm-10
-      = f.text_field :title, class: "form-control js-quick-submit", required: true, autofocus: true
+      = f.text_field :title, class: "form-control", required: true, autofocus: true
   .form-group
     = f.label :description, class: 'control-label'
     .col-sm-10
diff --git a/app/views/projects/merge_requests/widget/open/_accept.html.haml b/app/views/projects/merge_requests/widget/open/_accept.html.haml
index d9a1730a8bc..807833741af 100644
--- a/app/views/projects/merge_requests/widget/open/_accept.html.haml
+++ b/app/views/projects/merge_requests/widget/open/_accept.html.haml
@@ -1,6 +1,6 @@
 - status_class = @ci_commit ? " ci-#{@ci_commit.status}" : nil
 
-= form_for [:merge, @project.namespace.becomes(Namespace), @project, @merge_request], remote: true, method: :post, html: { class: 'accept-mr-form js-requires-input' } do |f|
+= form_for [:merge, @project.namespace.becomes(Namespace), @project, @merge_request], remote: true, method: :post, html: { class: 'accept-mr-form js-quick-submit js-requires-input' } do |f|
   = hidden_field_tag :authenticity_token, form_authenticity_token
   .accept-merge-holder.clearfix.js-toggle-container
     .clearfix
diff --git a/app/views/projects/milestones/_form.html.haml b/app/views/projects/milestones/_form.html.haml
index 39aa2437e18..23f2bca7baf 100644
--- a/app/views/projects/milestones/_form.html.haml
+++ b/app/views/projects/milestones/_form.html.haml
@@ -1,4 +1,4 @@
-= form_for [@project.namespace.becomes(Namespace), @project, @milestone], html: {class: 'form-horizontal milestone-form gfm-form js-requires-input'}  do |f|
+= form_for [@project.namespace.becomes(Namespace), @project, @milestone], html: {class: 'form-horizontal milestone-form gfm-form js-quick-submit js-requires-input'}  do |f|
   -if @milestone.errors.any?
     .alert.alert-danger
       %ul
@@ -9,12 +9,12 @@
       .form-group
         = f.label :title, "Title", class: "control-label"
         .col-sm-10
-          = f.text_field :title, maxlength: 255, class: "form-control js-quick-submit", required: true, autofocus: true
+          = f.text_field :title, maxlength: 255, class: "form-control", required: true, autofocus: true
       .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 js-quick-submit'
+            = render 'projects/zen', f: f, attr: :description, classes: 'description form-control'
             = render 'projects/notes/hints'
           .clearfix
           .error-alert
diff --git a/app/views/projects/notes/_edit_form.html.haml b/app/views/projects/notes/_edit_form.html.haml
index 5d78652befa..b5f076088c7 100644
--- a/app/views/projects/notes/_edit_form.html.haml
+++ b/app/views/projects/notes/_edit_form.html.haml
@@ -1,8 +1,8 @@
 .note-edit-form
-  = form_for note, url: namespace_project_note_path(@project.namespace, @project, note), method: :put, remote: true, authenticity_token: true do |f|
+  = form_for note, url: namespace_project_note_path(@project.namespace, @project, note), method: :put, remote: true, authenticity_token: true, class: 'js-quick-submit' 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 js-quick-submit'
+      = render 'projects/zen', f: f, attr: :note, classes: 'note_text js-note-text js-task-list-field'
       = 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 f10a4145d62..09740d8ea12 100644
--- a/app/views/projects/notes/_form.html.haml
+++ b/app/views/projects/notes/_form.html.haml
@@ -1,4 +1,4 @@
-= form_for [@project.namespace.becomes(Namespace), @project, @note], remote: true, html: { :'data-type' => 'json', multipart: true, id: nil, class: "new_note js-new-note-form common-note-form gfm-form" }, authenticity_token: true do |f|
+= form_for [@project.namespace.becomes(Namespace), @project, @note], remote: true, html: { :'data-type' => 'json', multipart: true, id: nil, class: "new_note js-new-note-form js-quick-submit common-note-form gfm-form" }, authenticity_token: true do |f|
   = hidden_field_tag :view, diff_view
   = hidden_field_tag :line_type
   = note_target_fields(@note)
@@ -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 js-quick-submit'
+    = render 'projects/zen', f: f, attr: :note, classes: 'note_text js-note-text'
     = render 'projects/notes/hints'
     .error-alert
 
diff --git a/app/views/projects/releases/edit.html.haml b/app/views/projects/releases/edit.html.haml
index bc80f2f29ad..c4a3f06ee06 100644
--- a/app/views/projects/releases/edit.html.haml
+++ b/app/views/projects/releases/edit.html.haml
@@ -9,9 +9,9 @@
       %strong #{@tag.name}
 
 .prepend-top-default
-  = form_for(@release, method: :put, url: namespace_project_tag_release_path(@project.namespace, @project, @tag.name), html: { class: 'form-horizontal gfm-form release-form' }) do |f|
+  = form_for(@release, method: :put, url: namespace_project_tag_release_path(@project.namespace, @project, @tag.name), html: { class: 'form-horizontal gfm-form release-form js-quick-submit' }) do |f|
     = render layout: 'projects/md_preview', locals: { preview_class: "md-preview", referenced_users: true } do
-      = render 'projects/zen', f: f, attr: :description, classes: 'description js-quick-submit form-control'
+      = render 'projects/zen', f: f, attr: :description, classes: 'description form-control'
       = render 'projects/notes/hints'
       .error-alert
       .form-actions.prepend-top-default
diff --git a/app/views/projects/tags/new.html.haml b/app/views/projects/tags/new.html.haml
index 3a2f75fecaa..77c7c4d23de 100644
--- a/app/views/projects/tags/new.html.haml
+++ b/app/views/projects/tags/new.html.haml
@@ -10,7 +10,7 @@
   New Tag
 %hr
 
-= form_tag namespace_project_tags_path, method: :post, id: "new-tag-form", class: "form-horizontal gfm-form tag-form js-requires-input" do
+= form_tag namespace_project_tags_path, method: :post, id: "new-tag-form", class: "form-horizontal gfm-form tag-form js-quick-submit js-requires-input" do
   .form-group
     = label_tag :tag_name, nil, class: 'control-label'
     .col-sm-10
@@ -30,7 +30,7 @@
     = label_tag :release_description, 'Release notes', class: 'control-label'
     .col-sm-10
       = render layout: 'projects/md_preview', locals: { preview_class: "md-preview", referenced_users: true } do
-        = render 'projects/zen', attr: :release_description, classes: 'description js-quick-submit form-control'
+        = render 'projects/zen', attr: :release_description, classes: 'description form-control'
         = render 'projects/notes/hints'
         .help-block Optionally, add release notes to the tag. They will be stored in the GitLab database and displayed on the tags page.
   .form-actions
diff --git a/app/views/projects/wikis/_form.html.haml b/app/views/projects/wikis/_form.html.haml
index 1d257818dcd..f0d1932e23c 100644
--- a/app/views/projects/wikis/_form.html.haml
+++ b/app/views/projects/wikis/_form.html.haml
@@ -1,4 +1,4 @@
-= form_for [@project.namespace.becomes(Namespace), @project, @page], method: @page.persisted? ? :put : :post, html: { class: 'form-horizontal wiki-form gfm-form prepend-top-default' } do |f|
+= form_for [@project.namespace.becomes(Namespace), @project, @page], method: @page.persisted? ? :put : :post, html: { class: 'form-horizontal wiki-form gfm-form prepend-top-default js-quick-submit' } do |f|
   -if @page.errors.any?
     #error_explanation
       .alert.alert-danger
@@ -15,7 +15,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 js-quick-submit'
+        = render 'projects/zen', f: f, attr: :content, classes: 'description form-control'
         = render 'projects/notes/hints'
 
       .clearfix
diff --git a/app/views/shared/_commit_message_container.html.haml b/app/views/shared/_commit_message_container.html.haml
index 7c57924277e..7afbaeddee8 100644
--- a/app/views/shared/_commit_message_container.html.haml
+++ b/app/views/shared/_commit_message_container.html.haml
@@ -7,7 +7,7 @@
       .max-width-marker
       = text_area_tag 'commit_message',
           (params[:commit_message] || local_assigns[:text]),
-          class: 'form-control js-commit-message js-quick-submit', placeholder: local_assigns[:placeholder],
+          class: 'form-control js-commit-message', placeholder: local_assigns[:placeholder],
           required: true, rows: (local_assigns[:rows] || 3),
           id: "commit_message-#{nonce}"
     - if local_assigns[:hint]
diff --git a/app/views/shared/issuable/_form.html.haml b/app/views/shared/issuable/_form.html.haml
index 90dc0062481..d5a4aad05d9 100644
--- a/app/views/shared/issuable/_form.html.haml
+++ b/app/views/shared/issuable/_form.html.haml
@@ -9,7 +9,7 @@
   = f.label :title, class: 'control-label'
   .col-sm-10
     = f.text_field :title, maxlength: 255, autofocus: true, autocomplete: 'off',
-        class: 'form-control pad js-gfm-input js-quick-submit', required: true
+        class: 'form-control pad js-gfm-input', required: true
 
     - if issuable.is_a?(MergeRequest)
       %p.help-block
@@ -25,7 +25,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 js-quick-submit'
+                               classes: 'description form-control'
       = render 'projects/notes/hints'
       .clearfix
       .error-alert
diff --git a/spec/javascripts/fixtures/behaviors/quick_submit.html.haml b/spec/javascripts/fixtures/behaviors/quick_submit.html.haml
index b80a28a33ea..e3788bee813 100644
--- a/spec/javascripts/fixtures/behaviors/quick_submit.html.haml
+++ b/spec/javascripts/fixtures/behaviors/quick_submit.html.haml
@@ -1,6 +1,6 @@
-%form{ action: '/foo' }
-  %input.js-quick-submit{ type: 'text' }
-  %textarea.js-quick-submit
+%form.js-quick-submit{ action: '/foo' }
+  %input{ type: 'text' }
+  %textarea
 
   %input{ type: 'submit'} Submit
   %button.btn{ type: 'submit' } Submit