From 6d6e170d3e48a1c16b983dd68428012d0b8f6ea5 Mon Sep 17 00:00:00 2001 From: sumukhswamy Date: Tue, 24 Sep 2024 11:22:45 -0700 Subject: [PATCH 1/6] added keyboard listener Signed-off-by: sumukhswamy --- .../ui/query_editor/query_editor_top_row.tsx | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/src/plugins/data/public/ui/query_editor/query_editor_top_row.tsx b/src/plugins/data/public/ui/query_editor/query_editor_top_row.tsx index d3c76623c3f5..b645a9e27758 100644 --- a/src/plugins/data/public/ui/query_editor/query_editor_top_row.tsx +++ b/src/plugins/data/public/ui/query_editor/query_editor_top_row.tsx @@ -13,7 +13,7 @@ import { prettyDuration, } from '@elastic/eui'; import classNames from 'classnames'; -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { createPortal } from 'react-dom'; import { IDataPluginServices, IIndexPattern, Query, TimeHistoryContract, TimeRange } from '../..'; import { @@ -72,6 +72,20 @@ export default function QueryEditorTopRow(props: QueryEditorTopRowProps) { }, } = opensearchDashboards.services; + useEffect(() => { + function handleCmdEnter(event: KeyboardEvent) { + if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') { + event.preventDefault(); + + onClickSubmitButton(event); + } + } + document.addEventListener('keydown', handleCmdEnter); + return () => { + document.removeEventListener('keydown', handleCmdEnter); + }; + }, [onClickSubmitButton]); + const queryLanguage = props.query && props.query.language; const persistedLog: PersistedLog | undefined = React.useMemo( () => @@ -81,7 +95,7 @@ export default function QueryEditorTopRow(props: QueryEditorTopRowProps) { [queryLanguage, uiSettings, storage, appName] ); - function onClickSubmitButton(event: React.MouseEvent) { + function onClickSubmitButton(event: React.MouseEvent | KeyboardEvent) { if (persistedLog && props.query) { persistedLog.add(props.query.query); } From a1d1b62012d6a721d890b95210317d6d1ad06662 Mon Sep 17 00:00:00 2001 From: sumukhswamy Date: Wed, 25 Sep 2024 14:54:46 -0700 Subject: [PATCH 2/6] changed implementation to monaco action button Signed-off-by: sumukhswamy --- .../data/public/ui/query_editor/query_editor.tsx | 15 ++++++++++++++- .../ui/query_editor/query_editor_top_row.tsx | 16 +--------------- 2 files changed, 15 insertions(+), 16 deletions(-) diff --git a/src/plugins/data/public/ui/query_editor/query_editor.tsx b/src/plugins/data/public/ui/query_editor/query_editor.tsx index 6932cec906f8..feecc7336b61 100644 --- a/src/plugins/data/public/ui/query_editor/query_editor.tsx +++ b/src/plugins/data/public/ui/query_editor/query_editor.tsx @@ -382,6 +382,20 @@ export default class QueryEditorUI extends Component { editor.setValue(`\n`.repeat(10)); this.setState({ lineCount: editor.getModel()?.getLineCount() }); this.inputRef = editor; + const handleEnterPress = () => { + this.onSubmit(this.props.query); + }; + + const disposable = editor.onKeyDown((e) => { + if (e.metaKey && e.keyCode === monaco.KeyCode.Enter) { + e.preventDefault(); + handleEnterPress(); + } + }); + + return () => { + disposable.dispose(); + }; }, footerItems: { start: [ @@ -441,7 +455,6 @@ export default class QueryEditorUI extends Component { }; const languageEditorFunc = this.languageManager.getLanguage(this.props.query.language)!.editor; - const languageEditor = useQueryEditor ? languageEditorFunc(singleLineInputProps, {}, defaultInputProps) : languageEditorFunc(singleLineInputProps, singleLineInputProps, { diff --git a/src/plugins/data/public/ui/query_editor/query_editor_top_row.tsx b/src/plugins/data/public/ui/query_editor/query_editor_top_row.tsx index b645a9e27758..e3e039b134d4 100644 --- a/src/plugins/data/public/ui/query_editor/query_editor_top_row.tsx +++ b/src/plugins/data/public/ui/query_editor/query_editor_top_row.tsx @@ -72,20 +72,6 @@ export default function QueryEditorTopRow(props: QueryEditorTopRowProps) { }, } = opensearchDashboards.services; - useEffect(() => { - function handleCmdEnter(event: KeyboardEvent) { - if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') { - event.preventDefault(); - - onClickSubmitButton(event); - } - } - document.addEventListener('keydown', handleCmdEnter); - return () => { - document.removeEventListener('keydown', handleCmdEnter); - }; - }, [onClickSubmitButton]); - const queryLanguage = props.query && props.query.language; const persistedLog: PersistedLog | undefined = React.useMemo( () => @@ -95,7 +81,7 @@ export default function QueryEditorTopRow(props: QueryEditorTopRowProps) { [queryLanguage, uiSettings, storage, appName] ); - function onClickSubmitButton(event: React.MouseEvent | KeyboardEvent) { + function onClickSubmitButton(event: React.MouseEvent) { if (persistedLog && props.query) { persistedLog.add(props.query.query); } From ec4cdff666487a6579c5c4c275b89bcdbbe766c9 Mon Sep 17 00:00:00 2001 From: sumukhswamy Date: Wed, 25 Sep 2024 14:55:36 -0700 Subject: [PATCH 3/6] changed implementation to monaco action button Signed-off-by: sumukhswamy --- .../data/public/ui/query_editor/query_editor_top_row.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugins/data/public/ui/query_editor/query_editor_top_row.tsx b/src/plugins/data/public/ui/query_editor/query_editor_top_row.tsx index e3e039b134d4..d3c76623c3f5 100644 --- a/src/plugins/data/public/ui/query_editor/query_editor_top_row.tsx +++ b/src/plugins/data/public/ui/query_editor/query_editor_top_row.tsx @@ -13,7 +13,7 @@ import { prettyDuration, } from '@elastic/eui'; import classNames from 'classnames'; -import React, { useEffect, useState } from 'react'; +import React, { useState } from 'react'; import { createPortal } from 'react-dom'; import { IDataPluginServices, IIndexPattern, Query, TimeHistoryContract, TimeRange } from '../..'; import { From 2b22fe566c2ae2a114eee5da66cf701fc89cdbea Mon Sep 17 00:00:00 2001 From: sumukhswamy Date: Wed, 25 Sep 2024 15:00:08 -0700 Subject: [PATCH 4/6] added space Signed-off-by: sumukhswamy --- src/plugins/data/public/ui/query_editor/query_editor.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/plugins/data/public/ui/query_editor/query_editor.tsx b/src/plugins/data/public/ui/query_editor/query_editor.tsx index feecc7336b61..077752e9f57a 100644 --- a/src/plugins/data/public/ui/query_editor/query_editor.tsx +++ b/src/plugins/data/public/ui/query_editor/query_editor.tsx @@ -455,6 +455,7 @@ export default class QueryEditorUI extends Component { }; const languageEditorFunc = this.languageManager.getLanguage(this.props.query.language)!.editor; + const languageEditor = useQueryEditor ? languageEditorFunc(singleLineInputProps, {}, defaultInputProps) : languageEditorFunc(singleLineInputProps, singleLineInputProps, { From 2ea4a9119f720918f66017c9c2b7ef9c76fec9c6 Mon Sep 17 00:00:00 2001 From: Sumukh Swamy Date: Tue, 1 Oct 2024 09:12:00 -0700 Subject: [PATCH 5/6] Update src/plugins/data/public/ui/query_editor/query_editor.tsx Co-authored-by: Ashwin P Chandran Signed-off-by: Sumukh Swamy --- .../data/public/ui/query_editor/query_editor.tsx | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/src/plugins/data/public/ui/query_editor/query_editor.tsx b/src/plugins/data/public/ui/query_editor/query_editor.tsx index 21e389017550..de5632f48cee 100644 --- a/src/plugins/data/public/ui/query_editor/query_editor.tsx +++ b/src/plugins/data/public/ui/query_editor/query_editor.tsx @@ -366,15 +366,8 @@ export default class QueryEditorUI extends Component { editor.setValue(`\n`.repeat(10)); this.setState({ lineCount: editor.getModel()?.getLineCount() }); this.inputRef = editor; - const handleEnterPress = () => { - this.onSubmit(this.props.query); - }; - - const disposable = editor.onKeyDown((e) => { - if (e.metaKey && e.keyCode === monaco.KeyCode.Enter) { - e.preventDefault(); - handleEnterPress(); - } + editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, () => { + this.onSubmit(this.props.query); }); return () => { From ace2619309aa28f4d2328ad22334faaf3f221d5a Mon Sep 17 00:00:00 2001 From: sumukhswamy Date: Tue, 1 Oct 2024 10:52:34 -0700 Subject: [PATCH 6/6] updated linter, added changesheet Signed-off-by: sumukhswamy --- changelogs/fragments/8322.yml | 2 ++ src/plugins/data/public/ui/query_editor/query_editor.tsx | 3 ++- 2 files changed, 4 insertions(+), 1 deletion(-) create mode 100644 changelogs/fragments/8322.yml diff --git a/changelogs/fragments/8322.yml b/changelogs/fragments/8322.yml new file mode 100644 index 000000000000..c44f12292b5f --- /dev/null +++ b/changelogs/fragments/8322.yml @@ -0,0 +1,2 @@ +fix: +- Keyboard shortcut for running queries ([#8322](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8322)) \ No newline at end of file diff --git a/src/plugins/data/public/ui/query_editor/query_editor.tsx b/src/plugins/data/public/ui/query_editor/query_editor.tsx index de5632f48cee..2ce9e9af484f 100644 --- a/src/plugins/data/public/ui/query_editor/query_editor.tsx +++ b/src/plugins/data/public/ui/query_editor/query_editor.tsx @@ -366,8 +366,9 @@ export default class QueryEditorUI extends Component { editor.setValue(`\n`.repeat(10)); this.setState({ lineCount: editor.getModel()?.getLineCount() }); this.inputRef = editor; + // eslint-disable-next-line no-bitwise editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, () => { - this.onSubmit(this.props.query); + this.onSubmit(this.props.query); }); return () => {