jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Allow multiple search terms

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

Reviewed By: lblasa

Differential Revision: D48519758

fbshipit-source-id: d691a26ebed9f7797516386b8fb9d4457b870a3e
This commit is contained in:
Andrey Goncharov
2023-08-30 07:26:35 -07:00
committed by Facebook GitHub Bot
parent 9cdf944716
commit c746a11dc6
1 changed files with 29 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
desktop/flipper-plugin/src/ui/PowerSearch/index.tsx
View File

@@ -8,7 +8,7 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import {AutoComplete, Input} from 'antd'; import {AutoComplete, Space, Tag} from 'antd';
import {PowerSearchConfig} from './PowerSearchTypes'; import {PowerSearchConfig} from './PowerSearchTypes';
export {PowerSearchConfig}; export {PowerSearchConfig};
@@ -21,25 +21,29 @@ type AutocompleteOption = {label: string; value: string};
type AutocompleteOptionGroup = { type AutocompleteOptionGroup = {
label: string; label: string;
options: AutocompleteOption[]; options: AutocompleteOption[];
value: string;
}; };
const OPTION_KEY_DELIMITER = '::'; const OPTION_KEY_DELIMITER = '::';
export const PowerSearch: React.FC<PowerSearchProps> = ({config}) => { export const PowerSearch: React.FC<PowerSearchProps> = ({config}) => {
const [searchExpression, setSearchExpression] = React.useState<
AutocompleteOption[]
>([]);
const options: AutocompleteOptionGroup[] = React.useMemo(() => { const options: AutocompleteOptionGroup[] = React.useMemo(() => {
const groupedOptions: AutocompleteOptionGroup[] = []; const groupedOptions: AutocompleteOptionGroup[] = [];
console.log('config.fields', config.fields);
for (const field of Object.values(config.fields)) { for (const field of Object.values(config.fields)) {
const group: AutocompleteOptionGroup = { const group: AutocompleteOptionGroup = {
label: field.label, label: field.label,
options: [], options: [],
value: field.key,
}; };
for (const operator of Object.values(field.operators)) { for (const operator of Object.values(field.operators)) {
const option: AutocompleteOption = { const option: AutocompleteOption = {
label: operator.label, label: `${field.label} ${operator.label}`,
value: `${field.key}${OPTION_KEY_DELIMITER}${operator.key}`, value: `${field.key}${OPTION_KEY_DELIMITER}${operator.key}`,
}; };
group.options.push(option); group.options.push(option);
@@ -50,9 +54,27 @@ export const PowerSearch: React.FC<PowerSearchProps> = ({config}) => {
return groupedOptions; return groupedOptions;
}, [config.fields]); }, [config.fields]);
return ( return (
<AutoComplete options={options}> <div style={{display: 'flex', flexDirection: 'row'}}>
<Input.Search size="large" /> <Space size={[0, 8]}>
</AutoComplete> {searchExpression.map((searchTerm) => (
<Tag key={searchTerm.value}>{searchTerm.label}</Tag>
))}
</Space>
<AutoComplete
style={{flex: '1'}}
options={options}
bordered={false}
onSelect={(_: string, selectedOption: AutocompleteOption) => {
console.log('selectedOption', selectedOption);
setSearchExpression((prevSearchExpression) => [
...prevSearchExpression,
selectedOption,
]);
}}
value={null}
/>
</div>
); );
}; };