From 39b33e1a30367caec7c4de78adba788ce25733b7 Mon Sep 17 00:00:00 2001 From: Muhammad Ibragimov Date: Wed, 30 Mar 2022 03:30:04 -0700 Subject: [PATCH 1/6] Get editor instance to settings modal --- .../public/application/containers/editor/editor.tsx | 9 +++++++-- .../containers/editor/legacy/console_editor/editor.tsx | 6 +++++- .../console/public/application/containers/main/main.tsx | 9 +++++++-- .../console/public/application/containers/settings.tsx | 2 ++ 4 files changed, 21 insertions(+), 5 deletions(-) diff --git a/src/plugins/console/public/application/containers/editor/editor.tsx b/src/plugins/console/public/application/containers/editor/editor.tsx index df017250664e4..4931648c07df7 100644 --- a/src/plugins/console/public/application/containers/editor/editor.tsx +++ b/src/plugins/console/public/application/containers/editor/editor.tsx @@ -15,15 +15,17 @@ import { Panel, PanelsContainer } from '../../containers'; import { Editor as EditorUI, EditorOutput } from './legacy/console_editor'; import { StorageKeys } from '../../../services'; import { useEditorReadContext, useServicesContext, useRequestReadContext } from '../../contexts'; +import type { SenseEditor } from '../../models'; const INITIAL_PANEL_WIDTH = 50; const PANEL_MIN_WIDTH = '100px'; interface Props { loading: boolean; + setEditorInstance: (instance: SenseEditor) => void; } -export const Editor = memo(({ loading }: Props) => { +export const Editor = memo(({ loading, setEditorInstance }: Props) => { const { services: { storage }, } = useServicesContext(); @@ -61,7 +63,10 @@ export const Editor = memo(({ loading }: Props) => { {loading ? ( ) : ( - + )} void; } interface QueryParams { @@ -62,7 +64,7 @@ const DEFAULT_INPUT_VALUE = `GET _search const inputId = 'ConAppInputTextarea'; -function EditorUI({ initialTextValue }: EditorProps) { +function EditorUI({ initialTextValue, setEditorInstance }: EditorProps) { const { services: { history, notifications, settings: settingsService, esHostService, http }, docLinkVersion, @@ -92,6 +94,8 @@ function EditorUI({ initialTextValue }: 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'); diff --git a/src/plugins/console/public/application/containers/main/main.tsx b/src/plugins/console/public/application/containers/main/main.tsx index 30bf23d94a327..f28fd01bd8eae 100644 --- a/src/plugins/console/public/application/containers/main/main.tsx +++ b/src/plugins/console/public/application/containers/main/main.tsx @@ -25,6 +25,7 @@ import { useServicesContext, useEditorReadContext, useRequestReadContext } from import { useDataInit } from '../../hooks'; import { getTopNavConfig } from './get_top_nav'; +import type { SenseEditor } from '../../models/sense_editor'; export function Main() { const { @@ -46,6 +47,8 @@ export function Main() { const [showSettings, setShowSettings] = useState(false); const [showHelp, setShowHelp] = useState(false); + const [editorInstance, setEditorInstance] = useState(null); + const renderConsoleHistory = () => { return editorsReady ? setShowHistory(false)} /> : null; }; @@ -108,7 +111,7 @@ export function Main() { {showingHistory ? {renderConsoleHistory()} : null} - + setEditorInstance(instance)} /> @@ -121,7 +124,9 @@ export function Main() { /> ) : null} - {showSettings ? setShowSettings(false)} /> : null} + {showSettings ? ( + setShowSettings(false)} editorInstance={editorInstance} /> + ) : null} {showHelp ? setShowHelp(false)} /> : null} diff --git a/src/plugins/console/public/application/containers/settings.tsx b/src/plugins/console/public/application/containers/settings.tsx index f0ec64f4b13b2..2c7f812e84bb2 100644 --- a/src/plugins/console/public/application/containers/settings.tsx +++ b/src/plugins/console/public/application/containers/settings.tsx @@ -15,6 +15,7 @@ import { AutocompleteOptions, DevToolsSettingsModal } from '../components'; import { retrieveAutoCompleteInfo } from '../../lib/mappings/mappings'; import { useServicesContext, useEditorActionContext } from '../contexts'; import { DevToolsSettings, Settings as SettingsService } from '../../services'; +import type { SenseEditor } from '../models'; const getAutocompleteDiff = ( newSettings: DevToolsSettings, @@ -70,6 +71,7 @@ const fetchAutocompleteSettingsIfNeeded = ( export interface Props { onClose: () => void; + editorInstance: SenseEditor | null; } export function Settings({ onClose }: Props) { From c02f93d6d7b3f497a31d500fb0e3303458e40d96 Mon Sep 17 00:00:00 2001 From: Muhammad Ibragimov Date: Wed, 30 Mar 2022 05:37:32 -0700 Subject: [PATCH 2/6] Add disable keyboard shortcuts feature --- .../application/components/settings_modal.tsx | 38 +++++++++++++++++++ .../editor/legacy/console_editor/editor.tsx | 25 ++++++++---- .../console_editor/keyboard_shortcuts.ts | 15 +++++--- .../application/containers/settings.tsx | 3 +- .../legacy_core_editor/legacy_core_editor.ts | 11 ++++++ .../console/public/services/settings.ts | 17 +++++++++ .../console/public/types/core_editor.ts | 5 +++ 7 files changed, 100 insertions(+), 14 deletions(-) diff --git a/src/plugins/console/public/application/components/settings_modal.tsx b/src/plugins/console/public/application/components/settings_modal.tsx index eafc2dea3f873..5fc310a25032f 100644 --- a/src/plugins/console/public/application/components/settings_modal.tsx +++ b/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) { /> + + } + > + + } + onChange={(e) => toggleKeyboardShortcuts(e.target.checked)} + /> + + { + 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 (
diff --git a/src/plugins/console/public/application/containers/editor/legacy/console_editor/keyboard_shortcuts.ts b/src/plugins/console/public/application/containers/editor/legacy/console_editor/keyboard_shortcuts.ts index 4f09a49f3ac96..31329ca30c326 100644 --- a/src/plugins/console/public/application/containers/editor/legacy/console_editor/keyboard_shortcuts.ts +++ b/src/plugins/console/public/application/containers/editor/legacy/console_editor/keyboard_shortcuts.ts @@ -28,12 +28,12 @@ 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(); @@ -41,7 +41,7 @@ export function registerCommands({ }); coreEditor.registerKeyboardShortcut({ - name: 'auto indent request', + name: '__console_auto_indent_request', keys: { win: 'Ctrl-I', mac: 'Command-I' }, fn: () => { throttledAutoIndent(); @@ -49,7 +49,7 @@ export function registerCommands({ }); 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(); @@ -57,10 +57,15 @@ export function registerCommands({ }); 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(); +} diff --git a/src/plugins/console/public/application/containers/settings.tsx b/src/plugins/console/public/application/containers/settings.tsx index 2c7f812e84bb2..c0bd1b18fff26 100644 --- a/src/plugins/console/public/application/containers/settings.tsx +++ b/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} /> ); } diff --git a/src/plugins/console/public/application/models/legacy_core_editor/legacy_core_editor.ts b/src/plugins/console/public/application/models/legacy_core_editor/legacy_core_editor.ts index 7a90dbe138f17..83bf88ca16354 100644 --- a/src/plugins/console/public/application/models/legacy_core_editor/legacy_core_editor.ts +++ b/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; diff --git a/src/plugins/console/public/services/settings.ts b/src/plugins/console/public/services/settings.ts index 1a7eff3e7ca54..73369e5fd4026 100644 --- a/src/plugins/console/public/services/settings.ts +++ b/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); } } diff --git a/src/plugins/console/public/types/core_editor.ts b/src/plugins/console/public/types/core_editor.ts index cc344d6bcc881..88bfe743439e1 100644 --- a/src/plugins/console/public/types/core_editor.ts +++ b/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 From 75d792557dd70b6254a5a5a5fcaa6cd2bcad949f Mon Sep 17 00:00:00 2001 From: Muhammad Ibragimov Date: Wed, 30 Mar 2022 06:27:20 -0700 Subject: [PATCH 3/6] Update editor.test.tsx --- .../console/public/application/components/settings_modal.tsx | 2 +- .../containers/editor/legacy/console_editor/editor.test.tsx | 2 +- .../containers/editor/legacy/console_editor/editor.tsx | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/plugins/console/public/application/components/settings_modal.tsx b/src/plugins/console/public/application/components/settings_modal.tsx index 5fc310a25032f..afd424934cc4c 100644 --- a/src/plugins/console/public/application/components/settings_modal.tsx +++ b/src/plugins/console/public/application/components/settings_modal.tsx @@ -177,7 +177,7 @@ export function DevToolsSettingsModal(props: Props) { } > diff --git a/src/plugins/console/public/application/containers/editor/legacy/console_editor/editor.test.tsx b/src/plugins/console/public/application/containers/editor/legacy/console_editor/editor.test.tsx index 37da5f93ff675..b942a6d830217 100644 --- a/src/plugins/console/public/application/containers/editor/legacy/console_editor/editor.test.tsx +++ b/src/plugins/console/public/application/containers/editor/legacy/console_editor/editor.test.tsx @@ -41,7 +41,7 @@ describe('Legacy (Ace) Console Editor Component Smoke Test', () => { - + {}} /> diff --git a/src/plugins/console/public/application/containers/editor/legacy/console_editor/editor.tsx b/src/plugins/console/public/application/containers/editor/legacy/console_editor/editor.tsx index 38c93a5818419..90e16ef91a75b 100644 --- a/src/plugins/console/public/application/containers/editor/legacy/console_editor/editor.tsx +++ b/src/plugins/console/public/application/containers/editor/legacy/console_editor/editor.tsx @@ -226,8 +226,8 @@ function EditorUI({ initialTextValue, setEditorInstance }: EditorProps) { editor!.getCoreEditor().getContainer().focus(); }, [settings]); - const { keyboardShortcutsDisabled } = settingsService.toJSON(); useEffect(() => { + const { keyboardShortcutsDisabled } = settings; if (!keyboardShortcutsDisabled) { registerCommands({ senseEditor: editorInstanceRef.current!, @@ -235,7 +235,7 @@ function EditorUI({ initialTextValue, setEditorInstance }: EditorProps) { openDocumentation, }); } - }, [sendCurrentRequestToES, openDocumentation, keyboardShortcutsDisabled]); + }, [sendCurrentRequestToES, openDocumentation, settings]); useEffect(() => { const { current: editor } = editorInstanceRef; From d6cfd43c749e1ff8779cb7b8c2dd745f1410f7cb Mon Sep 17 00:00:00 2001 From: Muhammad Ibragimov Date: Fri, 1 Apr 2022 04:23:36 -0700 Subject: [PATCH 4/6] Refactor --- .../common/constants/keyboard_shortcuts.ts | 9 ++++ .../application/components/settings_modal.tsx | 5 +-- .../console_editor/keyboard_shortcuts.ts | 13 +++--- .../console/public/services/settings.ts | 43 ++++++++++++------- 4 files changed, 46 insertions(+), 24 deletions(-) create mode 100644 src/plugins/console/common/constants/keyboard_shortcuts.ts diff --git a/src/plugins/console/common/constants/keyboard_shortcuts.ts b/src/plugins/console/common/constants/keyboard_shortcuts.ts new file mode 100644 index 0000000000000..007da74124e0c --- /dev/null +++ b/src/plugins/console/common/constants/keyboard_shortcuts.ts @@ -0,0 +1,9 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +export const KEYBOARD_SHORTCUT_PREFIX = '__console'; diff --git a/src/plugins/console/public/application/components/settings_modal.tsx b/src/plugins/console/public/application/components/settings_modal.tsx index afd424934cc4c..c5a6ee631d7db 100644 --- a/src/plugins/console/public/application/components/settings_modal.tsx +++ b/src/plugins/console/public/application/components/settings_modal.tsx @@ -153,10 +153,10 @@ export function DevToolsSettingsModal(props: Props) { }, []); const toggleKeyboardShortcuts = useCallback( - (disable: boolean) => { + (disabled: boolean) => { if (props.editorInstance) { unregisterCommands(props.editorInstance); - setKeyboardShortcutsDisabled(disable); + setKeyboardShortcutsDisabled(disabled); } }, [props.editorInstance] @@ -306,7 +306,6 @@ export function DevToolsSettingsModal(props: Props) { > sendCurrentRequestToES(), }); coreEditor.registerKeyboardShortcut({ - name: '__console_open_documentation', + name: `${KEYBOARD_SHORTCUT_PREFIX}OpenDocumentation`, keys: { win: 'Ctrl-/', mac: 'Command-/' }, fn: () => { openDocumentation(); @@ -41,7 +44,7 @@ export function registerCommands({ }); coreEditor.registerKeyboardShortcut({ - name: '__console_auto_indent_request', + name: `${KEYBOARD_SHORTCUT_PREFIX}AutoIndentRequest`, keys: { win: 'Ctrl-I', mac: 'Command-I' }, fn: () => { throttledAutoIndent(); @@ -49,7 +52,7 @@ export function registerCommands({ }); coreEditor.registerKeyboardShortcut({ - name: '__console_move_to_previous_request_start_or_end', + name: `${KEYBOARD_SHORTCUT_PREFIX}MoveToPreviousRequestStartOrEnd`, keys: { win: 'Ctrl-Up', mac: 'Command-Up' }, fn: () => { senseEditor.moveToPreviousRequestEdge(); @@ -57,7 +60,7 @@ export function registerCommands({ }); coreEditor.registerKeyboardShortcut({ - name: '__console_move_to_next_request_start_or_end', + name: `${KEYBOARD_SHORTCUT_PREFIX}MoveToNextRequestStartOrEnd`, keys: { win: 'Ctrl-Down', mac: 'Command-Down' }, fn: () => { senseEditor.moveToNextRequestEdge(false); diff --git a/src/plugins/console/public/services/settings.ts b/src/plugins/console/public/services/settings.ts index 73369e5fd4026..ecc5076af41a4 100644 --- a/src/plugins/console/public/services/settings.ts +++ b/src/plugins/console/public/services/settings.ts @@ -35,79 +35,90 @@ export interface DevToolsSettings { keyboardShortcutsDisabled: boolean; } +enum SettingKeys { + FONT_SIZE = 'font_size', + WRAP_MODE = 'wrap_mode', + TRIPLE_QUOTES = 'triple_quotes', + AUTOCOMPLETE_SETTINGS = 'autocomplete_settings', + CONSOLE_POLLING = 'console_polling', + POLL_INTERVAL = 'poll_interval', + DISABLE_HISTORY = 'disable_history', + KEYBOARD_SHORTCUTS_DISABLED = 'keyboard_shortcuts_disabled', +} + export class Settings { constructor(private readonly storage: Storage) {} getFontSize() { - return this.storage.get('font_size', DEFAULT_SETTINGS.fontSize); + return this.storage.get(SettingKeys.FONT_SIZE, DEFAULT_SETTINGS.fontSize); } setFontSize(size: number) { - this.storage.set('font_size', size); + this.storage.set(SettingKeys.FONT_SIZE, size); return true; } getWrapMode() { - return this.storage.get('wrap_mode', DEFAULT_SETTINGS.wrapMode); + return this.storage.get(SettingKeys.WRAP_MODE, DEFAULT_SETTINGS.wrapMode); } setWrapMode(mode: boolean) { - this.storage.set('wrap_mode', mode); + this.storage.set(SettingKeys.WRAP_MODE, mode); return true; } setTripleQuotes(tripleQuotes: boolean) { - this.storage.set('triple_quotes', tripleQuotes); + this.storage.set(SettingKeys.TRIPLE_QUOTES, tripleQuotes); return true; } getTripleQuotes() { - return this.storage.get('triple_quotes', DEFAULT_SETTINGS.tripleQuotes); + return this.storage.get(SettingKeys.TRIPLE_QUOTES, DEFAULT_SETTINGS.tripleQuotes); } getAutocomplete() { - return this.storage.get('autocomplete_settings', DEFAULT_SETTINGS.autocomplete); + return this.storage.get(SettingKeys.AUTOCOMPLETE_SETTINGS, DEFAULT_SETTINGS.autocomplete); } setAutocomplete(settings: object) { - this.storage.set('autocomplete_settings', settings); + this.storage.set(SettingKeys.AUTOCOMPLETE_SETTINGS, settings); return true; } getPolling() { - return this.storage.get('console_polling', DEFAULT_SETTINGS.polling); + return this.storage.get(SettingKeys.CONSOLE_POLLING, DEFAULT_SETTINGS.polling); } setPolling(polling: boolean) { - this.storage.set('console_polling', polling); + this.storage.set(SettingKeys.CONSOLE_POLLING, polling); return true; } setHistoryDisabled(disable: boolean) { - this.storage.set('disable_history', disable); + this.storage.set(SettingKeys.DISABLE_HISTORY, disable); return true; } getHistoryDisabled() { - return this.storage.get('disable_history', DEFAULT_SETTINGS.historyDisabled); + return this.storage.get(SettingKeys.DISABLE_HISTORY, DEFAULT_SETTINGS.historyDisabled); } setPollInterval(interval: number) { - this.storage.set('poll_interval', interval); + this.storage.set(SettingKeys.POLL_INTERVAL, interval); } getPollInterval() { - return this.storage.get('poll_interval', DEFAULT_SETTINGS.pollInterval); + return this.storage.get(SettingKeys.POLL_INTERVAL, DEFAULT_SETTINGS.pollInterval); } setKeyboardShortcutsDisabled(disable: boolean) { - this.storage.set('keyboard_shortcuts_disabled', disable); + this.storage.set(SettingKeys.KEYBOARD_SHORTCUTS_DISABLED, disable); return true; } getKeyboardShortcutsDisabled() { return this.storage.get( - 'keyboard_shortcuts_disabled', + SettingKeys.KEYBOARD_SHORTCUTS_DISABLED, DEFAULT_SETTINGS.keyboardShortcutsDisabled ); } From d42622cfaf08c5fd809bd693a715e3a6fd6c5810 Mon Sep 17 00:00:00 2001 From: Muhammad Ibragimov Date: Sun, 3 Apr 2022 20:46:53 -0700 Subject: [PATCH 5/6] Remove __console prefix and try different approach --- .../common/constants/keyboard_shortcuts.ts | 9 ---- .../application/components/help_panel.tsx | 7 ++++ .../application/components/settings_modal.tsx | 21 +++++----- .../editor/legacy/console_editor/editor.tsx | 7 ++-- .../console_editor/keyboard_shortcuts.ts | 40 +++++++++++++----- .../use_send_current_request_to_es.ts | 6 +-- .../legacy_core_editor/legacy_core_editor.ts | 12 ++---- .../console/public/services/settings.ts | 42 +++++++++---------- .../console/public/types/core_editor.ts | 7 ++-- 9 files changed, 81 insertions(+), 70 deletions(-) delete mode 100644 src/plugins/console/common/constants/keyboard_shortcuts.ts diff --git a/src/plugins/console/common/constants/keyboard_shortcuts.ts b/src/plugins/console/common/constants/keyboard_shortcuts.ts deleted file mode 100644 index 007da74124e0c..0000000000000 --- a/src/plugins/console/common/constants/keyboard_shortcuts.ts +++ /dev/null @@ -1,9 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -export const KEYBOARD_SHORTCUT_PREFIX = '__console'; diff --git a/src/plugins/console/public/application/components/help_panel.tsx b/src/plugins/console/public/application/components/help_panel.tsx index 50238006f6ce2..ed57d3178df4b 100644 --- a/src/plugins/console/public/application/components/help_panel.tsx +++ b/src/plugins/console/public/application/components/help_panel.tsx @@ -140,6 +140,13 @@ export function HelpPanel(props: Props) { defaultMessage="Select the currently selected or the top most term in auto-complete menu" /> +
Ctrl/Cmd + L
+
+ +
Esc
{ + (isDisabled: boolean) => { if (props.editorInstance) { unregisterCommands(props.editorInstance); - setKeyboardShortcutsDisabled(disabled); + setIsKeyboardShortcutsDisabled(isDisabled); } }, [props.editorInstance] @@ -284,15 +284,14 @@ export function DevToolsSettingsModal(props: Props) { } > } - onChange={(e) => setHistoryDisabled(e.target.checked)} + onChange={(e) => setIsHistoryDisabled(e.target.checked)} /> @@ -305,7 +304,7 @@ export function DevToolsSettingsModal(props: Props) { } > { - const { keyboardShortcutsDisabled } = settings; - if (!keyboardShortcutsDisabled) { + const { isKeyboardShortcutsDisabled } = settings; + if (!isKeyboardShortcutsDisabled) { registerCommands({ senseEditor: editorInstanceRef.current!, sendCurrentRequestToES, @@ -239,11 +239,10 @@ function EditorUI({ initialTextValue, setEditorInstance }: EditorProps) { useEffect(() => { const { current: editor } = editorInstanceRef; - if (editor) { setEditorInstance(editor); } - }); + }, [setEditorInstance]); return (
diff --git a/src/plugins/console/public/application/containers/editor/legacy/console_editor/keyboard_shortcuts.ts b/src/plugins/console/public/application/containers/editor/legacy/console_editor/keyboard_shortcuts.ts index 4e6a1b6a9e8ce..cc36cf9964d47 100644 --- a/src/plugins/console/public/application/containers/editor/legacy/console_editor/keyboard_shortcuts.ts +++ b/src/plugins/console/public/application/containers/editor/legacy/console_editor/keyboard_shortcuts.ts @@ -8,7 +8,6 @@ import { throttle } from 'lodash'; import { SenseEditor } from '../../../../models/sense_editor'; -import { KEYBOARD_SHORTCUT_PREFIX } from '../../../../../../common/constants'; interface Actions { senseEditor: SenseEditor; @@ -29,14 +28,14 @@ export function registerCommands({ coreEditor.registerKeyboardShortcut({ keys: { win: 'Ctrl-Enter', mac: 'Command-Enter' }, - // Prefix names with '__console' which is used to identify the registered keyboard shortcuts in console - // Ace editor uses camelCase strings for names of the commands - name: `${KEYBOARD_SHORTCUT_PREFIX}SendToElasticsearch`, - fn: () => sendCurrentRequestToES(), + name: 'send to Elasticsearch', + fn: () => { + sendCurrentRequestToES(); + }, }); coreEditor.registerKeyboardShortcut({ - name: `${KEYBOARD_SHORTCUT_PREFIX}OpenDocumentation`, + name: 'open documentation', keys: { win: 'Ctrl-/', mac: 'Command-/' }, fn: () => { openDocumentation(); @@ -44,7 +43,7 @@ export function registerCommands({ }); coreEditor.registerKeyboardShortcut({ - name: `${KEYBOARD_SHORTCUT_PREFIX}AutoIndentRequest`, + name: 'auto indent request', keys: { win: 'Ctrl-I', mac: 'Command-I' }, fn: () => { throttledAutoIndent(); @@ -52,7 +51,7 @@ export function registerCommands({ }); coreEditor.registerKeyboardShortcut({ - name: `${KEYBOARD_SHORTCUT_PREFIX}MoveToPreviousRequestStartOrEnd`, + name: 'move to previous request start or end', keys: { win: 'Ctrl-Up', mac: 'Command-Up' }, fn: () => { senseEditor.moveToPreviousRequestEdge(); @@ -60,15 +59,36 @@ export function registerCommands({ }); coreEditor.registerKeyboardShortcut({ - name: `${KEYBOARD_SHORTCUT_PREFIX}MoveToNextRequestStartOrEnd`, + name: 'move to next request start or end', keys: { win: 'Ctrl-Down', mac: 'Command-Down' }, fn: () => { senseEditor.moveToNextRequestEdge(false); }, }); + + coreEditor.registerKeyboardShortcut({ + name: 'gotoline', + keys: { win: 'Ctrl-L', mac: 'Command-L' }, + fn: (editor) => { + const line = parseInt(prompt('Enter line number') ?? '', 10); + if (!isNaN(line)) { + editor.gotoLine(line); + } + }, + }); } export function unregisterCommands(senseEditor: SenseEditor) { const coreEditor = senseEditor.getCoreEditor(); - coreEditor.unregisterKeyboardShortcuts(); + const commands = [ + 'send to Elasticsearch', + 'open documentation', + 'auto indent request', + 'move to previous request start or end', + 'move to next request start or end', + 'gotoline', + ]; + commands.forEach((command) => { + coreEditor.unregisterKeyboardShortcut(command); + }); } diff --git a/src/plugins/console/public/application/hooks/use_send_current_request_to_es/use_send_current_request_to_es.ts b/src/plugins/console/public/application/hooks/use_send_current_request_to_es/use_send_current_request_to_es.ts index f53a9dadbe108..e7c436c9806b3 100644 --- a/src/plugins/console/public/application/hooks/use_send_current_request_to_es/use_send_current_request_to_es.ts +++ b/src/plugins/console/public/application/hooks/use_send_current_request_to_es/use_send_current_request_to_es.ts @@ -49,9 +49,9 @@ export const useSendCurrentRequestToES = () => { const results = await sendRequestToES({ http, requests }); let saveToHistoryError: undefined | Error; - const { historyDisabled } = settings.toJSON(); + const { isHistoryDisabled } = settings.toJSON(); - if (!historyDisabled) { + if (!isHistoryDisabled) { results.forEach(({ request: { path, method, data } }) => { try { history.addToHistory(path, method, data); @@ -81,7 +81,7 @@ export const useSendCurrentRequestToES = () => { notifications.toasts.remove(toast); }, onDisableSavingToHistory: () => { - settings.setHistoryDisabled(true); + settings.setIsHistoryDisabled(true); notifications.toasts.remove(toast); }, }), diff --git a/src/plugins/console/public/application/models/legacy_core_editor/legacy_core_editor.ts b/src/plugins/console/public/application/models/legacy_core_editor/legacy_core_editor.ts index 83bf88ca16354..f13597e933bb2 100644 --- a/src/plugins/console/public/application/models/legacy_core_editor/legacy_core_editor.ts +++ b/src/plugins/console/public/application/models/legacy_core_editor/legacy_core_editor.ts @@ -297,15 +297,9 @@ 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]); - } - }); + unregisterKeyboardShortcut(command: string) { + // @ts-ignore + this.editor.commands.removeCommand(command); } legacyUpdateUI(range: Range) { diff --git a/src/plugins/console/public/services/settings.ts b/src/plugins/console/public/services/settings.ts index ecc5076af41a4..6757631a7d7c5 100644 --- a/src/plugins/console/public/services/settings.ts +++ b/src/plugins/console/public/services/settings.ts @@ -15,8 +15,8 @@ export const DEFAULT_SETTINGS = Object.freeze({ tripleQuotes: true, wrapMode: true, autocomplete: Object.freeze({ fields: true, indices: true, templates: true, dataStreams: true }), - historyDisabled: false, - keyboardShortcutsDisabled: false, + isHistoryDisabled: false, + isKeyboardShortcutsDisabled: false, }); export interface DevToolsSettings { @@ -31,8 +31,8 @@ export interface DevToolsSettings { polling: boolean; pollInterval: number; tripleQuotes: boolean; - historyDisabled: boolean; - keyboardShortcutsDisabled: boolean; + isHistoryDisabled: boolean; + isKeyboardShortcutsDisabled: boolean; } enum SettingKeys { @@ -42,8 +42,8 @@ enum SettingKeys { AUTOCOMPLETE_SETTINGS = 'autocomplete_settings', CONSOLE_POLLING = 'console_polling', POLL_INTERVAL = 'poll_interval', - DISABLE_HISTORY = 'disable_history', - KEYBOARD_SHORTCUTS_DISABLED = 'keyboard_shortcuts_disabled', + IS_HISTORY_DISABLED = 'is_history_disabled', + IS_KEYBOARD_SHORTCUTS_DISABLED = 'is_keyboard_shortcuts_disabled', } export class Settings { @@ -94,13 +94,13 @@ export class Settings { return true; } - setHistoryDisabled(disable: boolean) { - this.storage.set(SettingKeys.DISABLE_HISTORY, disable); + setIsHistoryDisabled(isDisabled: boolean) { + this.storage.set(SettingKeys.IS_HISTORY_DISABLED, isDisabled); return true; } - getHistoryDisabled() { - return this.storage.get(SettingKeys.DISABLE_HISTORY, DEFAULT_SETTINGS.historyDisabled); + getIsHistoryDisabled() { + return this.storage.get(SettingKeys.IS_HISTORY_DISABLED, DEFAULT_SETTINGS.isHistoryDisabled); } setPollInterval(interval: number) { @@ -111,15 +111,15 @@ export class Settings { return this.storage.get(SettingKeys.POLL_INTERVAL, DEFAULT_SETTINGS.pollInterval); } - setKeyboardShortcutsDisabled(disable: boolean) { - this.storage.set(SettingKeys.KEYBOARD_SHORTCUTS_DISABLED, disable); + setIsKeyboardShortcutsDisabled(disable: boolean) { + this.storage.set(SettingKeys.IS_KEYBOARD_SHORTCUTS_DISABLED, disable); return true; } - getKeyboardShortcutsDisabled() { + getIsKeyboardShortcutsDisabled() { return this.storage.get( - SettingKeys.KEYBOARD_SHORTCUTS_DISABLED, - DEFAULT_SETTINGS.keyboardShortcutsDisabled + SettingKeys.IS_KEYBOARD_SHORTCUTS_DISABLED, + DEFAULT_SETTINGS.isKeyboardShortcutsDisabled ); } @@ -131,8 +131,8 @@ export class Settings { fontSize: parseFloat(this.getFontSize()), polling: Boolean(this.getPolling()), pollInterval: this.getPollInterval(), - historyDisabled: Boolean(this.getHistoryDisabled()), - keyboardShortcutsDisabled: Boolean(this.getKeyboardShortcutsDisabled()), + isHistoryDisabled: Boolean(this.getIsHistoryDisabled()), + isKeyboardShortcutsDisabled: Boolean(this.getIsKeyboardShortcutsDisabled()), }; } @@ -143,8 +143,8 @@ export class Settings { autocomplete, polling, pollInterval, - historyDisabled, - keyboardShortcutsDisabled, + isHistoryDisabled, + isKeyboardShortcutsDisabled, }: DevToolsSettings) { this.setFontSize(fontSize); this.setWrapMode(wrapMode); @@ -152,8 +152,8 @@ export class Settings { this.setAutocomplete(autocomplete); this.setPolling(polling); this.setPollInterval(pollInterval); - this.setHistoryDisabled(historyDisabled); - this.setKeyboardShortcutsDisabled(keyboardShortcutsDisabled); + this.setIsHistoryDisabled(isHistoryDisabled); + this.setIsKeyboardShortcutsDisabled(isKeyboardShortcutsDisabled); } } diff --git a/src/plugins/console/public/types/core_editor.ts b/src/plugins/console/public/types/core_editor.ts index 88bfe743439e1..db8010afe762b 100644 --- a/src/plugins/console/public/types/core_editor.ts +++ b/src/plugins/console/public/types/core_editor.ts @@ -6,6 +6,7 @@ * Side Public License, v 1. */ +import type { Editor } from 'brace'; import { TokensProvider } from './tokens_provider'; import { Token } from './token'; @@ -252,14 +253,14 @@ export interface CoreEditor { */ registerKeyboardShortcut(opts: { keys: string | { win?: string; mac?: string }; - fn: () => void; + fn: (editor: Editor) => void; name: string; }): void; /** - * Unregister a keyboard shortcut + * Unregister a keyboard shortcut and provide a command name */ - unregisterKeyboardShortcuts(): void; + unregisterKeyboardShortcut(command: string): void; /** * Register a completions function that will be called when the editor From 1470c913054216deb765f9abf87057a7226e4301 Mon Sep 17 00:00:00 2001 From: Muhammad Ibragimov Date: Tue, 12 Apr 2022 03:22:30 -0700 Subject: [PATCH 6/6] Address comments --- .../application/components/settings_modal.tsx | 7 ++++- .../console_editor/keyboard_shortcuts.ts | 31 ++++++++++--------- .../application/containers/main/main.tsx | 2 +- 3 files changed, 23 insertions(+), 17 deletions(-) diff --git a/src/plugins/console/public/application/components/settings_modal.tsx b/src/plugins/console/public/application/components/settings_modal.tsx index f00593f15d1dd..71ab14001c2c2 100644 --- a/src/plugins/console/public/application/components/settings_modal.tsx +++ b/src/plugins/console/public/application/components/settings_modal.tsx @@ -162,6 +162,11 @@ export function DevToolsSettingsModal(props: Props) { [props.editorInstance] ); + const toggleSavingToHistory = useCallback( + (isDisabled: boolean) => setIsHistoryDisabled(isDisabled), + [] + ); + // It only makes sense to show polling options if the user needs to fetch any data. const pollingFields = fields || indices || templates ? ( @@ -291,7 +296,7 @@ export function DevToolsSettingsModal(props: Props) { id="console.settingsPage.savingRequestsToHistoryMessage" /> } - onChange={(e) => setIsHistoryDisabled(e.target.checked)} + onChange={(e) => toggleSavingToHistory(e.target.checked)} /> diff --git a/src/plugins/console/public/application/containers/editor/legacy/console_editor/keyboard_shortcuts.ts b/src/plugins/console/public/application/containers/editor/legacy/console_editor/keyboard_shortcuts.ts index cc36cf9964d47..3d100ef0a5528 100644 --- a/src/plugins/console/public/application/containers/editor/legacy/console_editor/keyboard_shortcuts.ts +++ b/src/plugins/console/public/application/containers/editor/legacy/console_editor/keyboard_shortcuts.ts @@ -15,6 +15,15 @@ interface Actions { openDocumentation: () => void; } +const COMMANDS = { + SEND_TO_ELASTICSEARCH: 'send to Elasticsearch', + OPEN_DOCUMENTATION: 'open documentation', + AUTO_INDENT_REQUEST: 'auto indent request', + MOVE_TO_PREVIOUS_REQUEST: 'move to previous request start or end', + MOVE_TO_NEXT_REQUEST: 'move to next request start or end', + GO_TO_LINE: 'gotoline', +}; + export function registerCommands({ senseEditor, sendCurrentRequestToES, @@ -28,14 +37,14 @@ export function registerCommands({ coreEditor.registerKeyboardShortcut({ keys: { win: 'Ctrl-Enter', mac: 'Command-Enter' }, - name: 'send to Elasticsearch', + name: COMMANDS.SEND_TO_ELASTICSEARCH, fn: () => { sendCurrentRequestToES(); }, }); coreEditor.registerKeyboardShortcut({ - name: 'open documentation', + name: COMMANDS.OPEN_DOCUMENTATION, keys: { win: 'Ctrl-/', mac: 'Command-/' }, fn: () => { openDocumentation(); @@ -43,7 +52,7 @@ export function registerCommands({ }); coreEditor.registerKeyboardShortcut({ - name: 'auto indent request', + name: COMMANDS.AUTO_INDENT_REQUEST, keys: { win: 'Ctrl-I', mac: 'Command-I' }, fn: () => { throttledAutoIndent(); @@ -51,7 +60,7 @@ export function registerCommands({ }); coreEditor.registerKeyboardShortcut({ - name: 'move to previous request start or end', + name: COMMANDS.MOVE_TO_PREVIOUS_REQUEST, keys: { win: 'Ctrl-Up', mac: 'Command-Up' }, fn: () => { senseEditor.moveToPreviousRequestEdge(); @@ -59,7 +68,7 @@ export function registerCommands({ }); coreEditor.registerKeyboardShortcut({ - name: 'move to next request start or end', + name: COMMANDS.MOVE_TO_NEXT_REQUEST, keys: { win: 'Ctrl-Down', mac: 'Command-Down' }, fn: () => { senseEditor.moveToNextRequestEdge(false); @@ -67,7 +76,7 @@ export function registerCommands({ }); coreEditor.registerKeyboardShortcut({ - name: 'gotoline', + name: COMMANDS.GO_TO_LINE, keys: { win: 'Ctrl-L', mac: 'Command-L' }, fn: (editor) => { const line = parseInt(prompt('Enter line number') ?? '', 10); @@ -80,15 +89,7 @@ export function registerCommands({ export function unregisterCommands(senseEditor: SenseEditor) { const coreEditor = senseEditor.getCoreEditor(); - const commands = [ - 'send to Elasticsearch', - 'open documentation', - 'auto indent request', - 'move to previous request start or end', - 'move to next request start or end', - 'gotoline', - ]; - commands.forEach((command) => { + Object.values(COMMANDS).forEach((command) => { coreEditor.unregisterKeyboardShortcut(command); }); } diff --git a/src/plugins/console/public/application/containers/main/main.tsx b/src/plugins/console/public/application/containers/main/main.tsx index f28fd01bd8eae..5895b919f9842 100644 --- a/src/plugins/console/public/application/containers/main/main.tsx +++ b/src/plugins/console/public/application/containers/main/main.tsx @@ -111,7 +111,7 @@ export function Main() { {showingHistory ? {renderConsoleHistory()} : null} - setEditorInstance(instance)} /> +