[EuiInMemoryTable] Added ability to insert component between the sear…

…chbar and the table (elastic#4103)

* Added childrenBetween prop

* Add test for children between search and table

* Updated snapshots

* Updated comment for prop

* Added cl

* Add docs example for children between

* Fixed a typo

* Fixed text

* Fixed issue when value is 0

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `childrenBetween` prop to `EuiInMemoryTable` to add content between search bar and table ([#4103](https://github.com/elastic/eui/pull/4103))
 - Added `max-width: 100%` to `EuiKeyPadMenu` to allow it to shrink when its container is smaller than its fixed width ([ #4092](https://github.com/elastic/eui/pull/4092))
 - Changed `EuiIcon` test mock to render as `span` instead of `div` ([#4099](https://github.com/elastic/eui/pull/4099))
 - Added `scripts/docker-puppeteer` as the new home for test-related Docker images ([#4062](https://github.com/elastic/eui/pull/4062))

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

@@ -9,6 +9,8 @@ import {
   EuiSwitch,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiText,
+  EuiCode,
 } from '../../../../../src/components';
 
 /*
@@ -38,6 +40,7 @@ const store = createDataStore();
 export const Table = () => {
   const [incremental, setIncremental] = useState(false);
   const [filters, setFilters] = useState(false);
+  const [contentBetween, setContentBetween] = useState(false);
 
   const columns = [
     {
@@ -132,6 +135,13 @@ export const Table = () => {
             onChange={() => setFilters(!filters)}
           />
         </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiSwitch
+            label="Content between"
+            checked={contentBetween}
+            onChange={() => setContentBetween(!contentBetween)}
+          />
+        </EuiFlexItem>
       </EuiFlexGroup>
       <EuiSpacer size="l" />
       <EuiInMemoryTable
@@ -140,6 +150,14 @@ export const Table = () => {
         search={search}
         pagination={true}
         sorting={true}
+        childrenBetween={
+          contentBetween && (
+            <EuiText>
+              You can inject custom content between the search bar and the table
+              using <EuiCode>childrenBetween</EuiCode>.
+            </EuiText>
+          )
+        }
       />
     </Fragment>
   );

src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap

@@ -2148,3 +2148,66 @@ exports[`EuiInMemoryTable with pagination, selection, sorting and configured sea
   />
 </div>
 `;
+
+exports[`EuiInMemoryTable with search and component between search and table 1`] = `
+<div>
+  <EuiSearchBar
+    onChange={[Function]}
+  />
+  <EuiSpacer
+    size="l"
+  />
+  <div>
+    Children Between
+  </div>
+  <EuiSpacer
+    size="l"
+  />
+  <EuiBasicTable
+    aria-label="aria-label"
+    className="testClass1 testClass2"
+    columns={
+      Array [
+        Object {
+          "description": "description",
+          "field": "name",
+          "name": "Name",
+          "sortable": true,
+        },
+        Object {
+          "actions": Array [
+            Object {
+              "description": "edit",
+              "name": "Edit",
+              "onClick": [Function],
+            },
+          ],
+          "name": "Actions",
+        },
+      ]
+    }
+    data-test-subj="test subject string"
+    itemId="id"
+    items={
+      Array [
+        Object {
+          "id": "1",
+          "name": "name1",
+        },
+        Object {
+          "id": "2",
+          "name": "name2",
+        },
+        Object {
+          "id": "3",
+          "name": "name3",
+        },
+      ]
+    }
+    noItemsMessage="No items found"
+    onChange={[Function]}
+    responsive={true}
+    tableLayout="fixed"
+  />
+</div>
+`;

src/components/basic_table/in_memory_table.test.tsx

@@ -667,6 +667,41 @@ describe('EuiInMemoryTable', () => {
     expect(component).toMatchSnapshot();
   });
 
+  test('with search and component between search and table', () => {
+    const props: EuiInMemoryTableProps<BasicItem> = {
+      ...requiredProps,
+      items: [
+        { id: '1', name: 'name1' },
+        { id: '2', name: 'name2' },
+        { id: '3', name: 'name3' },
+      ],
+      itemId: 'id',
+      columns: [
+        {
+          field: 'name',
+          name: 'Name',
+          description: 'description',
+          sortable: true,
+        },
+        {
+          name: 'Actions',
+          actions: [
+            {
+              name: 'Edit',
+              description: 'edit',
+              onClick: () => undefined,
+            },
+          ],
+        },
+      ],
+      search: true,
+      childrenBetween: <div>Children Between</div>,
+    };
+    const component = shallow(<EuiInMemoryTable {...props} />);
+
+    expect(component).toMatchSnapshot();
+  });
+
   test('with pagination, selection, sorting and configured search', () => {
     const props: EuiInMemoryTableProps<BasicItem> = {
       ...requiredProps,

src/components/basic_table/in_memory_table.tsx

@@ -92,6 +92,10 @@ type InMemoryTableProps<T> = Omit<
     isClauseMatcher?: (...args: any) => boolean;
     explain?: boolean;
   };
+  /**
+   * Insert content between the search bar and table components.
+   */
+  childrenBetween?: ReactNode;
 };
 
 type InMemoryTablePropsWithPagination<T> = Omit<
@@ -604,6 +608,7 @@ export class EuiInMemoryTable<T> extends Component<
       onTableChange,
       executeQueryOptions,
       allowNeutralSort,
+      childrenBetween,
       ...rest
     } = this.props;
 
@@ -678,6 +683,8 @@ export class EuiInMemoryTable<T> extends Component<
     return (
       <div>
         {searchBar}
+        {childrenBetween != null ? <EuiSpacer size="l" /> : null}
+        {childrenBetween}
         <EuiSpacer size="l" />
         {table}
       </div>