Minor changes

Author: ddelemeny

src/LogContext/components/LogContextUI.tsx

@@ -34,7 +34,7 @@ export function LogContextUI(props: LogContextUIProps ){
   const {query, parsedQuery, setQuery, setParsedQuery} = builder;
   const [canRunQuery, setCanRunQuery] = useState<boolean>(false);
   const { origQuery, updateQuery, runContextQuery } = props;
-  const [fields, autocompleter] = useDatasourceFields(props.datasource);
+  const {fields, getSuggestions} = useDatasourceFields(props.datasource);
 
   useEffect(()=>{
     setQuery(origQuery?.query || '')
@@ -66,7 +66,7 @@ export function LogContextUI(props: LogContextUIProps ){
             <LogContextQueryBuilderSidebar {...props} updateQuery={setParsedQuery} searchableFields={fields}/>
             <div className={css`width:100%; display:flex; flex-direction:column; gap:0.5rem; min-width:0;`}>
               {ActionBar}
-              <LuceneQueryEditor builder={builder} autocompleter={autocompleter} onChange={builder.setQuery}/>
+              <LuceneQueryEditor builder={builder} autocompleter={getSuggestions} onChange={builder.setQuery}/>
             </div>
         </QueryBuilderContext.Provider>
       </DatasourceContext.Provider>

src/components/QueryEditor/index.tsx

@@ -62,7 +62,7 @@ export const ElasticSearchQueryField = ({ value, onChange }: { value?: string; o
   const builder = useQueryBuilder();
   const {setQuery} = builder;
   const datasource = useDatasource()
-  const [fields, autocompleter] = useDatasourceFields(datasource);
+  const { getSuggestions } = useDatasourceFields(datasource);
 
   useEffect(()=>{
     setQuery(value || '')
@@ -75,9 +75,7 @@ export const ElasticSearchQueryField = ({ value, onChange }: { value?: string; o
 
   return (
     <div className={styles.queryItem}>
-      <SearchableFieldsContext.Provider value={fields}>
-        <LuceneQueryEditor placeholder="Enter a lucene query" builder={builder} autocompleter={autocompleter} onChange={onEditorChange}/>
-      </SearchableFieldsContext.Provider>
+        <LuceneQueryEditor placeholder="Enter a lucene query" builder={builder} autocompleter={getSuggestions} onChange={onEditorChange}/>
     </div>
   );
 };

src/datasource.utils.ts

@@ -1,23 +1,31 @@
 import { QuickwitDataSource } from "datasource";
 import { useState, useEffect, useCallback } from "react";
+import{ MetricFindValue } from '@grafana/data';
 
 /**
  * Provide suggestions based on datasource fields
  */
 
-// TODO : improve autocompleter interface
+export type Suggestion = {
+  from: number,
+  options: Array<{
+    label: string,
+    detail?: string,
+    type?: string,
+  }>
+}
 
-export function useDatasourceFields(datasource: QuickwitDataSource): [any[], (word: string) => any] {
-  const [fields, setFields] = useState<any[]>([]);
+export function useDatasourceFields(datasource: QuickwitDataSource) {
+  const [fields, setFields] = useState<MetricFindValue[]>([]);
 
   useEffect(() => {
     if (datasource.getTagKeys) {
       datasource.getTagKeys({ searchable: true }).then(setFields);
     }
   }, [datasource, setFields]);
 
-  const getSuggestions = useCallback(async (word: string) => {
-    let suggestions: { from: number; options: any[]; } = { from: 0, options: [] };
+  const getSuggestions = useCallback(async (word: string): Promise<Suggestion> => {
+    let suggestions: Suggestion = { from: 0, options: [] };
 
     const wordIsField = word.match(/([\w\.]+):"?(\S*)/);
     if (wordIsField?.length) {
@@ -40,5 +48,6 @@ export function useDatasourceFields(datasource: QuickwitDataSource): [any[], (wo
     return suggestions;
 
   }, [datasource, fields]);
-  return [fields, getSuggestions];
+
+  return {fields, getSuggestions}
 }