Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support operator in field_value_selection filters #3922

Merged
merged 4 commits into from
Aug 25, 2020
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -5,6 +5,7 @@
- Updated browserslist configuration to remove IE accommodations ([#3911](https://github.com/elastic/eui/pull/3911))
- Removed docgenInfo from non-docs production builds ([#3911](https://github.com/elastic/eui/pull/3911))
- Added `regressionJob`, `outlierDetectionJob` and `classificationJob` icons to Machine Learning icon set, updated others. ([#3931](https://github.com/elastic/eui/pull/3931))
- Added `operator` field to `EuiSearchBar`'s `field_value_selection` filter configuration ([#3922](https://github.com/elastic/eui/pull/3922))

**Bug fixes**

25 changes: 24 additions & 1 deletion src-docs/src/views/search_bar/props_info.js
Original file line number Diff line number Diff line change
@@ -222,6 +222,15 @@ export const propsInfo = {
required: true,
type: { name: '#FieldValueOption[] | () => #FieldValueOption[]' },
},
filterWith: {
description:
'Specify how user input in the option dropdown will filter the available options.',
required: false,
defaultValue: { value: 'prefix' },
type: {
name: 'prefix | includes | (name, query, options) => boolean',
},
},
cache: {
description:
'When set to a positive number, if `options` is a loading function, the loaded ' +
@@ -233,7 +242,7 @@ export const propsInfo = {
description:
'Indicates whether the user can filter by multiple values or by only a single one. ' +
'When set to "and" the filter will create queries by `and`ing the selected values. ' +
'When set to "or" the filter will create quries by `or`ing the selected values',
'When set to "or" the filter will create queries by `or`ing the selected values',
required: false,
defaultValue: { value: 'true ("and")' },
type: { name: 'boolean | "or" | "and"' },
@@ -266,6 +275,20 @@ export const propsInfo = {
required: false,
type: { name: '() => boolean' },
},
autoClose: {
description:
'Should the dropdown close after the user selects a value. Ignored if multiSelect is true.',
required: false,
defaultValue: { value: 'true' },
type: { name: 'boolean' },
},
operator: {
description:
'What operator should be used when adding selection to the search bar.',
required: false,
defaultValue: { value: 'eq' },
type: { name: 'eq | exact | gt | gte | lt | lte' },
},
},
},
},
1 change: 1 addition & 0 deletions src-docs/src/views/search_bar/search_bar.js
Original file line number Diff line number Diff line change
@@ -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(),
},
Original file line number Diff line number Diff line change
@@ -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);
}
Original file line number Diff line number Diff line change
@@ -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 {
Original file line number Diff line number Diff line change
@@ -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 {
9 changes: 7 additions & 2 deletions src/components/search_bar/query/query.ts
Original file line number Diff line number Diff line change
@@ -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);
}