Merge branch 'fix-docs-help-shortcut' into 'master'

Fix shortcut links on help page

Closes #41097

See merge request gitlab-org/gitlab-ce!16001

6 files changed, 53 insertions, 4 deletions

diff --git a/app/assets/javascripts/docs/docs_bundle.js b/app/assets/javascripts/docs/docs_bundle.js
new file mode 100644
index 00000000000..a32bd6d0fc7
--- /dev/null
+++ b/app/assets/javascripts/docs/docs_bundle.js
@@ -0,0 +1,13 @@
+import Mousetrap from 'mousetrap';
+
+function addMousetrapClick(el, key) {
+  el.addEventListener('click', () => Mousetrap.trigger(key));
+}
+
+function domContentLoaded() {
+  addMousetrapClick(document.querySelector('.js-trigger-shortcut'), '?');
+  addMousetrapClick(document.querySelector('.js-trigger-search-bar'), 's');
+}
+
+document.addEventListener('DOMContentLoaded', domContentLoaded);
+
diff --git a/app/assets/javascripts/shortcuts.js b/app/assets/javascripts/shortcuts.js
index 130730b1700..d2f0d7410da 100644
--- a/app/assets/javascripts/shortcuts.js
+++ b/app/assets/javascripts/shortcuts.js
@@ -51,7 +51,10 @@ export default class Shortcuts {
   }
 
   onToggleHelp(e) {
-    e.preventDefault();
+    if (e.preventDefault) {
+      e.preventDefault();
+    }
+
     Shortcuts.toggleHelp(this.enabledHelp);
   }
 
@@ -112,6 +115,9 @@ export default class Shortcuts {
 
   static focusSearch(e) {
     $('#search').focus();
-    e.preventDefault();
+
+    if (e.preventDefault) {
+      e.preventDefault();
+    }
   }
 }
diff --git a/app/views/help/index.html.haml b/app/views/help/index.html.haml
index 021de4f0caf..b8692009225 100644
--- a/app/views/help/index.html.haml
+++ b/app/views/help/index.html.haml
@@ -1,3 +1,5 @@
+= webpack_bundle_tag 'docs'
+
 %div
 - if current_application_settings.help_page_text.present?
   = markdown_field(current_application_settings, :help_page_text)
@@ -37,8 +39,12 @@
         Quick help
       %ul.well-list
         %li= link_to 'See our website for getting help', support_url
-        %li= link_to 'Use the search bar on the top of this page', '#', onclick: 'Shortcuts.focusSearch(event)'
-        %li= link_to 'Use shortcuts', '#', onclick: 'Shortcuts.toggleHelp()'
+        %li
+          %button.btn-blank.btn-link.js-trigger-search-bar{ type: 'button' }
+            Use the search bar on the top of this page
+        %li
+          %button.btn-blank.btn-link.js-trigger-shortcut{ type: 'button' }
+            Use shortcuts
         - unless current_application_settings.help_page_hide_commercial_content?
           %li= link_to 'Get a support subscription', 'https://about.gitlab.com/pricing/'
           %li= link_to 'Compare GitLab editions', 'https://about.gitlab.com/features/#compare'
diff --git a/changelogs/unreleased/fix-docs-help-shortcut.yml b/changelogs/unreleased/fix-docs-help-shortcut.yml
new file mode 100644
index 00000000000..8c172e44160
--- /dev/null
+++ b/changelogs/unreleased/fix-docs-help-shortcut.yml
@@ -0,0 +1,5 @@
+---
+title: Fix shortcut links on help page
+merge_request:
+author:
+type: fixed
diff --git a/config/webpack.config.js b/config/webpack.config.js
index 78ced4c3e8c..f02fcda827a 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -36,6 +36,7 @@ var config = {
     cycle_analytics:      './cycle_analytics/cycle_analytics_bundle.js',
     commit_pipelines:     './commit/pipelines/pipelines_bundle.js',
     deploy_keys:          './deploy_keys/index.js',
+    docs:                 './docs/docs_bundle.js',
     diff_notes:           './diff_notes/diff_notes_bundle.js',
     environments:         './environments/environments_bundle.js',
     environments_folder:  './environments/folder/environments_folder_bundle.js',
diff --git a/spec/features/help_pages_spec.rb b/spec/features/help_pages_spec.rb
index ab896a310be..0d04ed612c2 100644
--- a/spec/features/help_pages_spec.rb
+++ b/spec/features/help_pages_spec.rb
@@ -32,6 +32,24 @@ describe 'Help Pages' do
 
       it_behaves_like 'help page', prefix: '/gitlab'
     end
+
+    context 'quick link shortcuts', :js do
+      before do
+        visit help_path
+      end
+
+      it 'focuses search bar' do
+        find('.js-trigger-search-bar').click
+
+        expect(page).to have_selector('#search:focus')
+      end
+
+      it 'opens shortcuts help dialog' do
+        find('.js-trigger-shortcut').click
+
+        expect(page).to have_selector('#modal-shortcuts')
+      end
+    end
   end
 
   context 'in a production environment with version check enabled', :js do