From b889d10a6409713002fee324ab4a97c54f325c82 Mon Sep 17 00:00:00 2001
From: Case Delst <casedelst@gmail.com>
Date: Thu, 12 Sep 2024 14:22:05 -0700
Subject: [PATCH] Fix pagination for 'Only show flags with overrides'

---
 internal/dev_server/ui/src/Flags.tsx | 29 ++++++++++++++++++----------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/internal/dev_server/ui/src/Flags.tsx b/internal/dev_server/ui/src/Flags.tsx
index 861af7a8..2f117085 100644
--- a/internal/dev_server/ui/src/Flags.tsx
+++ b/internal/dev_server/ui/src/Flags.tsx
@@ -53,12 +53,24 @@ function Flags({
   const filteredFlags = useMemo(() => {
     if (!flags) return [];
     const flagEntries = Object.entries(flags);
-    const search = searchTerm.toLowerCase();
-    const filtered = fuzzysort
-      .go(search, flagEntries, { all: true, key: '0', threshold: 0.7 })
-      .map((result) => result.obj);
-    return filtered;
-  }, [flags, searchTerm]);
+    return flagEntries
+      .filter((entry) => {
+        if (!searchTerm) return true;
+        const [flagKey] = entry;
+        const result = fuzzysort.single(searchTerm.toLowerCase(), flagKey);
+        return result && result.score > -5000; // Adjust threshold as needed
+      })
+      .filter((entry) => {
+        const [flagKey] = entry;
+        const hasOverride = flagKey in overrides;
+
+        if (onlyShowOverrides && !hasOverride) {
+          return false;
+        }
+
+        return true;
+      });
+  }, [flags, searchTerm, onlyShowOverrides]);
 
   const paginatedFlags = useMemo(() => {
     const startIndex = currentPage * flagsPerPage; // Adjust startIndex calculation
@@ -231,6 +243,7 @@ function Flags({
                   setSearchTerm(e.target.value);
                   setCurrentPage(0); // Reset pagination
                 }}
+                value={searchTerm}
               />
               <IconButton
                 aria-label="clear"
@@ -247,10 +260,6 @@ function Flags({
             const hasOverride = flagKey in overrides;
             const currentValue = hasOverride ? overrideValue : flagValue;
 
-            if (onlyShowOverrides && !hasOverride) {
-              return null;
-            }
-
             return (
               <li
                 key={flagKey}