[Step 2][ESQL] Autocomplete part

src/plugins/unified_search/public/query_string_input/text_based_languages_editor/index.tsx

@@ -6,9 +6,16 @@
  * Side Public License, v 1.
  */
 
-import React, { useRef, memo, useEffect, useState, useCallback } from 'react';
+import React, { useRef, memo, useEffect, useState, useCallback, useMemo } from 'react';
 import classNames from 'classnames';
-import { SQLLang, monaco, ESQL_LANG_ID, ESQL_THEME_ID } from '@kbn/monaco';
+import {
+  SQLLang,
+  monaco,
+  ESQL_LANG_ID,
+  ESQL_THEME_ID,
+  ESQLLang,
+  ESQLCustomAutocompleteCallbacks,
+} from '@kbn/monaco';
 import type { AggregateQuery } from '@kbn/es-query';
 import { getAggregateQueryMode } from '@kbn/es-query';
 import {
@@ -111,7 +118,7 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
   const [documentationSections, setDocumentationSections] =
     useState<LanguageDocumentationSections>();
   const kibana = useKibana<IUnifiedSearchPluginServices>();
-  const { uiSettings } = kibana.services;
+  const { uiSettings, dataViews } = kibana.services;
 
   const styles = textBasedLanguagedEditorStyles(
     euiTheme,
@@ -331,6 +338,42 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
     getDocumentation();
   }, [language]);
 
+  const getSourceIdentifiers: ESQLCustomAutocompleteCallbacks['getSourceIdentifiers'] =
+    useCallback(() => {
+      return dataViews.getTitles();
+    }, [dataViews]);
+
+  const getFieldsIdentifiers: ESQLCustomAutocompleteCallbacks['getFieldsIdentifiers'] =
+    useMemo(() => {
+      let source: string;
+      let cachedSuggestions: string[] = [];
+
+      return async (ctx) => {
+        let data: string[] = [];
+        const sourceKey = ctx.userDefinedVariables.sourceIdentifiers.join(',');
+        if (sourceKey === source) {
+          return cachedSuggestions;
+        }
+        for (const s of ctx.userDefinedVariables.sourceIdentifiers) {
+          if (s) {
+            try {
+              const [dataView] = await dataViews.find(s, 1);
+              if (dataView) {
+                data = [...data, ...dataView.fields.map((f) => f.name)];
+              }
+            } catch (e) {
+              // nothing to be here
+            }
+          }
+        }
+
+        cachedSuggestions = data;
+        source = sourceKey;
+
+        return cachedSuggestions;
+      };
+    }, [dataViews]);
+
   const codeEditorOptions: CodeEditorProps['options'] = {
     automaticLayout: false,
     accessibilitySupport: 'off',
@@ -520,6 +563,14 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
                       value={codeOneLiner || code}
                       options={codeEditorOptions}
                       width="100%"
+                      suggestionProvider={
+                        language === 'esql'
+                          ? ESQLLang.getSuggestionProvider?.({
+                              getSourceIdentifiers,
+                              getFieldsIdentifiers,
+                            })
+                          : undefined
+                      }
                       onChange={onQueryUpdate}
                       editorDidMount={(editor) => {
                         editor1.current = editor;