Use fields API to fix keyword fields in data view field editor (#145943)

## Summary

Fixes #121401.
Fixes https://github.com/elastic/kibana/issues/121406.

Prior to this change, the data view field editor preview wouldn't work
for certain fields (like keyword), since they are part of the mapping
and not directly in the document's `_source`. This PR addresses it by
also retrieving the `fields` as part of the search request, and then
when displaying the preview, looking in both `_source` and `fields`.

### Checklist

- [ ] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [ ] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
- [ ] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [ ] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

### Release note

The field preview inside of the data view field editor now works for all
fields, whether or not they are found directly in the document's
`_source`.

src/plugins/data_view_field_editor/__jest__/client_integration/field_editor_flyout_preview.test.ts

@@ -745,7 +745,13 @@ describe('Field editor Preview panel', () => {
       } = testBed;
 
       const expectedParamsToFetchClusterData = {
-        params: { index: indexPatternNameForTest, body: { size: 50 } },
+        params: {
+          index: indexPatternNameForTest,
+          body: {
+            fields: ['*'],
+            size: 50,
+          },
+        },
       };
 
       // Initial state
@@ -770,6 +776,7 @@ describe('Field editor Preview panel', () => {
       expect(searchMeta.lastCallParams).toEqual({
         params: {
           body: {
+            fields: ['*'],
             query: {
               ids: {
                 values: [nextId],

src/plugins/data_view_field_editor/public/components/preview/field_preview_context.tsx

@@ -219,6 +219,7 @@ export const FieldPreviewProvider: FunctionComponent = ({ children }) => {
           params: {
             index: dataView.getIndexPattern(),
             body: {
+              fields: ['*'],
               size: limit,
             },
           },
@@ -272,6 +273,7 @@ export const FieldPreviewProvider: FunctionComponent = ({ children }) => {
             index: dataView.getIndexPattern(),
             body: {
               size: 1,
+              fields: ['*'],
               query: {
                 ids: {
                   values: [id],
@@ -408,7 +410,7 @@ export const FieldPreviewProvider: FunctionComponent = ({ children }) => {
 
     const response = await getFieldPreview({
       index: currentDocIndex,
-      document: document!,
+      document: document?._source!,
       context: (parentName ? 'composite_field' : `${type!}_field`) as PainlessExecuteContext,
       script: previewScript,
     });
@@ -615,7 +617,7 @@ export const FieldPreviewProvider: FunctionComponent = ({ children }) => {
    */
   useEffect(() => {
     updateParams({
-      document: currentDocument?._source,
+      document: currentDocument,
       index: currentDocument?._index,
     });
   }, [currentDocument, updateParams]);
@@ -669,7 +671,7 @@ export const FieldPreviewProvider: FunctionComponent = ({ children }) => {
         fields: fields.map((field) => {
           const nextValue =
             script === null && Boolean(document)
-              ? get(document, name ?? '') // When there is no script we try to read the value from _source
+              ? get(document?._source, name ?? '') ?? get(document?.fields, name ?? '') // When there is no script we try to read the value from _source/fields
               : field?.value;
 
           const formattedValue = valueFormatter(nextValue);

src/plugins/data_view_field_editor/public/components/preview/types.ts

@@ -24,6 +24,9 @@ export interface EsDocument {
   _source: {
     [key: string]: unknown;
   };
+  fields: {
+    [key: string]: unknown;
+  };
   [key: string]: unknown;
 }
 
@@ -61,7 +64,7 @@ export interface Params {
   type: RuntimeType | null;
   script: Required<RuntimeField>['script'] | null;
   format: SerializedFieldFormat | null;
-  document: { [key: string]: unknown } | null;
+  document: EsDocument | null;
   // used for composite subfields
   parentName: string | null;
 }

test/functional/apps/management/_edit_field.ts

@@ -0,0 +1,61 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import expect from '@kbn/expect';
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
+  const kibanaServer = getService('kibanaServer');
+  const retry = getService('retry');
+  const PageObjects = getPageObjects(['settings']);
+  const testSubjects = getService('testSubjects');
+
+  describe('edit field', function () {
+    before(async function () {
+      await kibanaServer.importExport.load('test/functional/fixtures/kbn_archiver/discover');
+    });
+
+    after(async function afterAll() {
+      await kibanaServer.importExport.unload('test/functional/fixtures/kbn_archiver/discover');
+    });
+
+    describe('field preview', function fieldPreview() {
+      before(async () => {
+        await PageObjects.settings.navigateTo();
+        await PageObjects.settings.clickKibanaIndexPatterns();
+        await PageObjects.settings.clickIndexPatternLogstash();
+      });
+
+      it('should show preview for fields in _source', async function () {
+        await PageObjects.settings.filterField('extension');
+        await testSubjects.click('editFieldFormat');
+        await testSubjects.find('value');
+        let previewText = '';
+        await retry.waitForWithTimeout('get preview value', 1000, async () => {
+          previewText = await testSubjects.getVisibleText('value');
+          return previewText !== 'Value not set';
+        });
+        expect(previewText).to.be('css');
+        await PageObjects.settings.closeIndexPatternFieldEditor();
+      });
+
+      it('should show preview for fields not in _source', async function () {
+        await PageObjects.settings.filterField('extension.raw');
+        await testSubjects.click('editFieldFormat');
+        await testSubjects.find('value');
+        let previewText = '';
+        await retry.waitForWithTimeout('get preview value', 1000, async () => {
+          previewText = await testSubjects.getVisibleText('value');
+          return previewText !== 'Value not set';
+        });
+        expect(previewText).to.be('css');
+        await PageObjects.settings.closeIndexPatternFieldEditor();
+      });
+    });
+  });
+}

test/functional/apps/management/index.ts

@@ -44,5 +44,6 @@ export default function ({ getService, loadTestFile }: FtrProviderContext) {
     loadTestFile(require.resolve('./_handle_version_conflict'));
     loadTestFile(require.resolve('./_handle_not_found'));
     loadTestFile(require.resolve('./_data_view_relationships'));
+    loadTestFile(require.resolve('./_edit_field'));
   });
 }