Improve LuceneQueryEditor keyboard a11y, fixes #76

Author: ddelemeny

src/LogContext/components/LogContextUI.tsx

@@ -64,7 +64,13 @@ export function LogContextUI(props: LogContextUIProps ){
         <LogContextQueryBuilderSidebar {...props} builder={builder} updateQuery={setParsedQuery} searchableFields={fields}/>
         <div className={css`width:100%; display:flex; flex-direction:column; gap:0.5rem; min-width:0;`}>
           {ActionBar}
-          <LuceneQueryEditor value={builder.query} autocompleter={getSuggestions} onChange={builder.setQuery}/>
+          <LuceneQueryEditor
+            placeholder="Shift-Enter to run the query, Ctrl-Space to autocomplete"
+            value={builder.query}
+            autocompleter={getSuggestions}
+            onChange={builder.setQuery}
+            onSubmit={()=>runQuery()}
+            />
         </div>
       </DatasourceContext.Provider>
     </div>

src/components/LuceneQueryEditor.tsx

@@ -4,7 +4,7 @@ import { useObservableCallback, useSubscription } from 'observable-hooks'
 import { css } from "@emotion/css";
 
 
-import CodeMirror, { ReactCodeMirrorRef } from '@uiw/react-codemirror';
+import CodeMirror, { ReactCodeMirrorRef, keymap } from '@uiw/react-codemirror';
 import {linter, Diagnostic, lintGutter} from "@codemirror/lint"
 import {autocompletion, CompletionContext} from "@codemirror/autocomplete"
 import { LuceneQuery } from "utils/lucene";
@@ -15,6 +15,7 @@ export type LuceneQueryEditorProps = {
   value: string,
   autocompleter: (word: string) => any,
   onChange: (query: string) => void
+  onSubmit: (query: string) => void
 }
 
 export function LuceneQueryEditor(props: LuceneQueryEditorProps){
@@ -61,6 +62,14 @@ export function LuceneQueryEditor(props: LuceneQueryEditorProps){
     placeholder={props.placeholder}
     value={props.value}
     onChange={onChange}
-    extensions={[queryLinter, lintGutter(), autocomplete]}
+    indentWithTab={false}
+    extensions={[
+      queryLinter, lintGutter(),
+      autocomplete,
+      keymap.of([{key:'Shift-Enter', run:(target)=>{
+        props.onSubmit(target.state.doc.toString())
+        return true;
+      }}])
+    ]}
     />);
 }

src/components/QueryEditor/index.tsx

@@ -34,7 +34,7 @@ export const QueryEditor = ({ query, onChange, onRunQuery, datasource, range, ap
       query={query}
       range={range || getDefaultTimeRange()}
     >
-      <QueryEditorForm value={query} />
+      <QueryEditorForm value={query} onRunQuery={onRunQuery} />
     </ElasticsearchProvider>
   );
 };
@@ -54,21 +54,33 @@ export const useSearchableFields = getHook(SearchableFieldsContext)
 
 interface Props {
   value: ElasticsearchQuery;
+  onRunQuery: (query: string) => void
 }
 
-export const ElasticSearchQueryField = ({ value, onChange }: { value?: string; onChange: (v: string) => void }) => {
+type ElasticSearchQueryFieldProps = {
+  value?: string;
+  onChange: (v: string) => void
+  onSubmit: (v: string) => void
+}
+export const ElasticSearchQueryField = ({ value, onChange, onSubmit }: ElasticSearchQueryFieldProps) => {
   const styles = useStyles2(getStyles);
   const datasource = useDatasource()
   const { getSuggestions } = useDatasourceFields(datasource);
 
   return (
     <div className={styles.queryItem}>
-      <LuceneQueryEditor placeholder="Enter a lucene query" value={value || ''} autocompleter={getSuggestions} onChange={onChange}/>
+      <LuceneQueryEditor 
+        placeholder="Enter a lucene query - Type Shift-Enter to run query, Ctrl-Space to autocomplete"
+        value={value || ''}
+        autocompleter={getSuggestions}
+        onChange={onChange}
+        onSubmit={onSubmit}
+        />
     </div>
   );
 };
 
-const QueryEditorForm = ({ value }: Props) => {
+const QueryEditorForm = ({ value, onRunQuery }: Props) => {
   const dispatch = useDispatch();
   const nextId = useNextId();
   const styles = useStyles2(getStyles);
@@ -87,7 +99,7 @@ const QueryEditorForm = ({ value }: Props) => {
       </div>
       <div className={styles.root}>
         <InlineLabel width={17}>Lucene Query</InlineLabel>
-        <ElasticSearchQueryField onChange={(query) => dispatch(changeQuery(query))} value={value?.query} />
+        <ElasticSearchQueryField onChange={(query) => dispatch(changeQuery(query))} value={value?.query} onSubmit={onRunQuery} />
       </div>
 
       <MetricAggregationsEditor nextId={nextId} />