Feature: Object Variable Interpolation#6317
Conversation
Added styling changes to accommodate objects
TheUnCola
requested review from
bijin-bruno,
helloanoop,
lohit-bruno and
naman-bruno
as code owners
WalkthroughCSS for the CodeMirror variable info display was adjusted (wrapping and max-width) and brunoVarInfo updateValueDisplay was changed to explicitly handle objects, undefined, and preserve falsy values like 0. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
packages/bruno-app/src/globalStyles.js (1)
323-334: Updated wrapping/max-width works for pretty-printed values; consider aligning widths with editable viewThe switch to
overflow-wrap: break-word+white-space: pre-wrapand the widermax-widthis a good fit for multi-line JSON/object values and should avoid mid-word breaks.One minor polish to consider:
.var-value-displaynow usesmax-width: 17.1875rem, while.var-value-editable-displayand the editor internals still cap at13.1875rem. If the intent is to have read-only and editable views feel identical in width, it may be worth standardizing these values in a follow-up.packages/bruno-app/src/utils/codemirror/brunoVarInfo.js (1)
88-93: Display logic now correctly handles0and objects; consider a small follow-up for masked valuesThe new
updateValueDisplaylogic is a clear improvement:
- Preserves
0instead of treating it as empty.- Pretty-prints objects via
JSON.stringify(value, null, 2), which matches the newwhite-space: pre-wrapstyling.One follow-up you might consider (non-blocking):
getMaskedDisplaystill uses(value || '').length, so masked values that are0or plain objects (without alengthproperty) end up with an empty mask. If you expect secrets or masked vars to be numbers/objects as well, switching to something likeString(value ?? '').lengthwould make the masking consistent with this new display behavior.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
packages/bruno-app/src/globalStyles.js(1 hunks)packages/bruno-app/src/utils/codemirror/brunoVarInfo.js(1 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/globalStyles.jspackages/bruno-app/src/utils/codemirror/brunoVarInfo.js
🧬 Code graph analysis (1)
packages/bruno-app/src/utils/codemirror/brunoVarInfo.js (1)
packages/bruno-app/src/utils/common/codemirror.js (1)
value(8-8)
| valueDisplay.textContent = getMaskedDisplay(value); | ||
| } else { | ||
| valueDisplay.textContent = value || ''; | ||
| valueDisplay.textContent = !value && value !== 0 ? '' : typeof value === 'object' ? JSON.stringify(value, null, 2) : value; |
There was a problem hiding this comment.
| valueDisplay.textContent = !value && value !== 0 ? '' : typeof value === 'object' ? JSON.stringify(value, null, 2) : value; | |
| switch (typeof value) { | |
| case 'undefined': | |
| case 'function': | |
| valueDisplay.textContent = typeof value; | |
| case 'object': | |
| valueDisplay.textContent = value === null ? 'null' : JSON.stringify(value, null, 2); | |
| default: | |
| valueDisplay.textContent = String(value); | |
| } |
I feel like using a switch to cover all possible values/edge-cases would be better for values like null, undefined etc.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/bruno-app/src/utils/codemirror/brunoVarInfo.js (1)
99-99: Redundant undefined check.The condition
typeof value === 'undefined' || value === undefinedis redundant. The second check is always true if the first check is true.Apply this diff to simplify:
- if (typeof value === 'undefined' || value === undefined) { + if (typeof value === 'undefined') { valueDisplay.textContent = ''; return; }
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/bruno-app/src/utils/codemirror/brunoVarInfo.js(1 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. No tabs, just spaces
Stick to single quotes for strings. For JSX/TSX attributes, use double quotes (e.g., )
Always add semicolons at the end of statements
No trailing commas
Always use parentheses around parameters in arrow functions, even for single params
For multiline constructs, put opening braces on the same line, and ensure consistency. Minimum 2 elements for multiline
No newlines inside function parentheses
Space before and after the arrow in arrow functions.() => {}is good
No space between function name and parentheses.func()notfunc ()
Semicolons go at the end of the line, not on a new line
Names for functions need to be concise and descriptive
Add in JSDoc comments to add more details to the abstractions if needed
Add in meaningful comments instead of obvious ones where complex code flow is explained properly
Files:
packages/bruno-app/src/utils/codemirror/brunoVarInfo.js
🧬 Code graph analysis (1)
packages/bruno-app/src/utils/codemirror/brunoVarInfo.js (1)
packages/bruno-app/src/utils/common/codemirror.js (1)
value(8-8)
🔇 Additional comments (2)
packages/bruno-app/src/utils/codemirror/brunoVarInfo.js (2)
94-97: LGTM! Object handling is well-implemented.The explicit handling for objects (null vs. non-null) with JSON.stringify provides clear, readable output for variable values. This aligns perfectly with the PR objective to make object contents visible inline.
88-105: Clean control flow with early returns.The refactored logic correctly handles all value types:
- Secret/masked values (with early return)
- Objects (null vs. stringified)
- Undefined (cleared display)
- Primitives (preserving falsy values like 0)
The early return pattern is readable and avoids the pitfalls of the old
value || ''approach.
3 participants
Description
Adds object interpolation to {{variables}} in a request body. Reduces time for consumers by not having to swap back and forth between the variables page and a request to see the data in a variable object.
Variable:
Problem:
Solution:
Now that the contents of the object are visible, dot notation can be used to grab any value from that object:
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
Bug Fixes
Improvements
✏️ Tip: You can customize this high-level summary in your review settings.