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

@@ -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(),
       },

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);
       }

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 {

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 {

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);
   }