[DataView] Use data view formatter for fields preview in Edit field f…

…lyout (#148446) Closes #121408 ## Summary This PR uses data view field formatter when rendering fields preview. <img width="500" alt="Screenshot 2023-01-05 at 14 39 34" src="https://user-images.githubusercontent.com/1415710/210793339-1e898a75-9fd0-4823-b225-5145ea37c8cc.png">
elastic · Jan 16, 2023 · 9df7eeb · 9df7eeb
1 parent 0ddda9a
commit 9df7eeb
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 20 deletions.
diff --git a/src/plugins/data_view_field_editor/__jest__/client_integration/helpers/setup_environment.tsx b/src/plugins/data_view_field_editor/__jest__/client_integration/helpers/setup_environment.tsx
@@ -17,6 +17,7 @@ import { notificationServiceMock, uiSettingsServiceMock } from '@kbn/core/public
 import { dataPluginMock } from '@kbn/data-plugin/public/mocks';
 import { fieldFormatsMock as fieldFormats } from '@kbn/field-formats-plugin/common/mocks';
 import { FieldFormat } from '@kbn/field-formats-plugin/common';
+import { createStubDataView } from '@kbn/data-views-plugin/common/data_views/data_view.stub';
 import { FieldEditorProvider, Context } from '../../../public/components/field_editor_context';
 import { FieldPreviewProvider } from '../../../public/components/preview';
 import { initApi, ApiService } from '../../../public/lib';
@@ -115,14 +116,16 @@ export const WithFieldEditorDependencies =
       return new MockDefaultFieldFormat();
     });
 
-    const dependencies: Context = {
-      dataView: {
+    const dataView = createStubDataView({
+      spec: {
         title: indexPatternNameForTest,
-        getIndexPattern: () => indexPatternNameForTest,
-        name: indexPatternNameForTest,
-        getName: () => indexPatternNameForTest,
-        fields: { getAll: spyIndexPatternGetAllFields },
-      } as any,
+      },
+    });
+
+    jest.spyOn(dataView.fields, 'getAll').mockImplementation(spyIndexPatternGetAllFields);
+
+    const dependencies: Context = {
+      dataView,
       uiSettings: uiSettingsServiceMock.createStartContract(),
       fieldTypeToProcess: 'runtime',
       existingConcreteFields: [],

diff --git a/src/plugins/data_view_field_editor/public/components/preview/field_list/field_list.tsx b/src/plugins/data_view_field_editor/public/components/preview/field_list/field_list.tsx
@@ -12,7 +12,7 @@ import { get } from 'lodash';
 import { EuiButtonEmpty, EuiButton, EuiSpacer, EuiEmptyPrompt, EuiTextColor } from '@elastic/eui';
 
 import { useFieldEditorContext } from '../../field_editor_context';
-import { useFieldPreviewContext, defaultValueFormatter } from '../field_preview_context';
+import { useFieldPreviewContext } from '../field_preview_context';
 import type { FieldPreview } from '../types';
 import { PreviewListItem } from './field_list_item';
 
@@ -55,20 +55,15 @@ export const PreviewFieldList: React.FC<Props> = ({ height, clearSearch, searchV
 
   const [showAllFields, setShowAllFields] = useState(false);
 
-  const {
-    fields: { getAll: getAllFields },
-  } = dataView;
-
-  const indexPatternFields = useMemo(() => {
-    return getAllFields();
-  }, [getAllFields]);
-
   const fieldList: DocumentField[] = useMemo(
     () =>
-      indexPatternFields
-        .map(({ name, displayName }) => {
+      dataView.fields
+        .getAll()
+        .map((field) => {
+          const { name, displayName } = field;
+          const formatter = dataView.getFormatterForField(field);
           const value = get(currentDocument?._source, name);
-          const formattedValue = defaultValueFormatter(value);
+          const formattedValue = formatter.convert(value, 'html');
 
           return {
             key: displayName,
@@ -78,7 +73,7 @@ export const PreviewFieldList: React.FC<Props> = ({ height, clearSearch, searchV
           };
         })
         .filter(({ value }) => value !== undefined),
-    [indexPatternFields, currentDocument?._source]
+    [dataView, currentDocument?._source]
   );
 
   const fieldListWithPinnedFields: DocumentField[] = useMemo(() => {