Add keyboard shortcuts item from help menu

Alternative was to add markup for .gl-toggle-wrapper in haml
but this seemed easier. I don't love the resultant markup,
or that you cannot add label text to GlToggle, but it's a start

app/assets/javascripts/behaviors/shortcuts/shortcuts.js

 import $ from 'jquery';
 import Cookies from 'js-cookie';
 import Mousetrap from 'mousetrap';
+import Vue from 'vue';
+import { disableShortcuts, shouldDisableShortcuts } from './shortcuts_toggle';
+import ShortcutsToggle from './shortcuts_toggle.vue';
 import axios from '../../lib/utils/axios_utils';
 import { refreshCurrentPage, visitUrl } from '../../lib/utils/url_utility';
 import findAndFollowLink from '../../lib/utils/navigation_utility';
@@ -15,6 +18,15 @@ Mousetrap.stopCallback = (e, element, combo) => {
   return defaultStopCallback(e, element, combo);
 };
 
+function initToggleButton() {
+  return new Vue({
+    el: document.querySelector('.js-toggle-shortcuts'),
+    render(createElement) {
+      return createElement(ShortcutsToggle);
+    },
+  });
+}
+
 export default class Shortcuts {
   constructor() {
     this.onToggleHelp = this.onToggleHelp.bind(this);
@@ -48,6 +60,14 @@ export default class Shortcuts {
       $(this).remove();
       e.preventDefault();
     });
+
+    $('.js-shortcuts-modal-trigger')
+      .off('click')
+      .on('click', this.onToggleHelp);
+
+    if (shouldDisableShortcuts()) {
+      disableShortcuts();
+    }
   }
 
   onToggleHelp(e) {
@@ -104,7 +124,8 @@ export default class Shortcuts {
         }
 
         return $('.js-more-help-button').remove();
-      });
+      })
+      .then(initToggleButton);
   }
 
   focusFilter(e) {

app/assets/javascripts/behaviors/shortcuts/shortcuts_toggle.js

+import Mousetrap from 'mousetrap';
+import 'mousetrap/plugins/pause/mousetrap-pause';
+
+const shorcutsDisabledKey = 'shortcutsDisabled';
+
+export const shouldDisableShortcuts = () => {
+  try {
+    return localStorage.getItem(shorcutsDisabledKey) === 'true';
+  } catch (e) {
+    return false;
+  }
+};
+
+export function enableShortcuts() {
+  localStorage.setItem(shorcutsDisabledKey, false);
+  Mousetrap.unpause();
+}
+
+export function disableShortcuts() {
+  localStorage.setItem(shorcutsDisabledKey, true);
+  Mousetrap.pause();
+}

app/assets/javascripts/behaviors/shortcuts/shortcuts_toggle.vue

+<script>
+import { GlToggle, GlSprintf } from '@gitlab/ui';
+import AccessorUtilities from '~/lib/utils/accessor';
+import { disableShortcuts, enableShortcuts, shouldDisableShortcuts } from './shortcuts_toggle';
+
+export default {
+  components: {
+    GlSprintf,
+    GlToggle,
+  },
+  data() {
+    return {
+      localStorageUsable: AccessorUtilities.isLocalStorageAccessSafe(),
+      shortcutsEnabled: !shouldDisableShortcuts(),
+    };
+  },
+  methods: {
+    onChange(value) {
+      this.shortcutsEnabled = value;
+      if (value) {
+        enableShortcuts();
+      } else {
+        disableShortcuts();
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div v-if="localStorageUsable" class="d-inline-flex align-items-center js-toggle-shortcuts">
+    <gl-toggle
+      v-model="shortcutsEnabled"
+      aria-describedby="shortcutsToggle"
+      class="prepend-left-10 mb-0"
+      label-position="right"
+      @change="onChange"
+    >
+      <template #labelOn>
+        <gl-sprintf
+          :message="__('%{screenreaderOnlyStart}Keyboard shorcuts%{screenreaderOnlyEnd} Enabled')"
+        >
+          <template #screenreaderOnly="{ content }">
+            <span class="sr-only">{{ content }}</span>
+          </template>
+        </gl-sprintf>
+      </template>
+      <template #labelOff>
+        <gl-sprintf
+          :message="__('%{screenreaderOnlyStart}Keyboard shorcuts%{screenreaderOnlyEnd} Disabled')"
+        >
+          <template #screenreaderOnly="{ content }">
+            <span class="sr-only">{{ content }}</span>
+          </template>
+        </gl-sprintf>
+      </template>
+    </gl-toggle>
+    <div id="shortcutsToggle" class="sr-only">{{ __('Enable or disable keyboard shortcuts') }}</div>
+  </div>
+</template>

app/views/help/_shortcuts.html.haml

@@ -6,6 +6,7 @@
           = _('Keyboard Shortcuts')
           %small
             = link_to _('(Show all)'), '#', class: 'js-more-help-button'
+        .js-toggle-shortcuts
         %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
           %span{ "aria-hidden": true } ×
       .modal-body

app/views/layouts/header/_help_dropdown.html.haml

@@ -4,6 +4,10 @@
       = link_to _("Help"), help_path
     %li
       = link_to _("Support"), support_url
+    %li
+      %button.js-shortcuts-modal-trigger{ type: "button" }
+        = _("Keyboard shortcuts")
+        %span.text-secondary.float-right{ "aria-hidden": true }= '?'.html_safe
     = render_if_exists "shared/learn_gitlab_menu_item"
     %li.divider
   %li

changelogs/unreleased/22113-improve-keyboard-shortcuts-or-allow-them-to-be-disabled.yml

+---
+title: Allow keyboard shortcuts to be disabled
+merge_request: 18782
+author:
+type: added

doc/user/shortcuts.md

@@ -6,7 +6,10 @@ disqus_identifier: 'https://docs.gitlab.com/ee/workflow/shortcuts.html'
 # GitLab keyboard shortcuts
 
 GitLab has many useful keyboard shortcuts to make it easier to access different features.
-You can see the quick reference sheet within GitLab itself with <kbd>Shift</kbd> + <kbd>?</kbd>.
+You can see a modal listing keyboard shortcuts within GitLab itself by pressing <kbd>?</kbd>,
+or clicking **Keyboard shortcuts** in the Help menu at the top right.
+From [GitLab 12.8 onwards](https://gitlab.com/gitlab-org/gitlab/issues/22113),
+keyboard shortcuts can be disabled using the **Enable**/**Disable** toggle in this modal window.
 
 The [Global Shortcuts](#global-shortcuts) work from any area of GitLab, but you must
 be in specific pages for the other shortcuts to be available, as explained in each

locale/gitlab.pot

@@ -375,6 +375,12 @@ msgid_plural "%{releases} releases"
 msgstr[0] ""
 msgstr[1] ""
 
+msgid "%{screenreaderOnlyStart}Keyboard shorcuts%{screenreaderOnlyEnd} Disabled"
+msgstr ""
+
+msgid "%{screenreaderOnlyStart}Keyboard shorcuts%{screenreaderOnlyEnd} Enabled"
+msgstr ""
+
 msgid "%{service_title} activated."
 msgstr ""
 
@@ -7146,6 +7152,9 @@ msgstr ""
 msgid "Enable mirror configuration"
 msgstr ""
 
+msgid "Enable or disable keyboard shortcuts"
+msgstr ""
+
 msgid "Enable or disable the Pseudonymizer data collection."
 msgstr ""
 
@@ -10921,6 +10930,9 @@ msgstr ""
 msgid "Keyboard Shortcuts"
 msgstr ""
 
+msgid "Keyboard shortcuts"
+msgstr ""
+
 msgid "Kubernetes"
 msgstr ""
 

spec/features/projects/user_uses_shortcuts_spec.rb

@@ -17,6 +17,59 @@ describe 'User uses shortcuts', :js do
     wait_for_requests
   end
 
+  context 'disabling shortcuts' do
+    before do
+      page.evaluate_script("localStorage.removeItem('shortcutsDisabled')")
+    end
+
+    it 'can disable shortcuts from help menu' do
+      open_modal_shortcut_keys
+      click_toggle_button
+      close_modal
+
+      open_modal_shortcut_keys
+
+      # modal-shortcuts still in the DOM, but hidden
+      expect(find('#modal-shortcuts', visible: false)).not_to be_visible
+
+      page.refresh
+      open_modal_shortcut_keys
+
+      # after reload, shortcuts modal doesn't exist at all until we add it
+      expect(page).not_to have_selector('#modal-shortcuts')
+    end
+
+    it 're-enables shortcuts' do
+      open_modal_shortcut_keys
+      click_toggle_button
+      close_modal
+
+      open_modal_from_help_menu
+      click_toggle_button
+      close_modal
+
+      open_modal_shortcut_keys
+      expect(find('#modal-shortcuts')).to be_visible
+    end
+
+    def open_modal_shortcut_keys
+      find('body').native.send_key('?')
+    end
+
+    def open_modal_from_help_menu
+      find('.header-help-dropdown-toggle').click
+      find('button', text: 'Keyboard shortcuts').click
+    end
+
+    def click_toggle_button
+      find('.js-toggle-shortcuts .gl-toggle').click
+    end
+
+    def close_modal
+      find('.modal button[aria-label="Close"]').click
+    end
+  end
+
   context 'when navigating to the Project pages' do
     it 'redirects to the details page' do
       visit project_issues_path(project)