Remove last search term on backspace press when term finder is empty

Summary: Project doc: https://docs.google.com/document/d/1miofxds9DJgWScj0zFyBbdpRH5Rj0T9FqiCapof5-vU

Reviewed By: lblasa

Differential Revision: D48637890

fbshipit-source-id: fb952ffe1ab1a94d2bc465b89be6c62a71be9b9f

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

@@ -24,12 +24,13 @@ export type PowerSearchTermFinderRef = {
 type PowerSearchTermFinderProps = {
   options: PowerSearchTermFinderOptionGroup[];
   onSelect: (selectedOption: PowerSearchTermFinderOption) => void;
+  onBackspacePressWhileEmpty: () => void;
 };
 
 export const PowerSearchTermFinder = React.forwardRef<
   PowerSearchTermFinderRef,
   PowerSearchTermFinderProps
->(({options, onSelect}, ref) => {
+>(({options, onSelect, onBackspacePressWhileEmpty}, ref) => {
   const [searchTermFinderValue, setSearchTermFinderValue] = React.useState<
     string | null
   >(null);
@@ -62,6 +63,9 @@ export const PowerSearchTermFinder = React.forwardRef<
         if (event.key === 'Enter') {
           setSearchTermFinderValue(null);
         }
+        if (event.key === 'Backspace' && !searchTermFinderValue) {
+          onBackspacePressWhileEmpty();
+        }
       }}
     />
   );

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

@@ -146,6 +146,14 @@ export const PowerSearch: React.FC<PowerSearchProps> = ({
             },
           ]);
         }}
+        onBackspacePressWhileEmpty={() => {
+          setSearchExpression((prevSearchExpression) => {
+            return prevSearchExpression.slice(
+              0,
+              prevSearchExpression.length - 1,
+            );
+          });
+        }}
       />
     </PowerSearchContainer>
   );