diff --git a/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx b/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx index 8cdcc5a1e..b9ffdb9da 100644 --- a/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx +++ b/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx @@ -8,8 +8,12 @@ */ import * as React from 'react'; -import {AutoComplete, Space, Tag} from 'antd'; -import {PowerSearchConfig} from './PowerSearchTypes'; +import {AutoComplete, Button, Space} from 'antd'; +import { + PowerSearchConfig, + FieldConfig, + OperatorConfig, +} from './PowerSearchTypes'; export {PowerSearchConfig}; @@ -26,9 +30,15 @@ type AutocompleteOptionGroup = { const OPTION_KEY_DELIMITER = '::'; +type SearchExpressionTerm = { + field: FieldConfig; + operator: OperatorConfig; + searchValue?: string; +}; + export const PowerSearch: React.FC = ({config}) => { const [searchExpression, setSearchExpression] = React.useState< - AutocompleteOption[] + SearchExpressionTerm[] >([]); const options: AutocompleteOptionGroup[] = React.useMemo(() => { @@ -58,8 +68,12 @@ export const PowerSearch: React.FC = ({config}) => { return (
- {searchExpression.map((searchTerm) => ( - {searchTerm.label} + {searchExpression.map((searchTerm, i) => ( + + + + + ))} = ({config}) => { options={options} bordered={false} onSelect={(_: string, selectedOption: AutocompleteOption) => { - console.log('selectedOption', selectedOption); + const [fieldKey, operatorKey] = + selectedOption.value.split(OPTION_KEY_DELIMITER); + const fieldConfig = config.fields[fieldKey]; + const operatorConfig = fieldConfig.operators[operatorKey]; + setSearchExpression((prevSearchExpression) => [ ...prevSearchExpression, - selectedOption, + { + field: fieldConfig, + operator: operatorConfig, + }, ]); }} value={null}