diff --git a/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx b/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx index c4cb88982..8cdcc5a1e 100644 --- a/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx +++ b/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx @@ -8,7 +8,7 @@ */ import * as React from 'react'; -import {AutoComplete, Input} from 'antd'; +import {AutoComplete, Space, Tag} from 'antd'; import {PowerSearchConfig} from './PowerSearchTypes'; export {PowerSearchConfig}; @@ -21,25 +21,29 @@ type AutocompleteOption = {label: string; value: string}; type AutocompleteOptionGroup = { label: string; options: AutocompleteOption[]; + value: string; }; const OPTION_KEY_DELIMITER = '::'; export const PowerSearch: React.FC = ({config}) => { + const [searchExpression, setSearchExpression] = React.useState< + AutocompleteOption[] + >([]); + 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: [], + value: field.key, }; for (const operator of Object.values(field.operators)) { const option: AutocompleteOption = { - label: operator.label, + label: `${field.label} ${operator.label}`, value: `${field.key}${OPTION_KEY_DELIMITER}${operator.key}`, }; group.options.push(option); @@ -50,9 +54,27 @@ export const PowerSearch: React.FC = ({config}) => { return groupedOptions; }, [config.fields]); + return ( - - - +
+ + {searchExpression.map((searchTerm) => ( + {searchTerm.label} + ))} + + { + console.log('selectedOption', selectedOption); + setSearchExpression((prevSearchExpression) => [ + ...prevSearchExpression, + selectedOption, + ]); + }} + value={null} + /> +
); };