Provide tools to search bar as nodes (#458)

* Add support for providing tools to EuiInMemoryTable and EuiSearchBar as nodes.

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

@@ -85,15 +85,18 @@ export class Table extends Component {
     }, random.number({ min: 0, max: 3000 }));
   }
 
-  renderDeleteButton() {
+  renderToolsLeft() {
     const selection = this.state.selection;
+
     if (selection.length === 0) {
       return;
     }
+
     const onClick = () => {
       store.deleteUsers(...selection.map(user => user.id));
       this.setState({ selection: [] });
     };
+
     return (
       <EuiButton
         color="danger"
@@ -105,8 +108,27 @@ export class Table extends Component {
     );
   }
 
+  renderToolsRight() {
+    return [(
+      <EuiButton
+        key="loadUsers"
+        onClick={this.loadUsers.bind(this)}
+        isDisabled={this.state.loading}
+      >
+        Load Users
+      </EuiButton>
+    ), (
+      <EuiButton
+        key="loadUsersError"
+        onClick={this.loadUsersWithError.bind(this)}
+        isDisabled={this.state.loading}
+      >
+        Load Users (Error)
+      </EuiButton>
+    )];
+  }
+
   render() {
-    const deleteButton = this.renderDeleteButton();
     const columns = [{
       field: 'firstName',
       name: 'First Name',
@@ -145,6 +167,33 @@ export class Table extends Component {
       sortable: true
     }];
 
+    const search = {
+      toolsLeft: this.renderToolsLeft(),
+      toolsRight: this.renderToolsRight(),
+      box: {
+        incremental: true,
+      },
+      filters: [
+        {
+          type: 'is',
+          field: 'online',
+          name: 'Online',
+          negatedName: 'Offline'
+        },
+        {
+          type: 'field_value_selection',
+          field: 'nationality',
+          name: 'Nationality',
+          multiSelect: false,
+          options: store.countries.map(country => ({
+            value: country.code,
+            name: country.name,
+            view: `${country.flag} ${country.name}`
+          }))
+        }
+      ]
+    };
+
     const pagination = {
       initialPageSize: 5,
       pageSizeOptions: [3, 5, 8]
@@ -159,28 +208,13 @@ export class Table extends Component {
 
     return (
       <div>
-        <EuiFlexGroup alignItems="center">
-          { deleteButton ? <EuiFlexItem grow={false}>{deleteButton}</EuiFlexItem> : undefined }
-          <EuiFlexItem grow={false}>
-            <EuiButton onClick={this.loadUsers.bind(this)} isDisabled={this.state.loading}>
-              Load Users
-            </EuiButton>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiButton onClick={this.loadUsersWithError.bind(this)} isDisabled={this.state.loading}>
-              Load Users (Error)
-            </EuiButton>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-
-        <EuiSpacer size="l"/>
-
         <EuiInMemoryTable
           items={this.state.users}
           error={this.state.error}
           loading={this.state.loading}
           message={this.state.message}
           columns={columns}
+          search={search}
           pagination={pagination}
           sorting={true}
           selection={selection}

src/components/search_bar/__snapshots__/search_bar.test.js.snap

@@ -153,3 +153,43 @@ exports[`SearchBar render - provided query, filters 1`] = `
   </EuiFlexItem>
 </EuiFlexGroup>
 `;
+
+exports[`SearchBar render - tools 1`] = `
+<EuiFlexGroup
+  alignItems="center"
+  component="div"
+  gutterSize="m"
+  justifyContent="flexStart"
+  responsive={true}
+  wrap={false}
+>
+  <EuiFlexItem
+    component="div"
+    grow={false}
+  >
+    <div>
+      Left
+    </div>
+  </EuiFlexItem>
+  <EuiFlexItem
+    component="div"
+    grow={true}
+  >
+    <EuiSearchBox
+      incremental={false}
+      isInvalid={false}
+      onSearch={[Function]}
+      placeholder="Search..."
+      query=""
+    />
+  </EuiFlexItem>
+  <EuiFlexItem
+    component="div"
+    grow={false}
+  >
+    <div>
+      Right
+    </div>
+  </EuiFlexItem>
+</EuiFlexGroup>
+`;

src/components/search_bar/search_bar.js

@@ -108,16 +108,39 @@ export class EuiSearchBar extends Component {
     this.props.onChange(query);
   };
 
+  renderTools(tools) {
+    if (!tools) {
+      return undefined;
+    }
+
+    if (Array.isArray(tools)) {
+      return tools.map(tool => (
+        <EuiFlexItem grow={false} key={tool.key}>
+          {tool}
+        </EuiFlexItem>
+      ));
+    }
+
+    return <EuiFlexItem grow={false}>{tools}</EuiFlexItem>;
+  }
+
   render() {
     const { query, queryText, error } = this.state;
-    const { box, filters } = this.props;
+    const { box, filters, toolsLeft, toolsRight } = this.props;
+
+    const toolsLeftEl = this.renderTools(toolsLeft);
+
     const filtersBar = !filters ? undefined : (
       <EuiFlexItem grow={false}>
-        <EuiSearchFilters filters={filters} query={query} onChange={this.onFiltersChange}/>
+        <EuiSearchFilters filters={filters} query={query} onChange={this.onFiltersChange} />
       </EuiFlexItem>
     );
+
+    const toolsRightEl = this.renderTools(toolsRight);
+
     return (
       <EuiFlexGroup gutterSize="m" alignItems="center">
+        {toolsLeftEl}
         <EuiFlexItem grow={true}>
           <EuiSearchBox
             {...box}
@@ -128,6 +151,7 @@ export class EuiSearchBar extends Component {
           />
         </EuiFlexItem>
         {filtersBar}
+        {toolsRightEl}
       </EuiFlexGroup>
     );
   }

src/components/search_bar/search_bar.test.js

@@ -4,9 +4,7 @@ import { shallow } from 'enzyme';
 import { EuiSearchBar } from './search_bar';
 
 describe('SearchBar', () => {
-
   test('render - no config, no query', () => {
-
     const props = {
       ...requiredProps,
       onChange: () => {}
@@ -17,11 +15,24 @@ describe('SearchBar', () => {
     );
 
     expect(component).toMatchSnapshot();
+  });
+
+  test('render - tools', () => {
+    const props = {
+      ...requiredProps,
+      onChange: () => {},
+      toolsLeft: <div>Left</div>,
+      toolsRight: <div>Right</div>,
+    };
 
+    const component = shallow(
+      <EuiSearchBar {...props} />
+    );
+
+    expect(component).toMatchSnapshot();
   });
 
   test('render - no query, custom box placeholder and incremental', () => {
-
     const props = {
       ...requiredProps,
       config: {
@@ -41,7 +52,6 @@ describe('SearchBar', () => {
   });
 
   test('render - provided query, filters', () => {
-
     const props = {
       ...requiredProps,
       filters: [
@@ -67,5 +77,4 @@ describe('SearchBar', () => {
 
     expect(component).toMatchSnapshot();
   });
-
 });