Convert EuiSearchBar to TypeScript

CHANGELOG.md

@@ -37,6 +37,7 @@
 - Added `notification` and `notificationColor` props to `EuiHeaderSectionItemButton` ([#2914](https://github.com/elastic/eui/pull/2914))
 - Added `folderCheck`, `folderExclamation`, `push`, `quote`, `reporter` and `users` icons ([#2935](https://github.com/elastic/eui/pull/2935))
 - Updated `folderClosed` and `folderOpen` to match new additions and sit better on the pixel grid ([#2935](https://github.com/elastic/eui/pull/2935))
+- Converted `EuiSearchBar` to Typescript ([#2909](https://github.com/elastic/eui/pull/2909))
 
 **Bug fixes**
 

src-docs/src/views/search_bar/controlled_search_bar.js

@@ -154,6 +154,9 @@ export class ControlledSearchBar extends Component {
     const schema = {
       strict: true,
       fields: {
+        type: {
+          type: 'string',
+        },
         active: {
           type: 'boolean',
         },

src-docs/src/views/search_bar/search_bar.js

@@ -136,6 +136,9 @@ export class SearchBar extends Component {
     const schema = {
       strict: true,
       fields: {
+        type: {
+          type: 'string',
+        },
         active: {
           type: 'boolean',
         },

src-docs/src/views/search_bar/search_bar_example.js

@@ -37,9 +37,9 @@ export const SearchBarExample = {
       text: (
         <div>
           <p>
-            A <EuiCode>EuiSearchBar</EuiCode> is a toolbar that enables the user
-            to create/define a search query. This can be done either by entering
-            the query syntax in a search box or by clicking any of the
+            An <EuiCode>EuiSearchBar</EuiCode> is a toolbar that enables the
+            user to create/define a search query. This can be done either by
+            entering the query syntax in a search box or by clicking any of the
             configured filters. The query language is not meant to be full blown
             search language for arbitrary data (e.g. as required in the Discover
             App in Kibana), yet it does provide some useful features:
@@ -231,8 +231,8 @@ export const SearchBarExample = {
       text: (
         <div>
           <p>
-            A <EuiCode>EuiSearchBar</EuiCode> can have its query controlled by a
-            parent component by passing the <EuiCode>query</EuiCode> prop.
+            An <EuiCode>EuiSearchBar</EuiCode> can have its query controlled by
+            a parent component by passing the <EuiCode>query</EuiCode> prop.
             Changes to the query will be passed back up through the{' '}
             <EuiCode>onChange</EuiCode> callback where the new query must be
             stored in state and passed back into the search bar.
@@ -256,7 +256,7 @@ export const SearchBarExample = {
       text: (
         <div>
           <p>
-            A <EuiCode>EuiSearchBar</EuiCode> can have custom filter dropdowns
+            An <EuiCode>EuiSearchBar</EuiCode> can have custom filter dropdowns
             that control how a user can search.
           </p>
         </div>

src-docs/src/views/search_bar/search_bar_filters.js

@@ -122,6 +122,9 @@ export class SearchBarFilters extends Component {
     const schema = {
       strict: true,
       fields: {
+        type: {
+          type: 'string',
+        },
         active: {
           type: 'boolean',
         },

src-docs/src/views/tables/in_memory/in_memory_selection.js

@@ -97,7 +97,7 @@ export class Table extends Component {
   renderToolsLeft() {
     const selection = this.state.control_columns;
 
-    if (selection.length === 0) {
+    if (!selection || selection.length === 0) {
       return;
     }
 

src/components/basic_table/in_memory_table.test.tsx

@@ -2,13 +2,10 @@ import React from 'react';
 import { mount, shallow } from 'enzyme';
 import { requiredProps } from '../../test';
 
-import {
-  EuiInMemoryTable,
-  EuiInMemoryTableProps,
-  FilterConfig,
-} from './in_memory_table';
+import { EuiInMemoryTable, EuiInMemoryTableProps } from './in_memory_table';
 import { ENTER } from '../../services/key_codes';
 import { SortDirection } from '../../services';
+import { FilterConfig } from '../search_bar/filters';
 
 interface BasicItem {
   id: number | string;
@@ -652,6 +649,7 @@ describe('EuiInMemoryTable', () => {
       pagination: true,
       sorting: true,
       search: {
+        onChange: () => {},
         defaultQuery: 'name:name1',
         box: {
           incremental: true,
@@ -702,7 +700,9 @@ describe('EuiInMemoryTable', () => {
             name: 'Name',
           },
         ],
-        search: {},
+        search: {
+          onChange: () => true,
+        },
         className: 'testTable',
       };
 
@@ -768,7 +768,10 @@ describe('EuiInMemoryTable', () => {
             name: 'Name',
           },
         ],
-        search: { defaultQuery: 'No' },
+        search: {
+          onChange: () => {},
+          defaultQuery: 'No',
+        },
         className: 'testTable',
         message: <span className="customMessage">No items found!</span>,
       };
@@ -810,6 +813,7 @@ describe('EuiInMemoryTable', () => {
           },
         ],
         search: {
+          onChange: () => {},
           defaultQuery: 'No',
         },
         className: 'testTable',

src/components/basic_table/in_memory_table.tsx

@@ -18,134 +18,16 @@ import {
 } from './pagination_bar';
 import { isString } from '../../services/predicate';
 import { Comparators, Direction } from '../../services/sort';
-// @ts-ignore
-import { EuiSearchBar } from '../search_bar';
+import { EuiSearchBar, Query } from '../search_bar';
 import { EuiSpacer } from '../spacer';
 import { CommonProps } from '../common';
-
-// Search bar types. Should be moved when it is typescriptified.
-interface SearchBoxConfig {
-  placeholder?: string;
-  incremental?: boolean;
-  schema?: SchemaType;
-}
-
-interface SchemaType {
-  strict?: boolean;
-  fields?: object;
-  flags?: string[];
-}
-
-interface IsFilterConfigType {
-  type: 'is';
-  field: string;
-  name: string;
-  negatedName?: string;
-  available?: () => boolean;
-}
-
-interface FieldValueOptionType {
-  field?: string;
-  value: any;
-  name?: string;
-  view?: ReactNode;
-}
-
-interface FieldValueSelectionFilterConfigType {
-  type: 'field_value_selection';
-  field?: string;
-  autoClose?: boolean;
-  name: string;
-  options:
-    | FieldValueOptionType[]
-    | ((query: Query) => Promise<FieldValueOptionType[]>);
-  filterWith?:
-    | ((name: string, query: string, options: object) => boolean)
-    | 'prefix'
-    | 'includes';
-  cache?: number;
-  multiSelect?: boolean | 'and' | 'or';
-  loadingMessage?: string;
-  noOptionsMessage?: string;
-  searchThreshold?: number;
-  available?: () => boolean;
-}
-
-interface FieldValueToggleFilterConfigType {
-  type: 'field_value_toggle';
-  field: string;
-  value: string | number | boolean;
-  name: string;
-  negatedName?: string;
-  available?: () => boolean;
-  operator?: 'eq' | 'exact' | 'gt' | 'gte' | 'lt' | 'lte';
-}
-
-interface FieldValueToggleGroupFilterItem {
-  value: string | number | boolean;
-  name: string;
-  negatedName?: string;
-  operator?: 'eq' | 'exact' | 'gt' | 'gte' | 'lt' | 'lte';
-}
-
-interface FieldValueToggleGroupFilterConfigType {
-  type: 'field_value_toggle_group';
-  field: string;
-  items: FieldValueToggleGroupFilterItem[];
-  available?: () => boolean;
-}
-
-export type FilterConfig =
-  | IsFilterConfigType
-  | FieldValueSelectionFilterConfigType
-  | FieldValueToggleFilterConfigType
-  | FieldValueToggleGroupFilterConfigType;
-
-type SearchBox = Omit<SearchBoxConfig, 'schema'> & {
-  schema?: boolean | SchemaType;
-};
-
-/* Should point at search_bar/query type when it is converted to typescript */
-type Query = any;
+import { EuiSearchBarProps } from '../search_bar/search_bar';
+import { SchemaType } from '../search_bar/search_box';
 
 interface onChangeArgument {
-  query: Query;
+  query: Query | null;
   queryText: string;
-  error: string;
-}
-
-interface EuiSearchBarProps {
-  /**
-   The initial query the bar will hold when first mounted
-   */
-  defaultQuery?: Query;
-  /**
-   If you wish to use the search bar as a controlled component, continuously pass the query
-   via this prop
-   */
-  query?: Query;
-  /**
-   Configures the search box. Set `placeholder` to change the placeholder text in the box and
-   `incremental` to support incremental (as you type) search.
-   */
-  box?: SearchBox;
-  /**
-   An array of search filters.
-   */
-  filters?: FilterConfig[];
-  /**
-   * Tools which go to the left of the search bar.
-   */
-  toolsLeft?: React.ReactNode;
-  /**
-   * Tools which go to the right of the search bar.
-   */
-  toolsRight?: React.ReactNode;
-  /**
-   * Date formatter to use when parsing date values
-   */
-  dateFormat?: object;
-  onChange?: (values: onChangeArgument) => boolean | void;
+  error: Error | null;
 }
 
 function isEuiSearchBarProps<T>(
@@ -208,7 +90,7 @@ interface State<T> {
     sortName: ReactNode;
     sortDirection?: Direction;
   };
-  query: Query;
+  query: Query | null;
   pageIndex: number;
   pageSize?: number;
   pageSizeOptions?: number[];
@@ -219,11 +101,13 @@ interface State<T> {
 }
 
 const getInitialQuery = (search: Search | undefined) => {
+  let query: Query | string;
   if (!search) {
-    return;
+    query = '';
+  } else {
+    query = (search as EuiSearchBarProps).defaultQuery || '';
   }
 
-  const query = (search as EuiSearchBarProps).defaultQuery || '';
   return isString(query) ? EuiSearchBar.Query.parse(query) : query;
 };
 
@@ -382,7 +266,7 @@ export class EuiInMemoryTable<T> extends Component<
       pageSizeOptions,
       sortName,
       sortDirection,
-      allowNeutralSort: allowNeutralSort === false ? false : true,
+      allowNeutralSort: allowNeutralSort !== false,
       hidePerPageOptions,
     };
   }
@@ -444,14 +328,21 @@ export class EuiInMemoryTable<T> extends Component<
   };
 
   onQueryChange = ({ query, queryText, error }: onChangeArgument) => {
-    if (isEuiSearchBarProps(this.props.search)) {
-      const search = this.props.search;
+    const { search } = this.props;
+    if (isEuiSearchBarProps(search)) {
       if (search.onChange) {
-        const shouldQueryInMemory = search.onChange({
-          query,
-          queryText,
-          error,
-        });
+        const shouldQueryInMemory =
+          error == null
+            ? search.onChange({
+                query: query!,
+                queryText,
+                error: null,
+              })
+            : search.onChange({
+                query: null,
+                queryText,
+                error,
+              });
         if (!shouldQueryInMemory) {
           return;
         }
@@ -468,22 +359,25 @@ export class EuiInMemoryTable<T> extends Component<
   renderSearchBar() {
     const { search } = this.props;
     if (search) {
-      let searchBarProps: EuiSearchBarProps = {};
+      let searchBarProps: Omit<EuiSearchBarProps, 'onChange'> = {};
 
       if (isEuiSearchBarProps(search)) {
         const { onChange, ..._searchBarProps } = search;
         searchBarProps = _searchBarProps;
 
         if (searchBarProps.box && searchBarProps.box.schema === true) {
-          searchBarProps.box.schema = this.resolveSearchSchema();
+          searchBarProps.box = {
+            ...searchBarProps.box,
+            schema: this.resolveSearchSchema(),
+          };
         }
       }
 
       return <EuiSearchBar onChange={this.onQueryChange} {...searchBarProps} />;
     }
   }
 
-  resolveSearchSchema() {
+  resolveSearchSchema(): SchemaType {
     const { columns } = this.props;
     return columns.reduce<{
       strict: boolean;
@@ -501,7 +395,7 @@ export class EuiInMemoryTable<T> extends Component<
     );
   }
 
-  getItemSorter() {
+  getItemSorter(): (a: T, b: T) => number {
     const { sortName, sortDirection } = this.state;
 
     const { columns } = this.props;
@@ -512,7 +406,7 @@ export class EuiInMemoryTable<T> extends Component<
 
     if (sortColumn == null) {
       // can't return a non-function so return a function that says everything is the same
-      return () => () => 0;
+      return () => 0;
     }
 
     const sortable = sortColumn.sortable;