[Console] Fix register shortcuts monaco (#188948)

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

@@ -160,8 +160,9 @@ export const DevToolsSettingsModal = (props: DevToolsSettingsModalProps) => {
     (isEnabled: boolean) => {
       if (props.editorInstance) {
         unregisterCommands(props.editorInstance);
-        setIsKeyboardShortcutsEnabled(isEnabled);
       }
+
+      setIsKeyboardShortcutsEnabled(isEnabled);
     },
     [props.editorInstance]
   );
@@ -319,6 +320,7 @@ export const DevToolsSettingsModal = (props: DevToolsSettingsModalProps) => {
         >
           <EuiSwitch
             checked={isKeyboardShortcutsEnabled}
+            data-test-subj="enableKeyboardShortcuts"
             label={
               <FormattedMessage
                 defaultMessage="Enable keyboard shortcuts"

src/plugins/console/public/application/containers/editor/monaco/monaco_editor.tsx

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { CSSProperties, useCallback, useMemo, useRef, useState } from 'react';
+import React, { CSSProperties, useCallback, useMemo, useRef, useState, useEffect } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiLink, EuiToolTip } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { CodeEditor } from '@kbn/code-editor';
@@ -41,6 +41,9 @@ export const MonacoEditor = ({ initialTextValue }: EditorProps) => {
   } = context;
   const { toasts } = notifications;
   const { settings } = useEditorReadContext();
+  const [editorInstance, setEditorInstace] = useState<
+    monaco.editor.IStandaloneCodeEditor | undefined
+  >();
 
   const divRef = useRef<HTMLDivElement | null>(null);
   const { setupResizeChecker, destroyResizeChecker } = useResizeCheckerUtils();
@@ -74,8 +77,15 @@ export const MonacoEditor = ({ initialTextValue }: EditorProps) => {
       setInputEditor(provider);
       actionsProvider.current = provider;
       setupResizeChecker(divRef.current!, editor);
+      setEditorInstace(editor);
+    },
+    [setupResizeChecker, setInputEditor, setEditorInstace]
+  );
+
+  useEffect(() => {
+    if (settings.isKeyboardShortcutsEnabled && editorInstance) {
       registerKeyboardCommands({
-        editor,
+        editor: editorInstance,
         sendRequest: sendRequestsCallback,
         autoIndent: async () => await actionsProvider.current?.autoIndent(),
         getDocumentationLink: getDocumenationLink,
@@ -83,15 +93,17 @@ export const MonacoEditor = ({ initialTextValue }: EditorProps) => {
           await actionsProvider.current?.moveToPreviousRequestEdge(),
         moveToNextRequestEdge: async () => await actionsProvider.current?.moveToNextRequestEdge(),
       });
-    },
-    [
-      getDocumenationLink,
-      registerKeyboardCommands,
-      sendRequestsCallback,
-      setupResizeChecker,
-      setInputEditor,
-    ]
-  );
+    } else {
+      unregisterKeyboardCommands();
+    }
+  }, [
+    editorInstance,
+    getDocumenationLink,
+    sendRequestsCallback,
+    registerKeyboardCommands,
+    unregisterKeyboardCommands,
+    settings.isKeyboardShortcutsEnabled,
+  ]);
 
   const editorWillUnmountCallback = useCallback(() => {
     destroyResizeChecker();

test/functional/apps/console/monaco/_misc_console_behavior.ts

@@ -109,6 +109,24 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       });
     });
 
+    it('can toggle keyboard shortcuts', async () => {
+      // Enter a sample command
+      await PageObjects.console.monaco.enterText('GET _search');
+
+      // Disable keyboard shorcuts
+      await PageObjects.console.toggleKeyboardShortcuts(false);
+
+      // Upon clicking ctrl enter a newline character should be added to the editor
+      await PageObjects.console.monaco.pressCtrlEnter();
+      await retry.waitFor('shortcut shouldnt have generated any request', async () => {
+        const response = await PageObjects.console.monaco.getOutputText();
+        return response === '';
+      });
+
+      // Restore setting
+      await PageObjects.console.toggleKeyboardShortcuts(true);
+    });
+
     describe('customizable font size', () => {
       // flaky
       it.skip('should allow the font size to be customized', async () => {

test/functional/page_objects/console_page.ts

@@ -286,6 +286,18 @@ export class ConsolePageObject extends FtrService {
     await this.testSubjects.click('settings-save-button');
   }
 
+  public async toggleKeyboardShortcuts(enabled: boolean) {
+    await this.openSettings();
+
+    // while the settings form opens/loads this may fail, so retry for a while
+    await this.retry.try(async () => {
+      const toggle = await this.testSubjects.find('enableKeyboardShortcuts');
+      await toggle.click();
+    });
+
+    await this.testSubjects.click('settings-save-button');
+  }
+
   public async getFontSize(editor: WebElementWrapper) {
     const aceLine = await editor.findByClassName('ace_line');
     return await aceLine.getComputedStyle('font-size');