From 51fd4abe208c4f825df5eb5d84039cf9c4450ded Mon Sep 17 00:00:00 2001
From: Milton Hultgren <milton.hultgren@elastic.co>
Date: Tue, 7 Sep 2021 14:21:18 +0200
Subject: [PATCH] [Logs UI] Improve log threshold rule field selection
 (#111135)

* [Logs UI] Use ComboBox for criterion field selection (#110996
* [Logs UI] Make log threshold criterion field clearable
---
 .../expression_editor/criterion.tsx           | 33 ++++++++++++++-----
 1 file changed, 25 insertions(+), 8 deletions(-)

diff --git a/x-pack/plugins/infra/public/alerting/log_threshold/components/expression_editor/criterion.tsx b/x-pack/plugins/infra/public/alerting/log_threshold/components/expression_editor/criterion.tsx
index 969845ada1be..47ba580c272b 100644
--- a/x-pack/plugins/infra/public/alerting/log_threshold/components/expression_editor/criterion.tsx
+++ b/x-pack/plugins/infra/public/alerting/log_threshold/components/expression_editor/criterion.tsx
@@ -17,6 +17,7 @@ import {
   EuiFieldText,
   EuiButtonIcon,
   EuiFormRow,
+  EuiComboBox,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { isNumber, isFinite } from 'lodash';
@@ -112,7 +113,7 @@ export const Criterion: React.FC<Props> = ({
 
   const fieldOptions = useMemo(() => {
     return fields.map((field) => {
-      return { value: field.name, text: field.name };
+      return { label: field.name };
     });
   }, [fields]);
 
@@ -129,8 +130,14 @@ export const Criterion: React.FC<Props> = ({
   }, [fieldInfo]);
 
   const handleFieldChange = useCallback(
-    (e) => {
-      const fieldName = e.target.value;
+    ([selectedOption]) => {
+      if (!selectedOption) {
+        updateCriterion(idx, { field: '' });
+        return;
+      }
+
+      const fieldName = selectedOption.label;
+
       const nextFieldInfo = getFieldInfo(fields, fieldName);
       // If the field information we're dealing with has changed, reset the comparator and value.
       if (
@@ -146,10 +153,14 @@ export const Criterion: React.FC<Props> = ({
       } else {
         updateCriterion(idx, { field: fieldName });
       }
+
+      setIsFieldPopoverOpen(false);
     },
     [fieldInfo, fields, idx, updateCriterion]
   );
 
+  const selectedField = criterion.field ? [{ label: criterion.field }] : [];
+
   return (
     <EuiFlexGroup gutterSize="s">
       <EuiFlexItem grow>
@@ -181,13 +192,19 @@ export const Criterion: React.FC<Props> = ({
             >
               <div>
                 <EuiPopoverTitle>{criterionFieldTitle}</EuiPopoverTitle>
-                <EuiFormRow isInvalid={errors.field.length > 0} error={errors.field}>
-                  <EuiSelect
+                <EuiFormRow
+                  style={{ minWidth: '300px' }}
+                  isInvalid={errors.field.length > 0}
+                  error={errors.field}
+                >
+                  <EuiComboBox
                     compressed
-                    hasNoInitialSelection={criterion.field == null}
-                    value={criterion.field ?? ''}
-                    onChange={handleFieldChange}
+                    fullWidth
+                    isClearable={false}
+                    singleSelection={{ asPlainText: true }}
                     options={fieldOptions}
+                    selectedOptions={selectedField}
+                    onChange={handleFieldChange}
                   />
                 </EuiFormRow>
               </div>