Skip to content

feat(playground): variable hover card with highlight + inline edit (BRU-4000) - #10

Closed
sundram-bruno wants to merge 1 commit into
usebruno:mainfrom
sundram-bruno:feat/variable-hover-card
Closed

feat(playground): variable hover card with highlight + inline edit (BRU-4000)#10
sundram-bruno wants to merge 1 commit into
usebruno:mainfrom
sundram-bruno:feat/variable-hover-card

Conversation

@sundram-bruno

Copy link
Copy Markdown
Contributor

What

Brings the desktop variable experience to the playground request editors (BRU-4000), building on the read-only docs card from BRU-3678.

  • Green/red {{var}} highlighting against the active environment across the request body (Monaco), URL, and params/headers/form-body cells.
  • Hover card at desktop parity — name, scope badge, resolved value, copy, secret masking. Reachable in the Monaco body via a content widget that reuses the shared VariableInfoCard.
  • Inline value editing — Enter save, Shift-Enter newline, blur save, Esc cancel. Editable for environment / collection / folder / request scopes (mirrors desktop updateVariableInScope). Read-only scopes (process.env, oauth2, $secrets, dynamic) and typed/object values stay read-only.
  • Edits write to the in-memory playground store, so the card, the highlight, and request execution update together; existing reset reverts to authored values.

How

  • Monaco body: variableDecorations.ts (highlight via createDecorationsCollection) + variableHoverWidget.ts (content-widget hover intent), wired behind a new variableAware prop on CodeEditor. Edits operate on the raw value (preserving nested {{refs}}).
  • URL bar swapped from a plain <input> to HighlightedInput.
  • Editing centralized in the resolver (useVariableResolver.updateVariable) → new setPlaygroundVariable reducer.

Acceptance criteria

  • AC1 — green/red highlight across URL/params/headers/body, live on env switch
  • AC2 — hover card parity (name, scope, value, copy, secret mask, inline edit keys)
  • AC3 — read-only scopes non-editable with note
  • AC4 — edits propagate to all render sites + execution; reset reverts
  • AC5 — works across URL, params, headers, body; card reachable on tap

Out of scope

WebSocket / gRPC / GraphQL requests are unsupported in the playground (rendered read-only via UnsupportedRequest), so they keep the docs-style read-only variable preview (uniform highlight, no edit). Extending highlight/edit there is a separate effort, best done once those request types are executable in the playground.

Testing

  • Unit tests added: setPlaygroundVariable reducer (env/collection/request scopes, secret skip) and VariableInfoCard editable gating.
  • Manually verified all ACs + edge cases (scope shadowing, per-env isolation, empty values, multi-line edit, object-typed read-only, ref-preserving edit, bottom-of-body card not clipped).

Note: the repo's local unit-test env currently has a node-html-parser/entities ESM issue that fails all useRenderToDom suites (pre-existing, not from this PR); CI runs Playwright e2e only.

🤖 Generated with Claude Code

…RU-4000)

Bring the desktop variable experience to the playground request editors:

- Green/red `{{var}}` highlighting against the active environment across the
  request body (Monaco), URL, and params/headers/form-body cells.
- Hover card at desktop parity: name, scope badge, resolved value, copy,
  secret masking; reachable in the Monaco body via a content widget that
  reuses the shared VariableInfoCard.
- Inline value editing (Enter save, Shift-Enter newline, blur save, Esc
  cancel) for environment/collection/folder/request scopes; read-only scopes
  (process.env, oauth2, $secrets, dynamic) and typed/object values stay
  read-only. Edits write to the in-memory playground store so the card,
  highlight, and request execution update together; reset reverts.

Monaco body: new variableDecorations (highlight) and variableHoverWidget
(content-widget hover intent). URL bar switched to HighlightedInput.

Out of scope: WebSocket/gRPC/GraphQL requests are unsupported in the
playground (rendered read-only via UnsupportedRequest), so they keep the
docs-style read-only variable preview.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant