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 = () => { +type AutocompleteOption = {label: string; value: string}; +type AutocompleteOptionGroup = { + label: string; + options: AutocompleteOption[]; +}; + +const OPTION_KEY_DELIMITER = '::'; + +export const PowerSearch: React.FC = ({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 ( - + );