Add support for search and custom actions

Summary: Introduced search bar and support for custom buttons therein.

Reviewed By: nikoant

Differential Revision: D26338666

fbshipit-source-id: e53cd3c4381e11f5f90c05c92e39a6c8ac2eca65

desktop/flipper-plugin/src/ui/datatable/__tests__/DataTable.node.tsx

@@ -12,6 +12,7 @@ import {DataTable, DataTableColumn} from '../DataTable';
 import {render, act} from '@testing-library/react';
 import {createDataSource} from '../../../state/datasource/DataSource';
 import {TableManager} from '../useDataTableManager';
+import {Button} from 'antd';
 
 type Todo = {
   title: string;
@@ -222,3 +223,57 @@ test('sorting', async () => {
     ]);
   }
 });
+
+test('search', async () => {
+  const ds = createTestDataSource();
+  ds.clear();
+  ds.append({
+    title: 'item abc',
+    done: false,
+  });
+  ds.append({
+    title: 'item x',
+    done: false,
+  });
+  ds.append({
+    title: 'item b',
+    done: false,
+  });
+  const ref = createRef<TableManager>();
+  const rendering = render(
+    <DataTable
+      dataSource={ds}
+      columns={columns}
+      tableManagerRef={ref}
+      extraActions={<Button>Test Button</Button>}
+      _testHeight={400}
+    />,
+  );
+  {
+    // button is visible
+    rendering.getByText('Test Button');
+    const elem = await rendering.findAllByText(/item/);
+    expect(elem.length).toBe(3);
+    expect(elem.map((e) => e.textContent)).toEqual([
+      'item abc',
+      'item x',
+      'item b',
+    ]);
+  }
+  {
+    // filter
+    act(() => {
+      ref.current?.setSearchValue('b');
+    });
+    const elem = await rendering.findAllByText(/item/);
+    expect(elem.map((e) => e.textContent)).toEqual(['item abc', 'item b']);
+  }
+  {
+    // reset
+    act(() => {
+      ref.current?.reset();
+    });
+    const elem = await rendering.findAllByText(/item/);
+    expect(elem.length).toBe(3);
+  }
+});