mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 17:28:26 -04:00
# Backport This will backport the following commits from `main` to `8.6`: - [[Discover] Support case-insensitive search in Document Viewer (#148312)](https://github.com/elastic/kibana/pull/148312) <!--- Backport version: 8.9.7 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Julia Rechkunova","email":"julia.rechkunova@elastic.co"},"sourceCommit":{"committedDate":"2023-01-05T07:58:47Z","message":"[Discover] Support case-insensitive search in Document Viewer (#148312)\n\nCloses https://github.com/elastic/kibana/issues/147087\r\n\r\n## Summary\r\n\r\nThis PR:\r\n- adds support for case-insensitive search \r\n- adds search highlights\r\n- fixes the tooltip when a field has a custom label\r\n\r\n<img width=\"744\" alt=\"Screenshot 2023-01-03 at 17 09 20\"\r\nsrc=\"https://user-images.githubusercontent.com/1415710/210396131-529a3e76-a6cb-4026-b65a-018e1f627ac6.png\">","sha":"84693f6f312449327e86abfc5b1dc20871507da9","branchLabelMapping":{"^v8.7.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:DataDiscovery","backport:prev-minor","v8.7.0"],"number":148312,"url":"https://github.com/elastic/kibana/pull/148312","mergeCommit":{"message":"[Discover] Support case-insensitive search in Document Viewer (#148312)\n\nCloses https://github.com/elastic/kibana/issues/147087\r\n\r\n## Summary\r\n\r\nThis PR:\r\n- adds support for case-insensitive search \r\n- adds search highlights\r\n- fixes the tooltip when a field has a custom label\r\n\r\n<img width=\"744\" alt=\"Screenshot 2023-01-03 at 17 09 20\"\r\nsrc=\"https://user-images.githubusercontent.com/1415710/210396131-529a3e76-a6cb-4026-b65a-018e1f627ac6.png\">","sha":"84693f6f312449327e86abfc5b1dc20871507da9"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v8.7.0","labelRegex":"^v8.7.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/148312","number":148312,"mergeCommit":{"message":"[Discover] Support case-insensitive search in Document Viewer (#148312)\n\nCloses https://github.com/elastic/kibana/issues/147087\r\n\r\n## Summary\r\n\r\nThis PR:\r\n- adds support for case-insensitive search \r\n- adds search highlights\r\n- fixes the tooltip when a field has a custom label\r\n\r\n<img width=\"744\" alt=\"Screenshot 2023-01-03 at 17 09 20\"\r\nsrc=\"https://user-images.githubusercontent.com/1415710/210396131-529a3e76-a6cb-4026-b65a-018e1f627ac6.png\">","sha":"84693f6f312449327e86abfc5b1dc20871507da9"}}]}] BACKPORT--> Co-authored-by: Julia Rechkunova <julia.rechkunova@elastic.co>
This commit is contained in:
Kibana Machine
GitHub
parent
8449c71a79
commit
81da322425
4 changed files with 122 additions and 25 deletions
|
|
@ -135,3 +135,76 @@ Array [
|
|||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`FieldName renders when mapping is provided 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="euiFlexItem euiFlexItem--flexGrowZero kbnDocViewer__fieldIcon"
|
||||
>
|
||||
<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 euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionRow euiFlexGroup--wrap"
|
||||
>
|
||||
<div
|
||||
class="euiFlexItem euiFlexItem--flexGrowZero kbnDocViewer__fieldName eui-textBreakAll"
|
||||
>
|
||||
<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 euiFlexItem--flexGrowZero kbnDocViewer__fieldIcon"
|
||||
>
|
||||
<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 euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionRow euiFlexGroup--wrap"
|
||||
>
|
||||
<div
|
||||
class="euiFlexItem euiFlexItem--flexGrowZero kbnDocViewer__fieldName eui-textBreakAll"
|
||||
>
|
||||
<span
|
||||
class="euiToolTipAnchor eui-textBreakAll emotion-euiToolTipAnchor-inlineBlock"
|
||||
>
|
||||
<span>
|
||||
<mark
|
||||
class="euiMark emotion-euiMarkStyles-EuiMark"
|
||||
>
|
||||
te
|
||||
</mark>
|
||||
st.test.test
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -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('FieldName renders unknown field', () => {
|
||||
const component = render(<FieldName fieldName={'test.test.test'} />);
|
||||
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('renders when mapping is provided', () => {
|
||||
const component = render(
|
||||
<FieldName
|
||||
fieldName="test"
|
||||
fieldType="number"
|
||||
fieldMapping={dataView.getFieldByName('bytes')}
|
||||
/>
|
||||
);
|
||||
expect(component).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -238,7 +238,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));
|
||||
}
|
||||
|
|
@ -270,6 +270,7 @@ export const DocViewerTable = ({
|
|||
const headers = [
|
||||
!isSingleDocView && (
|
||||
<EuiTableHeaderCell
|
||||
key="header-cell-actions"
|
||||
align="left"
|
||||
width={showActionsInsideTableCell ? 150 : 62}
|
||||
isSorted={false}
|
||||
|
|
@ -284,14 +285,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" />
|
||||
|
|
@ -302,10 +303,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 (
|
||||
|
|
@ -341,10 +343,11 @@ export const DocViewerTable = ({
|
|||
mobileOptions={MOBILE_OPTIONS}
|
||||
>
|
||||
<FieldName
|
||||
fieldName={displayName}
|
||||
fieldName={field}
|
||||
fieldType={fieldType}
|
||||
fieldMapping={fieldMapping}
|
||||
scripted={scripted}
|
||||
highlight={highlight}
|
||||
/>
|
||||
</EuiTableRowCell>
|
||||
<EuiTableRowCell
|
||||
|
|
@ -366,7 +369,7 @@ export const DocViewerTable = ({
|
|||
}
|
||||
);
|
||||
},
|
||||
[onToggleColumn, onTogglePinned, isSingleDocView, showActionsInsideTableCell]
|
||||
[onToggleColumn, onTogglePinned, isSingleDocView, showActionsInsideTableCell, searchText]
|
||||
);
|
||||
|
||||
const rowElements = [
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue