-
Notifications
You must be signed in to change notification settings - Fork 2k
Add an auto-completion function to the environment variable #6318
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Add an auto-completion function to the environment variable #6318
Conversation
|
Note Other AI code review bot(s) detectedCodeRabbit 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. WalkthroughAdds 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
Sequence DiagramsequenceDiagram
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
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
There was a problem hiding this 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-itemhas hover and.selectedstates but lacks a visible:focusindicator. 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
onMouseDownwithe.preventDefault()on the suggestions container (already present) and removing the timeout, or use arelatedTargetcheck.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: WrapgetValueSuggestionsForNameinuseCallback.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
useCallbackto the imports on line 1.
140-235: Consider extractingAutocompleteInputandMultiLineEditorWithSuggestionsto 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
suggestionas 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: WrapgetValueSuggestionsForNameinuseCallback.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
📒 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()notfunc ()
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.jspackages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.jspackages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.jspackages/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.jspackages/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.jspackages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.jspackages/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: visibleandposition: relativeon 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:allEnvVariableNamesmemoization is correct.Good use of
useMemowith 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
handleChangeandsetFieldValue. ErrorMessage and SensitiveFieldWarning remain functional.
...onments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
Show resolved
Hide resolved
There was a problem hiding this 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
AutocompleteInputcomponent for variable name autocomplete with keyboard navigation support - Adds
MultiLineEditorWithSuggestionswrapper 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.
...onments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
Show resolved
Hide resolved
...onments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
Show resolved
Hide resolved
...onments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
Show resolved
Hide resolved
...onments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
Show resolved
Hide resolved
...onments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
Show resolved
Hide resolved
...EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
Show resolved
Hide resolved
...onments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
Show resolved
Hide resolved
...onments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
Show resolved
Hide resolved
...onments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
Show resolved
Hide resolved
...onments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
Show resolved
Hide resolved
…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]>
There was a problem hiding this 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):
handleBlurusessetTimeoutwithout 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 auseEffectcleanup would make this safer.- The autocomplete lacks ARIA wiring: consider
aria-autocomplete="list",aria-controls/idon the listbox,aria-expanded,aria-activedescendant, androle="listbox"/"option" + aria-selectedon suggestions for screen readers.AutocompleteInputandMultiLineEditorWithSuggestionsare 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 extractionSimilar to the GlobalEnvironments file, a few non-blocking improvements:
handleBlurinAutocompleteInputuses 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/idon the suggestions container withrole="listbox",role="option"+aria-selectedon items, andaria-expanded/aria-activedescendanton the input).AutocompleteInputandMultiLineEditorWithSuggestionsare 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 inMultiLineEditorWithSuggestionsfor consistencyEven though
valueis currently modelled as a string here,MultiLineEditorWithSuggestionsis 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
📒 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()notfunc ()
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.jspackages/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.jspackages/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.jspackages/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
...onments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
Show resolved
Hide resolved
...onments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
Show resolved
Hide resolved
There was a problem hiding this 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.
Description
Add an auto-completion function to the environment variable editor to help users quickly synchronize variable names and values between different environments.
Contribution Checklist:
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
Style
✏️ Tip: You can customize this high-level summary in your review settings.