From 0320350263d22b35e06f49cc8a85f6658c892394 Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 31 Mar 2026 08:35:02 +0000 Subject: [PATCH 1/5] fix(webapp): env variables search now matches on environment type Extended the search filter on the environment variables page to also match on environment type (production, staging, development, preview) and branch name, not just variable name and value. https://claude.ai/code/session_01HsDEMADbz1HQmZ4MDD753r --- apps/webapp/app/hooks/useFuzzyFilter.ts | 2 +- .../route.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/webapp/app/hooks/useFuzzyFilter.ts b/apps/webapp/app/hooks/useFuzzyFilter.ts index 1c0f6048268..b741df269f6 100644 --- a/apps/webapp/app/hooks/useFuzzyFilter.ts +++ b/apps/webapp/app/hooks/useFuzzyFilter.ts @@ -28,7 +28,7 @@ export function useFuzzyFilter({ keys, }: { items: T[]; - keys: Extract[]; + keys: 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 2670f0188df..f7f91f33274 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({ items: environmentVariables, - keys: ["key", "value"], + keys: ["key", "value", "environment.type", "environment.branchName"], }); // Add isFirst and isLast to each environment variable From bd094c932a5371b0f0f4f6c87454b7d31b43f335 Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 31 Mar 2026 08:35:14 +0000 Subject: [PATCH 2/5] Add server-changes file for env variables search improvement https://claude.ai/code/session_01HsDEMADbz1HQmZ4MDD753r --- .server-changes/env-variables-search-by-environment.md | 6 ++++++ 1 file changed, 6 insertions(+) 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 00000000000..c3f9ed8bc2a --- /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. From eb3bed4f58099789d5066688779aac342a34e144 Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 31 Mar 2026 08:46:08 +0000 Subject: [PATCH 3/5] refactor: use DotPath type for type-safe nested key support in useFuzzyFilter Replace plain `string[]` with a recursive `DotPath` type that generates valid dot-notation paths from the object type, giving compile-time safety for nested keys like "environment.type". https://claude.ai/code/session_01HsDEMADbz1HQmZ4MDD753r --- apps/webapp/app/hooks/useFuzzyFilter.ts | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/apps/webapp/app/hooks/useFuzzyFilter.ts b/apps/webapp/app/hooks/useFuzzyFilter.ts index b741df269f6..6d1d6ac861c 100644 --- a/apps/webapp/app/hooks/useFuzzyFilter.ts +++ b/apps/webapp/app/hooks/useFuzzyFilter.ts @@ -1,6 +1,14 @@ import { useMemo, useState } from "react"; import { matchSorter } from "match-sorter"; +type DotPath = Depth["length"] extends 4 + ? never + : T extends object + ? { + [K in keyof T & string]: K | `${K}.${DotPath}`; + }[keyof T & string] + : never; + /** * A hook that provides fuzzy filtering functionality for a list of objects. * Uses match-sorter to perform the filtering across multiple object properties and @@ -8,7 +16,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 +36,7 @@ export function useFuzzyFilter({ keys, }: { items: T[]; - keys: string[]; + keys: DotPath[]; }) { const [filterText, setFilterText] = useState(""); From e9f81e4847a7d5e7e0cae98249fb7ae6e21e2f71 Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 31 Mar 2026 08:47:07 +0000 Subject: [PATCH 4/5] simplify: use plain string[] for useFuzzyFilter keys The DotPath recursive type is over-engineered for a hook used in 3 places and has edge cases with nullable/union types. Plain string[] is sufficient. https://claude.ai/code/session_01HsDEMADbz1HQmZ4MDD753r --- apps/webapp/app/hooks/useFuzzyFilter.ts | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/apps/webapp/app/hooks/useFuzzyFilter.ts b/apps/webapp/app/hooks/useFuzzyFilter.ts index 6d1d6ac861c..87f0eb0dde1 100644 --- a/apps/webapp/app/hooks/useFuzzyFilter.ts +++ b/apps/webapp/app/hooks/useFuzzyFilter.ts @@ -1,14 +1,6 @@ import { useMemo, useState } from "react"; import { matchSorter } from "match-sorter"; -type DotPath = Depth["length"] extends 4 - ? never - : T extends object - ? { - [K in keyof T & string]: K | `${K}.${DotPath}`; - }[keyof T & string] - : never; - /** * A hook that provides fuzzy filtering functionality for a list of objects. * Uses match-sorter to perform the filtering across multiple object properties and @@ -36,7 +28,7 @@ export function useFuzzyFilter({ keys, }: { items: T[]; - keys: DotPath[]; + keys: string[]; }) { const [filterText, setFilterText] = useState(""); From b7d14c0eba59f48d4d301a48bb66e090a13d6d2d Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 31 Mar 2026 08:51:38 +0000 Subject: [PATCH 5/5] improve: autocomplete top-level keys in useFuzzyFilter while allowing dot paths Use (Extract | (string & {}))[] so editors suggest top-level keys like "key" and "value" while still accepting nested dot-notation paths like "environment.type". https://claude.ai/code/session_01HsDEMADbz1HQmZ4MDD753r --- apps/webapp/app/hooks/useFuzzyFilter.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/webapp/app/hooks/useFuzzyFilter.ts b/apps/webapp/app/hooks/useFuzzyFilter.ts index 87f0eb0dde1..3f0797179f2 100644 --- a/apps/webapp/app/hooks/useFuzzyFilter.ts +++ b/apps/webapp/app/hooks/useFuzzyFilter.ts @@ -28,7 +28,7 @@ export function useFuzzyFilter({ keys, }: { items: T[]; - keys: string[]; + keys: (Extract | (string & {}))[]; }) { const [filterText, setFilterText] = useState("");