From d1214f8893ee427233b1add45298997445c6c596 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mike=20C=C3=B4t=C3=A9?= <mikecote@users.noreply.github.com>
Date: Fri, 27 Mar 2020 13:37:22 -0400
Subject: [PATCH] Add close button to expression popovers (#61352)

* Add X to trigger expression popovers

* Fix jest tests

* PR feedback

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 .../closable_popover_title.test.tsx           | 30 +++++++++++++++
 .../components/closable_popover_title.tsx     | 37 +++++++++++++++++++
 .../expression_items/components/index.ts      |  7 ++++
 .../expression_items/for_the_last.test.tsx    | 11 ++----
 .../common/expression_items/for_the_last.tsx  |  6 +--
 .../expression_items/group_by_over.test.tsx   | 11 +++++-
 .../common/expression_items/group_by_over.tsx | 17 ++++-----
 .../common/expression_items/of.test.tsx       | 11 +++++-
 .../public/common/expression_items/of.tsx     | 14 ++++---
 .../expression_items/threshold.test.tsx       |  3 +-
 .../common/expression_items/threshold.tsx     |  6 ++-
 .../common/expression_items/when.test.tsx     | 11 +++++-
 .../public/common/expression_items/when.tsx   | 15 +++++---
 13 files changed, 138 insertions(+), 41 deletions(-)
 create mode 100644 x-pack/plugins/triggers_actions_ui/public/common/expression_items/components/closable_popover_title.test.tsx
 create mode 100644 x-pack/plugins/triggers_actions_ui/public/common/expression_items/components/closable_popover_title.tsx
 create mode 100644 x-pack/plugins/triggers_actions_ui/public/common/expression_items/components/index.ts

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 = <div className="foo" />;
+    const wrapper = mount(
+      <ClosablePopoverTitle onClose={onClose}>{children}</ClosablePopoverTitle>
+    );
+    expect(wrapper.contains(<div className="foo" />)).toBeTruthy();
+  });
+
+  it('onClose function gets called', () => {
+    const onClose = jest.fn();
+    const children = <div className="foo" />;
+    const wrapper = mount(
+      <ClosablePopoverTitle onClose={onClose}>{children}</ClosablePopoverTitle>
+    );
+    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 (
+    <EuiPopoverTitle>
+      <EuiFlexGroup alignItems="center" gutterSize="s">
+        <EuiFlexItem>{children}</EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButtonIcon
+            iconType="cross"
+            color="danger"
+            aria-label={i18n.translate(
+              'xpack.triggersActionsUI.common.expressionItems.components.closablePopoverTitle.closeLabel',
+              {
+                defaultMessage: 'Close',
+              }
+            )}
+            onClick={() => onClose()}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiPopoverTitle>
+  );
+};
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(
-        <EuiPopoverTitle>
-          <FormattedMessage
-            id="xpack.triggersActionsUI.common.expressionItems.forTheLast.popoverTitle"
-            defaultMessage="For the last"
-          />
-        </EuiPopoverTitle>
+        <FormattedMessage
+          id="xpack.triggersActionsUI.common.expressionItems.forTheLast.popoverTitle"
+          defaultMessage="For the last"
+        />
       )
     ).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'}
     >
       <div>
-        <EuiPopoverTitle>
+        <ClosablePopoverTitle onClose={() => setAlertDurationPopoverOpen(false)}>
           <FormattedMessage
             id="xpack.triggersActionsUI.common.expressionItems.forTheLast.popoverTitle"
             defaultMessage="For the last"
           />
-        </EuiPopoverTitle>
+        </ClosablePopoverTitle>
         <EuiFlexGroup>
           <EuiFlexItem grow={false}>
             <EuiFormRow
diff --git a/x-pack/plugins/triggers_actions_ui/public/common/expression_items/group_by_over.test.tsx b/x-pack/plugins/triggers_actions_ui/public/common/expression_items/group_by_over.test.tsx
index 39cca005d5176..b0896f1466906 100644
--- a/x-pack/plugins/triggers_actions_ui/public/common/expression_items/group_by_over.test.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/common/expression_items/group_by_over.test.tsx
@@ -5,8 +5,8 @@
  */
 import * as React from 'react';
 import { shallow } from 'enzyme';
-import { EuiPopoverTitle } from '@elastic/eui';
 import { GroupByExpression } from './group_by_over';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 describe('group by expression', () => {
   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(<EuiPopoverTitle>over</EuiPopoverTitle>)).toBeTruthy();
+    expect(
+      wrapper.contains(
+        <FormattedMessage
+          id="xpack.triggersActionsUI.common.expressionItems.groupByType.overButtonLabel"
+          defaultMessage="over"
+        />
+      )
+    ).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'}
     >
       <div>
-        <EuiPopoverTitle>
-          {i18n.translate(
-            'xpack.triggersActionsUI.common.expressionItems.groupByType.overButtonLabel',
-            {
-              defaultMessage: 'over',
-            }
-          )}
-        </EuiPopoverTitle>
+        <ClosablePopoverTitle onClose={() => setGroupByPopoverOpen(false)}>
+          <FormattedMessage
+            id="xpack.triggersActionsUI.common.expressionItems.groupByType.overButtonLabel"
+            defaultMessage="over"
+          />
+        </ClosablePopoverTitle>
         <EuiFlexGroup justifyContent="spaceBetween">
           <EuiFlexItem grow={false}>
             <EuiSelect
diff --git a/x-pack/plugins/triggers_actions_ui/public/common/expression_items/of.test.tsx b/x-pack/plugins/triggers_actions_ui/public/common/expression_items/of.test.tsx
index 4d0017ce5c8e6..2f3c0000ef96b 100644
--- a/x-pack/plugins/triggers_actions_ui/public/common/expression_items/of.test.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/common/expression_items/of.test.tsx
@@ -5,8 +5,8 @@
  */
 import * as React from 'react';
 import { shallow } from 'enzyme';
-import { EuiPopoverTitle } from '@elastic/eui';
 import { OfExpression } from './of';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 describe('of expression', () => {
   it('renders of builtin aggregation types', () => {
@@ -121,6 +121,13 @@ describe('of expression', () => {
       />
     );
     wrapper.simulate('click');
-    expect(wrapper.contains(<EuiPopoverTitle>of</EuiPopoverTitle>)).toBeTruthy();
+    expect(
+      wrapper.contains(
+        <FormattedMessage
+          id="xpack.triggersActionsUI.common.expressionItems.of.popoverTitle"
+          defaultMessage="of"
+        />
+      )
+    ).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}
     >
       <div>
-        <EuiPopoverTitle>
-          {i18n.translate('xpack.triggersActionsUI.common.expressionItems.of.popoverTitle', {
-            defaultMessage: 'of',
-          })}
-        </EuiPopoverTitle>
+        <ClosablePopoverTitle onClose={() => setAggFieldPopoverOpen(false)}>
+          <FormattedMessage
+            id="xpack.triggersActionsUI.common.expressionItems.of.popoverTitle"
+            defaultMessage="of"
+          />
+        </ClosablePopoverTitle>
         <EuiFlexGroup>
           <EuiFlexItem grow={false} className="watcherThresholdAlertAggFieldContainer">
             <EuiFormRow
diff --git a/x-pack/plugins/triggers_actions_ui/public/common/expression_items/threshold.test.tsx b/x-pack/plugins/triggers_actions_ui/public/common/expression_items/threshold.test.tsx
index 92880bd124507..01791ef6147bf 100644
--- a/x-pack/plugins/triggers_actions_ui/public/common/expression_items/threshold.test.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/common/expression_items/threshold.test.tsx
@@ -5,7 +5,6 @@
  */
 import * as React from 'react';
 import { shallow } from 'enzyme';
-import { EuiPopoverTitle } from '@elastic/eui';
 import { ThresholdExpression } from './threshold';
 
 describe('threshold expression', () => {
@@ -64,6 +63,6 @@ describe('threshold expression', () => {
         onChangeSelectedThresholdComparator={onChangeSelectedThresholdComparator}
       />
     );
-    expect(wrapper.contains(<EuiPopoverTitle>Is between</EuiPopoverTitle>)).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'}
     >
       <div>
-        <EuiPopoverTitle>{comparators[thresholdComparator].text}</EuiPopoverTitle>
+        <ClosablePopoverTitle onClose={() => setAlertThresholdPopoverOpen(false)}>
+          <>{comparators[thresholdComparator].text}</>
+        </ClosablePopoverTitle>
         <EuiFlexGroup>
           <EuiFlexItem grow={false}>
             <EuiSelect
diff --git a/x-pack/plugins/triggers_actions_ui/public/common/expression_items/when.test.tsx b/x-pack/plugins/triggers_actions_ui/public/common/expression_items/when.test.tsx
index 02b6bf24977c9..fd77625d425c8 100644
--- a/x-pack/plugins/triggers_actions_ui/public/common/expression_items/when.test.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/common/expression_items/when.test.tsx
@@ -5,8 +5,8 @@
  */
 import * as React from 'react';
 import { shallow } from 'enzyme';
-import { EuiPopoverTitle } from '@elastic/eui';
 import { WhenExpression } from './when';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 describe('when expression', () => {
   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(<EuiPopoverTitle>when</EuiPopoverTitle>)).toBeTruthy();
+    expect(
+      wrapper.contains(
+        <FormattedMessage
+          id="xpack.triggersActionsUI.common.expressionItems.threshold.popoverTitle"
+          defaultMessage="when"
+        />
+      )
+    ).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'}
     >
       <div>
-        <EuiPopoverTitle>
-          {i18n.translate('xpack.triggersActionsUI.common.expressionItems.threshold.popoverTitle', {
-            defaultMessage: 'when',
-          })}
-        </EuiPopoverTitle>
+        <ClosablePopoverTitle onClose={() => setAggTypePopoverOpen(false)}>
+          <FormattedMessage
+            id="xpack.triggersActionsUI.common.expressionItems.threshold.popoverTitle"
+            defaultMessage="when"
+          />
+        </ClosablePopoverTitle>
         <EuiSelect
           data-test-subj="whenExpressionSelect"
           value={aggType}