From 9cdf9447166eb48539e61cc0cefe328208867e5a Mon Sep 17 00:00:00 2001
From: Andrey Goncharov <aigoncharov@meta.com>
Date: Wed, 30 Aug 2023 07:26:35 -0700
Subject: [PATCH] Compute Autocomplete options from config

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

Reviewed By: lblasa

Differential Revision: D48518324

fbshipit-source-id: 5abee77cca10f03b2d9fa5b62802a5000152248e
---
 .../PowerSearch/PowerSearchExampleConfig.tsx  |  2 +-
 .../src/ui/PowerSearch/index.tsx              | 64 ++++++++++---------
 2 files changed, 35 insertions(+), 31 deletions(-)

diff --git a/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchExampleConfig.tsx b/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchExampleConfig.tsx
index 1befe010b..b2a58bf80 100644
--- a/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchExampleConfig.tsx
+++ b/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchExampleConfig.tsx
@@ -155,7 +155,7 @@ const operators = {
   },
 } satisfies {[key: string]: OperatorConfig};
 
-export const config: PowerSearchConfig = {
+export const powerSearchExampleConfig: PowerSearchConfig = {
   name: 'FlipperPowerSearchExampleConfig',
   fields: {
     id: {
diff --git a/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx b/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx
index 94ea5df8e..c4cb88982 100644
--- a/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx
+++ b/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx
@@ -17,37 +17,41 @@ type PowerSearchProps = {
   config: PowerSearchConfig;
 };
 
-export const PowerSearch: React.FC<PowerSearchProps> = () => {
+type AutocompleteOption = {label: string; value: string};
+type AutocompleteOptionGroup = {
+  label: string;
+  options: AutocompleteOption[];
+};
+
+const OPTION_KEY_DELIMITER = '::';
+
+export const PowerSearch: React.FC<PowerSearchProps> = ({config}) => {
+  const options: AutocompleteOptionGroup[] = React.useMemo(() => {
+    const groupedOptions: AutocompleteOptionGroup[] = [];
+
+    console.log('config.fields', config.fields);
+
+    for (const field of Object.values(config.fields)) {
+      const group: AutocompleteOptionGroup = {
+        label: field.label,
+        options: [],
+      };
+
+      for (const operator of Object.values(field.operators)) {
+        const option: AutocompleteOption = {
+          label: operator.label,
+          value: `${field.key}${OPTION_KEY_DELIMITER}${operator.key}`,
+        };
+        group.options.push(option);
+      }
+
+      groupedOptions.push(group);
+    }
+
+    return groupedOptions;
+  }, [config.fields]);
   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',
-            },
-          ],
-        },
-      ]}>
+    <AutoComplete options={options}>
       <Input.Search size="large" />
     </AutoComplete>
   );