From af7248071fad1e169fe9c257072c28ea2cc7f4dc Mon Sep 17 00:00:00 2001 From: Rory Hunter Date: Mon, 23 Mar 2020 13:42:07 +0000 Subject: [PATCH 1/2] Fixes to EuiSearchBar etc types --- CHANGELOG.md | 1 + .../basic_table/in_memory_table.test.tsx | 4 +-- .../filters/field_value_selection_filter.tsx | 2 +- src/components/search_bar/filters/filters.tsx | 4 +-- src/components/search_bar/filters/index.ts | 2 +- src/components/search_bar/index.ts | 4 +-- src/components/search_bar/search_bar.test.tsx | 4 +-- src/components/search_bar/search_bar.tsx | 14 ++++++--- src/components/search_bar/search_box.tsx | 31 +++---------------- .../search_bar/search_filters.test.tsx | 4 +-- src/components/search_bar/search_filters.tsx | 6 ++-- 11 files changed, 30 insertions(+), 46 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 19bb57aec99..937faee5d18 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ - Improved `EuiButtonEmpty` focus state when the `color` type is `text` ([#3135](https://github.com/elastic/eui/pull/3135)) - Added `EuiLoadingElastic` component ([#3017](https://github.com/elastic/eui/pull/3017)) - Upgraded `react-beautiful-dnd` to v13 ([#3064](https://github.com/elastic/eui/pull/3064)) +- Fixes to `EuiSearchBar` etc types ([#3147](https://github.com/elastic/eui/pull/3147)) **Bug Fixes** diff --git a/src/components/basic_table/in_memory_table.test.tsx b/src/components/basic_table/in_memory_table.test.tsx index 415d1498e59..f9159c87a0a 100644 --- a/src/components/basic_table/in_memory_table.test.tsx +++ b/src/components/basic_table/in_memory_table.test.tsx @@ -5,7 +5,7 @@ import { requiredProps } from '../../test'; import { EuiInMemoryTable, EuiInMemoryTableProps } from './in_memory_table'; import { ENTER } from '../../services/key_codes'; import { SortDirection } from '../../services'; -import { FilterConfig } from '../search_bar/filters'; +import { SearchFilterConfig } from '../search_bar/filters'; interface BasicItem { id: number | string; @@ -662,7 +662,7 @@ describe('EuiInMemoryTable', () => { name: 'Name1', negatedName: 'Not Name1', }, - ] as FilterConfig[], + ] as SearchFilterConfig[], }, selection: { onSelectionChange: () => undefined, 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 65bd1e4e157..999fc53f0fb 100644 --- a/src/components/search_bar/filters/field_value_selection_filter.tsx +++ b/src/components/search_bar/filters/field_value_selection_filter.tsx @@ -10,7 +10,7 @@ import { EuiIcon } from '../../icon'; import { Query } from '../query'; import { Clause, Value } from '../query/ast'; -interface FieldValueOptionType { +export interface FieldValueOptionType { field?: string; value: Value; name?: string; diff --git a/src/components/search_bar/filters/filters.tsx b/src/components/search_bar/filters/filters.tsx index c3e67f3b18d..427e00a647f 100644 --- a/src/components/search_bar/filters/filters.tsx +++ b/src/components/search_bar/filters/filters.tsx @@ -16,7 +16,7 @@ import { Query } from '../query'; export const createFilter = ( index: number, - config: FilterConfig, + config: SearchFilterConfig, query: Query, onChange: (query: Query) => void ) => { @@ -46,7 +46,7 @@ export const createFilter = ( } }; -export type FilterConfig = +export type SearchFilterConfig = | IsFilterConfigType | FieldValueSelectionFilterConfigType | FieldValueToggleFilterConfigType diff --git a/src/components/search_bar/filters/index.ts b/src/components/search_bar/filters/index.ts index 6dd76a72649..6372edef740 100644 --- a/src/components/search_bar/filters/index.ts +++ b/src/components/search_bar/filters/index.ts @@ -1 +1 @@ -export { createFilter, FilterConfig } from './filters'; +export { createFilter, SearchFilterConfig } from './filters'; diff --git a/src/components/search_bar/index.ts b/src/components/search_bar/index.ts index 394c5df78b2..d4d324a7745 100644 --- a/src/components/search_bar/index.ts +++ b/src/components/search_bar/index.ts @@ -5,5 +5,5 @@ export { Query, Ast, } from './search_bar'; -export { SearchBoxConfigProps } from './search_box'; -export { SearchFiltersFiltersType } from './search_filters'; +export { SearchFilterConfig } from './search_filters'; +export { FieldValueOptionType } from './filters/field_value_selection_filter'; diff --git a/src/components/search_bar/search_bar.test.tsx b/src/components/search_bar/search_bar.test.tsx index f783e07c4a1..f7c098ad928 100644 --- a/src/components/search_bar/search_bar.test.tsx +++ b/src/components/search_bar/search_bar.test.tsx @@ -5,7 +5,7 @@ import { mount, shallow } from 'enzyme'; import { EuiSearchBar } from './search_bar'; import { Query } from './query'; import { ENTER } from '../../services/key_codes'; -import { SearchFiltersFiltersType } from './search_filters'; +import { SearchFilterConfig } from './search_filters'; describe('SearchBar', () => { test('render - no config, no query', () => { @@ -48,7 +48,7 @@ describe('SearchBar', () => { }); test('render - provided query, filters', () => { - const filters: SearchFiltersFiltersType = [ + const filters: SearchFilterConfig[] = [ { type: 'is', field: 'open', diff --git a/src/components/search_bar/search_bar.tsx b/src/components/search_bar/search_bar.tsx index f00ff1aeb35..b3be4f2086d 100644 --- a/src/components/search_bar/search_bar.tsx +++ b/src/components/search_bar/search_bar.tsx @@ -1,10 +1,11 @@ import React, { Component, ReactElement } from 'react'; import { isString } from '../../services/predicate'; import { EuiFlexGroup, EuiFlexItem } from '../flex'; -import { EuiSearchBox, SchemaType, SearchBoxConfigProps } from './search_box'; -import { EuiSearchFilters, SearchFiltersFiltersType } from './search_filters'; +import { EuiSearchBox, SchemaType } from './search_box'; +import { EuiSearchFilters, SearchFilterConfig } from './search_filters'; import { Query } from './query'; import { CommonProps } from '../common'; +import { EuiFieldSearchProps } from '../form/field_search'; export { Query, AST as Ast } from './query'; @@ -42,12 +43,17 @@ export interface EuiSearchBarProps extends CommonProps { Configures the search box. Set `placeholder` to change the placeholder text in the box and `incremental` to support incremental (as you type) search. */ - box?: SearchBoxConfigProps; + box?: EuiFieldSearchProps & { + // Boolean values are not meaningful to this EuiSearchBox, but are allowed so that other + // components can use e.g. a true value to mean "auto-derive a schema". See EuiInMemoryTable. + // Admittedly, this is a bit of a hack. + schema?: SchemaType | boolean; + }; /** An array of search filters. */ - filters?: SearchFiltersFiltersType; + filters?: SearchFilterConfig[]; /** * Tools which go to the left of the search bar. diff --git a/src/components/search_bar/search_box.tsx b/src/components/search_bar/search_box.tsx index 6e989dcdd16..fa5217ed37d 100644 --- a/src/components/search_bar/search_box.tsx +++ b/src/components/search_bar/search_box.tsx @@ -1,6 +1,5 @@ import React, { Component } from 'react'; -import { EuiFieldSearch } from '../form'; -import { CommonProps } from '../common'; +import { EuiFieldSearch, EuiFieldSearchProps } from '../form'; export interface SchemaType { strict?: boolean; @@ -8,20 +7,10 @@ export interface SchemaType { flags?: string[]; } -export interface SearchBoxConfigProps extends CommonProps { - placeholder?: string; - incremental?: boolean; - // Boolean values are not meaningful to this component, but are allowed so that other - // components can use e.g. a true value to mean "auto-derive a schema". See EuiInMemoryTable. - // Admittedly, this is a bit of a hack. - schema?: SchemaType | boolean; -} - -export interface EuiSearchBoxProps extends SearchBoxConfigProps { +export interface EuiSearchBoxProps extends EuiFieldSearchProps { query: string; + // This is optional in EuiFieldSearchProps onSearch: (queryText: string) => void; - isInvalid?: boolean; - title?: string; } type DefaultProps = Pick; @@ -41,15 +30,7 @@ export class EuiSearchBox extends Component { } render() { - const { - placeholder, - query, - incremental, - onSearch, - isInvalid, - title, - ...rest - } = this.props; + const { query, incremental, ...rest } = this.props; let ariaLabel; if (incremental) { @@ -64,13 +45,9 @@ export class EuiSearchBox extends Component { (this.inputElement = input)} fullWidth - placeholder={placeholder} defaultValue={query} incremental={incremental} - onSearch={query => onSearch(query)} - isInvalid={isInvalid} aria-label={ariaLabel} - title={title} {...rest} /> ); diff --git a/src/components/search_bar/search_filters.test.tsx b/src/components/search_bar/search_filters.test.tsx index 6d8306d6b67..ddfbbcada68 100644 --- a/src/components/search_bar/search_filters.test.tsx +++ b/src/components/search_bar/search_filters.test.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { requiredProps } from '../../test'; import { shallow } from 'enzyme'; -import { EuiSearchFilters, SearchFiltersFiltersType } from './search_filters'; +import { EuiSearchFilters, SearchFilterConfig } from './search_filters'; import { Query } from './query'; describe('EuiSearchFilters', () => { @@ -19,7 +19,7 @@ describe('EuiSearchFilters', () => { }); test('render - with filters', () => { - const filters: SearchFiltersFiltersType = [ + const filters: SearchFilterConfig[] = [ { type: 'is', field: 'open', diff --git a/src/components/search_bar/search_filters.tsx b/src/components/search_bar/search_filters.tsx index 88576b631ee..db8ee7966de 100644 --- a/src/components/search_bar/search_filters.tsx +++ b/src/components/search_bar/search_filters.tsx @@ -1,14 +1,14 @@ import React, { Component, Fragment, ReactElement } from 'react'; -import { createFilter, FilterConfig } from './filters'; +import { createFilter, SearchFilterConfig } from './filters'; import { Query } from './query'; import { EuiFilterGroup } from '../filter_group'; -export type SearchFiltersFiltersType = FilterConfig[]; +export { SearchFilterConfig } from './filters'; interface EuiSearchFiltersProps { query: Query; onChange: (query: Query) => void; - filters: SearchFiltersFiltersType; + filters: SearchFilterConfig[]; } type DefaultProps = Pick; From 2ccb530e4612216a86f2d102ad37d27c98dbe0e2 Mon Sep 17 00:00:00 2001 From: Rory Hunter Date: Wed, 25 Mar 2020 20:19:06 +0000 Subject: [PATCH 2/2] Address review feedback --- CHANGELOG.md | 2 +- .../__snapshots__/search_filters.test.tsx.snap | 1 - .../filters/field_value_selection_filter.tsx | 12 ++++-------- 3 files changed, 5 insertions(+), 10 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 937faee5d18..7519ff0c671 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,7 +9,7 @@ - Improved `EuiButtonEmpty` focus state when the `color` type is `text` ([#3135](https://github.com/elastic/eui/pull/3135)) - Added `EuiLoadingElastic` component ([#3017](https://github.com/elastic/eui/pull/3017)) - Upgraded `react-beautiful-dnd` to v13 ([#3064](https://github.com/elastic/eui/pull/3064)) -- Fixes to `EuiSearchBar` etc types ([#3147](https://github.com/elastic/eui/pull/3147)) +- Fixed `EuiSearchBar` related types ([#3147](https://github.com/elastic/eui/pull/3147)) **Bug Fixes** diff --git a/src/components/search_bar/__snapshots__/search_filters.test.tsx.snap b/src/components/search_bar/__snapshots__/search_filters.test.tsx.snap index 42ec467475b..f2cfda074e7 100644 --- a/src/components/search_bar/__snapshots__/search_filters.test.tsx.snap +++ b/src/components/search_bar/__snapshots__/search_filters.test.tsx.snap @@ -35,7 +35,6 @@ exports[`EuiSearchFilters render - with filters 1`] = ` } /> boolean; + autoClose?: boolean; } export interface FieldValueSelectionFilterProps { @@ -46,7 +47,6 @@ export interface FieldValueSelectionFilterProps { config: FieldValueSelectionFilterConfigType; query: Query; onChange: (query: Query) => void; - autoClose?: boolean; } const defaults = { @@ -69,16 +69,10 @@ interface State { cachedOptions?: FieldValueOptionType[] | null; } -type DefaultProps = Pick; - export class FieldValueSelectionFilter extends Component< FieldValueSelectionFilterProps, State > { - static defaultProps: DefaultProps = { - autoClose: true, - }; - private readonly selectItems: EuiFilterSelectItem[]; private searchInput: HTMLInputElement | null = null; @@ -248,7 +242,9 @@ export class FieldValueSelectionFilter extends Component< checked: 'on' | 'off' | undefined ) { const multiSelect = this.resolveMultiSelect(); - const { autoClose } = this.props; + const { + config: { autoClose = true }, + } = this.props; // we're closing popover only if the user can only select one item... if the // user can select more, we'll leave it open so she can continue selecting