[Discover] Support case-insensitive search in Document Viewer (#148312)

Closes #147087

## Summary

This PR:
- adds support for case-insensitive search 
- adds search highlights
- fixes the tooltip when a field has a custom label

<img width="744" alt="Screenshot 2023-01-03 at 17 09 20"
src="https://user-images.githubusercontent.com/1415710/210396131-529a3e76-a6cb-4026-b65a-018e1f627ac6.png">

src/plugins/discover/public/components/field_name/field_name.test.tsx

@@ -8,26 +8,45 @@
 
 import React from 'react';
 import { render } from 'enzyme';
+import { stubLogstashDataView as dataView } from '@kbn/data-plugin/common/stubs';
 import { FieldName } from './field_name';
 
-// Note that it currently provides just 2 basic tests, there should be more, but
-// the components involved will soon change
-test('FieldName renders a string field by providing fieldType and fieldName', () => {
-  const component = render(<FieldName fieldType="string" fieldName="test" />);
-  expect(component).toMatchSnapshot();
-});
+describe('FieldName', function () {
+  test('renders a string field by providing fieldType and fieldName', () => {
+    const component = render(<FieldName fieldType="string" fieldName="test" />);
+    expect(component).toMatchSnapshot();
+  });
 
-test('FieldName renders a number field by providing a field record', () => {
-  const component = render(<FieldName fieldName={'test.test.test'} fieldType={'number'} />);
-  expect(component).toMatchSnapshot();
-});
+  test('renders a number field by providing a field record', () => {
+    const component = render(<FieldName fieldName={'test.test.test'} fieldType={'number'} />);
+    expect(component).toMatchSnapshot();
+  });
 
-test('FieldName renders a geo field', () => {
-  const component = render(<FieldName fieldName={'test.test.test'} fieldType={'geo_point'} />);
-  expect(component).toMatchSnapshot();
-});
+  test('renders a geo field', () => {
+    const component = render(<FieldName fieldName={'test.test.test'} fieldType={'geo_point'} />);
+    expect(component).toMatchSnapshot();
+  });
+
+  test('renders unknown field', () => {
+    const component = render(<FieldName fieldName={'test.test.test'} />);
+    expect(component).toMatchSnapshot();
+  });
+
+  test('renders with a search highlight', () => {
+    const component = render(
+      <FieldName fieldName={'test.test.test'} fieldType={'number'} highlight="te" />
+    );
+    expect(component).toMatchSnapshot();
+  });
 
-test('FieldName renders unknown field', () => {
-  const component = render(<FieldName fieldName={'test.test.test'} />);
-  expect(component).toMatchSnapshot();
+  test('renders when mapping is provided', () => {
+    const component = render(
+      <FieldName
+        fieldName="test"
+        fieldType="number"
+        fieldMapping={dataView.getFieldByName('bytes')}
+      />
+    );
+    expect(component).toMatchSnapshot();
+  });
 });

src/plugins/discover/public/components/field_name/field_name.tsx

@@ -8,7 +8,7 @@
 
 import React, { Fragment } from 'react';
 import './field_name.scss';
-import { EuiBadge, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
+import { EuiBadge, EuiFlexGroup, EuiFlexItem, EuiToolTip, EuiHighlight } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
 import { FieldIcon, FieldIconProps } from '@kbn/react-field';
@@ -22,6 +22,7 @@ interface Props {
   fieldMapping?: DataViewField;
   fieldIconProps?: Omit<FieldIconProps, 'type'>;
   scripted?: boolean;
+  highlight?: string;
 }
 
 export function FieldName({
@@ -30,6 +31,7 @@ export function FieldName({
   fieldType,
   fieldIconProps,
   scripted = false,
+  highlight = '',
 }: Props) {
   const typeName = getFieldTypeName(fieldType);
   const displayName =
@@ -52,7 +54,7 @@ export function FieldName({
             delay="long"
             anchorClassName="eui-textBreakAll"
           >
-            <span>{displayName}</span>
+            <EuiHighlight search={highlight}>{displayName}</EuiHighlight>
           </EuiToolTip>
         </EuiFlexItem>
 

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

@@ -241,7 +241,7 @@ export const DocViewerTable = ({
         } else {
           const fieldMapping = mapping(curFieldName);
           const displayName = fieldMapping?.displayName ?? curFieldName;
-          if (displayName.includes(searchText)) {
+          if (displayName.toLowerCase().includes(searchText.toLowerCase())) {
             // filter only unpinned fields
             acc.restItems.push(fieldToItem(curFieldName));
           }
@@ -273,6 +273,7 @@ export const DocViewerTable = ({
   const headers = [
     !isSingleDocView && (
       <EuiTableHeaderCell
+        key="header-cell-actions"
         align="left"
         width={showActionsInsideTableCell ? 150 : 62}
         isSorted={false}
@@ -287,14 +288,14 @@ export const DocViewerTable = ({
         </EuiText>
       </EuiTableHeaderCell>
     ),
-    <EuiTableHeaderCell align="left" width="30%" isSorted={false}>
+    <EuiTableHeaderCell key="header-cell-name" align="left" width="30%" isSorted={false}>
       <EuiText size="xs">
         <strong>
           <FormattedMessage id="discover.fieldChooser.discoverField.name" defaultMessage="Field" />
         </strong>
       </EuiText>
     </EuiTableHeaderCell>,
-    <EuiTableHeaderCell align="left" isSorted={false}>
+    <EuiTableHeaderCell key="header-cell-value" align="left" isSorted={false}>
       <EuiText size="xs">
         <strong>
           <FormattedMessage id="discover.fieldChooser.discoverField.value" defaultMessage="Value" />
@@ -305,10 +306,11 @@ export const DocViewerTable = ({
 
   const renderRows = useCallback(
     (items: FieldRecord[]) => {
+      const highlight = searchText?.toLowerCase();
       return items.map(
         ({
           action: { flattenedField, onFilter },
-          field: { field, fieldMapping, displayName, fieldType, scripted, pinned },
+          field: { field, fieldMapping, fieldType, scripted, pinned },
           value: { formattedValue, ignored },
         }: FieldRecord) => {
           return (
@@ -344,10 +346,11 @@ export const DocViewerTable = ({
                 mobileOptions={MOBILE_OPTIONS}
               >
                 <FieldName
-                  fieldName={displayName}
+                  fieldName={field}
                   fieldType={fieldType}
                   fieldMapping={fieldMapping}
                   scripted={scripted}
+                  highlight={highlight}
                 />
               </EuiTableRowCell>
               <EuiTableRowCell
@@ -369,7 +372,7 @@ export const DocViewerTable = ({
         }
       );
     },
-    [onToggleColumn, onTogglePinned, isSingleDocView, showActionsInsideTableCell]
+    [onToggleColumn, onTogglePinned, isSingleDocView, showActionsInsideTableCell, searchText]
   );
 
   const rowElements = [