From 84693f6f312449327e86abfc5b1dc20871507da9 Mon Sep 17 00:00:00 2001
From: Julia Rechkunova <julia.rechkunova@elastic.co>
Date: Thu, 5 Jan 2023 08:58:47 +0100
Subject: [PATCH] [Discover] Support case-insensitive search in Document Viewer
 (#148312)

Closes https://github.com/elastic/kibana/issues/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">
---
 .../__snapshots__/field_name.test.tsx.snap    | 73 +++++++++++++++++++
 .../components/field_name/field_name.test.tsx | 53 +++++++++-----
 .../components/field_name/field_name.tsx      |  6 +-
 .../components/doc_viewer_table/table.tsx     | 15 ++--
 4 files changed, 122 insertions(+), 25 deletions(-)

diff --git a/src/plugins/discover/public/components/field_name/__snapshots__/field_name.test.tsx.snap b/src/plugins/discover/public/components/field_name/__snapshots__/field_name.test.tsx.snap
index b26160d9d33bc8..21777f772c9a5e 100644
--- a/src/plugins/discover/public/components/field_name/__snapshots__/field_name.test.tsx.snap
+++ b/src/plugins/discover/public/components/field_name/__snapshots__/field_name.test.tsx.snap
@@ -135,3 +135,76 @@ Array [
   </div>,
 ]
 `;
+
+exports[`FieldName renders when mapping is provided 1`] = `
+Array [
+  <div
+    class="euiFlexItem kbnDocViewer__fieldIcon emotion-euiFlexItem-growZero"
+  >
+    <span
+      class="euiToken kbnFieldIcon emotion-euiToken-square-light-s-euiColorVis0"
+    >
+      <span
+        data-euiicon-type="tokenNumber"
+        title="Number field"
+      >
+        Number field
+      </span>
+    </span>
+  </div>,
+  <div
+    class="euiFlexGroup emotion-euiFlexGroup-wrap-none-flexStart-flexStart-row"
+  >
+    <div
+      class="euiFlexItem kbnDocViewer__fieldName eui-textBreakAll emotion-euiFlexItem-growZero"
+    >
+      <span
+        class="euiToolTipAnchor eui-textBreakAll emotion-euiToolTipAnchor-inlineBlock"
+      >
+        <span>
+          bytes
+        </span>
+      </span>
+    </div>
+  </div>,
+]
+`;
+
+exports[`FieldName renders with a search highlight 1`] = `
+Array [
+  <div
+    class="euiFlexItem kbnDocViewer__fieldIcon emotion-euiFlexItem-growZero"
+  >
+    <span
+      class="euiToken kbnFieldIcon emotion-euiToken-square-light-s-euiColorVis0"
+    >
+      <span
+        data-euiicon-type="tokenNumber"
+        title="Number field"
+      >
+        Number field
+      </span>
+    </span>
+  </div>,
+  <div
+    class="euiFlexGroup emotion-euiFlexGroup-wrap-none-flexStart-flexStart-row"
+  >
+    <div
+      class="euiFlexItem kbnDocViewer__fieldName eui-textBreakAll emotion-euiFlexItem-growZero"
+    >
+      <span
+        class="euiToolTipAnchor eui-textBreakAll emotion-euiToolTipAnchor-inlineBlock"
+      >
+        <span>
+          <mark
+            class="euiMark emotion-euiMarkStyles-EuiMark"
+          >
+            te
+          </mark>
+          st.test.test
+        </span>
+      </span>
+    </div>
+  </div>,
+]
+`;
diff --git a/src/plugins/discover/public/components/field_name/field_name.test.tsx b/src/plugins/discover/public/components/field_name/field_name.test.tsx
index d2f961392c43c6..929ec2add2acc2 100644
--- a/src/plugins/discover/public/components/field_name/field_name.test.tsx
+++ b/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();
+  });
 });
diff --git a/src/plugins/discover/public/components/field_name/field_name.tsx b/src/plugins/discover/public/components/field_name/field_name.tsx
index 3de9bd129fa359..ca386d344e42ff 100644
--- a/src/plugins/discover/public/components/field_name/field_name.tsx
+++ b/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>
 
diff --git a/src/plugins/discover/public/services/doc_views/components/doc_viewer_table/table.tsx b/src/plugins/discover/public/services/doc_views/components/doc_viewer_table/table.tsx
index 2a7b90a9feb527..0eab3a68c8218e 100644
--- a/src/plugins/discover/public/services/doc_views/components/doc_viewer_table/table.tsx
+++ b/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 = [