Fix KQL autocomplete value suggestions (elastic#78676)

src/plugins/data/public/ui/typeahead/suggestion_component.tsx

@@ -72,7 +72,9 @@ export function SuggestionComponent(props: Props) {
         <div className="kbnSuggestionItem__type">
           <EuiIcon type={getEuiIconType(props.suggestion.type)} />
         </div>
-        <div className="kbnSuggestionItem__text">{props.suggestion.text}</div>
+        <div className="kbnSuggestionItem__text" data-test-subj="autoCompleteSuggestionText">
+          {props.suggestion.text}
+        </div>
         {props.shouldDisplayDescription && (
           <div className="kbnSuggestionItem__description">{props.suggestion.description}</div>
         )}

test/functional/services/query_bar.ts

@@ -87,6 +87,11 @@ export function QueryBarProvider({ getService, getPageObjects }: FtrProviderCont
       const queryLanguageButton = await testSubjects.find('switchQueryLanguageButton');
       expect((await queryLanguageButton.getVisibleText()).toLowerCase()).to.eql(lang);
     }
+
+    public async getSuggestions() {
+      const suggestions = await testSubjects.findAll('autoCompleteSuggestionText');
+      return Promise.all(suggestions.map((suggestion) => suggestion.getVisibleText()));
+    }
   }
 
   return new QueryBar();

x-pack/plugins/data_enhanced/public/autocomplete/providers/kql_query_suggestion/value.ts

@@ -9,6 +9,8 @@ import { escapeQuotes } from './lib/escape_kuery';
 import { KqlQuerySuggestionProvider } from './types';
 import { getAutocompleteService } from '../../../services';
 import {
+  IFieldType,
+  IIndexPattern,
   QuerySuggestion,
   QuerySuggestionTypes,
 } from '../../../../../../../src/plugins/data/public';
@@ -23,29 +25,27 @@ const wrapAsSuggestions = (start: number, end: number, query: string, values: st
       end,
     }));
 
-export const setupGetValueSuggestions: KqlQuerySuggestionProvider = (core) => {
+export const setupGetValueSuggestions: KqlQuerySuggestionProvider = () => {
   return async (
     { indexPatterns, boolFilter, signal },
     { start, end, prefix, suffix, fieldName, nestedPath }
   ): Promise<QuerySuggestion[]> => {
-    const allFields = flatten(
-      indexPatterns.map((indexPattern) =>
-        indexPattern.fields.map((field) => ({
-          ...field,
-          indexPattern,
-        }))
-      )
-    );
-
     const fullFieldName = nestedPath ? `${nestedPath}.${fieldName}` : fieldName;
-    const fields = allFields.filter((field) => field.name === fullFieldName);
+
+    const indexPatternFieldEntries: Array<[IIndexPattern, IFieldType]> = [];
+    indexPatterns.forEach((indexPattern) => {
+      indexPattern.fields
+        .filter((field) => field.name === fullFieldName)
+        .forEach((field) => indexPatternFieldEntries.push([indexPattern, field]));
+    });
+
     const query = `${prefix}${suffix}`.trim();
     const { getValueSuggestions } = getAutocompleteService();
 
     const data = await Promise.all(
-      fields.map((field) =>
+      indexPatternFieldEntries.map(([indexPattern, field]) =>
         getValueSuggestions({
-          indexPattern: field.indexPattern,
+          indexPattern,
           field,
           query,
           boolFilter,

x-pack/test/functional/apps/discover/index.ts

@@ -14,5 +14,6 @@ export default function ({ loadTestFile }: FtrProviderContext) {
     loadTestFile(require.resolve('./async_scripted_fields'));
     loadTestFile(require.resolve('./reporting'));
     loadTestFile(require.resolve('./error_handling'));
+    loadTestFile(require.resolve('./value_suggestions'));
   });
 }

x-pack/test/functional/apps/discover/value_suggestions.ts

@@ -0,0 +1,33 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import expect from '@kbn/expect';
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
+  const esArchiver = getService('esArchiver');
+  const queryBar = getService('queryBar');
+  const PageObjects = getPageObjects(['common']);
+
+  describe('value suggestions', function describeIndexTests() {
+    before(async function () {
+      await esArchiver.loadIfNeeded('logstash_functional');
+      await esArchiver.load('dashboard/drilldowns');
+      await PageObjects.common.navigateToApp('discover');
+    });
+
+    after(async () => {
+      await esArchiver.unload('dashboard/drilldowns');
+    });
+
+    it('show up', async () => {
+      await queryBar.setQuery('extension.raw : ');
+      const suggestions = await queryBar.getSuggestions();
+      expect(suggestions.length).to.be(5);
+      expect(suggestions).to.contain('"jpg"');
+    });
+  });
+}