feat(playground): variable hover card with highlight and inline edit - #11
Merged
arpit-bruno merged 12 commits intoJul 29, 2026
Merged
Conversation
sundram-bruno
force-pushed
the
feat/variable-hover-card
branch
2 times, most recently
from
July 28, 2026 07:04
58a5f91 to
9c550fa
Compare
sundram-bruno
marked this pull request as draft
July 28, 2026 07:05
Brings the desktop variable experience to the playground request editors.
Behavioural changes:
- `{{var}}` tokens are coloured green (resolved) or red (unresolved) against the
active environment in the request body, URL, and params/headers/form cells;
colours update when the environment changes.
- Hovering a `{{var}}` shows a card with its name, scope, resolved value and a
copy button; secrets stay masked.
- The value can be edited inline from the card (Enter save, Shift-Enter newline,
blur save, Esc cancel) for environment, collection, folder and request scoped
string variables. Read-only scopes (process.env, oauth2, $secrets, dynamic),
secrets and typed/object values are not editable.
- An edit updates the card, the highlighting and the request that is sent
together; reset reverts to the authored value.
WebSocket, gRPC and GraphQL requests are unsupported in the playground and keep
their existing read-only variable preview.
sundram-bruno
force-pushed
the
feat/variable-hover-card
branch
from
July 28, 2026 07:18
9c550fa to
13a5b96
Compare
- Gate inline editing on a writable resolver, set only where the provider wraps
the playground collection, so docs and settings surfaces cannot offer an edit
that would be written to the wrong collection.
- Replace an embedded NUL byte in the repaint signature separator, which made
CodeEditor.tsx unreadable as text.
- Re-arm the hover-card close once focus leaves the card, so it no longer stays
open indefinitely after an edit ends.
- Reuse the shared `{{var}}` token regex and `getItemUuid` in place of local
copies, and derive the empty-value label once.
- Activate the editable value on Space as well as Enter, and give the edit field
an accessible name.
- Take the hover widget's stacking and shadow from theme tokens.
- Give the input token spans a test id, scope the playground variable page
object to the playground view, extend the existing variable-card component and
drive the spec through fixtures.
- Write a variable edit only to the hydrated collection. The base copy's items carry no uuid, so an item-scoped write silently missed it while environment and collection writes landed in both — an asymmetry with no reader to justify it. - Skip disabled entries when picking the folder that owns an edited variable, so the write is not addressed to a folder the reducer will then skip. - Re-layout the editor hover card whenever its size changes: Monaco pins the widget's top, so the growing edit field otherwise pushed the card down over the token it belongs to. - Cover the editor hover path in e2e: card contents on hover, and the card staying clear of its token as the edit field grows.
sundram-bruno
marked this pull request as ready for review
July 28, 2026 09:07
sachin-bruno
approved these changes
Jul 28, 2026
…e playground component
# Conflicts: # packages/bruno-api-docs/e2e/components/playground.component.ts # packages/bruno-api-docs/src/ui/CodeEditor/CodeEditor.tsx
arpit-bruno
requested changes
Jul 28, 2026
- Pass the hover card into CodeEditor as a render prop so ui/ no longer imports from components/, keeping the dependency one-way. - Write a variable edit to both collection copies again, matching the other collection-mutating reducers. - Cover the remaining inline-edit paths in e2e: Escape discards, blur saves, and Shift-Enter inserts a newline. - Note why the editor token locators match a class rather than a test id.
# Conflicts: # packages/bruno-api-docs/src/components/HighlightedInput/HighlightedInput.tsx # packages/bruno-api-docs/src/components/Playground/Content/Views/Common/BodyTab.tsx
arpit-bruno
approved these changes
Jul 29, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Brings variable highlighting, the hover card and inline editing to the playground request editors. Previously the playground fields had no variable highlighting, no hover card, and no way to inspect or edit a variable in place.
JIRA : BRU-4000
Behavioural changes
{{var}}tokens are coloured green (resolved) or red (unresolved) against the active environment, in the request body, URL, and params/headers/form-body cells. Colours update live when the environment is switched.{{var}}shows a card with its name, scope badge, resolved value and a copy button. Secret variables stay masked.process.env,oauth2,$secrets, dynamic), secrets, and typed or multi-variant values are not editable.Not included
WebSocket, gRPC and GraphQL requests are unsupported in the playground and keep their existing read-only variable preview.