From 74076da9558953f5b2b7952109ab700e71be3372 Mon Sep 17 00:00:00 2001
From: ymao1 <ying.mao@elastic.co>
Date: Mon, 12 Oct 2020 09:24:50 -0400
Subject: [PATCH] [Alerting] Selectively update threshold value on threshold
 comparator change (#79914) (#80137)

* Only updating threshold value on threshold comparator change when number of required values for comparator changes

* Adding unit test

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../expression_items/threshold.test.tsx       | 45 ++++++++++++++++++-
 .../common/expression_items/threshold.tsx     | 15 ++++---
 2 files changed, 54 insertions(+), 6 deletions(-)

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 01791ef6147bf..73efba6929b71 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,6 +5,7 @@
  */
 import * as React from 'react';
 import { shallow } from 'enzyme';
+import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import { ThresholdExpression } from './threshold';
 
 describe('threshold expression', () => {
@@ -52,7 +53,7 @@ describe('threshold expression', () => {
     `);
   });
 
-  it('renders with treshold title', () => {
+  it('renders with threshold title', () => {
     const onChangeSelectedThreshold = jest.fn();
     const onChangeSelectedThresholdComparator = jest.fn();
     const wrapper = shallow(
@@ -65,4 +66,46 @@ describe('threshold expression', () => {
     );
     expect(wrapper.contains('Is between')).toBeTruthy();
   });
+
+  it('fires onChangeSelectedThreshold only when threshold actually changed', async () => {
+    const onChangeSelectedThreshold = jest.fn();
+    const onChangeSelectedThresholdComparator = jest.fn();
+
+    const wrapper = mountWithIntl(
+      <ThresholdExpression
+        thresholdComparator={'>'}
+        threshold={[10]}
+        errors={{ threshold0: [], threshold1: [] }}
+        onChangeSelectedThreshold={onChangeSelectedThreshold}
+        onChangeSelectedThresholdComparator={onChangeSelectedThresholdComparator}
+      />
+    );
+
+    wrapper.find('[data-test-subj="thresholdPopover"]').first().simulate('click');
+    expect(wrapper.find('[data-test-subj="comparatorOptionsComboBox"]').exists()).toBeTruthy();
+    expect(wrapper.find('[data-test-subj="alertThresholdInput"]').exists()).toBeTruthy();
+
+    wrapper
+      .find('[data-test-subj="alertThresholdInput"]')
+      .last()
+      .simulate('change', { target: { value: 1000 } });
+    expect(onChangeSelectedThreshold).toHaveBeenCalled();
+    expect(onChangeSelectedThresholdComparator).not.toHaveBeenCalled();
+
+    jest.clearAllMocks();
+    wrapper
+      .find('[data-test-subj="comparatorOptionsComboBox"]')
+      .last()
+      .simulate('change', { target: { value: '<' } });
+    expect(onChangeSelectedThreshold).not.toHaveBeenCalled();
+    expect(onChangeSelectedThresholdComparator).toHaveBeenCalled();
+
+    jest.clearAllMocks();
+    wrapper
+      .find('[data-test-subj="comparatorOptionsComboBox"]')
+      .last()
+      .simulate('change', { target: { value: 'between' } });
+    expect(onChangeSelectedThreshold).toHaveBeenCalled();
+    expect(onChangeSelectedThresholdComparator).toHaveBeenCalled();
+  });
 });
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 fe592aadb37a5..2b5cec98b16a1 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
@@ -111,12 +111,17 @@ export const ThresholdExpression = ({
               data-test-subj="comparatorOptionsComboBox"
               value={thresholdComparator}
               onChange={(e) => {
+                const updateThresholdValue =
+                  comparators[thresholdComparator].requiredValues !==
+                  comparators[e.target.value].requiredValues;
                 onChangeSelectedThresholdComparator(e.target.value);
-                const thresholdValues = threshold.slice(
-                  0,
-                  comparators[e.target.value].requiredValues
-                );
-                onChangeSelectedThreshold(thresholdValues);
+                if (updateThresholdValue) {
+                  const thresholdValues = threshold.slice(
+                    0,
+                    comparators[e.target.value].requiredValues
+                  );
+                  onChangeSelectedThreshold(thresholdValues);
+                }
               }}
               options={Object.values(comparators).map(({ text, value }) => {
                 return { text, value };