Link Collection View, Query Playground, and the Interactive Shell#589
Merged
tnaum-ms merged 26 commits intorel/release_0.8.0from Apr 17, 2026
Merged
Link Collection View, Query Playground, and the Interactive Shell#589tnaum-ms merged 26 commits intorel/release_0.8.0from
tnaum-ms merged 26 commits intorel/release_0.8.0from
Conversation
Refactor newPlayground.ts to extract shared createPlaygroundWithContent() utility. Add newPlaygroundWithContent() that accepts explicit connection params and content string for cross-feature navigation. Register new command ID: playground.newWithContent
Add optional initialInput to DocumentDBShellPtyOptions. After init completes and the first prompt renders, the text is injected into the input handler without executing — the user can review and press Enter. Add openInteractiveShellWithInput() for programmatic invocation with explicit connection params + initial input. Register as command.
Add ToolbarOpenIn component with two buttons: Playground (CodeRegular icon) and Shell (WindowConsoleRegular icon). Each reads the current query editor values and calls a new tRPC mutation. Add openInPlayground and openInShell mutations to collectionViewRouter. Add buildFindExpression helper to construct find() expressions from filter/project/sort state.
Add 📝 sentinel (PLAYGROUND_ACTION_PREFIX) alongside existing 🔗 for
Collection View. Both links appear on the same terminal output line:
🔗 [db.collection] 📝 [db.collection]
The link provider now returns multiple links per line. Clicking 📝
opens a new playground with db.getCollection('coll').find({}).
Add PlaygroundTerminalLink type and PLAYGROUND_LINE_PATTERN regex.
Add 3 new tests covering single/dual link detection and click handler.
Add per-block CodeLens items: 'Collection View' and 'Shell' next to the existing 'Run' lens. Only shown when the playground has a connection. - Collection View: extracts collection name from code block, opens CV - Shell: takes full code block text as initialInput Add extractCollectionName utility with 8 tests covering getCollection(), direct access, builtins, multiline, and special characters.
Add Copy (CopyRegular icon) and Paste (ClipboardPasteRegular icon) buttons. Copy builds a find expression and copies to clipboard via vscode.env.clipboard. Paste reads clipboard, parses the find expression using parseFindExpression, and updates the query editors via a pendingPaste context mechanism. Add parseFindExpression utility with bracket-matching parser for extracting filter/project/sort from find() expressions. 10 tests. Add pendingPaste field to CollectionViewContextType. QueryEditor watches for pending paste values and applies them to Monaco editors, expanding enhanced query mode if project/sort are present.
…→CV query extraction 1. Switch Collection View toolbar buttons to use last-executed query (activeQuery) instead of current editor values (getCurrentQuery). 2. Add extra space between codicon and text in Playground CodeLens. 3. Playground→Collection View now extracts filter/project/sort via parseFindExpression and passes as initialQuery through the CollectionViewController configuration → pendingPaste. 4. Add initialQuery field to CollectionViewWebviewConfigurationType and openCollectionViewInternal props.
Shell terminal: 📄 (U+1F4C4) for Collection View, ⌨ (U+2328) for Playground Playground CodeLens: $(files) for Collection View, $(terminal) for Shell Collection View toolbar: KeyboardRegular for Playground, WindowConsoleRegular for Shell Matches the icons used in the tree view commands: - Open Collection: $(files) - New Query Playground: $(keyboard) - Open Interactive Shell: $(terminal)
1. When Collection View opens with initialQuery (from Playground or Shell), set both pendingPaste (populate editors) and activeQuery with executionIntent: 'initial' (trigger execution immediately). 2. Use ⌨️ (U+2328 + U+FE0F variation selector) instead of plain ⌨ (U+2328) for the Playground sentinel in shell terminal output. The variation selector forces emoji-width rendering, fixing the narrow single-column display issue. Regex updated to optionally match the variation selector for robustness.
- buildFindExpression: appends .skip(N) and .limit(N) when non-zero - parseFindExpression: extracts .skip(N) and .limit(N) via regex - Router mutations: all three (openInPlayground, openInShell, copyQueryToClipboard) accept and forward skip/limit - pasteQueryFromClipboard: returns parsed skip/limit - pendingPaste type: includes skip/limit - QueryEditor: applies pasted skip/limit values - CollectionView: passes initialQuery skip/limit to activeQuery - Controller + openCollectionViewInternal: accept skip/limit in initialQuery type - 2 new tests for skip/limit parsing
Replace emoji sentinels (📄, ⌨️) with text-based format: ↗ Collection View [db.coll] ↗ Query Playground [db.coll] Labels are non-localized (used as regex sentinels). Only tooltips are localized. ↗ (U+21D7) with two-space indent for visual offset. Regexes updated to match the new text-based patterns.
…Content The linked playground template (from CV/Shell) was missing the '// Note: when running multiple statements...' line that the original newPlayground includes. Now both produce identical headers.
Merge ToolbarDataOperations and ToolbarOpenIn into a single ToolbarSecondaryActions component wrapped with Fluent UI Overflow. When the toolbar is too narrow, items collapse into a '...' overflow menu (MoreHorizontalRegular icon) from lowest to highest priority: 1. Import 2. Export 3. Copy 4. Paste 5. Playground 6. Shell Uses OverflowItem per action, useOverflowMenu for the menu button, and useIsOverflowItemVisible for conditional menu item rendering. Export sub-items (Entire Collection / Query Results) appear as individual menu items when overflowed. CSS: allow the Overflow container to shrink via min-width: 0.
…r between import/export and query-transfer actions
…r action management and add group separation
Contributor
There was a problem hiding this comment.
Pull request overview
Adds cross-feature navigation between Collection View, Query Playground, and the Interactive Shell to let users move queries across surfaces (and clipboard) with minimal friction.
Changes:
- Collection View: adds secondary toolbar actions (Import/Export + Copy/Paste + Open in Playground/Shell) with FluentUI Overflow behavior.
- Adds cross-surface commands and tRPC mutations to open Playground/Shell with pre-filled query content and to copy/paste queries via clipboard.
- Shell + Playground: adds terminal links and playground CodeLens actions for navigation; introduces lightweight parsing helpers (
extractCollectionName,parseFindExpression) with tests.
Reviewed changes
Copilot reviewed 26 out of 26 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| src/webviews/documentdb/collectionView/components/toolbar/ToolbarMainView.tsx | Adds overflowed secondary toolbar actions (copy/paste + open in playground/shell). |
| src/webviews/documentdb/collectionView/components/queryEditor/QueryEditor.tsx | Applies pendingPaste values into editor state and then clears the flag. |
| src/webviews/documentdb/collectionView/collectionViewRouter.ts | Adds mutations for open-in-playground/shell and clipboard copy/paste (server-side). |
| src/webviews/documentdb/collectionView/collectionViewController.ts | Extends webview configuration to accept an optional initialQuery. |
| src/webviews/documentdb/collectionView/collectionViewContext.ts | Adds pendingPaste to the shared context to support paste/initial-query injection. |
| src/webviews/documentdb/collectionView/collectionView.scss | Switches toolbar layout to CSS Grid and adds Overflow-related styles/wrappers. |
| src/webviews/documentdb/collectionView/CollectionView.tsx | Applies configuration.initialQuery on mount (pre-populates + triggers initial execution). |
| src/documentdb/shell/ShellTerminalLinkProvider.ts | Adds a new terminal link type for opening Query Playground from shell output. |
| src/documentdb/shell/ShellTerminalLinkProvider.test.ts | Adds tests for playground action-line link detection and command execution. |
| src/documentdb/shell/DocumentDBShellPty.ts | Adds initialInput prefill and writes two action links (Collection View + Playground). |
| src/documentdb/playground/parseFindExpression.ts | Adds a heuristic parser for extracting find() arguments and sort/skip/limit. |
| src/documentdb/playground/parseFindExpression.test.ts | Adds unit tests for find-expression parsing behavior. |
| src/documentdb/playground/extractCollectionName.ts | Adds utility to extract a collection name from common playground patterns. |
| src/documentdb/playground/extractCollectionName.test.ts | Adds unit tests for collection-name extraction behavior. |
| src/documentdb/playground/constants.ts | Adds new playground command IDs for navigation and “new with content”. |
| src/documentdb/playground/PlaygroundCodeLensProvider.ts | Adds CodeLens actions to open a block in Collection View or Shell. |
| src/documentdb/ClustersExtension.ts | Registers new commands for playground navigation and shell-with-input. |
| src/commands/playground/playgroundOpenInShell.ts | Implements Playground → Shell navigation with pre-filled input. |
| src/commands/playground/playgroundOpenInCollectionView.ts | Implements Playground → Collection View navigation with optional query handoff. |
| src/commands/playground/newPlayground.ts | Adds newPlaygroundWithContent and factors shared playground creation logic. |
| src/commands/openInteractiveShell/openInteractiveShell.ts | Adds openInteractiveShellWithInput for cross-feature navigation. |
| src/commands/openCollectionView/openCollectionView.ts | Plumbs initialQuery through to the Collection View webview config. |
| l10n/bundle.l10n.json | Adds localization strings for new UI actions and navigation tooltips. |
| docs/ai-and-plans/10-cross-feature-links.md | Adds implementation documentation for the cross-feature navigation plan. |
| .github/skills/fluentui/references/OVERFLOW_PATTERNS.md | Adds internal reference for FluentUI Overflow patterns used in webviews. |
| .github/skills/fluentui/SKILL.md | Adds a FluentUI skill summary pointing to Overflow patterns and pitfalls. |
…SDoc - Add optional ANSI color code matching (\x1b[\d+m) to PLAYGROUND_LINE_PATTERN, aligning it with ACTION_LINE_PATTERN so playground links are detected in colored terminals (C1) - Update JSDoc sentinels from emoji (🔗/📝) to the actual arrow prefix (↗ Collection View / ↗ Query Playground) - Fix doubled/orphaned JSDoc blocks — each block now sits directly above its target constant/pattern - Update inline comments for consistency
Extract shared escapeJsString() utility and use it in all locations that interpolate collection names into single-quoted JS strings: - buildFindExpression() in collectionViewRouter.ts (C3) - handleTerminalLink() in ShellTerminalLinkProvider.ts (C2) - newPlayground() template in newPlayground.ts (C4) - Update comment in PlaygroundCompletionItemProvider.ts Prevents malformed JS when collection names contain ' or \ characters.
…ut (C5) - pasteQueryFromClipboard now throws with a user-visible error message when clipboard is empty or doesn't contain a recognizable find() query - Require at least one transferable query component (filter, project, sort, skip, limit) before reporting success - Add .catch() to the paste Promise chain in ToolbarMainView to prevent unhandled rejections
…rent query (C6/C7) - Remove unused groupId prop from OverflowGroupDivider (C6) - Replace readonly mutation via type casts with a mutable local object in parseFindExpression (C7) - Use live editor values (getCurrentQuery) instead of last-executed query for Copy/Playground/Shell toolbar actions - Remove unnecessary isEnhancedQueryMode from pendingPaste effect deps
Skip Collection View and Shell CodeLens for comment-only blocks (e.g., the header comment block). Navigation links now only appear on blocks that contain actual code statements.
- Add clusterDisplayName to RouterContext so Playground headers and Shell titles show human-readable names instead of cluster IDs - Add clusterDisplayName to CollectionViewWebviewConfigurationType and thread it through openCollectionView, ShellTerminalLinkProvider, DocumentsItem, and vscodeUriHandler - Add viewId to PlaygroundConnection so Playground → Collection View navigation uses the correct branch data provider - Pass viewId through NewPlaygroundWithContentParams and the collectionViewRouter openInPlayground/openInShell mutations
tnaum-ms
commented
Apr 17, 2026
Collaborator
Author
tnaum-ms
left a comment
tnaum-ms
left a comment
There was a problem hiding this comment.
C1 — ANSI escape codes in PLAYGROUND_LINE_PATTERN
Fixed in 21ecea5. Added optional \x1b[\d+m sequences to PLAYGROUND_LINE_PATTERN so it matches the same ANSI wrapping as ACTION_LINE_PATTERN. Also updated all stale JSDoc emoji sentinels (🔗/📝 → ↗) and deduplicated orphaned comment blocks.
C2/C3/C4 — Collection name injection
Fixed in 51b5ba6. Extracted shared escapeJsString() utility in src/utils/escapeJsString.ts and applied it in:
buildFindExpression()(C3)ShellTerminalLinkProvider.handleTerminalLink()(C2)newPlayground()template (C4)
C5 — Missing .catch() on paste Promise
Fixed in d9fd6f5. pasteQueryFromClipboard now throws with localized error messages when clipboard is empty or has no recognizable find() query. Added .catch() on the client side. Also tightened the success criteria to require at least one transferable query component (filter/project/sort/skip/limit).
C6 — Unused groupId prop
Fixed in ed129fb. Removed the unused groupId prop from OverflowGroupDivider.
C7 — readonly mutation via casts
Fixed in ed129fb. Replaced (result as { field: type }).field = ... casts with a mutable local object in parseFindExpression(), returning it as the readonly interface.
Collaborator
Author
Additional review findings — addressedStale data: toolbar uses last-executed query instead of current editor valuesFixed in ed129fb. CodeLens appears on comment-only blocksFixed in 692a7c1. Added clusterDisplayName falls back to clusterIdFixed in b0d3940. Added viewId not threaded through PlaygroundConnectionFixed in b0d3940. Added optional Unsupported paste input treated as successFixed in d9fd6f5. Paste now requires at least one transferable query component and throws with a localized error message on failure. pendingPaste effect has unnecessary isEnhancedQueryMode dependencyFixed in ed129fb. Removed |
github-project-automation
Bot
moved this to Done
in DocumentDB for VSCode: Release Plan
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
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.
No description provided.