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 [
,
]
`;
+
+exports[`FieldName renders when mapping is provided 1`] = `
+Array [
+
+
+
+ Number field
+
+
+
,
+ ,
+]
+`;
+
+exports[`FieldName renders with a search highlight 1`] = `
+Array [
+
+
+
+ Number field
+
+
+
,
+
+
+
+
+
+ te
+
+ st.test.test
+
+
+
+
,
+]
+`;
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();
- expect(component).toMatchSnapshot();
-});
+describe('FieldName', function () {
+ test('renders a string field by providing fieldType and fieldName', () => {
+ const component = render();
+ expect(component).toMatchSnapshot();
+ });
-test('FieldName renders a number field by providing a field record', () => {
- const component = render();
- expect(component).toMatchSnapshot();
-});
+ test('renders a number field by providing a field record', () => {
+ const component = render();
+ expect(component).toMatchSnapshot();
+ });
-test('FieldName renders a geo field', () => {
- const component = render();
- expect(component).toMatchSnapshot();
-});
+ test('renders a geo field', () => {
+ const component = render();
+ expect(component).toMatchSnapshot();
+ });
+
+ test('renders unknown field', () => {
+ const component = render();
+ expect(component).toMatchSnapshot();
+ });
+
+ test('renders with a search highlight', () => {
+ const component = render(
+
+ );
+ expect(component).toMatchSnapshot();
+ });
-test('FieldName renders unknown field', () => {
- const component = render();
- expect(component).toMatchSnapshot();
+ test('renders when mapping is provided', () => {
+ const component = render(
+
+ );
+ 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;
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"
>
- {displayName}
+ {displayName}
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 && (
),
-
+
,
-
+
@@ -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}
>