diff --git a/x-pack/plugins/triggers_actions_ui/public/common/expression_items/components/closable_popover_title.test.tsx b/x-pack/plugins/triggers_actions_ui/public/common/expression_items/components/closable_popover_title.test.tsx
new file mode 100644
index 0000000000000..8e9daf5f26c40
--- /dev/null
+++ b/x-pack/plugins/triggers_actions_ui/public/common/expression_items/components/closable_popover_title.test.tsx
@@ -0,0 +1,30 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import * as React from 'react';
+import { mount } from 'enzyme';
+import { ClosablePopoverTitle } from './closable_popover_title';
+
+describe('closable popover title', () => {
+ it('renders with defined options', () => {
+ const onClose = jest.fn();
+ const children =
;
+ const wrapper = mount(
+ {children}
+ );
+ expect(wrapper.contains()).toBeTruthy();
+ });
+
+ it('onClose function gets called', () => {
+ const onClose = jest.fn();
+ const children = ;
+ const wrapper = mount(
+ {children}
+ );
+ wrapper.find('EuiButtonIcon').simulate('click');
+ expect(onClose).toHaveBeenCalled();
+ });
+});
diff --git a/x-pack/plugins/triggers_actions_ui/public/common/expression_items/components/closable_popover_title.tsx b/x-pack/plugins/triggers_actions_ui/public/common/expression_items/components/closable_popover_title.tsx
new file mode 100644
index 0000000000000..f24dfe987a140
--- /dev/null
+++ b/x-pack/plugins/triggers_actions_ui/public/common/expression_items/components/closable_popover_title.tsx
@@ -0,0 +1,37 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiPopoverTitle, EuiFlexGroup, EuiFlexItem, EuiButtonIcon } from '@elastic/eui';
+
+interface ClosablePopoverTitleProps {
+ children: JSX.Element;
+ onClose: () => void;
+}
+
+export const ClosablePopoverTitle = ({ children, onClose }: ClosablePopoverTitleProps) => {
+ return (
+
+
+ {children}
+
+ onClose()}
+ />
+
+
+
+ );
+};
diff --git a/x-pack/plugins/triggers_actions_ui/public/common/expression_items/components/index.ts b/x-pack/plugins/triggers_actions_ui/public/common/expression_items/components/index.ts
new file mode 100644
index 0000000000000..d2ea51d37e84a
--- /dev/null
+++ b/x-pack/plugins/triggers_actions_ui/public/common/expression_items/components/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export { ClosablePopoverTitle } from './closable_popover_title';
diff --git a/x-pack/plugins/triggers_actions_ui/public/common/expression_items/for_the_last.test.tsx b/x-pack/plugins/triggers_actions_ui/public/common/expression_items/for_the_last.test.tsx
index e66bb1e7b4b9a..95c16fcea914d 100644
--- a/x-pack/plugins/triggers_actions_ui/public/common/expression_items/for_the_last.test.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/common/expression_items/for_the_last.test.tsx
@@ -5,7 +5,6 @@
*/
import * as React from 'react';
import { shallow } from 'enzyme';
-import { EuiPopoverTitle } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import { ForLastExpression } from './for_the_last';
@@ -40,12 +39,10 @@ describe('for the last expression', () => {
expect(wrapper.find('[value="s"]').length > 0).toBeTruthy();
expect(
wrapper.contains(
-
-
-
+
)
).toBeTruthy();
});
diff --git a/x-pack/plugins/triggers_actions_ui/public/common/expression_items/for_the_last.tsx b/x-pack/plugins/triggers_actions_ui/public/common/expression_items/for_the_last.tsx
index 673391dd9cbad..defad2b801718 100644
--- a/x-pack/plugins/triggers_actions_ui/public/common/expression_items/for_the_last.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/common/expression_items/for_the_last.tsx
@@ -10,7 +10,6 @@ import { i18n } from '@kbn/i18n';
import {
EuiExpression,
EuiPopover,
- EuiPopoverTitle,
EuiSelect,
EuiFlexGroup,
EuiFormRow,
@@ -20,6 +19,7 @@ import {
import { getTimeUnitLabel } from '../lib/get_time_unit_label';
import { TIME_UNITS } from '../../application/constants';
import { getTimeOptions } from '../lib/get_time_options';
+import { ClosablePopoverTitle } from './components';
interface ForLastExpressionProps {
timeWindowSize?: number;
@@ -82,12 +82,12 @@ export const ForLastExpression = ({
anchorPosition={popupPosition ?? 'downLeft'}
>
-
+ setAlertDurationPopoverOpen(false)}>
-
+
{
it('renders with builtin group by types', () => {
@@ -97,6 +97,13 @@ describe('group by expression', () => {
);
wrapper.simulate('click');
expect(wrapper.find('[value="all"]').length > 0).toBeTruthy();
- expect(wrapper.contains(over)).toBeTruthy();
+ expect(
+ wrapper.contains(
+
+ )
+ ).toBeTruthy();
});
});
diff --git a/x-pack/plugins/triggers_actions_ui/public/common/expression_items/group_by_over.tsx b/x-pack/plugins/triggers_actions_ui/public/common/expression_items/group_by_over.tsx
index 7ca32764dbdfd..6ad52a5416163 100644
--- a/x-pack/plugins/triggers_actions_ui/public/common/expression_items/group_by_over.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/common/expression_items/group_by_over.tsx
@@ -5,11 +5,11 @@
*/
import React, { useState, Fragment } from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
import { i18n } from '@kbn/i18n';
import {
EuiExpression,
EuiPopover,
- EuiPopoverTitle,
EuiFlexGroup,
EuiFlexItem,
EuiFormRow,
@@ -18,6 +18,7 @@ import {
} from '@elastic/eui';
import { builtInGroupByTypes } from '../constants';
import { GroupByType } from '../types';
+import { ClosablePopoverTitle } from './components';
interface GroupByExpressionProps {
groupBy: string;
@@ -112,14 +113,12 @@ export const GroupByExpression = ({
anchorPosition={popupPosition ?? 'downRight'}
>
-
- {i18n.translate(
- 'xpack.triggersActionsUI.common.expressionItems.groupByType.overButtonLabel',
- {
- defaultMessage: 'over',
- }
- )}
-
+
setGroupByPopoverOpen(false)}>
+
+
{
it('renders of builtin aggregation types', () => {
@@ -121,6 +121,13 @@ describe('of expression', () => {
/>
);
wrapper.simulate('click');
- expect(wrapper.contains(of)).toBeTruthy();
+ expect(
+ wrapper.contains(
+
+ )
+ ).toBeTruthy();
});
});
diff --git a/x-pack/plugins/triggers_actions_ui/public/common/expression_items/of.tsx b/x-pack/plugins/triggers_actions_ui/public/common/expression_items/of.tsx
index fdf68cc49572f..70aa4be6b7f87 100644
--- a/x-pack/plugins/triggers_actions_ui/public/common/expression_items/of.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/common/expression_items/of.tsx
@@ -6,10 +6,10 @@
import React, { useState } from 'react';
import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
import {
EuiExpression,
EuiPopover,
- EuiPopoverTitle,
EuiFlexGroup,
EuiFlexItem,
EuiFormRow,
@@ -17,6 +17,7 @@ import {
} from '@elastic/eui';
import { builtInAggregationTypes } from '../constants';
import { AggregationType } from '../types';
+import { ClosablePopoverTitle } from './components';
interface OfExpressionProps {
aggType: string;
@@ -100,11 +101,12 @@ export const OfExpression = ({
zIndex={8000}
>
-
- {i18n.translate('xpack.triggersActionsUI.common.expressionItems.of.popoverTitle', {
- defaultMessage: 'of',
- })}
-
+
setAggFieldPopoverOpen(false)}>
+
+
{
@@ -64,6 +63,6 @@ describe('threshold expression', () => {
onChangeSelectedThresholdComparator={onChangeSelectedThresholdComparator}
/>
);
- expect(wrapper.contains(Is between)).toBeTruthy();
+ expect(wrapper.contains('Is between')).toBeTruthy();
});
});
diff --git a/x-pack/plugins/triggers_actions_ui/public/common/expression_items/threshold.tsx b/x-pack/plugins/triggers_actions_ui/public/common/expression_items/threshold.tsx
index d0de7ae77a81e..fb3ff9ceb0926 100644
--- a/x-pack/plugins/triggers_actions_ui/public/common/expression_items/threshold.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/common/expression_items/threshold.tsx
@@ -9,7 +9,6 @@ import { i18n } from '@kbn/i18n';
import {
EuiExpression,
EuiPopover,
- EuiPopoverTitle,
EuiFlexGroup,
EuiFlexItem,
EuiFormRow,
@@ -19,6 +18,7 @@ import {
} from '@elastic/eui';
import { builtInComparators } from '../constants';
import { Comparator } from '../types';
+import { ClosablePopoverTitle } from './components';
interface ThresholdExpressionProps {
thresholdComparator: string;
@@ -97,7 +97,9 @@ export const ThresholdExpression = ({
anchorPosition={popupPosition ?? 'downLeft'}
>
-
{comparators[thresholdComparator].text}
+
setAlertThresholdPopoverOpen(false)}>
+ <>{comparators[thresholdComparator].text}>
+
{
it('renders with builtin aggregation types', () => {
@@ -100,6 +100,13 @@ describe('when expression', () => {
);
wrapper.simulate('click');
expect(wrapper.find('[value="avg"]').length > 0).toBeTruthy();
- expect(wrapper.contains(when)).toBeTruthy();
+ expect(
+ wrapper.contains(
+
+ )
+ ).toBeTruthy();
});
});
diff --git a/x-pack/plugins/triggers_actions_ui/public/common/expression_items/when.tsx b/x-pack/plugins/triggers_actions_ui/public/common/expression_items/when.tsx
index b20040608ed9e..65184065e359e 100644
--- a/x-pack/plugins/triggers_actions_ui/public/common/expression_items/when.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/common/expression_items/when.tsx
@@ -6,9 +6,11 @@
import React, { useState } from 'react';
import { i18n } from '@kbn/i18n';
-import { EuiExpression, EuiPopover, EuiPopoverTitle, EuiSelect } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiExpression, EuiPopover, EuiSelect } from '@elastic/eui';
import { builtInAggregationTypes } from '../constants';
import { AggregationType } from '../types';
+import { ClosablePopoverTitle } from './components';
interface WhenExpressionProps {
aggType: string;
@@ -64,11 +66,12 @@ export const WhenExpression = ({
anchorPosition={popupPosition ?? 'downLeft'}
>
-
- {i18n.translate('xpack.triggersActionsUI.common.expressionItems.threshold.popoverTitle', {
- defaultMessage: 'when',
- })}
-
+ setAggTypePopoverOpen(false)}>
+
+