From b780dc0598360ce9b8e17ac46e9e8626d853e174 Mon Sep 17 00:00:00 2001
From: Andrey Goncharov <aigoncharov@meta.com>
Date: Wed, 30 Aug 2023 07:26:35 -0700
Subject: [PATCH] Add basic Autocomplete

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

Reviewed By: lblasa

Differential Revision: D48517919

fbshipit-source-id: ec6e723a595862b61722db9c5afd96138264dfdc
---
 .../flipper-plugin/src/__tests__/api.node.tsx |  2 +
 desktop/flipper-plugin/src/index.tsx          |  1 +
 .../src/ui/PowerSearch/index.tsx              | 44 ++++++++++++++++++-
 docs/extending/flipper-plugin.mdx             |  2 +
 4 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/desktop/flipper-plugin/src/__tests__/api.node.tsx b/desktop/flipper-plugin/src/__tests__/api.node.tsx
index 9c348c87f..8d3623479 100644
--- a/desktop/flipper-plugin/src/__tests__/api.node.tsx
+++ b/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",
diff --git a/desktop/flipper-plugin/src/index.tsx b/desktop/flipper-plugin/src/index.tsx
index 7016dd0fd..8749e961d 100644
--- a/desktop/flipper-plugin/src/index.tsx
+++ b/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';
 
diff --git a/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx b/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx
index d703423d6..94ea5df8e 100644
--- a/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx
+++ b/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 = () => {
-  return <></>;
+export {PowerSearchConfig};
+
+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>
+  );
 };
diff --git a/docs/extending/flipper-plugin.mdx b/docs/extending/flipper-plugin.mdx
index 69e651a09..66f22899e 100644
--- a/docs/extending/flipper-plugin.mdx
+++ b/docs/extending/flipper-plugin.mdx
@@ -950,6 +950,8 @@ function HighlightedText(props: {text: string}) {
 }
 ```
 
+### PowerSearch
+
 ### DataTable
 
 ### DataFormatter