[Discover] make field icons consistent across field list and doc tables (#129621) (#129935)

(cherry picked from commit 6954b0ff6b)

Co-authored-by: Andrew Tate <andrew.tate@elastic.co>

src/plugins/discover/public/application/main/components/sidebar/discover_field.tsx

@@ -25,6 +25,7 @@ import { i18n } from '@kbn/i18n';
 import { UiCounterMetricType } from '@kbn/analytics';
 import classNames from 'classnames';
 import { FieldButton, FieldIcon } from '@kbn/react-field';
+import { getTypeForFieldIcon } from '../../../../utils/get_type_for_field_icon';
 import { DiscoverFieldDetails } from './discover_field_details';
 import { FieldDetails } from './types';
 import type { DataViewField, DataView } from '../../../../../../data_views/public';
@@ -59,9 +60,10 @@ const FieldInfoIcon: React.FC = memo(() => (
 ));
 
 const DiscoverFieldTypeIcon: React.FC<{ field: DataViewField }> = memo(({ field }) => {
-  // If it's a string type, we want to distinguish between keyword and text
+  const typeForIcon = getTypeForFieldIcon(field);
-  const tempType = field.type === 'string' && field.esTypes ? field.esTypes[0] : field.type;
+  return (
-  return <FieldIcon type={tempType} label={getFieldTypeName(tempType)} scripted={field.scripted} />;
+    <FieldIcon type={typeForIcon} label={getFieldTypeName(typeForIcon)} scripted={field.scripted} />
+  );
 });
 
 const FieldName: React.FC<{ field: DataViewField }> = memo(({ field }) => {

src/plugins/discover/public/services/doc_views/components/doc_viewer_table/legacy/table.tsx

@@ -9,6 +9,7 @@
 import '../table.scss';
 import React, { useCallback, useMemo } from 'react';
 import { EuiInMemoryTable } from '@elastic/eui';
+import { getTypeForFieldIcon } from '../../../../../utils/get_type_for_field_icon';
 import { useDiscoverServices } from '../../../../../utils/use_discover_services';
 import { flattenHit } from '../../../../../../../data/public';
 import { SHOW_MULTIFIELDS } from '../../../../../../common';
@@ -73,7 +74,11 @@ export const DocViewerLegacyTable = ({
     .map((field) => {
       const fieldMapping = mapping(field);
       const displayName = fieldMapping?.displayName ?? field;
-      const fieldType = isNestedFieldParent(field, dataView) ? 'nested' : fieldMapping?.type;
+      const fieldType = isNestedFieldParent(field, dataView)
+        ? 'nested'
+        : fieldMapping
+        ? getTypeForFieldIcon(fieldMapping)
+        : undefined;
       const ignored = getIgnoredReason(fieldMapping ?? field, hit._ignored);
       return {
         action: {

src/plugins/discover/public/services/doc_views/components/doc_viewer_table/table.tsx

@@ -27,6 +27,7 @@ import {
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { debounce } from 'lodash';
+import { getTypeForFieldIcon } from '../../../../utils/get_type_for_field_icon';
 import { useDiscoverServices } from '../../../../utils/use_discover_services';
 import { Storage } from '../../../../../../kibana_utils/public';
 import { usePager } from '../../../../utils/use_pager';
@@ -157,7 +158,11 @@ export const DocViewerTable = ({
     (field: string) => {
       const fieldMapping = mapping(field);
       const displayName = fieldMapping?.displayName ?? field;
-      const fieldType = isNestedFieldParent(field, dataView) ? 'nested' : fieldMapping?.type;
+      const fieldType = isNestedFieldParent(field, dataView)
+        ? 'nested'
+        : fieldMapping
+        ? getTypeForFieldIcon(fieldMapping)
+        : undefined;
 
       const ignored = getIgnoredReason(fieldMapping ?? field, hit._ignored);
 

src/plugins/discover/public/utils/get_type_for_field_icon.test.ts

@@ -0,0 +1,39 @@
+/*
+ * 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 { DataViewField } from 'src/plugins/data_views/common';
+import { getTypeForFieldIcon } from './get_type_for_field_icon';
+
+describe('getTypeForFieldIcon', () => {
+  it('extracts type for non-string types', () => {
+    expect(
+      getTypeForFieldIcon({
+        type: 'not-string',
+        esTypes: ['bar'],
+      } as DataViewField)
+    ).toBe('not-string');
+  });
+
+  it('extracts type when type is string but esTypes is unavailable', () => {
+    expect(
+      getTypeForFieldIcon({
+        type: 'string',
+        esTypes: undefined,
+      } as DataViewField)
+    ).toBe('string');
+  });
+
+  it('extracts esType when type is string and esTypes is available', () => {
+    expect(
+      getTypeForFieldIcon({
+        type: 'string',
+        esTypes: ['version'],
+      } as DataViewField)
+    ).toBe('version');
+  });
+});

src/plugins/discover/public/utils/get_type_for_field_icon.ts

@@ -0,0 +1,17 @@
+/*
+ * 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 { DataViewField } from 'src/plugins/data_views/common';
+
+/**
+ * Extracts the type from a data view field that will match the right icon.
+ *
+ * We define custom logic for Discover in order to distinguish between various "string" types.
+ */
+export const getTypeForFieldIcon = (field: DataViewField) =>
+  field.type === 'string' && field.esTypes ? field.esTypes[0] : field.type;