Improve LuceneQueryEditor keyboard a11y, fixes #76

quickwit-oss · Feb 19, 2024 · a5ab579 · a5ab579
1 parent 7d0af35
commit a5ab579
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 7 deletions.
diff --git a/src/components/LuceneQueryEditor.tsx b/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;
+      }}])
+    ]}
     />);
 }
diff --git a/src/components/QueryEditor/index.tsx b/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"
+        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} />