diff --git a/x-pack/plugins/uptime/public/components/overview/filter_group/filter_popover.test.tsx b/x-pack/plugins/uptime/public/components/overview/filter_group/filter_popover.test.tsx index bccebb21718bf..9094b280fc8ef 100644 --- a/x-pack/plugins/uptime/public/components/overview/filter_group/filter_popover.test.tsx +++ b/x-pack/plugins/uptime/public/components/overview/filter_group/filter_popover.test.tsx @@ -7,7 +7,12 @@ import React from 'react'; import { fireEvent, waitFor, waitForElementToBeRemoved } from '@testing-library/react'; -import { FilterPopoverProps, FilterPopover } from './filter_popover'; +import { + FilterPopoverProps, + FilterPopover, + removeFilterForItemLabel, + filterByItemLabel, +} from './filter_popover'; import { render } from '../../../lib/helper/rtl_helpers'; describe('FilterPopover component', () => { @@ -77,17 +82,25 @@ describe('FilterPopover component', () => { fireEvent.click(uptimeFilterButton); - const generateLabelText = (item: string) => `Filter by ${props.title} ${item}.`; + selectedPropsItems.forEach((item) => { + expect(getByLabelText(removeFilterForItemLabel(item, props.title))); + }); itemsToClick.forEach((item) => { - const optionButtonLabelText = generateLabelText(item); - const optionButton = getByLabelText(optionButtonLabelText); + let optionButton: HTMLElement; + if (selectedPropsItems.some((i) => i === item)) { + optionButton = getByLabelText(removeFilterForItemLabel(item, props.title)); + } else { + optionButton = getByLabelText(filterByItemLabel(item, props.title)); + } fireEvent.click(optionButton); }); fireEvent.click(uptimeFilterButton); - await waitForElementToBeRemoved(() => queryByLabelText(generateLabelText(itemsToClick[0]))); + await waitForElementToBeRemoved(() => + queryByLabelText(`by ${props.title} ${itemsToClick[0]}`, { exact: false }) + ); expect(props.onFilterFieldChange).toHaveBeenCalledTimes(1); expect(props.onFilterFieldChange).toHaveBeenCalledWith(props.fieldName, expectedSelections); diff --git a/x-pack/plugins/uptime/public/components/overview/filter_group/filter_popover.tsx b/x-pack/plugins/uptime/public/components/overview/filter_group/filter_popover.tsx index 23e17802a6835..79d39e6d2dd44 100644 --- a/x-pack/plugins/uptime/public/components/overview/filter_group/filter_popover.tsx +++ b/x-pack/plugins/uptime/public/components/overview/filter_group/filter_popover.tsx @@ -29,6 +29,18 @@ export interface FilterPopoverProps { const isItemSelected = (selectedItems: string[], item: string): 'on' | undefined => selectedItems.find((selected) => selected === item) ? 'on' : undefined; +export const filterByItemLabel = (item: string, title: string) => + i18n.translate('xpack.uptime.filterPopover.filterItem.label', { + defaultMessage: 'Filter by {title} {item}.', + values: { item, title }, + }); + +export const removeFilterForItemLabel = (item: string, title: string) => + i18n.translate('xpack.uptime.filterPopover.removeFilterItem.label', { + defaultMessage: 'Remove filter by {title} {item}.', + values: { item, title }, + }); + export const FilterPopover = ({ fieldName, id, @@ -126,20 +138,22 @@ export const FilterPopover = ({ /> {!loading && - itemsToDisplay.map((item) => ( - toggleSelectedItems(item, tempSelectedItems, setTempSelectedItems)} - > - {item} - - ))} + itemsToDisplay.map((item) => { + const checked = isItemSelected(tempSelectedItems, item); + return ( + toggleSelectedItems(item, tempSelectedItems, setTempSelectedItems)} + > + {item} + + ); + })} {id === 'location' && items.length === 0 && } );