Add basic Autocomplete

Summary: Project doc: https://docs.google.com/document/d/1miofxds9DJgWScj0zFyBbdpRH5Rj0T9FqiCapof5-vU

Reviewed By: lblasa

Differential Revision: D48517919

fbshipit-source-id: ec6e723a595862b61722db9c5afd96138264dfdc

desktop/flipper-plugin/src/__tests__/api.node.tsx

@@ -46,6 +46,7 @@ test('Correct top level API exposed', () => {
       "MasterDetail",
       "NUX",
       "Panel",
+      "PowerSearch",
       "Spinner",
       "Tab",
       "Tabs",
@@ -129,6 +130,7 @@ test('Correct top level API exposed', () => {
       "NormalizedMenuEntry",
       "Notification",
       "PluginClient",
+      "PowerSearchConfig",
       "RemoteServerContext",
       "ServerAddOn",
       "ServerAddOnPluginConnection",

desktop/flipper-plugin/src/index.tsx

@@ -60,6 +60,7 @@ export {DataTable, DataTableColumn} from './ui/data-table/DataTable';
 export {DataTableManager} from './ui/data-table/DataTableManager';
 export {DataList} from './ui/DataList';
 export {Spinner} from './ui/Spinner';
+export * from './ui/PowerSearch';
 
 export {DataSourceVirtualizer} from './data-source/DataSourceRendererVirtual';
 

desktop/flipper-plugin/src/ui/PowerSearch/index.tsx

@@ -8,7 +8,47 @@
  */
 
 import * as React from 'react';
+import {AutoComplete, Input} from 'antd';
+import {PowerSearchConfig} from './PowerSearchTypes';
 
-export const PowerSearch: React.FC = () => {
+export {PowerSearchConfig};
-  return <></>;
+
+type PowerSearchProps = {
+  config: PowerSearchConfig;
+};
+
+export const PowerSearch: React.FC<PowerSearchProps> = () => {
+  return (
+    <AutoComplete
+      options={[
+        {
+          label: 'Group 1',
+          options: [
+            {
+              value: 'g1_val1',
+              label: 'Value1',
+            },
+            {
+              value: 'g1_val2',
+              label: 'Value2',
+            },
+          ],
+        },
+        {
+          label: 'Group 2',
+          options: [
+            {
+              value: 'g2_val1',
+              label: 'Value1',
+            },
+            {
+              value: 'g2_val2',
+              label: 'Value2',
+            },
+          ],
+        },
+      ]}>
+      <Input.Search size="large" />
+    </AutoComplete>
+  );
 };

docs/extending/flipper-plugin.mdx

@@ -950,6 +950,8 @@ function HighlightedText(props: {text: string}) {
 }
 ```
 
+### PowerSearch
+
 ### DataTable
 
 ### DataFormatter