From 7b9ddb617f991ff8270766c447bd9865ac29d367 Mon Sep 17 00:00:00 2001
From: Andrey Goncharov <aigoncharov@meta.com>
Date: Wed, 30 Aug 2023 07:26:35 -0700
Subject: [PATCH] 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
---
 .../src/ui/PowerSearch/PowerSearchTermFinder.tsx          | 6 +++++-
 desktop/flipper-plugin/src/ui/PowerSearch/index.tsx       | 8 ++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchTermFinder.tsx b/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchTermFinder.tsx
index 2afacb233..9c42f0111 100644
--- a/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchTermFinder.tsx
+++ b/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();
+        }
       }}
     />
   );
diff --git a/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx b/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx
index 7be8ac49d..b94114718 100644
--- a/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx
+++ b/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>
   );