From 1307d97f7a324dcd66680adf824306bb1fed5ba0 Mon Sep 17 00:00:00 2001
From: Saadi Myftija <saadi@myftija.com>
Date: Tue, 31 Mar 2026 12:53:05 +0200
Subject: [PATCH] fix(webapp): match environment when searching env variables
 (#3302)

Temporary workaround that enables filtering by environment in the
envvars page, without changing any UI.

---------

Co-authored-by: Claude <noreply@anthropic.com>
---
 .server-changes/env-variables-search-by-environment.md      | 6 ++++++
 apps/webapp/app/hooks/useFuzzyFilter.ts                     | 4 ++--
 .../route.tsx                                               | 2 +-
 3 files changed, 9 insertions(+), 3 deletions(-)
 create mode 100644 .server-changes/env-variables-search-by-environment.md

diff --git a/.server-changes/env-variables-search-by-environment.md b/.server-changes/env-variables-search-by-environment.md
new file mode 100644
index 000000000..c3f9ed8bc
--- /dev/null
+++ b/.server-changes/env-variables-search-by-environment.md
@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+Extended the search filter on the environment variables page to match on environment type (production, staging, development, preview) and branch name, not just variable name and value.
diff --git a/apps/webapp/app/hooks/useFuzzyFilter.ts b/apps/webapp/app/hooks/useFuzzyFilter.ts
index 1c0f60482..3f0797179 100644
--- a/apps/webapp/app/hooks/useFuzzyFilter.ts
+++ b/apps/webapp/app/hooks/useFuzzyFilter.ts
@@ -8,7 +8,7 @@ import { matchSorter } from "match-sorter";
  *
  * @param params - The parameters object
  * @param params.items - Array of objects to filter
- * @param params.keys - Array of object keys to perform the fuzzy search on
+ * @param params.keys - Array of object keys to perform the fuzzy search on (supports dot-notation for nested properties)
  * @returns An object containing:
  *   - filterText: The current filter text
  *   - setFilterText: Function to update the filter text
@@ -28,7 +28,7 @@ export function useFuzzyFilter<T extends Object>({
   keys,
 }: {
   items: T[];
-  keys: Extract<keyof T, string>[];
+  keys: (Extract<keyof T, string> | (string & {}))[];
 }) {
   const [filterText, setFilterText] = useState("");
 
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.environment-variables/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.environment-variables/route.tsx
index 2670f0188..f7f91f332 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.environment-variables/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.environment-variables/route.tsx
@@ -256,7 +256,7 @@ export default function Page() {
   const { filterText, setFilterText, filteredItems } =
     useFuzzyFilter<EnvironmentVariableWithSetValues>({
       items: environmentVariables,
-      keys: ["key", "value"],
+      keys: ["key", "value", "environment.type", "environment.branchName"],
     });
 
   // Add isFirst and isLast to each environment variable