[SharedUX] Enable Monaco commands quick access in dev mode (elastic#230543)

Closes elastic#209894.

## Summary

- Added quick command access palette to Monaco editor only when in dev
mode (access via `F1`)
- Removed DevTools `inspectTokens` related functionality since this is
now included in the palette
(elastic#189203)
- Added a way to close the inspect tokens widget which was currently not
closing since our ESC listener was interfering with Monaco's one
- **Caveat:** Monaco's palette is globally enabled, that means that once
any editor's `isDevMode` is true the palette will be enabled for other
editors. I don't see any scenario where `isDevMode` could not match
between editors or could change during the same session. _Update:_ first
approach was using an `isDevMode` prop provided by consumers, now that
the env is being checked at the editor itself the palette will be
expectedly enabled for every editor when in dev mode.

## Visuals

1. Open Palette
2. Open Inspect Tokens widget
3. ESC closes the widget
4. ESC for a 2nd time behaves as expected and shows editor hint
5. Open Suggestions
6. ESC closes suggestions menu
7. ESC for a 2nd time behaves as expected and shows editor hint

**ES|QL editor**


https://github.com/user-attachments/assets/55b9a943-750a-425a-b4fa-f1acf3dc8b02

**DevTools editor**


https://github.com/user-attachments/assets/f13c2966-03da-4ad8-bea5-c37e826b8429

---------

Co-authored-by: Elastic Machine <[email protected]>

Author: 2 people

src/platform/packages/shared/shared-ux/code_editor/impl/code_editor.test.tsx

@@ -168,7 +168,9 @@ describe('<CodeEditor />', () => {
     test('should detect that the suggestion menu is open and not show the hint on ESC', async () => {
       getHint().simulate('keydown', { key: keys.ENTER });
 
-      // expect((getHint().props() as any).className).toContain('isInactive');
+      expect(getHint().find('[data-test-subj~="codeEditorHint"]').prop('data-test-subj')).toContain(
+        `codeEditorHint--inactive`
+      );
       expect(mockedEditorInstance?.__helpers__.areSuggestionsVisible()).toBe(false);
 
       // Show the suggestions in the editor
@@ -183,14 +185,50 @@ describe('<CodeEditor />', () => {
       expect(mockedEditorInstance?.__helpers__.areSuggestionsVisible()).toBe(false);
 
       // The keyboard hint is still **not** active
-      // expect((getHint().props() as any).className).toContain('isInactive');
+      expect(getHint().find('[data-test-subj~="codeEditorHint"]').prop('data-test-subj')).toContain(
+        `codeEditorHint--inactive`
+      );
+      // Hitting a second time the ESC key should now show the hint
+      findTestSubject(component, 'monacoEditorTextarea').simulate('keydown', {
+        keyCode: monaco.KeyCode.Escape,
+      });
+
+      expect(getHint().find('[data-test-subj~="codeEditorHint"]').prop('data-test-subj')).toContain(
+        `codeEditorHint--active`
+      );
+    });
+
+    test('should detect that the inspect tokens widget is open and not show the hint on ESC', async () => {
+      getHint().simulate('keydown', { key: keys.ENTER });
 
+      expect(getHint().find('[data-test-subj~="codeEditorHint"]').prop('data-test-subj')).toContain(
+        `codeEditorHint--inactive`
+      );
+      expect(mockedEditorInstance?.__helpers__.isInspectTokensWidgetVisible()).toBe(false);
+
+      // Show the inspect tokens widget in the editor
+      mockedEditorInstance?.__helpers__.showInspectTokensWidget();
+      expect(mockedEditorInstance?.__helpers__.isInspectTokensWidgetVisible()).toBe(true);
+
+      // Hitting the ESC key with the inspect tokens widget visible
+      findTestSubject(component, 'monacoEditorTextarea').simulate('keydown', {
+        keyCode: monaco.KeyCode.Escape,
+      });
+
+      expect(mockedEditorInstance?.__helpers__.isInspectTokensWidgetVisible()).toBe(false);
+
+      // The keyboard hint is still **not** active
+      expect(getHint().find('[data-test-subj~="codeEditorHint"]').prop('data-test-subj')).toContain(
+        `codeEditorHint--inactive`
+      );
       // Hitting a second time the ESC key should now show the hint
       findTestSubject(component, 'monacoEditorTextarea').simulate('keydown', {
         keyCode: monaco.KeyCode.Escape,
       });
 
-      // expect((getHint().props() as any).className).not.toContain('isInactive');
+      expect(getHint().find('[data-test-subj~="codeEditorHint"]').prop('data-test-subj')).toContain(
+        `codeEditorHint--active`
+      );
     });
   });
 

src/platform/packages/shared/shared-ux/code_editor/impl/code_editor.tsx

@@ -290,8 +290,15 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({
   );
 
   const onKeydownMonaco = useCallback(
-    (ev: monaco.IKeyboardEvent) => {
+    (ev: monaco.IKeyboardEvent, editor: monaco.editor.IStandaloneCodeEditor) => {
       if (ev.keyCode === monaco.KeyCode.Escape) {
+        const inspectTokensWidget = editor?.getContribution(
+          'editor.contrib.inspectTokens'
+          // @ts-expect-errors -- "_widget" is not part of the TS interface but does exist
+        )?._widget;
+        // If the inspect tokens widget is open then we want to let monaco handle ESCAPE for it,
+        // otherwise widget will not close.
+        if (inspectTokensWidget) return;
         // If the autocompletion context menu is open then we want to let ESCAPE close it but
         // **not** exit out of editing mode.
         if (!isSuggestionMenuOpen.current) {
@@ -486,7 +493,9 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({
         textboxMutationObserver.current.observe(textbox, { attributes: true });
       }
 
-      editor.onKeyDown(onKeydownMonaco);
+      editor.onKeyDown((ev: monaco.IKeyboardEvent) => {
+        onKeydownMonaco(ev, editor);
+      });
       editor.onDidBlurEditorText(onBlurMonaco);
 
       const messageContribution = editor.getContribution('editor.contrib.messageController');

src/platform/packages/shared/shared-ux/code_editor/impl/react_monaco_editor/editor.tsx

@@ -33,6 +33,12 @@ import { useEuiTheme } from '@elastic/eui';
 import * as React from 'react';
 import { useEffect, useLayoutEffect, useMemo, useRef } from 'react';
 
+if (process.env.NODE_ENV !== 'production') {
+  import(
+    'monaco-editor/esm/vs/editor/standalone/browser/quickAccess/standaloneCommandsQuickAccess'
+  );
+}
+
 export type EditorConstructionOptions = monacoEditor.editor.IStandaloneEditorConstructionOptions;
 
 export type EditorWillMount = (monaco: typeof monacoEditor) => void | EditorConstructionOptions;

src/platform/packages/shared/shared-ux/code_editor/mocks/monaco_mock/index.tsx

@@ -20,6 +20,7 @@ function createEditorInstance() {
   const didHideListeners: Array<(e?: unknown) => void> = [];
   let placeholderDiv: undefined | HTMLDivElement;
   let areSuggestionsVisible = false;
+  let isInspectTokensWidgetVisible = false;
 
   /**
    * Mocks for monaco editor API
@@ -72,6 +73,7 @@ function createEditorInstance() {
     // Helpers for our tests
     __helpers__: {
       areSuggestionsVisible: () => areSuggestionsVisible,
+      isInspectTokensWidgetVisible: () => isInspectTokensWidgetVisible,
       getPlaceholderRef: (div: HTMLDivElement) => {
         placeholderDiv = div;
       },
@@ -83,6 +85,10 @@ function createEditorInstance() {
         if (e.keyCode === monaco.KeyCode.Escape && areSuggestionsVisible) {
           editorInstanceMethods.__helpers__.hideSuggestions();
         }
+        // Close the inspect tokens when hitting the ESC key
+        if (e.keyCode === monaco.KeyCode.Escape && isInspectTokensWidgetVisible) {
+          editorInstanceMethods.__helpers__.hideInspectTokensWidget();
+        }
       }) as KeyboardEventHandler,
       showSuggestions: () => {
         areSuggestionsVisible = true;
@@ -92,6 +98,14 @@ function createEditorInstance() {
         areSuggestionsVisible = false;
         didHideListeners.forEach((listener) => listener());
       },
+      showInspectTokensWidget: () => {
+        isInspectTokensWidgetVisible = true;
+        didShowListeners.forEach((listener) => listener());
+      },
+      hideInspectTokensWidget: () => {
+        isInspectTokensWidgetVisible = false;
+        didHideListeners.forEach((listener) => listener());
+      },
     },
   };
 

src/platform/plugins/shared/console/public/application/containers/editor/monaco_editor.tsx

@@ -57,7 +57,6 @@ export const MonacoEditor = ({ localStorageValue, value, setValue }: EditorProps
       application,
     },
     docLinkVersion,
-    config: { isDevMode },
   } = context;
   const { toasts } = notifications;
   const {
@@ -102,13 +101,13 @@ export const MonacoEditor = ({ localStorageValue, value, setValue }: EditorProps
 
   const editorDidMountCallback = useCallback(
     (editor: monaco.editor.IStandaloneCodeEditor) => {
-      const provider = new MonacoEditorActionsProvider(editor, setEditorActionsCss, isDevMode);
+      const provider = new MonacoEditorActionsProvider(editor, setEditorActionsCss);
       setInputEditor(provider);
       actionsProvider.current = provider;
       setupResizeChecker(divRef.current!, editor);
       setEditorInstace(editor);
     },
-    [setupResizeChecker, setInputEditor, setEditorInstace, isDevMode]
+    [setupResizeChecker, setInputEditor, setEditorInstace]
   );
 
   useEffect(() => {

src/platform/plugins/shared/console/public/application/containers/editor/monaco_editor_actions_provider.test.ts

@@ -95,7 +95,7 @@ describe('Editor actions provider', () => {
 
     const setEditorActionsCssMock = jest.fn();
 
-    editorActionsProvider = new MonacoEditorActionsProvider(editor, setEditorActionsCssMock, true);
+    editorActionsProvider = new MonacoEditorActionsProvider(editor, setEditorActionsCssMock);
   });
 
   describe('getCurl', () => {

src/platform/plugins/shared/console/public/application/containers/editor/monaco_editor_actions_provider.ts

@@ -53,17 +53,14 @@ const TRIGGER_SUGGESTIONS_ACTION_LABEL = 'Trigger suggestions';
 const TRIGGER_SUGGESTIONS_HANDLER_ID = 'editor.action.triggerSuggest';
 const DEBOUNCE_HIGHLIGHT_WAIT_MS = 200;
 const DEBOUNCE_AUTOCOMPLETE_WAIT_MS = 500;
-const INSPECT_TOKENS_LABEL = 'Inspect tokens';
-const INSPECT_TOKENS_HANDLER_ID = 'editor.action.inspectTokens';
 const { collapseLiteralStrings } = XJson;
 
 export class MonacoEditorActionsProvider {
   private parsedRequestsProvider: ConsoleParsedRequestsProvider;
   private highlightedLines: monaco.editor.IEditorDecorationsCollection;
   constructor(
     private editor: monaco.editor.IStandaloneCodeEditor,
-    private setEditorActionsCss: (css: CSSProperties) => void,
-    private isDevMode: boolean
+    private setEditorActionsCss: (css: CSSProperties) => void
   ) {
     this.parsedRequestsProvider = getParsedRequestsProvider(this.editor.getModel());
     this.highlightedLines = this.editor.createDecorationsCollection();
@@ -112,9 +109,6 @@ export class MonacoEditorActionsProvider {
       if (event.keyCode === monaco.KeyCode.Backspace) {
         debouncedTriggerSuggestions();
       }
-      if (this.isDevMode && event.keyCode === monaco.KeyCode.F1) {
-        this.editor.trigger(INSPECT_TOKENS_LABEL, INSPECT_TOKENS_HANDLER_ID, {});
-      }
     });
   }