Add close button to expression popovers (elastic#61352)

* Add X to trigger expression popovers * Fix jest tests * PR feedback Co-authored-by: Elastic Machine <[email protected]>
alexwizp · Mar 27, 2020 · d1214f8 · d1214f8
1 parent bec4e33
commit d1214f8
Show file tree

Hide file tree

Showing 13 changed files with 138 additions and 41 deletions.
diff --git a/...gers_actions_ui/public/common/expression_items/components/closable_popover_title.test.tsx b/...gers_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/.../triggers_actions_ui/public/common/expression_items/components/closable_popover_title.tsx b/.../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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -6,17 +6,18 @@
 
 import React, { useState } from 'react';
 import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
 import {
   EuiExpression,
   EuiPopover,
-  EuiPopoverTitle,
   EuiFlexGroup,
   EuiFlexItem,
   EuiFormRow,
   EuiComboBox,
 } 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
@@ -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
@@ -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
@@ -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
@@ -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}