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

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: {

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
+    <AutoComplete options={options}>
-      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>
   );