diff --git a/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx b/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx index f9bef6126..3caeeb1c3 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, Button, Space} from 'antd'; +import {AutoComplete, Button, Input, Space} from 'antd'; import { PowerSearchConfig, FieldConfig, @@ -65,18 +65,63 @@ export const PowerSearch: React.FC = ({config}) => { return groupedOptions; }, [config.fields]); + const lastSearchTermHasSearchValue = + searchExpression.length > 0 + ? searchExpression[searchExpression.length - 1].searchValue !== undefined + : false; + return (
- {searchExpression.map((searchTerm, i) => ( - - - - - - ))} + {searchExpression.map((searchTerm, i) => { + const isLastTerm = i === searchExpression.length - 1; + + return ( + + + + {lastSearchTermHasSearchValue || !isLastTerm ? ( + + ) : ( + // TODO: Fix width + { + const newValue = event.target.value; + + if (!newValue) { + setSearchExpression((prevSearchExpression) => { + return prevSearchExpression.slice(0, -1); + }); + return; + } + + setSearchExpression((prevSearchExpression) => { + return [ + ...prevSearchExpression.slice(0, -1), + { + ...prevSearchExpression[ + prevSearchExpression.length - 1 + ], + searchValue: newValue, + }, + ]; + }); + }} + onKeyUp={(event) => { + if (event.key === 'Enter') { + event.currentTarget.blur(); + } + }} + /> + )} + + ); + })} - style={{flex: '1'}} options={options} bordered={false}