From c4fbd10e68982105c458ace7fb979775ee5e4ac4 Mon Sep 17 00:00:00 2001
From: Andrey Goncharov <aigoncharov@meta.com>
Date: Thu, 5 Oct 2023 03:54:29 -0700
Subject: [PATCH] Allow handling arbitrary text

Summary:
When a user enters any arbitrary text, we will treat as an input for the search through the entire row.
Based on feedback from https://fb.workplace.com/groups/flippersupport/permalink/1703929480087703/

Reviewed By: lblasa

Differential Revision: D49911868

fbshipit-source-id: 4c569e4b01e468f0ca112ea4b00fe143b30bed2a
---
 .../ui/PowerSearch/PowerSearchTermFinder.tsx  | 87 +++++++++++--------
 .../src/ui/PowerSearch/index.tsx              | 19 ++++
 2 files changed, 68 insertions(+), 38 deletions(-)

diff --git a/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchTermFinder.tsx b/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchTermFinder.tsx
index 8e8826960..5cdef1961 100644
--- a/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchTermFinder.tsx
+++ b/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchTermFinder.tsx
@@ -25,48 +25,59 @@ type PowerSearchTermFinderProps = {
   options: PowerSearchTermFinderOptionGroup[];
   onSelect: (selectedOption: PowerSearchTermFinderOption) => void;
   onBackspacePressWhileEmpty: () => void;
+  onConfirmUnknownOption?: (searchString: string) => void;
 };
 
 export const PowerSearchTermFinder = React.forwardRef<
   PowerSearchTermFinderRef,
   PowerSearchTermFinderProps
->(({options, onSelect, onBackspacePressWhileEmpty}, ref) => {
-  const [searchTermFinderValue, setSearchTermFinderValue] = React.useState<
-    string | null
-  >(null);
+>(
+  (
+    {options, onSelect, onBackspacePressWhileEmpty, onConfirmUnknownOption},
+    ref,
+  ) => {
+    const [searchTermFinderValue, setSearchTermFinderValue] = React.useState<
+      string | null
+    >(null);
 
-  return (
-    <AutoComplete<string, PowerSearchTermFinderOption>
-      ref={
-        ref as React.Ref<{
-          focus: () => void;
-          blur: () => void;
-          scrollTo: () => void;
-        }>
-      }
-      style={{flex: '1', minWidth: 200}}
-      options={options}
-      bordered={false}
-      onSelect={(_: string, selectedOption: PowerSearchTermFinderOption) => {
-        onSelect(selectedOption);
-        setSearchTermFinderValue(null);
-      }}
-      filterOption={(inputValue, option) => {
-        return !!option?.label.toLowerCase().includes(inputValue.toLowerCase());
-      }}
-      value={searchTermFinderValue}
-      onChange={setSearchTermFinderValue}
-      onBlur={() => {
-        setSearchTermFinderValue(null);
-      }}
-      onInputKeyDown={(event) => {
-        if (event.key === 'Enter') {
+    return (
+      <AutoComplete<string, PowerSearchTermFinderOption>
+        ref={
+          ref as React.Ref<{
+            focus: () => void;
+            blur: () => void;
+            scrollTo: () => void;
+          }>
+        }
+        style={{flex: '1', minWidth: 200}}
+        options={options}
+        bordered={false}
+        onSelect={(_: string, selectedOption: PowerSearchTermFinderOption) => {
+          onSelect(selectedOption);
           setSearchTermFinderValue(null);
-        }
-        if (event.key === 'Backspace' && !searchTermFinderValue) {
-          onBackspacePressWhileEmpty();
-        }
-      }}
-    />
-  );
-});
+        }}
+        filterOption={(inputValue, option) => {
+          return !!option?.label
+            .toLowerCase()
+            .includes(inputValue.toLowerCase());
+        }}
+        value={searchTermFinderValue}
+        onChange={setSearchTermFinderValue}
+        onBlur={() => {
+          setSearchTermFinderValue(null);
+        }}
+        onInputKeyDown={(event) => {
+          if (event.key === 'Enter') {
+            if (searchTermFinderValue && onConfirmUnknownOption) {
+              onConfirmUnknownOption(searchTermFinderValue);
+            }
+            setSearchTermFinderValue(null);
+          }
+          if (event.key === 'Backspace' && !searchTermFinderValue) {
+            onBackspacePressWhileEmpty();
+          }
+        }}
+      />
+    );
+  },
+);
diff --git a/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx b/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx
index 96a51b1dc..1d7d51a61 100644
--- a/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx
+++ b/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx
@@ -37,6 +37,9 @@ type PowerSearchProps = {
   config: PowerSearchConfig;
   initialSearchExpression?: SearchExpressionTerm[];
   onSearchExpressionChange: (searchExpression: SearchExpressionTerm[]) => void;
+  onConfirmUnknownOption?: (
+    searchString: string,
+  ) => SearchExpressionTerm | undefined;
 };
 
 const OPTION_KEY_DELIMITER = '::';
@@ -45,6 +48,7 @@ export const PowerSearch: React.FC<PowerSearchProps> = ({
   config,
   initialSearchExpression,
   onSearchExpressionChange,
+  onConfirmUnknownOption,
 }) => {
   const [searchExpression, setSearchExpression] = React.useState<
     IncompleteSearchExpressionTerm[]
@@ -162,6 +166,21 @@ export const PowerSearch: React.FC<PowerSearchProps> = ({
             );
           });
         }}
+        onConfirmUnknownOption={
+          onConfirmUnknownOption
+            ? (searchString) => {
+                const searchExpressionTerm =
+                  onConfirmUnknownOption(searchString);
+
+                if (searchExpressionTerm) {
+                  setSearchExpression((prevSearchExpression) => [
+                    ...prevSearchExpression,
+                    searchExpressionTerm,
+                  ]);
+                }
+              }
+            : undefined
+        }
       />
     </PowerSearchContainer>
   );