From 2c1e814264341f94eb76e7107b7add72b03c6444 Mon Sep 17 00:00:00 2001
From: Andrey Goncharov <aigoncharov@meta.com>
Date: Fri, 27 Oct 2023 05:45:28 -0700
Subject: [PATCH] Allow power search to be controlled externally

Reviewed By: LukeDefeo

Differential Revision: D50732883

fbshipit-source-id: a19932b5a3f319fd1dc45572fef251369283cc61
---
 .../src/ui/PowerSearch/index.tsx              | 25 +++++++++++++++++--
 .../data-table/DataTableWithPowerSearch.tsx   |  2 +-
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx b/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx
index 1d7d51a61..cf6b50c1f 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<PowerSearchProps> = ({
   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<PowerSearchProps> = ({
     }
   }, [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<PowerSearchProps> = ({
         {searchExpression.map((searchTerm, i) => {
           return (
             <PowerSearchTerm
-              key={i.toString()}
+              key={JSON.stringify(searchTerm)}
               searchTerm={searchTerm}
               onCancel={() => {
                 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 7c2e08d9d..d7dd34108 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<T extends object>(
         <Searchbar gap>
           <PowerSearch
             config={powerSearchConfig}
-            initialSearchExpression={searchExpression}
+            searchExpression={searchExpression}
             onSearchExpressionChange={(newSearchExpression) => {
               tableManager.setSearchExpression(newSearchExpression);
             }}