diff --git a/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx b/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx index 1d7d51a610c..cf6b50c1fb9 100644 --- a/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx +++ b/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx @@ -35,6 +35,12 @@ export {PowerSearchConfig, OperatorConfig, FieldConfig, SearchExpressionTerm}; type PowerSearchProps = { config: PowerSearchConfig; + // Overrides current state of the component with every update. + // It is the way to continuously force update the state of the power search externally. + // Takes prefernce over `initialSearchExpression`. + searchExpression?: SearchExpressionTerm[]; + // Component stays uncontrolled and maintains its own state. + // It is respected only on initialization and any future updates are ignored. initialSearchExpression?: SearchExpressionTerm[]; onSearchExpressionChange: (searchExpression: SearchExpressionTerm[]) => void; onConfirmUnknownOption?: ( @@ -46,13 +52,22 @@ const OPTION_KEY_DELIMITER = '::'; export const PowerSearch: React.FC = ({ config, + searchExpression: searchExpressionExternal, initialSearchExpression, onSearchExpressionChange, onConfirmUnknownOption, }) => { const [searchExpression, setSearchExpression] = React.useState< IncompleteSearchExpressionTerm[] - >(initialSearchExpression ?? []); + >(() => { + if (searchExpressionExternal) { + return searchExpressionExternal; + } + if (initialSearchExpression) { + return initialSearchExpression; + } + return []; + }); const onSearchExpressionChangeLatestRef = useLatestRef( onSearchExpressionChange, @@ -69,6 +84,12 @@ export const PowerSearch: React.FC = ({ } }, [searchExpression, onSearchExpressionChangeLatestRef]); + React.useEffect(() => { + if (searchExpressionExternal) { + setSearchExpression(searchExpressionExternal); + } + }, [searchExpressionExternal]); + const options: PowerSearchTermFinderOptionGroup[] = React.useMemo(() => { const groupedOptions: PowerSearchTermFinderOptionGroup[] = []; @@ -112,7 +133,7 @@ export const PowerSearch: React.FC = ({ {searchExpression.map((searchTerm, i) => { return ( { setSearchExpression((prevSearchExpression) => { diff --git a/desktop/flipper-plugin/src/ui/data-table/DataTableWithPowerSearch.tsx b/desktop/flipper-plugin/src/ui/data-table/DataTableWithPowerSearch.tsx index 7c2e08d9de4..d7dd3410877 100644 --- a/desktop/flipper-plugin/src/ui/data-table/DataTableWithPowerSearch.tsx +++ b/desktop/flipper-plugin/src/ui/data-table/DataTableWithPowerSearch.tsx @@ -673,7 +673,7 @@ export function DataTable( { tableManager.setSearchExpression(newSearchExpression); }}