From 2da1a5833eb16a7ce61f3a4c018d3de3eb0391a8 Mon Sep 17 00:00:00 2001
From: Yuri Astrakhan <YuriAstrakhan@gmail.com>
Date: Fri, 14 Aug 2020 16:58:41 -0400
Subject: [PATCH] Support operator in field_value_selection filters

Additionally adds a an operator example to the search bar demo,
and use `OperatorType` in all other filters TS declaration.

closes: #3920
---
 src-docs/src/views/search_bar/search_bar.js           |  1 +
 .../filters/field_value_selection_filter.tsx          | 11 ++++++-----
 .../search_bar/filters/field_value_toggle_filter.tsx  |  4 ++--
 .../filters/field_value_toggle_group_filter.tsx       |  3 ++-
 src/components/search_bar/query/query.ts              |  9 +++++++--
 5 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src-docs/src/views/search_bar/search_bar.js b/src-docs/src/views/search_bar/search_bar.js
index ba2690767f3..0e4d1accd4e 100644
--- a/src-docs/src/views/search_bar/search_bar.js
+++ b/src-docs/src/views/search_bar/search_bar.js
@@ -118,6 +118,7 @@ export const SearchBar = () => {
         field: 'tag',
         name: 'Tag',
         multiSelect: 'or',
+        operator: 'exact',
         cache: 10000, // will cache the loaded tags for 10 sec
         options: () => loadTags(),
       },
diff --git a/src/components/search_bar/filters/field_value_selection_filter.tsx b/src/components/search_bar/filters/field_value_selection_filter.tsx
index 94f0608104d..43f8ceb6147 100644
--- a/src/components/search_bar/filters/field_value_selection_filter.tsx
+++ b/src/components/search_bar/filters/field_value_selection_filter.tsx
@@ -27,7 +27,7 @@ import { EuiLoadingChart } from '../../loading';
 import { EuiSpacer } from '../../spacer';
 import { EuiIcon } from '../../icon';
 import { Query } from '../query';
-import { Clause, Value } from '../query/ast';
+import { Clause, Operator, OperatorType, Value } from '../query/ast';
 
 export interface FieldValueOptionType {
   field?: string;
@@ -59,6 +59,7 @@ export interface FieldValueSelectionFilterConfigType {
   searchThreshold?: number;
   available?: () => boolean;
   autoClose?: boolean;
+  operator?: OperatorType;
 }
 
 export interface FieldValueSelectionFilterProps {
@@ -262,7 +263,7 @@ export class FieldValueSelectionFilter extends Component<
   ) {
     const multiSelect = this.resolveMultiSelect();
     const {
-      config: { autoClose = true },
+      config: { autoClose = true, operator = Operator.EQ },
     } = this.props;
 
     // we're closing popover only if the user can only select one item... if the
@@ -274,20 +275,20 @@ export class FieldValueSelectionFilter extends Component<
         ? this.props.query.removeSimpleFieldClauses(field)
         : this.props.query
             .removeSimpleFieldClauses(field)
-            .addSimpleFieldValue(field, value);
+            .addSimpleFieldValue(field, value, true, operator);
 
       this.props.onChange(query);
     } else {
       if (multiSelect === 'or') {
         const query = checked
           ? this.props.query.removeOrFieldValue(field, value)
-          : this.props.query.addOrFieldValue(field, value);
+          : this.props.query.addOrFieldValue(field, value, true, operator);
 
         this.props.onChange(query);
       } else {
         const query = checked
           ? this.props.query.removeSimpleFieldValue(field, value)
-          : this.props.query.addSimpleFieldValue(field, value);
+          : this.props.query.addSimpleFieldValue(field, value, true, operator);
 
         this.props.onChange(query);
       }
diff --git a/src/components/search_bar/filters/field_value_toggle_filter.tsx b/src/components/search_bar/filters/field_value_toggle_filter.tsx
index df0afad147d..9f51b41f3fb 100644
--- a/src/components/search_bar/filters/field_value_toggle_filter.tsx
+++ b/src/components/search_bar/filters/field_value_toggle_filter.tsx
@@ -21,7 +21,7 @@ import React, { Component } from 'react';
 import { EuiFilterButton } from '../../filter_group';
 import { isNil } from '../../../services/predicate';
 import { Query } from '../query';
-import { Clause, Value } from '../query/ast';
+import { Clause, OperatorType, Value } from '../query/ast';
 
 export interface FieldValueToggleFilterConfigType {
   type: 'field_value_toggle';
@@ -30,7 +30,7 @@ export interface FieldValueToggleFilterConfigType {
   name: string;
   negatedName?: string;
   available?: () => boolean;
-  operator?: 'eq' | 'exact' | 'gt' | 'gte' | 'lt' | 'lte';
+  operator?: OperatorType;
 }
 
 export interface FieldValueToggleFilterProps {
diff --git a/src/components/search_bar/filters/field_value_toggle_group_filter.tsx b/src/components/search_bar/filters/field_value_toggle_group_filter.tsx
index 040599e1294..a1ad0fc21ff 100644
--- a/src/components/search_bar/filters/field_value_toggle_group_filter.tsx
+++ b/src/components/search_bar/filters/field_value_toggle_group_filter.tsx
@@ -20,12 +20,13 @@
 import React, { Component } from 'react';
 import { EuiFilterButton } from '../../filter_group';
 import { Query } from '../query';
+import { OperatorType } from '../query/ast';
 
 export interface FieldValueToggleGroupFilterItemType {
   value: string | number | boolean;
   name: string;
   negatedName?: string;
-  operator?: 'eq' | 'exact' | 'gt' | 'gte' | 'lt' | 'lte';
+  operator?: OperatorType;
 }
 
 export interface FieldValueToggleGroupFilterConfigType {
diff --git a/src/components/search_bar/query/query.ts b/src/components/search_bar/query/query.ts
index b03054d458b..d92ec35410d 100644
--- a/src/components/search_bar/query/query.ts
+++ b/src/components/search_bar/query/query.ts
@@ -103,8 +103,13 @@ export class Query {
     return this.ast.getOrFieldClause(field, value);
   }
 
-  addOrFieldValue(field: string, value: Value, must = true) {
-    const ast = this.ast.addOrFieldValue(field, value, must);
+  addOrFieldValue(
+    field: string,
+    value: Value,
+    must = true,
+    operator: OperatorType = Operator.EQ
+  ) {
+    const ast = this.ast.addOrFieldValue(field, value, must, operator);
     return new Query(ast, this.syntax);
   }