From 3ea3bc9d9d2bb39a7d2ed9488d0a7e98dedab8a6 Mon Sep 17 00:00:00 2001
From: Case Delst <casedelst@gmail.com>
Date: Thu, 12 Sep 2024 13:48:09 -0700
Subject: [PATCH 1/2] Fix search clear not clearing filter

---
 internal/dev_server/ui/src/EnvironmentSelector.tsx | 8 +++++++-
 internal/dev_server/ui/src/Flags.tsx               | 4 +++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/internal/dev_server/ui/src/EnvironmentSelector.tsx b/internal/dev_server/ui/src/EnvironmentSelector.tsx
index 15c3b70d..04b587d4 100644
--- a/internal/dev_server/ui/src/EnvironmentSelector.tsx
+++ b/internal/dev_server/ui/src/EnvironmentSelector.tsx
@@ -62,6 +62,8 @@ export function EnvironmentSelector({
     return <span>Loading environments...</span>;
   }
 
+  console.log(searchQuery);
+
   return (
     <Stack gap="3">
       <Box display="flex" justifyContent="space-between" alignItems="center">
@@ -77,8 +79,12 @@ export function EnvironmentSelector({
           <Input
             id="environmentSearch"
             value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
+            onChange={(e) => {
+              console.log(e.target.value);
+              setSearchQuery(e.target.value || '');
+            }}
             placeholder="Search environments..."
+            aria-label="Search environments"
           />
         </div>
         <span
diff --git a/internal/dev_server/ui/src/Flags.tsx b/internal/dev_server/ui/src/Flags.tsx
index 861af7a8..b87ae59f 100644
--- a/internal/dev_server/ui/src/Flags.tsx
+++ b/internal/dev_server/ui/src/Flags.tsx
@@ -222,7 +222,7 @@ function Flags({
       </Box>
       <Stack gap="4">
         <Inline gap="4">
-          <SearchField>
+          <SearchField aria-label="Search flags">
             <Group>
               <Icon name="search" size="small" />
               <Input
@@ -231,12 +231,14 @@ function Flags({
                   setSearchTerm(e.target.value);
                   setCurrentPage(0); // Reset pagination
                 }}
+                aria-label="Search flags input"
               />
               <IconButton
                 aria-label="clear"
                 icon="cancel-circle-outline"
                 size="small"
                 variant="minimal"
+                onPress={() => setSearchTerm('')}
               />
             </Group>
           </SearchField>

From ddcd3644f4f5b4505f4fd25a3a5618a02f5a749a Mon Sep 17 00:00:00 2001
From: Case Delst <casedelst@gmail.com>
Date: Thu, 12 Sep 2024 13:49:34 -0700
Subject: [PATCH 2/2] Remove logs

---
 internal/dev_server/ui/src/EnvironmentSelector.tsx | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/internal/dev_server/ui/src/EnvironmentSelector.tsx b/internal/dev_server/ui/src/EnvironmentSelector.tsx
index 04b587d4..f0959c4c 100644
--- a/internal/dev_server/ui/src/EnvironmentSelector.tsx
+++ b/internal/dev_server/ui/src/EnvironmentSelector.tsx
@@ -62,8 +62,6 @@ export function EnvironmentSelector({
     return <span>Loading environments...</span>;
   }
 
-  console.log(searchQuery);
-
   return (
     <Stack gap="3">
       <Box display="flex" justifyContent="space-between" alignItems="center">
@@ -79,10 +77,7 @@ export function EnvironmentSelector({
           <Input
             id="environmentSearch"
             value={searchQuery}
-            onChange={(e) => {
-              console.log(e.target.value);
-              setSearchQuery(e.target.value || '');
-            }}
+            onChange={(e) => setSearchQuery(e.target.value || '')}
             placeholder="Search environments..."
             aria-label="Search environments"
           />