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,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
+    {options, onSelect, onBackspacePressWhileEmpty, onConfirmUnknownOption},
-  >(null);
+    ref,
+  ) => {
+    const [searchTermFinderValue, setSearchTermFinderValue] = React.useState<
+      string | null
+    >(null);
 
-  return (
+    return (
-    <AutoComplete<string, PowerSearchTermFinderOption>
+      <AutoComplete<string, PowerSearchTermFinderOption>
-      ref={
+        ref={
-        ref as React.Ref<{
+          ref as React.Ref<{
-          focus: () => void;
+            focus: () => void;
-          blur: () => void;
+            blur: () => void;
-          scrollTo: () => void;
+            scrollTo: () => void;
-        }>
+          }>
-      }
+        }
-      style={{flex: '1', minWidth: 200}}
+        style={{flex: '1', minWidth: 200}}
-      options={options}
+        options={options}
-      bordered={false}
+        bordered={false}
-      onSelect={(_: string, selectedOption: PowerSearchTermFinderOption) => {
+        onSelect={(_: string, selectedOption: PowerSearchTermFinderOption) => {
-        onSelect(selectedOption);
+          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') {
           setSearchTermFinderValue(null);
-        }
+        }}
-        if (event.key === 'Backspace' && !searchTermFinderValue) {
+        filterOption={(inputValue, option) => {
-          onBackspacePressWhileEmpty();
+          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();
+          }
+        }}
+      />
+    );
+  },
+);

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