Skip to content

Conversation

@answer-huang
Copy link

@answer-huang answer-huang commented Dec 5, 2025

Description

Add an auto-completion function to the environment variable editor to help users quickly synchronize variable names and values between different environments.

img_v3_02sm_29ea64e5-2891-4762-a99e-909067d313fg
img_v3_02sm_f81c1b99-761b-42f2-b189-2e822a3484dg

Contribution Checklist:

  • I've used AI significantly to create this pull request
  • The pull request only addresses one issue or adds one feature.
  • The pull request does not introduce any breaking changes
  • I have added screenshots or gifs to help explain the change if applicable.
  • I have read the contribution guidelines.
  • Create an issue and link to the pull request.

Note: Keeping the PR small and focused helps make it easier to review and merge. If you have multiple changes you want to make, please consider submitting them as separate pull requests.

Publishing to New Package Managers

Please see here for more information.

Summary by CodeRabbit

  • New Features

    • Autocomplete for environment variable names with suggestions sourced from other environments.
    • Value editor shows selectable value suggestions from other environments, with a toggle to show/hide.
    • Keyboard navigation for suggestion lists (Arrow keys, Enter, Escape) and improved selection behavior.
  • Style

    • Enhanced dropdown and suggestion styling, plus layout adjustments to ensure suggestion panels display and position correctly.

✏️ Tip: You can customize this high-level summary in your review settings.

Copilot AI review requested due to automatic review settings December 5, 2025 03:37
@coderabbitai
Copy link

coderabbitai bot commented Dec 5, 2025

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

Walkthrough

Adds name and value autocomplete UI to EnvironmentVariables: new AutocompleteInput and MultiLineEditorWithSuggestions components, memoized suggestion sources from other environments, and CSS for dropdowns; integrates with existing Formik handlers and preserves save/validation flows.

Changes

Cohort / File(s) Summary
Autocomplete Styling
packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js, packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
Added CSS for .autocomplete-wrapper and .value-autocomplete-wrapper and their suggestion lists (absolute positioning, theming, scrolling, hover/selection, monospace value display). Set third table column to overflow: visible and position: relative to allow dropdowns to overflow.
Autocomplete Components & Integration
packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js, packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
Added AutocompleteInput (keyboard navigation, selection, Formik-compatible change events) and MultiLineEditorWithSuggestions (suggestion toggle, outside-click handling, select-to-populate). Computed allEnvVariableNames via useMemo and getValueSuggestionsForName() to supply suggestions. Replaced name input and value editor with new components while preserving validation and save/reset behavior.

Sequence Diagram

sequenceDiagram
    autonumber
    participant User
    participant AutocompleteInput
    participant EnvVars as EnvironmentVariables
    participant OtherEnvs as Other Environments
    participant ValueEditor as MultiLineEditorWithSuggestions

    User->>AutocompleteInput: Type variable name
    AutocompleteInput->>EnvVars: Request/filter allEnvVariableNames
    EnvVars-->>AutocompleteInput: Return matches
    AutocompleteInput->>User: Show name suggestions
    User->>AutocompleteInput: Select suggestion / press Enter
    AutocompleteInput->>EnvVars: Emit onChange (Formik event)

    User->>ValueEditor: Focus or click toggle for value suggestions
    ValueEditor->>EnvVars: getValueSuggestionsForName(variableName)
    EnvVars->>OtherEnvs: Query peer environments for variableName
    OtherEnvs-->>EnvVars: Return (envName, value) pairs
    EnvVars-->>ValueEditor: Provide suggestions
    ValueEditor->>User: Show value suggestions dropdown
    User->>ValueEditor: Select a suggestion
    ValueEditor->>EnvVars: Emit onChange with selected value
    EnvVars->>User: Update field and close dropdown
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

  • Check keyboard navigation and edge cases in AutocompleteInput (Arrow Up/Down, Enter, Escape, focus loss).
  • Verify outside-click and focus handling in MultiLineEditorWithSuggestions doesn't conflict with the embedded CodeMirror editor.
  • Ensure synthetic Formik-compatible events preserve validation, touched state, and save/reset behavior.
  • Validate memoization (useMemo) and filtering logic for allEnvVariableNames and getValueSuggestionsForName() to avoid excess renders.

Poem

✨ Names that whisper, values that gleam,
A dropdown chorus — suggestions stream,
Arrow keys flicker, selections land,
Fields fill gently by a guiding hand,
Small UX sparks make editing a dream 🌟

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately reflects the main change: adding auto-completion functionality to environment variable editors across multiple components.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

♻️ Duplicate comments (1)
packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js (1)

21-143: Duplicate component: AutocompleteInput.

This component is identical to the one in the GlobalEnvironments variant. As noted in the other file, consider extracting to a shared location.

Also, suggestionsRef (line 27) is declared but unused—remove it.

🧹 Nitpick comments (7)
packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js (1)

70-101: Consider adding keyboard focus styles for accessibility.

The .suggestion-item has hover and .selected states but lacks a visible :focus indicator. Screen reader users navigating via keyboard may not see which item is selected.

         &:hover,
         &.selected {
           background-color: ${(props) => props.theme.dropdown.hoverBg};
         }
+
+        &:focus {
+          outline: 2px solid ${(props) => props.theme.dropdown.border};
+          outline-offset: -2px;
+        }
packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js (1)

70-175: Duplicate styles with local EnvironmentVariables StyledWrapper.

These autocomplete styles are nearly identical to those in packages/bruno-app/src/components/Environments/.../StyledWrapper.js. Consider extracting shared autocomplete styles to a common module to reduce maintenance burden.

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

81-86: 150ms blur delay is a fragile workaround.

This timeout-based approach to allow click events before hiding suggestions can fail on slower devices or under heavy load. Consider using onMouseDown with e.preventDefault() on the suggestions container (already present) and removing the timeout, or use a relatedTarget check.

   const handleBlur = () => {
-    setTimeout(() => {
-      setShowSuggestions(false);
-      setSelectedIndex(-1);
-    }, 150);
+    // Suggestions container uses onMouseDown with preventDefault,
+    // so blur only hides if focus moves elsewhere
+    setShowSuggestions(false);
+    setSelectedIndex(-1);
   };

If the current behavior is intentional, document why the delay is necessary.


265-283: Wrap getValueSuggestionsForName in useCallback.

This function is recreated on every render and passed to child components, potentially causing unnecessary re-renders.

-  const getValueSuggestionsForName = (variableName) => {
+  const getValueSuggestionsForName = useCallback((variableName) => {
     if (!variableName || !variableName.trim() || !globalEnvironments) {
       return [];
     }
     const suggestions = [];
     globalEnvironments.forEach((env) => {
       if (env.uid !== environment.uid && env.variables) {
         const matchingVar = env.variables.find((v) => v.name === variableName);
         if (matchingVar && matchingVar.value) {
           suggestions.push({
             envName: env.name,
             value: matchingVar.value
           });
         }
       }
     });
     return suggestions;
-  };
+  }, [globalEnvironments, environment.uid]);

You'll need to add useCallback to the imports on line 1.


140-235: Consider extracting AutocompleteInput and MultiLineEditorWithSuggestions to shared components.

These components are duplicated in both local and global environment files. Extracting them to a shared location (e.g., components/Autocomplete/) would reduce duplication and simplify maintenance.

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

129-131: Potential key collision if suggestions contain duplicates.

Using suggestion as the key assumes all suggestion strings are unique. If duplicate names exist across environments, React will warn about duplicate keys.

-            <div
-              key={suggestion}
+            <div
+              key={`${suggestion}-${index}`}
               className={`suggestion-item ${index === selectedIndex ? 'selected' : ''}`}

275-293: Wrap getValueSuggestionsForName in useCallback.

Same issue as in the global environments file—this function is recreated on every render.

-  const getValueSuggestionsForName = (variableName) => {
+  const getValueSuggestionsForName = useCallback((variableName) => {
     if (!variableName || !variableName.trim() || !collection.environments) {
       return [];
     }
     const suggestions = [];
     collection.environments.forEach((env) => {
       if (env.uid !== environment.uid && env.variables) {
         const matchingVar = env.variables.find((v) => v.name === variableName);
         if (matchingVar && matchingVar.value) {
           suggestions.push({
             envName: env.name,
             value: matchingVar.value
           });
         }
       }
     });
     return suggestions;
-  };
+  }, [collection.environments, environment.uid]);
📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b18d582 and 4ccaa0a.

📒 Files selected for processing (4)
  • packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js (2 hunks)
  • packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js (4 hunks)
  • packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js (2 hunks)
  • packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js (4 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (CODING_STANDARDS.md)

**/*.{js,jsx,ts,tsx}: Use 2 spaces for indentation, never tabs
Use single quotes for strings instead of double quotes
Always add semicolons at the end of statements
No trailing commas in code
Always use parentheses around parameters in arrow functions, even for single parameters
For multiline constructs, put opening braces on the same line with a minimum of 2 elements for multiline formatting
No newlines inside function parentheses
Space before and after the arrow in arrow functions: () => {}
No space between function name and parentheses: func() not func ()
Semicolons should go at the end of the line, not on a new line
Function names should be concise and descriptive
Add JSDoc comments to provide details to abstractions
Avoid single-line abstractions where all that is being done is increasing the call stack with one additional function
Add meaningful comments to explain complex code flow instead of obvious comments

Files:

  • packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
  • packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
  • packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
  • packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
🧠 Learnings (4)
📚 Learning: 2025-12-03T08:09:57.124Z
Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-03T08:09:57.124Z
Learning: Applies to **/*.{jsx,tsx} : Styled Components should be used as wrappers to define both self and children component styles; Tailwind classes should be used specifically for layout-based styles

Applied to files:

  • packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
  • packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
📚 Learning: 2025-12-03T08:09:57.124Z
Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-03T08:09:57.124Z
Learning: Applies to **/*.{jsx,tsx} : In styled components and React components using styled components, use the theme prop to manage CSS colors instead of CSS variables

Applied to files:

  • packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
  • packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
  • packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
📚 Learning: 2025-12-03T08:09:57.124Z
Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-03T08:09:57.124Z
Learning: Applies to **/*.{jsx,tsx} : Styled Component CSS may change layout, but Tailwind classes should not define colors

Applied to files:

  • packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
📚 Learning: 2025-12-02T20:48:05.634Z
Learnt from: NikHillAgar
Repo: usebruno/bruno PR: 6279
File: packages/bruno-app/src/components/RequestPane/PromptVariables/PromptVariablesModal/index.js:79-86
Timestamp: 2025-12-02T20:48:05.634Z
Learning: In React 19+, ref callbacks support returning cleanup functions. When a ref callback returns a function, React will call it when the element unmounts or the ref changes, similar to useEffect cleanup. This is documented at https://react.dev/learn/manipulating-the-dom-with-refs#how-to-manage-a-list-of-refs-using-a-ref-callback

Applied to files:

  • packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
🧬 Code graph analysis (1)
packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js (1)
packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js (2)
  • formik (339-372)
  • ErrorMessage (381-393)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
  • GitHub Check: Agent
🔇 Additional comments (5)
packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js (2)

26-30: LGTM on column overflow handling.

Setting overflow: visible and position: relative on the third column allows the absolute-positioned dropdown to render outside the cell boundaries. This is the correct approach for table-based layouts with dropdowns.


103-175: Styling for value autocomplete wrapper looks good.

Theme tokens are used correctly for colors as per coding standards. The toggle button positioning and suggestion item layout are well-structured.

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

409-425: Integration with MultiLineEditorWithSuggestions looks correct.

The wrapper properly passes suggestions and onChange handler while preserving the existing MultiLineEditor behavior.

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

258-273: allEnvVariableNames memoization is correct.

Good use of useMemo with appropriate dependencies to avoid recomputing on every render.


463-490: Integration looks correct; existing form validation preserved.

The autocomplete components integrate cleanly with Formik's handleChange and setFieldValue. ErrorMessage and SensitiveFieldWarning remain functional.

Copilot finished reviewing on behalf of answer-huang December 5, 2025 03:40
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This pull request adds autocomplete functionality to the environment variable editor, enabling users to synchronize variable names and values across different environments (both global and collection-level). The feature provides suggestions from other environments when editing variable names and values, improving consistency and reducing manual copying.

Key Changes

  • Introduces AutocompleteInput component for variable name autocomplete with keyboard navigation support
  • Adds MultiLineEditorWithSuggestions wrapper component to show value suggestions from other environments
  • Implements helper functions to collect and filter variable names and values across environments

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 22 comments.

File Description
packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js Adds autocomplete components and integrates them into the global environment variable editor
packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js Adds CSS styling for autocomplete dropdowns, suggestion lists, and toggle buttons
packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js Adds autocomplete components and integrates them into the collection-level environment variable editor
packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js Adds CSS styling for autocomplete dropdowns, suggestion lists, and toggle buttons

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

answer-huang and others added 3 commits December 5, 2025 21:28
…ntSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
…ntSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js

Co-authored-by: Copilot <[email protected]>
…ings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js

Co-authored-by: Copilot <[email protected]>
Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

♻️ Duplicate comments (2)
packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js (1)

80-85: Accessibility, blur timing, tests, and duplication (non-blocking)

A few non-blocking points you may want to handle in a follow-up (most already raised in earlier reviews):

  • handleBlur uses setTimeout without cleanup; if the component unmounts during the delay, it can still attempt state updates. Wrapping the timeout id in a ref and clearing it in a useEffect cleanup would make this safer.
  • The autocomplete lacks ARIA wiring: consider aria-autocomplete="list", aria-controls/id on the listbox, aria-expanded, aria-activedescendant, and role="listbox"/"option" + aria-selected on suggestions for screen readers.
  • AutocompleteInput and MultiLineEditorWithSuggestions are duplicated here and in the Environments version; extracting them into a shared component would reduce drift.
  • These two new components introduce non-trivial behaviour (keyboard nav, outside click handling, suggestion selection) but have no dedicated tests; adding focused tests for filtering and keyboard interactions would harden regressions.

Marking as follow-up since you already noted some of these for a separate PR.

Also applies to: 99-135, 17-235

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

21-143: Optional: ARIA, blur timing, tests, and DRY extraction

Similar to the GlobalEnvironments file, a few non-blocking improvements:

  • handleBlur in AutocompleteInput uses a timeout without cleanup; consider tracking the timer in a ref and clearing it in an effect cleanup to avoid state updates after unmount.
  • For better accessibility, the autocomplete could expose ARIA metadata (aria-autocomplete="list", aria-controls/id on the suggestions container with role="listbox", role="option" + aria-selected on items, and aria-expanded/aria-activedescendant on the input).
  • AutocompleteInput and MultiLineEditorWithSuggestions are duplicated between Environments and GlobalEnvironments; extracting them into shared components would simplify maintenance.
  • The new autocomplete and suggestion behaviour is untested; focused tests for filtering, keyboard navigation, and selection would be valuable.

These align with previous review feedback and can reasonably be tackled in a separate, smaller PR.

Also applies to: 85-91, 223-243, 259-295

🧹 Nitpick comments (1)
packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js (1)

146-246: Mirror read-only gating in MultiLineEditorWithSuggestions for consistency

Even though value is currently modelled as a string here, MultiLineEditorWithSuggestions is effectively the same abstraction as in the GlobalEnvironments file. To avoid divergence and future bugs if non-string values ever appear, it should mirror the read-only gating logic used there.

Concretely:

 const MultiLineEditorWithSuggestions = ({ suggestions, onChange, children, ...props }) => {
   const [showSuggestions, setShowSuggestions] = useState(false);
   const wrapperRef = useRef(null);
 
-  // Filter out suggestions that are the same as the current value
-  const filteredSuggestions = suggestions.filter(
-    (suggestion) => suggestion.value !== props.value && suggestion.value && suggestion.value.trim()
-  );
+  // Filter out suggestions that are the same as the current value
+  const isReadOnly = typeof props.value !== 'string';
+
+  const filteredSuggestions = !isReadOnly
+    ? suggestions.filter(
+        (suggestion) => suggestion.value !== props.value && suggestion.value && suggestion.value.trim()
+      )
+    : [];
 
   const hasSuggestions = filteredSuggestions.length > 0;

This keeps both implementations in lockstep and makes the component safer if its usage expands.

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 200c57d and 09d14a4.

📒 Files selected for processing (2)
  • packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js (4 hunks)
  • packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js (4 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (CODING_STANDARDS.md)

**/*.{js,jsx,ts,tsx}: Use 2 spaces for indentation, never tabs
Use single quotes for strings instead of double quotes
Always add semicolons at the end of statements
No trailing commas in code
Always use parentheses around parameters in arrow functions, even for single parameters
For multiline constructs, put opening braces on the same line with a minimum of 2 elements for multiline formatting
No newlines inside function parentheses
Space before and after the arrow in arrow functions: () => {}
No space between function name and parentheses: func() not func ()
Semicolons should go at the end of the line, not on a new line
Function names should be concise and descriptive
Add JSDoc comments to provide details to abstractions
Avoid single-line abstractions where all that is being done is increasing the call stack with one additional function
Add meaningful comments to explain complex code flow instead of obvious comments

Files:

  • packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
  • packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
🧠 Learnings (3)
📚 Learning: 2025-12-03T08:09:57.124Z
Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-03T08:09:57.124Z
Learning: Applies to **/*.{test,spec}.{js,jsx,ts,tsx} : Add tests for any new functionality or meaningful changes; update corresponding tests when code is added, removed, or significantly modified

Applied to files:

  • packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
  • packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
📚 Learning: 2025-12-02T20:48:05.634Z
Learnt from: NikHillAgar
Repo: usebruno/bruno PR: 6279
File: packages/bruno-app/src/components/RequestPane/PromptVariables/PromptVariablesModal/index.js:79-86
Timestamp: 2025-12-02T20:48:05.634Z
Learning: In React 19+, ref callbacks support returning cleanup functions. When a ref callback returns a function, React will call it when the element unmounts or the ref changes, similar to useEffect cleanup. This is documented at https://react.dev/learn/manipulating-the-dom-with-refs#how-to-manage-a-list-of-refs-using-a-ref-callback

Applied to files:

  • packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
  • packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
📚 Learning: 2025-12-03T08:09:57.124Z
Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-03T08:09:57.124Z
Learning: Applies to **/*.{jsx,tsx} : In styled components and React components using styled components, use the theme prop to manage CSS colors instead of CSS variables

Applied to files:

  • packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js

Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 10 comments.


💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant