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

@@ -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.

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("");
 

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