From 3600f5b90b1d9caeea846e2af0ea20bea15e41b4 Mon Sep 17 00:00:00 2001
From: Yuliia Naumenko <jo.naumenko@gmail.com>
Date: Wed, 18 Mar 2020 16:43:22 -0700
Subject: [PATCH] Fixed default message for index threshold includes both
 threshold values (#60545)

* Fixed default message for index threshold includes both threshold values even if not used

* fixed due to review comments

* Fixed validation errors with ability to clear input
---
 .../threshold/expression.tsx                   |  2 +-
 .../threshold/validation.ts                    |  3 ++-
 .../common/expression_items/threshold.test.tsx |  4 ++--
 .../common/expression_items/threshold.tsx      | 18 ++++++++++++++----
 4 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/expression.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/expression.tsx
index 5c7f48de81f75..728418bf3c336 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/expression.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/expression.tsx
@@ -50,7 +50,7 @@ const DEFAULT_VALUES = {
   THRESHOLD_COMPARATOR: COMPARATORS.GREATER_THAN,
   TIME_WINDOW_SIZE: 5,
   TIME_WINDOW_UNIT: 'm',
-  THRESHOLD: [1000, 5000],
+  THRESHOLD: [1000],
   GROUP_BY: 'all',
 };
 
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/validation.ts b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/validation.ts
index 44be2b6139aa4..3912b2fffae1e 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/validation.ts
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/validation.ts
@@ -89,7 +89,7 @@ export const validateExpression = (alertParams: IndexThresholdAlertParams): Vali
       })
     );
   }
-  if (!threshold || threshold.length === 0 || (threshold.length === 1 && !threshold[0])) {
+  if (!threshold || threshold.length === 0 || threshold[0] === undefined) {
     errors.threshold0.push(
       i18n.translate('xpack.triggersActionsUI.sections.addAlert.error.requiredThreshold0Text', {
         defaultMessage: 'Threshold0 is required.',
@@ -100,6 +100,7 @@ export const validateExpression = (alertParams: IndexThresholdAlertParams): Vali
     thresholdComparator &&
     builtInComparators[thresholdComparator].requiredValues > 1 &&
     (!threshold ||
+      threshold[1] === undefined ||
       (threshold && threshold.length < builtInComparators[thresholdComparator!].requiredValues))
   ) {
     errors.threshold1.push(
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 bd3c7383d4b9c..92880bd124507 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
@@ -15,7 +15,7 @@ describe('threshold expression', () => {
     const wrapper = shallow(
       <ThresholdExpression
         thresholdComparator={'between'}
-        errors={{ threshold0: [] }}
+        errors={{ threshold0: [], threshold1: [] }}
         onChangeSelectedThreshold={onChangeSelectedThreshold}
         onChangeSelectedThresholdComparator={onChangeSelectedThresholdComparator}
       />
@@ -59,7 +59,7 @@ describe('threshold expression', () => {
     const wrapper = shallow(
       <ThresholdExpression
         thresholdComparator={'between'}
-        errors={{ threshold0: [] }}
+        errors={{ threshold0: [], threshold1: [] }}
         onChangeSelectedThreshold={onChangeSelectedThreshold}
         onChangeSelectedThresholdComparator={onChangeSelectedThresholdComparator}
       />
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 ecbf0aee63e2d..d0de7ae77a81e 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
@@ -105,6 +105,11 @@ export const ThresholdExpression = ({
               value={thresholdComparator}
               onChange={e => {
                 onChangeSelectedThresholdComparator(e.target.value);
+                const thresholdValues = threshold.slice(
+                  0,
+                  comparators[e.target.value].requiredValues
+                );
+                onChangeSelectedThreshold(thresholdValues);
               }}
               options={Object.values(comparators).map(({ text, value }) => {
                 return { text, value };
@@ -123,18 +128,23 @@ export const ThresholdExpression = ({
                   </EuiFlexItem>
                 ) : null}
                 <EuiFlexItem grow={false}>
-                  <EuiFormRow>
+                  <EuiFormRow
+                    isInvalid={errors[`threshold${i}`].length > 0 || !threshold[i]}
+                    error={errors[`threshold${i}`]}
+                  >
                     <EuiFieldNumber
                       data-test-subj="alertThresholdInput"
-                      value={!threshold || threshold[i] === null ? 0 : threshold[i]}
                       min={0}
-                      step={0.1}
+                      value={!threshold || threshold[i] === undefined ? '' : threshold[i]}
+                      isInvalid={errors[`threshold${i}`].length > 0 || !threshold[i]}
                       onChange={e => {
                         const { value } = e.target;
                         const thresholdVal = value !== '' ? parseFloat(value) : undefined;
                         const newThreshold = [...threshold];
-                        if (thresholdVal) {
+                        if (thresholdVal !== undefined) {
                           newThreshold[i] = thresholdVal;
+                        } else {
+                          delete newThreshold[i];
                         }
                         onChangeSelectedThreshold(newThreshold);
                       }}