Skip to content

Commit

Permalink
Fix warning text doesn't get displayed on filters with custom filter …
Browse files Browse the repository at this point in the history
…name (elastic#78617) (elastic#78929)

Co-authored-by: Elastic Machine <[email protected]>

Co-authored-by: Elastic Machine <[email protected]>
  • Loading branch information
Dosant and elasticmachine authored Sep 30, 2020
1 parent 2afee59 commit c710567
Show file tree
Hide file tree
Showing 6 changed files with 177 additions and 71 deletions.

This file was deleted.

This file was deleted.

Original file line number Diff line number Diff line change
@@ -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(<FilterLabel filter={filter} />);
expect(container).toMatchInlineSnapshot(`
<div>
geo.coordinates in US
</div>
`);
});

test('negated alias', () => {
const filter = {
...phraseFilter,
meta: {
...phraseFilter.meta,
alias: 'geo.coordinates in US',
negate: true,
},
};
const { container } = render(<FilterLabel filter={filter} />);
expect(container).toMatchInlineSnapshot(`
<div>
<span
class="euiTextColor euiTextColor--danger"
>
NOT
</span>
geo.coordinates in US
</div>
`);
});

test('alias with warning status', () => {
const filter = {
...phraseFilter,
meta: {
...phraseFilter.meta,
alias: 'geo.coordinates in US',
negate: true,
},
};
const { container } = render(
<FilterLabel filter={filter} valueLabel={'Warning'} filterLabelStatus={'warn'} />
);
expect(container).toMatchInlineSnapshot(`
<div>
<span
class="euiTextColor euiTextColor--danger"
>
NOT
</span>
geo.coordinates in US
:
<span
class="globalFilterLabel__value"
>
Warning
</span>
</div>
`);
});

test('alias with error status', () => {
const filter = {
...phraseFilter,
meta: {
...phraseFilter.meta,
alias: 'geo.coordinates in US',
negate: true,
},
};
const { container } = render(
<FilterLabel filter={filter} valueLabel={'Error'} filterLabelStatus={'error'} />
);
expect(container).toMatchInlineSnapshot(`
<div>
<span
class="euiTextColor euiTextColor--danger"
>
NOT
</span>
geo.coordinates in US
:
<span
class="globalFilterLabel__value"
>
Error
</span>
</div>
`);
});

test('warning', () => {
const { container } = render(<FilterLabel filter={phraseFilter} valueLabel={'Warning'} />);
expect(container).toMatchInlineSnapshot(`
<div>
machine.os
:
<span
class="globalFilterLabel__value"
>
Warning
</span>
</div>
`);
});

test('error', () => {
const { container } = render(<FilterLabel filter={phraseFilter} valueLabel={'Error'} />);
expect(container).toMatchInlineSnapshot(`
<div>
machine.os
:
<span
class="globalFilterLabel__value"
>
Error
</span>
</div>
`);
});
Original file line number Diff line number Diff line change
Expand Up @@ -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 ',
Expand All @@ -50,6 +52,7 @@ export function FilterLabel({ filter, valueLabel }: Props) {
<Fragment>
{prefix}
{filter.meta.alias}
{filterLabelStatus && <>: {getValue(valueLabel)}</>}
</Fragment>
);
}
Expand Down
10 changes: 8 additions & 2 deletions src/plugins/data/public/ui/filter_bar/filter_item.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -49,14 +49,19 @@ interface Props {

interface LabelOptions {
title: string;
status: string;
status: FilterLabelStatus;
message?: string;
}

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<boolean>(false);
const [indexPatternExists, setIndexPatternExists] = useState<boolean | undefined>(undefined);
Expand Down Expand Up @@ -260,7 +265,7 @@ export function FilterItem(props: Props) {
}

function getValueLabel(): LabelOptions {
const label = {
const label: LabelOptions = {
title: '',
message: '',
status: FILTER_ITEM_OK,
Expand Down Expand Up @@ -326,6 +331,7 @@ export function FilterItem(props: Props) {
<FilterView
filter={filter}
valueLabel={valueLabelConfig.title}
filterLabelStatus={valueLabelConfig.status}
errorMessage={valueLabelConfig.message}
className={getClasses(filter.meta.negate, valueLabelConfig)}
iconOnClick={() => props.onRemove()}
Expand Down
11 changes: 9 additions & 2 deletions src/plugins/data/public/ui/filter_bar/filter_view/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -36,6 +38,7 @@ export const FilterView: FC<Props> = ({
onClick,
valueLabel,
errorMessage,
filterLabelStatus,
...rest
}: Props) => {
const [ref, innerText] = useInnerText();
Expand Down Expand Up @@ -65,7 +68,7 @@ export const FilterView: FC<Props> = ({
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,
}}
Expand All @@ -80,7 +83,11 @@ export const FilterView: FC<Props> = ({
{...rest}
>
<span ref={ref}>
<FilterLabel filter={filter} valueLabel={valueLabel} />
<FilterLabel
filter={filter}
valueLabel={valueLabel}
filterLabelStatus={filterLabelStatus}
/>
</span>
</EuiBadge>
);
Expand Down

0 comments on commit c710567

Please sign in to comment.