Add disable keyboard shortcuts feature

src/plugins/console/public/application/components/settings_modal.tsx

@@ -27,6 +27,8 @@ import {
 } from '@elastic/eui';
 
 import { DevToolsSettings } from '../../services';
+import { unregisterCommands } from '../containers/editor/legacy/console_editor/keyboard_shortcuts';
+import type { SenseEditor } from '../models';
 
 export type AutocompleteOptions = 'fields' | 'indices' | 'templates';
 
@@ -62,6 +64,7 @@ interface Props {
   onClose: () => void;
   refreshAutocompleteSettings: (selectedSettings: DevToolsSettings['autocomplete']) => void;
   settings: DevToolsSettings;
+  editorInstance: SenseEditor | null;
 }
 
 export function DevToolsSettingsModal(props: Props) {
@@ -75,6 +78,9 @@ export function DevToolsSettingsModal(props: Props) {
   const [pollInterval, setPollInterval] = useState(props.settings.pollInterval);
   const [tripleQuotes, setTripleQuotes] = useState(props.settings.tripleQuotes);
   const [historyDisabled, setHistoryDisabled] = useState(props.settings.historyDisabled);
+  const [keyboardShortcutsDisabled, setKeyboardShortcutsDisabled] = useState(
+    props.settings.keyboardShortcutsDisabled
+  );
 
   const autoCompleteCheckboxes = [
     {
@@ -135,6 +141,7 @@ export function DevToolsSettingsModal(props: Props) {
       pollInterval,
       tripleQuotes,
       historyDisabled,
+      keyboardShortcutsDisabled,
     });
   }
 
@@ -145,6 +152,16 @@ export function DevToolsSettingsModal(props: Props) {
     setPollInterval(sanitizedValue);
   }, []);
 
+  const toggleKeyboardShortcuts = useCallback(
+    (disable: boolean) => {
+      if (props.editorInstance) {
+        unregisterCommands(props.editorInstance);
+        setKeyboardShortcutsDisabled(disable);
+      }
+    },
+    [props.editorInstance]
+  );
+
   // It only makes sense to show polling options if the user needs to fetch any data.
   const pollingFields =
     fields || indices || templates ? (
@@ -279,6 +296,27 @@ export function DevToolsSettingsModal(props: Props) {
           />
         </EuiFormRow>
 
+        <EuiFormRow
+          label={
+            <FormattedMessage
+              id="console.settingsPage.keyboardShortcutsLabel"
+              defaultMessage="Keyboard shortcuts"
+            />
+          }
+        >
+          <EuiSwitch
+            checked={keyboardShortcutsDisabled}
+            id="keyboardShortcuts"
+            label={
+              <FormattedMessage
+                defaultMessage="Disable keyboard shortcuts"
+                id="console.settingsPage.disableKeyboardShortcutsMessage"
+              />
+            }
+            onChange={(e) => toggleKeyboardShortcuts(e.target.checked)}
+          />
+        </EuiFormRow>
+
         <EuiFormRow
           labelType="legend"
           label={

src/plugins/console/public/application/containers/editor/legacy/console_editor/editor.tsx

@@ -94,8 +94,6 @@ function EditorUI({ initialTextValue, setEditorInstance }: EditorProps) {
     const editor = editorInstanceRef.current;
     const textareaElement = editorRef.current!.querySelector('textarea');
 
-    setEditorInstance(editor);
-
     if (textareaElement) {
       textareaElement.setAttribute('id', inputId);
       textareaElement.setAttribute('data-test-subj', 'console-textarea');
@@ -228,13 +226,24 @@ function EditorUI({ initialTextValue, setEditorInstance }: EditorProps) {
     editor!.getCoreEditor().getContainer().focus();
   }, [settings]);
 
+  const { keyboardShortcutsDisabled } = settingsService.toJSON();
+  useEffect(() => {
+    if (!keyboardShortcutsDisabled) {
+      registerCommands({
+        senseEditor: editorInstanceRef.current!,
+        sendCurrentRequestToES,
+        openDocumentation,
+      });
+    }
+  }, [sendCurrentRequestToES, openDocumentation, keyboardShortcutsDisabled]);
+
   useEffect(() => {
-    registerCommands({
-      senseEditor: editorInstanceRef.current!,
-      sendCurrentRequestToES,
-      openDocumentation,
-    });
-  }, [sendCurrentRequestToES, openDocumentation]);
+    const { current: editor } = editorInstanceRef;
+
+    if (editor) {
+      setEditorInstance(editor);
+    }
+  });
 
   return (
     <div style={abs} data-test-subj="console-application" className="conApp">

src/plugins/console/public/application/containers/editor/legacy/console_editor/keyboard_shortcuts.ts

@@ -28,39 +28,44 @@ export function registerCommands({
 
   coreEditor.registerKeyboardShortcut({
     keys: { win: 'Ctrl-Enter', mac: 'Command-Enter' },
-    name: 'send to Elasticsearch',
+    name: '__console_send_to_Elasticsearch',
     fn: () => sendCurrentRequestToES(),
   });
 
   coreEditor.registerKeyboardShortcut({
-    name: 'open documentation',
+    name: '__console_open_documentation',
     keys: { win: 'Ctrl-/', mac: 'Command-/' },
     fn: () => {
       openDocumentation();
     },
   });
 
   coreEditor.registerKeyboardShortcut({
-    name: 'auto indent request',
+    name: '__console_auto_indent_request',
     keys: { win: 'Ctrl-I', mac: 'Command-I' },
     fn: () => {
       throttledAutoIndent();
     },
   });
 
   coreEditor.registerKeyboardShortcut({
-    name: 'move to previous request start or end',
+    name: '__console_move_to_previous_request_start_or_end',
     keys: { win: 'Ctrl-Up', mac: 'Command-Up' },
     fn: () => {
       senseEditor.moveToPreviousRequestEdge();
     },
   });
 
   coreEditor.registerKeyboardShortcut({
-    name: 'move to next request start or end',
+    name: '__console_move_to_next_request_start_or_end',
     keys: { win: 'Ctrl-Down', mac: 'Command-Down' },
     fn: () => {
       senseEditor.moveToNextRequestEdge(false);
     },
   });
 }
+
+export function unregisterCommands(senseEditor: SenseEditor) {
+  const coreEditor = senseEditor.getCoreEditor();
+  coreEditor.unregisterKeyboardShortcuts();
+}

src/plugins/console/public/application/containers/settings.tsx

@@ -74,7 +74,7 @@ export interface Props {
   editorInstance: SenseEditor | null;
 }
 
-export function Settings({ onClose }: Props) {
+export function Settings({ onClose, editorInstance }: Props) {
   const {
     services: { settings, http },
   } = useServicesContext();
@@ -104,6 +104,7 @@ export function Settings({ onClose }: Props) {
         refreshAutocompleteSettings(http, settings, selectedSettings)
       }
       settings={settings.toJSON()}
+      editorInstance={editorInstance}
     />
   );
 }

src/plugins/console/public/application/models/legacy_core_editor/legacy_core_editor.ts

@@ -297,6 +297,17 @@ export class LegacyCoreEditor implements CoreEditor {
     });
   }
 
+  unregisterKeyboardShortcuts() {
+    const commands = this.editor.commands.byName;
+
+    Object.keys(commands).forEach((command) => {
+      if (command.includes('__console')) {
+        // @ts-ignore
+        this.editor.commands.removeCommand(commands[command]);
+      }
+    });
+  }
+
   legacyUpdateUI(range: Range) {
     if (!this.$actions) {
       return;

src/plugins/console/public/services/settings.ts

@@ -16,6 +16,7 @@ export const DEFAULT_SETTINGS = Object.freeze({
   wrapMode: true,
   autocomplete: Object.freeze({ fields: true, indices: true, templates: true, dataStreams: true }),
   historyDisabled: false,
+  keyboardShortcutsDisabled: false,
 });
 
 export interface DevToolsSettings {
@@ -31,6 +32,7 @@ export interface DevToolsSettings {
   pollInterval: number;
   tripleQuotes: boolean;
   historyDisabled: boolean;
+  keyboardShortcutsDisabled: boolean;
 }
 
 export class Settings {
@@ -98,6 +100,18 @@ export class Settings {
     return this.storage.get('poll_interval', DEFAULT_SETTINGS.pollInterval);
   }
 
+  setKeyboardShortcutsDisabled(disable: boolean) {
+    this.storage.set('keyboard_shortcuts_disabled', disable);
+    return true;
+  }
+
+  getKeyboardShortcutsDisabled() {
+    return this.storage.get(
+      'keyboard_shortcuts_disabled',
+      DEFAULT_SETTINGS.keyboardShortcutsDisabled
+    );
+  }
+
   toJSON(): DevToolsSettings {
     return {
       autocomplete: this.getAutocomplete(),
@@ -107,6 +121,7 @@ export class Settings {
       polling: Boolean(this.getPolling()),
       pollInterval: this.getPollInterval(),
       historyDisabled: Boolean(this.getHistoryDisabled()),
+      keyboardShortcutsDisabled: Boolean(this.getKeyboardShortcutsDisabled()),
     };
   }
 
@@ -118,6 +133,7 @@ export class Settings {
     polling,
     pollInterval,
     historyDisabled,
+    keyboardShortcutsDisabled,
   }: DevToolsSettings) {
     this.setFontSize(fontSize);
     this.setWrapMode(wrapMode);
@@ -126,6 +142,7 @@ export class Settings {
     this.setPolling(polling);
     this.setPollInterval(pollInterval);
     this.setHistoryDisabled(historyDisabled);
+    this.setKeyboardShortcutsDisabled(keyboardShortcutsDisabled);
   }
 }
 

src/plugins/console/public/types/core_editor.ts

@@ -256,6 +256,11 @@ export interface CoreEditor {
     name: string;
   }): void;
 
+  /**
+   * Unregister a keyboard shortcut
+   */
+  unregisterKeyboardShortcuts(): void;
+
   /**
    * Register a completions function that will be called when the editor
    * detects a change