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 && }
);