Reviewing files that changed from the base of the PR and between f9af22d and 744e00b.

• packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
• packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/StyledWrapper.js
• packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js
• packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
• packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/StyledWrapper.js
• packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/index.js

• GitHub Check: SSL Tests - macOS
• GitHub Check: SSL Tests - Windows
• GitHub Check: SSL Tests - Linux
• GitHub Check: Playwright E2E Tests
• GitHub Check: CLI Tests
• GitHub Check: Unit Tests

packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/StyledWrapper.js (1)

95-126: LGTM! Search UI styling follows project patterns.

The new search container and input styles correctly use theme tokens and follow the styled-components approach per coding guidelines.

packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/index.js (1)

187-222: LGTM! Search UI implementation is solid.

The conditional rendering, state management, and event handling are correctly implemented. The search input properly focuses when opened and clears on Escape.

packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js (2)

385-398: Filtering logic is correctly implemented.

The filteredVariables memo properly handles case-insensitive search across variable names and string values. The dependency array is complete, and the filtering preserves the original indices needed for Formik field paths.

---

414-420: Verify UX: empty "add new variable" row is hidden during search.

When users search, the empty last row (for adding new variables) won't match the query and will be filtered out. This prevents adding new variables while a search is active—users must clear the search first.

Is this the intended UX? If users should be able to add variables while searching, the empty last row should be excluded from filtering:

Alternative: Always show empty last row

  const filteredVariables = useMemo(() => {
    if (!searchQuery?.trim()) {
      return formik.values.map((variable, index) => ({ variable, index }));
    }

    const query = searchQuery.toLowerCase().trim();
-   return formik.values
+   const filtered = formik.values
      .map((variable, index) => ({ variable, index }))
      .filter(({ variable }) => {
        const nameMatch = variable.name?.toLowerCase().includes(query);
        const valueMatch = typeof variable.value === 'string' && variable.value?.toLowerCase().includes(query);
        return nameMatch || valueMatch;
      });
+   
+   // Always include the empty last row for adding new variables
+   const lastIndex = formik.values.length - 1;
+   const lastRow = formik.values[lastIndex];
+   const isLastRowEmpty = !lastRow?.name || lastRow.name.trim() === '';
+   
+   if (isLastRowEmpty && !filtered.some(({ index }) => index === lastIndex)) {
+     filtered.push({ variable: lastRow, index: lastIndex });
+   }
+   
+   return filtered;
  }, [formik.values, searchQuery]);

packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js (1)

352-358: Verify UX: empty "add new variable" row is hidden during search.

This exhibits the same behavior as the Environments path component: the empty last row for adding new variables will be filtered out during search, preventing users from adding variables until they clear the search.

Please confirm this is the intended user experience. If users should be able to add variables while searching, refer to the alternative implementation suggested in the review comment for packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js (lines 414-420).

packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js (3)

1-1: LGTM! Clean integration of search state and refs.

The IconSearch import and local state setup (searchQuery, isSearching, searchInputRef) follow the existing pattern established by the rename functionality. Code style is consistent with guidelines.

Also applies to: 21-24

---

117-130: Handlers are well-implemented and follow existing patterns.

Both handleOpenSearch and handleSearchKeyDown are clean and consistent with the rename functionality's approach. The timeout-based focus pattern matches handleRenameClick.

---

222-227: Correct prop wiring to EnvironmentVariables.

The searchQuery prop is correctly passed down to enable filtering. This aligns with the EnvironmentVariables component's expected interface.