diff --git a/src/plugins/data/public/ui/filter_bar/filter_editor/lib/__snapshots__/filter_label.test.js.snap b/src/plugins/data/public/ui/filter_bar/filter_editor/lib/__snapshots__/filter_label.test.js.snap deleted file mode 100644 index b0bcec12ca3b7..0000000000000 --- a/src/plugins/data/public/ui/filter_bar/filter_editor/lib/__snapshots__/filter_label.test.js.snap +++ /dev/null @@ -1,18 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`alias 1`] = ` - - geo.coordinates in US - -`; - -exports[`negated alias 1`] = ` - - - NOT - - geo.coordinates in US - -`; diff --git a/src/plugins/data/public/ui/filter_bar/filter_editor/lib/filter_label.test.js b/src/plugins/data/public/ui/filter_bar/filter_editor/lib/filter_label.test.js deleted file mode 100644 index 55df544ad010b..0000000000000 --- a/src/plugins/data/public/ui/filter_bar/filter_editor/lib/filter_label.test.js +++ /dev/null @@ -1,48 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React from 'react'; -import { FilterLabel } from './filter_label'; -import { shallow } from 'enzyme'; -import { phraseFilter } from '../../../../stubs'; - -test('alias', () => { - const filter = { - ...phraseFilter, - meta: { - ...phraseFilter.meta, - alias: 'geo.coordinates in US', - }, - }; - const component = shallow(); - expect(component).toMatchSnapshot(); -}); - -test('negated alias', () => { - const filter = { - ...phraseFilter, - meta: { - ...phraseFilter.meta, - alias: 'geo.coordinates in US', - negate: true, - }, - }; - const component = shallow(); - expect(component).toMatchSnapshot(); -}); diff --git a/src/plugins/data/public/ui/filter_bar/filter_editor/lib/filter_label.test.tsx b/src/plugins/data/public/ui/filter_bar/filter_editor/lib/filter_label.test.tsx new file mode 100644 index 0000000000000..59afc1606adf9 --- /dev/null +++ b/src/plugins/data/public/ui/filter_bar/filter_editor/lib/filter_label.test.tsx @@ -0,0 +1,156 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React from 'react'; +import { FilterLabel } from './filter_label'; +import { render, cleanup } from '@testing-library/react/pure'; +import { phraseFilter } from '../../../../stubs'; + +afterEach(cleanup); + +test('alias', () => { + const filter = { + ...phraseFilter, + meta: { + ...phraseFilter.meta, + alias: 'geo.coordinates in US', + }, + }; + const { container } = render(); + expect(container).toMatchInlineSnapshot(` +
+ + geo.coordinates in US +
+ `); +}); + +test('negated alias', () => { + const filter = { + ...phraseFilter, + meta: { + ...phraseFilter.meta, + alias: 'geo.coordinates in US', + negate: true, + }, + }; + const { container } = render(); + expect(container).toMatchInlineSnapshot(` +
+ + NOT + + geo.coordinates in US +
+ `); +}); + +test('alias with warning status', () => { + const filter = { + ...phraseFilter, + meta: { + ...phraseFilter.meta, + alias: 'geo.coordinates in US', + negate: true, + }, + }; + const { container } = render( + + ); + expect(container).toMatchInlineSnapshot(` +
+ + NOT + + geo.coordinates in US + : + + Warning + +
+ `); +}); + +test('alias with error status', () => { + const filter = { + ...phraseFilter, + meta: { + ...phraseFilter.meta, + alias: 'geo.coordinates in US', + negate: true, + }, + }; + const { container } = render( + + ); + expect(container).toMatchInlineSnapshot(` +
+ + NOT + + geo.coordinates in US + : + + Error + +
+ `); +}); + +test('warning', () => { + const { container } = render(); + expect(container).toMatchInlineSnapshot(` +
+ + machine.os + : + + Warning + +
+ `); +}); + +test('error', () => { + const { container } = render(); + expect(container).toMatchInlineSnapshot(` +
+ + machine.os + : + + Error + +
+ `); +}); diff --git a/src/plugins/data/public/ui/filter_bar/filter_editor/lib/filter_label.tsx b/src/plugins/data/public/ui/filter_bar/filter_editor/lib/filter_label.tsx index 070631354d8b8..3b85d0753b8c5 100644 --- a/src/plugins/data/public/ui/filter_bar/filter_editor/lib/filter_label.tsx +++ b/src/plugins/data/public/ui/filter_bar/filter_editor/lib/filter_label.tsx @@ -22,13 +22,15 @@ import { EuiTextColor } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { existsOperator, isOneOfOperator } from './filter_operators'; import { Filter, FILTERS } from '../../../../../common'; +import type { FilterLabelStatus } from '../../filter_item'; interface Props { filter: Filter; valueLabel?: string; + filterLabelStatus?: FilterLabelStatus; } -export function FilterLabel({ filter, valueLabel }: Props) { +export function FilterLabel({ filter, valueLabel, filterLabelStatus }: Props) { const prefixText = filter.meta.negate ? ` ${i18n.translate('data.filter.filterBar.negatedFilterPrefix', { defaultMessage: 'NOT ', @@ -50,6 +52,7 @@ export function FilterLabel({ filter, valueLabel }: Props) { {prefix} {filter.meta.alias} + {filterLabelStatus && <>: {getValue(valueLabel)}} ); } diff --git a/src/plugins/data/public/ui/filter_bar/filter_item.tsx b/src/plugins/data/public/ui/filter_bar/filter_item.tsx index 078fc8c9e1a8f..cbff20115f8ea 100644 --- a/src/plugins/data/public/ui/filter_bar/filter_item.tsx +++ b/src/plugins/data/public/ui/filter_bar/filter_item.tsx @@ -49,7 +49,7 @@ interface Props { interface LabelOptions { title: string; - status: string; + status: FilterLabelStatus; message?: string; } @@ -57,6 +57,11 @@ const FILTER_ITEM_OK = ''; const FILTER_ITEM_WARNING = 'warn'; const FILTER_ITEM_ERROR = 'error'; +export type FilterLabelStatus = + | typeof FILTER_ITEM_OK + | typeof FILTER_ITEM_WARNING + | typeof FILTER_ITEM_ERROR; + export function FilterItem(props: Props) { const [isPopoverOpen, setIsPopoverOpen] = useState(false); const [indexPatternExists, setIndexPatternExists] = useState(undefined); @@ -260,7 +265,7 @@ export function FilterItem(props: Props) { } function getValueLabel(): LabelOptions { - const label = { + const label: LabelOptions = { title: '', message: '', status: FILTER_ITEM_OK, @@ -326,6 +331,7 @@ export function FilterItem(props: Props) { props.onRemove()} diff --git a/src/plugins/data/public/ui/filter_bar/filter_view/index.tsx b/src/plugins/data/public/ui/filter_bar/filter_view/index.tsx index f9328875cc910..3f9cbce06b315 100644 --- a/src/plugins/data/public/ui/filter_bar/filter_view/index.tsx +++ b/src/plugins/data/public/ui/filter_bar/filter_view/index.tsx @@ -22,10 +22,12 @@ import { i18n } from '@kbn/i18n'; import React, { FC } from 'react'; import { FilterLabel } from '../filter_editor/lib/filter_label'; import { Filter, isFilterPinned } from '../../../../common'; +import type { FilterLabelStatus } from '../filter_item'; interface Props { filter: Filter; valueLabel: string; + filterLabelStatus: FilterLabelStatus; errorMessage?: string; [propName: string]: any; } @@ -36,6 +38,7 @@ export const FilterView: FC = ({ onClick, valueLabel, errorMessage, + filterLabelStatus, ...rest }: Props) => { const [ref, innerText] = useInnerText(); @@ -65,7 +68,7 @@ export const FilterView: FC = ({ iconType="cross" iconSide="right" closeButtonProps={{ - // Removing tab focus on close button because the same option can be optained through the context menu + // Removing tab focus on close button because the same option can be obtained through the context menu // Also, we may want to add a `DEL` keyboard press functionality tabIndex: -1, }} @@ -80,7 +83,11 @@ export const FilterView: FC = ({ {...rest} > - + );