Fix shortcut links on help page

app/assets/javascripts/docs/docs_bundle.js

+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);
+

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();
+    }
   }
 }

app/views/help/index.html.haml

+= 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'

changelogs/unreleased/fix-docs-help-shortcut.yml

+---
+title: Fix shortcut links on help page
+merge_request:
+author:
+type: fixed

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',

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