Feature: Object Variable Interpolation

[TheUnCola]

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:

• 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. Object Variable Interpolation #6316

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

  • Fixed display of numeric zero values in variable information

• Improvements

  • Expanded display width for variable values in the editor
  • Enhanced text wrapping and whitespace handling for improved readability
  • Improved formatting for object values in variable display

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

[coderabbitai]

Walkthrough

CSS styling updates to the CodeMirror variable info display, including increased max-width and adjusted text wrapping behavior, paired with refined value display logic that preserves falsy values like 0 and pretty-prints objects.

Changes

Cohort / File(s)	Summary
CSS display styling packages/bruno-app/src/globalStyles.js	Replaced word-break with overflow-wrap, added white-space: pre-wrap, and increased max-width from 13.1875rem to 17.1875rem in .CodeMirror-brunoVarInfo .var-value-display
Value display rendering logic packages/bruno-app/src/utils/codemirror/brunoVarInfo.js	Refined non-secret value display logic to preserve 0, stringify objects with pretty-printing, and handle falsy values explicitly instead of collapsing them to empty strings

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• The value display logic change should be verified to ensure edge cases (particularly 0 and falsy values) are correctly handled across all variable types
• CSS changes are straightforward, but confirm the wider container width (17.1875rem) aligns with UI layout expectations

Possibly related PRs

• #6281 — Both PRs modify value-handling in brunoVarInfo.js; this PR refines display logic while the other ensures rawValue stringification for CodeMirror compatibility.

Suggested reviewers

• helloanoop
• lohit-bruno
• naman-bruno
• bijin-bruno

Poem

🎨 Zero no longer hides away,
Objects shine with formatted display,
Wraps are wider, whitespace preserved—
Every variable now gets what it deserved! ✨

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 clearly and specifically describes the main feature being added: object variable interpolation for improved developer experience.
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.}

[coderabbitai]

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 view

The switch to overflow-wrap: break-word + white-space: pre-wrap and the wider max-width is a good fit for multi-line JSON/object values and should avoid mid-word breaks.

One minor polish to consider: .var-value-display now uses max-width: 17.1875rem, while .var-value-editable-display and the editor internals still cap at 13.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 handles 0 and objects; consider a small follow-up for masked values

The new updateValueDisplay logic is a clear improvement:

• Preserves 0 instead of treating it as empty.
• Pretty-prints objects via JSON.stringify(value, null, 2), which matches the new white-space: pre-wrap styling.

One follow-up you might consider (non-blocking): getMaskedDisplay still uses (value || '').length, so masked values that are 0 or plain objects (without a length property) end up with an empty mask. If you expect secrets or masked vars to be numbers/objects as well, switching to something like String(value ?? '').length would make the masking consistent with this new display behavior.

📜 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 942186f.

📒 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() 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/globalStyles.js
• 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)