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

desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchTermFinder.tsx

@@ -25,12 +25,17 @@ 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) => {
+>(
+  (
+    {options, onSelect, onBackspacePressWhileEmpty, onConfirmUnknownOption},
+    ref,
+  ) => {
     const [searchTermFinderValue, setSearchTermFinderValue] = React.useState<
       string | null
     >(null);
@@ -52,7 +57,9 @@ export const PowerSearchTermFinder = React.forwardRef<
           setSearchTermFinderValue(null);
         }}
         filterOption={(inputValue, option) => {
-        return !!option?.label.toLowerCase().includes(inputValue.toLowerCase());
+          return !!option?.label
+            .toLowerCase()
+            .includes(inputValue.toLowerCase());
         }}
         value={searchTermFinderValue}
         onChange={setSearchTermFinderValue}
@@ -61,6 +68,9 @@ export const PowerSearchTermFinder = React.forwardRef<
         }}
         onInputKeyDown={(event) => {
           if (event.key === 'Enter') {
+            if (searchTermFinderValue && onConfirmUnknownOption) {
+              onConfirmUnknownOption(searchTermFinderValue);
+            }
             setSearchTermFinderValue(null);
           }
           if (event.key === 'Backspace' && !searchTermFinderValue) {
@@ -69,4 +79,5 @@ export const PowerSearchTermFinder = React.forwardRef<
         }}
       />
     );
-});
+  },
+);

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>
   );