feat: add search functionality to environment variables. (#6659) (#6966)

2026-06-15 11:51:30 +00:00 · 2026-01-30 19:04:16 +05:30
parent e1c01ebe18
commit 559946bcce
7 changed files with 277 additions and 23 deletions
--- a/packages/bruno-app/src/components/EnvironmentVariablesTable/index.js
+++ b/packages/bruno-app/src/components/EnvironmentVariablesTable/index.js
@@ -38,7 +38,8 @@ const EnvironmentVariablesTable = ({
  onDraftChange,
  onDraftClear,
  setIsModified,
-  renderExtraValueContent
+  renderExtraValueContent,
+  searchQuery = ''
 }) => {
  const { storedTheme } = useTheme();
  const { globalEnvironments, activeGlobalEnvironmentUid } = useSelector((state) => state.globalEnvironments);
@@ -393,13 +394,35 @@ const EnvironmentVariablesTable = ({
    };
  }, []);

+  const filteredVariables = useMemo(() => {
+    const allVariables = formik.values.map((variable, index) => ({ variable, index }));
+    if (!searchQuery?.trim()) {
+      return allVariables;
+    }
+
+    const query = searchQuery.toLowerCase().trim();
+
+    return allVariables.filter(({ variable, index }) => {
+      const isLastRow = index === formik.values.length - 1;
+      const isEmptyRow = !variable.name || variable.name.trim() === '';
+      if (isLastRow && isEmptyRow) {
+        return true;
+      }
+
+      const nameMatch = variable.name ? variable.name.toLowerCase().includes(query) : false;
+      const valueMatch = typeof variable.value === 'string' ? variable.value.toLowerCase().includes(query) : false;
+
+      return !!(nameMatch || valueMatch);
+    });
+  }, [formik.values, searchQuery]);
+
  return (
    <StyledWrapper className={resizing ? 'is-resizing' : ''}>
      <TableVirtuoso
        className="table-container"
        style={{ height: tableHeight }}
        components={{ TableRow }}
-        data={formik.values}
+        data={filteredVariables}
        totalListHeightChanged={handleTotalHeightChanged}
        fixedHeaderContent={() => (
          <tr>
@@ -418,9 +441,9 @@ const EnvironmentVariablesTable = ({
          </tr>
        )}
        fixedItemHeight={35}
-        computeItemKey={(index, variable) => variable.uid}
-        itemContent={(index, variable) => {
-          const isLastRow = index === formik.values.length - 1;
+        computeItemKey={(index, item) => item.variable.uid}
+        itemContent={(index, { variable, index: actualIndex }) => {
+          const isLastRow = actualIndex === formik.values.length - 1;
          const isEmptyRow = !variable.name || variable.name.trim() === '';
          const isLastEmptyRow = isLastRow && isEmptyRow;

@@ -431,7 +454,7 @@ const EnvironmentVariablesTable = ({
                  <input
                    type="checkbox"
                    className="mousetrap"
-                    name={`${index}.enabled`}
+                    name={`${actualIndex}.enabled`}
                    checked={variable.enabled}
                    onChange={formik.handleChange}
                  />
@@ -446,15 +469,15 @@ const EnvironmentVariablesTable = ({
                    autoCapitalize="off"
                    spellCheck="false"
                    className="mousetrap"
-                    id={`${index}.name`}
-                    name={`${index}.name`}
+                    id={`${actualIndex}.name`}
+                    name={`${actualIndex}.name`}
                    value={variable.name}
                    placeholder={isLastEmptyRow ? 'Name' : ''}
-                    onChange={(e) => handleNameChange(index, e)}
-                    onBlur={() => handleNameBlur(index)}
-                    onKeyDown={(e) => handleNameKeyDown(index, e)}
+                    onChange={(e) => handleNameChange(actualIndex, e)}
+                    onBlur={() => handleNameBlur(actualIndex)}
+                    onKeyDown={(e) => handleNameKeyDown(actualIndex, e)}
                  />
-                  <ErrorMessage name={`${index}.name`} index={index} />
+                  <ErrorMessage name={`${actualIndex}.name`} index={actualIndex} />
                </div>
              </td>
              <td className="flex flex-row flex-nowrap items-center" style={{ width: columnWidths.value }}>
@@ -462,12 +485,12 @@ const EnvironmentVariablesTable = ({
                  <MultiLineEditor
                    theme={storedTheme}
                    collection={_collection}
-                    name={`${index}.value`}
+                    name={`${actualIndex}.value`}
                    value={variable.value}
                    placeholder={isLastEmptyRow ? 'Value' : ''}
                    isSecret={variable.secret}
                    readOnly={typeof variable.value !== 'string'}
-                    onChange={(newValue) => formik.setFieldValue(`${index}.value`, newValue, true)}
+                    onChange={(newValue) => formik.setFieldValue(`${actualIndex}.value`, newValue, true)}
                    onSave={handleSave}
                  />
                </div>
@@ -488,7 +511,7 @@ const EnvironmentVariablesTable = ({
                  <input
                    type="checkbox"
                    className="mousetrap"
-                    name={`${index}.secret`}
+                    name={`${actualIndex}.secret`}
                    checked={variable.secret}
                    onChange={formik.handleChange}
                  />
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
@@ -9,7 +9,7 @@ import SensitiveFieldWarning from 'components/SensitiveFieldWarning';
 import EnvironmentVariablesTable from 'components/EnvironmentVariablesTable';
 import { sensitiveFields } from './constants';

-const EnvironmentVariables = ({ environment, setIsModified, collection }) => {
+const EnvironmentVariables = ({ environment, setIsModified, collection, searchQuery = '' }) => {
  const dispatch = useDispatch();

  const environmentsDraft = collection?.environmentsDraft;
@@ -111,6 +111,7 @@ const EnvironmentVariables = ({ environment, setIsModified, collection }) => {
      onDraftClear={handleDraftClear}
      setIsModified={setIsModified}
      renderExtraValueContent={renderExtraValueContent}
+      searchQuery={searchQuery}
    />
  );
 };
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/StyledWrapper.js
@@ -94,8 +94,63 @@ const StyledWrapper = styled.div`

    .actions {
      display: flex;
+      align-items: center;
      gap: 2px;

+      .search-input-wrapper {
+        position: relative;
+        display: flex;
+        align-items: center;
+
+        .search-icon {
+          position: absolute;
+          left: 8px;
+          color: ${(props) => props.theme.colors.text.muted};
+          pointer-events: none;
+        }
+
+        .search-input {
+          width: 200px;
+          padding: 5px 32px 5px 32px;
+          border: 1px solid ${(props) => props.theme.input.border};
+          border-radius: ${(props) => props.theme.border.radius.sm};
+          background: ${(props) => props.theme.input.bg};
+          color: ${(props) => props.theme.text};
+          font-size: ${(props) => props.theme.font.size.base};
+          outline: none;
+          transition: border-color 0.15s ease;
+
+          &:focus {
+            border-color: ${(props) => props.theme.input.focusBorder};
+          }
+
+          &::placeholder {
+            color: ${(props) => props.theme.input.placeholder.color};
+            opacity: ${(props) => props.theme.input.placeholder.opacity};
+          }
+        }
+
+        .clear-search {
+          position: absolute;
+          right: 1px;
+          padding: 4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: ${(props) => props.theme.colors.text.muted};
+          background: transparent;
+          border: none;
+          cursor: pointer;
+          border-radius: ${(props) => props.theme.border.radius.sm};
+          transition: all 0.15s ease;
+
+          &:hover {
+            color: ${(props) => props.theme.text};
+            background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
+          }
+        }
+      }
+
      button {
        display: inline-flex;
        align-items: center;
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js
@@ -1,6 +1,7 @@
-import { IconCopy, IconEdit, IconTrash, IconCheck, IconX } from '@tabler/icons';
+import { IconCopy, IconEdit, IconTrash, IconCheck, IconX, IconSearch } from '@tabler/icons';
 import { useState, useRef } from 'react';
 import { useDispatch } from 'react-redux';
+import useDebounce from 'hooks/useDebounce';
 import { renameEnvironment, updateEnvironmentColor } from 'providers/ReduxStore/slices/collections/actions';
 import { validateName, validateNameError } from 'utils/common/regex';
 import toast from 'react-hot-toast';
@@ -19,7 +20,11 @@ const EnvironmentDetails = ({ environment, setIsModified, collection }) => {
  const [isRenaming, setIsRenaming] = useState(false);
  const [newName, setNewName] = useState('');
  const [nameError, setNameError] = useState('');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [isSearchExpanded, setIsSearchExpanded] = useState(false);
+  const debouncedSearchQuery = useDebounce(searchQuery, 300);
  const inputRef = useRef(null);
+  const searchInputRef = useRef(null);

  const validateEnvironmentName = (name) => {
    if (!name || name.trim() === '') {
@@ -112,6 +117,23 @@ const EnvironmentDetails = ({ environment, setIsModified, collection }) => {
    }
  };

+  const handleSearchIconClick = () => {
+    setIsSearchExpanded(true);
+    setTimeout(() => {
+      searchInputRef.current?.focus();
+    }, 50);
+  };
+
+  const handleClearSearch = () => {
+    setSearchQuery('');
+  };
+
+  const handleSearchBlur = () => {
+    if (searchQuery === '') {
+      setIsSearchExpanded(false);
+    }
+  };
+
  const handleColorChange = (color) => {
    dispatch(updateEnvironmentColor(environment.uid, color, collection.uid))
      .then(() => {
@@ -176,6 +198,38 @@ const EnvironmentDetails = ({ environment, setIsModified, collection }) => {
        </div>
        {nameError && isRenaming && <div className="title-error">{nameError}</div>}
        <div className="actions">
+          {isSearchExpanded ? (
+            <div className="search-input-wrapper">
+              <IconSearch size={14} strokeWidth={1.5} className="search-icon" />
+              <input
+                ref={searchInputRef}
+                type="text"
+                placeholder="Search variables..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                onBlur={handleSearchBlur}
+                className="search-input"
+                autoComplete="off"
+                autoCorrect="off"
+                autoCapitalize="off"
+                spellCheck="false"
+              />
+              {searchQuery && (
+                <button
+                  className="clear-search"
+                  onClick={handleClearSearch}
+                  onMouseDown={(e) => e.preventDefault()}
+                  title="Clear search"
+                >
+                  <IconX size={14} strokeWidth={1.5} />
+                </button>
+              )}
+            </div>
+          ) : (
+            <button onClick={handleSearchIconClick} title="Search variables">
+              <IconSearch size={15} strokeWidth={1.5} />
+            </button>
+          )}
          <button onClick={handleRenameClick} title="Rename">
            <IconEdit size={15} strokeWidth={1.5} />
          </button>
@@ -189,7 +243,12 @@ const EnvironmentDetails = ({ environment, setIsModified, collection }) => {
      </div>

      <div className="content">
-        <EnvironmentVariables environment={environment} setIsModified={setIsModified} collection={collection} />
+        <EnvironmentVariables
+          environment={environment}
+          setIsModified={setIsModified}
+          collection={collection}
+          searchQuery={debouncedSearchQuery}
+        />
      </div>
    </StyledWrapper>
  );
--- a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
@@ -1,4 +1,5 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useRef, useMemo } from 'react';
+import { TableVirtuoso } from 'react-virtuoso';
 import cloneDeep from 'lodash/cloneDeep';
 import { useDispatch, useSelector } from 'react-redux';
 import {
@@ -8,7 +9,7 @@ import {
 } from 'providers/ReduxStore/slices/global-environments';
 import EnvironmentVariablesTable from 'components/EnvironmentVariablesTable';

-const EnvironmentVariables = ({ environment, setIsModified, collection }) => {
+const EnvironmentVariables = ({ environment, setIsModified, collection, searchQuery = '' }) => {
  const dispatch = useDispatch();
  const { globalEnvironmentDraft } = useSelector((state) => state.globalEnvironments);

@@ -46,6 +47,7 @@ const EnvironmentVariables = ({ environment, setIsModified, collection }) => {
      onDraftChange={handleDraftChange}
      onDraftClear={handleDraftClear}
      setIsModified={setIsModified}
+      searchQuery={searchQuery}
    />
  );
 };
--- a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/StyledWrapper.js
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/StyledWrapper.js
@@ -94,8 +94,63 @@ const StyledWrapper = styled.div`
    
    .actions {
      display: flex;
+      align-items: center;
      gap: 2px;
-      
+
+      .search-input-wrapper {
+        position: relative;
+        display: flex;
+        align-items: center;
+
+        .search-icon {
+          position: absolute;
+          left: 8px;
+          color: ${(props) => props.theme.colors.text.muted};
+          pointer-events: none;
+        }
+
+        .search-input {
+          width: 200px;
+          padding: 5px 32px 5px 32px;
+          border: 1px solid ${(props) => props.theme.input.border};
+          border-radius: ${(props) => props.theme.border.radius.sm};
+          background: ${(props) => props.theme.input.bg};
+          color: ${(props) => props.theme.text};
+          font-size: ${(props) => props.theme.font.size.base};
+          outline: none;
+          transition: border-color 0.15s ease;
+
+          &:focus {
+            border-color: ${(props) => props.theme.input.focusBorder};
+          }
+
+          &::placeholder {
+            color: ${(props) => props.theme.input.placeholder.color};
+            opacity: ${(props) => props.theme.input.placeholder.opacity};
+          }
+        }
+
+        .clear-search {
+          position: absolute;
+          right: 1px;
+          padding: 4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: ${(props) => props.theme.colors.text.muted};
+          background: transparent;
+          border: none;
+          cursor: pointer;
+          border-radius: ${(props) => props.theme.border.radius.sm};
+          transition: all 0.15s ease;
+
+          &:hover {
+            color: ${(props) => props.theme.text};
+            background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
+          }
+        }
+      }
+
      button {
        display: inline-flex;
        align-items: center;
--- a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/index.js
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/index.js
@@ -1,6 +1,7 @@
-import { IconCopy, IconEdit, IconTrash, IconCheck, IconX } from '@tabler/icons';
+import { IconCopy, IconEdit, IconTrash, IconCheck, IconX, IconSearch } from '@tabler/icons';
 import { useState, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import useDebounce from 'hooks/useDebounce';
 import { renameGlobalEnvironment, updateGlobalEnvironmentColor } from 'providers/ReduxStore/slices/global-environments';
 import { validateName, validateNameError } from 'utils/common/regex';
 import toast from 'react-hot-toast';
@@ -19,7 +20,11 @@ const EnvironmentDetails = ({ environment, setIsModified, collection }) => {
  const [isRenaming, setIsRenaming] = useState(false);
  const [newName, setNewName] = useState('');
  const [nameError, setNameError] = useState('');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [isSearchExpanded, setIsSearchExpanded] = useState(false);
+  const debouncedSearchQuery = useDebounce(searchQuery, 300);
  const inputRef = useRef(null);
+  const searchInputRef = useRef(null);

  const validateEnvironmentName = (name) => {
    if (!name || name.trim() === '') {
@@ -111,6 +116,23 @@ const EnvironmentDetails = ({ environment, setIsModified, collection }) => {
    }
  };

+  const handleSearchIconClick = () => {
+    setIsSearchExpanded(true);
+    setTimeout(() => {
+      searchInputRef.current?.focus();
+    }, 50);
+  };
+
+  const handleClearSearch = () => {
+    setSearchQuery('');
+  };
+
+  const handleSearchBlur = () => {
+    if (searchQuery === '') {
+      setIsSearchExpanded(false);
+    }
+  };
+
  const handleColorChange = (color) => {
    dispatch(updateGlobalEnvironmentColor(environment.uid, color))
      .then(() => {
@@ -178,6 +200,38 @@ const EnvironmentDetails = ({ environment, setIsModified, collection }) => {
        </div>
        {nameError && isRenaming && <div className="title-error">{nameError}</div>}
        <div className="actions">
+          {isSearchExpanded ? (
+            <div className="search-input-wrapper">
+              <IconSearch size={14} strokeWidth={1.5} className="search-icon" />
+              <input
+                ref={searchInputRef}
+                type="text"
+                placeholder="Search variables..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                onBlur={handleSearchBlur}
+                className="search-input"
+                autoComplete="off"
+                autoCorrect="off"
+                autoCapitalize="off"
+                spellCheck="false"
+              />
+              {searchQuery && (
+                <button
+                  className="clear-search"
+                  onClick={handleClearSearch}
+                  onMouseDown={(e) => e.preventDefault()}
+                  title="Clear search"
+                >
+                  <IconX size={14} strokeWidth={1.5} />
+                </button>
+              )}
+            </div>
+          ) : (
+            <button onClick={handleSearchIconClick} title="Search variables">
+              <IconSearch size={15} strokeWidth={1.5} />
+            </button>
+          )}
          <button onClick={handleRenameClick} title="Rename">
            <IconEdit size={15} strokeWidth={1.5} />
          </button>
@@ -191,7 +245,12 @@ const EnvironmentDetails = ({ environment, setIsModified, collection }) => {
      </div>

      <div className="content">
-        <EnvironmentVariables environment={environment} setIsModified={setIsModified} collection={collection} />
+        <EnvironmentVariables
+          environment={environment}
+          setIsModified={setIsModified}
+          collection={collection}
+          searchQuery={debouncedSearchQuery}
+        />
      </div>
    </StyledWrapper>
  );