feat: create entry point for new data browsing experience VSCODE-722 #1214

tculig · 2026-01-07T14:00:05Z

PR Summary: VSCODE-722 – Enhanced Data Browsing Experience

Overview

Introduces a webview-based data browsing experience for viewing collection documents, controlled by a feature flag (MDB_USE_ENHANCED_DATA_BROWSING_EXPERIIENCE).
The existing tree-based document list remains the default.

Key Changes

New Data Browsing Infrastructure

DataBrowsingController
New controller managing webview panels for document browsing, with support for abort controllers to cancel in-flight requests when new ones are initiated.
ShowPreviewTreeItem
New tree item that replaces DocumentListTreeItem when the feature flag is enabled. Clicking it opens the document preview webview.
preview-page.tsx
React component for the document preview webview with loading state, dark mode support, and message handling.
webviewHelpers.ts
Extracted common webview utilities (createWebviewPanel, getWebviewHtml, getNonce) for reuse between the connection dialog and the data browser.

Tree View Updates

CollectionTreeItem now conditionally renders either:
- ShowPreviewTreeItem (new)
- DocumentListTreeItem (existing)
  based on the feature flag.
Added documentUtils.ts to share the CollectionType enum and formatDocCount helper between tree items.

Extension Controller Integration

Registered new command mdb.internal.openCollectionPreviewFromTreeView to handle clicking the preview tree item.
Instantiated and wired up DataBrowsingController with proper lifecycle management (deactivation and cleanup).

Webview Controller Refactoring

Refactored webviewController.ts to use the shared webviewHelpers utilities, reducing code duplication.

Message Protocol

Added extension-app-message-constants.ts defining message types (e.g. getDocuments, loadDocuments, etc.) and interfaces for webview ↔ extension communication.

Test Infrastructure

Added unit tests for DataBrowsingController covering abort controller behavior, message handling, and panel lifecycle.
Added React component tests for PreviewApp covering loading states and message handling.
Added a polyfill for the Constructable Stylesheets API (CSSStyleSheet.replaceSync) in test setup to support @vscode-elements/react-elements.

Dependencies

Added @vscode-elements/react-elements for a VS Code–styled loading spinner.

Description

Checklist

New tests and/or benchmarks are included
Documentation is changed or added
I have signed the MongoDB Contributor License Agreement (https://www.mongodb.com/legal/contributor-agreement)

Motivation and Context

Bugfix
New feature
Dependency update
Misc

Open Questions

Dependents

Types of changes

Backport Needed
Patch (non-breaking change which fixes an issue)
Minor (non-breaking change which adds functionality)
Major (fix or feature that would cause existing functionality to change)

…rite-local

Anemy

Left a couple comments to start the discussion. There is a lot in this pr, it would likely speed things up if we broke it into multiple, by first adding just the new webview entry, and then adding the documents list, and after that the formatting for the documents.

Anemy · 2026-01-08T19:35:23Z

src/test/suite/views/data-browsing-app/preview-page.test.tsx

+          })
+        );
+        // Wait for minimum loading duration
+        await new Promise((resolve) => setTimeout(resolve, 600));


Can we avoid a constant timeout here and instead wait for the end state? Same with the setTimeouts below. There's a waitFor that some tests use.
It'll speed up all of our tests if we use that as a pattern.

hm, good point...the idea was to not have loads so fast that the user isn't sure if anything happened at all. We can just use sinon.useFakeTimers(); in the unit tests.

Anemy · 2026-01-08T19:57:20Z

src/views/data-browsing-app/preview-page.tsx

+  alignItems: 'center',
+  justifyContent: 'space-between',
+  padding: `${spacing[200]}px ${spacing[300]}px`,
+  borderBottom: '1px solid var(--vscode-panel-border, #444)',


We're going to end up using a lot of these vscode variables. How do you feel about having them all in one place? Like vscode-styles and we reference this panelBorder string from there.

Anemy · 2026-01-08T20:08:07Z

src/views/webview-app/app.tsx

+// Each vscode-api.ts calls acquireVsCodeApi() at module load time,
+// and acquireVsCodeApi() can only be called once per webview.
+const OverviewPage = lazy(() => import('./overview-page'));
+const PreviewPage = lazy(() => import('../data-browsing-app/preview-page'));


I haven't seen this in use before, cool.

it actually doesn't even work without this. It loads both pages and gets all confused...

src/views/webview-app/app.tsx

src/views/dataBrowsingController.ts

Anemy · 2026-01-08T21:11:25Z

src/views/data-browsing-app/preview-page.tsx

+}
+type ViewType = 'tree' | 'json' | 'table';
+
+const ITEMS_PER_PAGE_OPTIONS = [10, 25, 50, 100];


Can we add these later in another pr? This pr already has a lot in it. We likely want to save this in the extension settings as well.

Anemy · 2026-01-08T21:11:40Z

src/views/data-browsing-app/preview-page.tsx

+interface PreviewDocument {
+  [key: string]: unknown;
+}
+type ViewType = 'tree' | 'json' | 'table';


We won't have a table view, let's remove that.

src/views/data-browsing-app/preview-page.tsx

Anemy · 2026-01-08T21:13:42Z

src/views/data-browsing-app/preview-page.tsx

+      }}
+    >
+      {/* Toolbar */}
+      <div className={toolbarStyles}>


@vscode-elements/react-elements has a toolbar container and toolbar buttons. Should we be using those?
https://vscode-elements.github.io/components/toolbar-container/

src/views/data-browsing-app/document-tree-view.tsx

Anemy · 2026-01-09T16:04:22Z

src/mdbExtensionController.ts

+        const getTotalCount = (signal?: AbortSignal): Promise<number> =>
+          element.getTotalCount(signal);
+
+        this._dataBrowsingController.openDataBrowser(this._context, {


Can we show the view and then show the find results after? That way things are faster for the user. I think we can have things going in parallel.

Anemy · 2026-01-09T16:10:05Z

src/views/data-browsing-app/preview-page.tsx

+
+  return (
+    <div
+      style={{


Can we follow the pattern for styles that the rest of the webview does?
className={cssVariableDeclaredAtTheTop}

I understand that this will change in the next pr when we start to show the toolbar and documents, however we should avoid introducing new patterns incase someone else picks it up and assumes it's the way to go.

Anemy · 2026-01-09T16:20:29Z

src/views/data-browsing-app/vscode-api.ts

There's already a vscode-api file in the webview-app, can we share some of this logic?

I was on the fence whether to keep these separate or merge in one file...will update as you suggested

taking a second look at it, it really feels like this should be separated per folder. Its going to become a huge mess down the line if we cram it all in one file.

…rite-local

gagik · 2026-01-12T13:14:40Z

src/commands/index.ts


+  // Commands for the data browsing upgrade.
+  mdbOpenCollectionPreviewFromTreeView:
+    'mdb.internal.openCollectionPreviewFromTreeView',


if we want to .internal as a pattern, I'd expect us to do it to all the internal functions but this isn't the case right now so maybe let's stick to the old thing?

roger roger

gagik · 2026-01-12T13:16:07Z

src/featureFlags.ts

@@ -1,6 +1,6 @@
 const FEATURE_FLAGS = {
-  useOldConnectionForm:


is this unused?

it seems to be unused. I can't find any references to it.

gagik · 2026-01-12T13:17:02Z

package.json

    "test": "pnpm run test-webview && pnpm run test-extension",
    "test-extension": "cross-env MDB_IS_TEST=true NODE_OPTIONS=--no-force-async-hooks-checks xvfb-maybe node ./out/test/runTest.js",
-    "test-webview": "mocha -r ts-node/register --exit --grep=\"${MOCHA_GREP}\" --file ./src/test/setup-webview.ts src/test/suite/views/webview-app/**/*.test.tsx",
+    "test-webview": "mocha -r ts-node/register --exit --grep=\"${MOCHA_GREP}\" --file ./src/test/setup-webview.ts src/test/suite/views/**/**/*.test.tsx",


the test seems to be no longer about testing the webview with this change

I'm with you on the named imports

gagik · 2026-01-12T13:17:42Z

src/views/webview-app/vscode-api.ts

 };

-export default vscode;
+export default getVSCodeApi;


one of the reasons why I dislike default is that this rename will have no actual effect 😢

can we turn it into a named export while we're at it?

gagik · 2026-01-12T13:20:37Z

src/test/suite/mdbExtensionController.test.ts

  DEEP_LINK_ALLOWED_COMMANDS,
  DEEP_LINK_DISALLOWED_COMMANDS,
 } from '../../mdbExtensionController';
+import * as featureFlags from '../../featureFlags';


can we just do named exports?

Typically I would agree, but then I would need to refactor the stubbing mechanism to something much more complicated, and I don't really want to complicate things (this line: sandbox.stub(featureFlags, 'getFeatureFlag').returns(false);))

Fwiw, that kind of stubbing only works because we don't work with actual ESM yet, only transpiled code. Once we do, it's going to break

I'd check whether it's possible to avoid stubbing in tests entirely and, if necessary, export something from featureFlags to temporarily set feature flags in tests.

tculig added 11 commits January 7, 2026 10:48

Add data browsing scaffolding

5a48ddc

reuse webview boilerplate

b82acec

Add root data browsing UI

497e1d9

import cleanup

24c59e4

fix css

0d7dc1a

Update document-tree-view.tsx

170e48d

Update webviewHelpers.ts

0b99cf8

add abort controller

4001323

Create dataBrowsingController.test.ts

b71439e

Add data browsing unit tests

551ce10

Merge remote-tracking branch 'upstream/main' into tiho/VSCODE-722-rew…

950ddaf

…rite-local

Anemy reviewed Jan 8, 2026

View reviewed changes

tculig added 6 commits January 9, 2026 14:52

revert UI to only basics

44f67ee

PR feedback updates

5eefb98

Update package.json

ab78f15

unit test fixes

daeb172

Update setup-webview.ts

6710148

run lint

7d8cbe3

tculig marked this pull request as ready for review January 9, 2026 15:54

tculig requested a review from a team as a code owner January 9, 2026 15:54

tculig changed the title ~~Tiho/vscode 722 rewrite local~~ feat:create entry point for new data browsing experience VSCODE-722 Jan 9, 2026

tculig requested a review from Anemy January 9, 2026 15:56

tculig changed the title ~~feat:create entry point for new data browsing experience VSCODE-722~~ feat: create entry point for new data browsing experience VSCODE-722 Jan 9, 2026

Anemy reviewed Jan 9, 2026

View reviewed changes

tculig added 3 commits January 9, 2026 17:33

Merge remote-tracking branch 'upstream/main' into tiho/VSCODE-722-rew…

a5beaa8

…rite-local

Merge remote-tracking branch 'upstream/main' into tiho/VSCODE-722-rew…

9c2a51d

…rite-local

Keep vscode-api code separate

908409e

gagik reviewed Jan 12, 2026

View reviewed changes

tculig added 4 commits January 12, 2026 14:55

Update index.ts

63eb620

PR feedback updates

f653a46

lint

eae5985

don't stub feature flags, set them directly

fcc9062

feat: create entry point for new data browsing experience VSCODE-722 #1214

Are you sure you want to change the base?

feat: create entry point for new data browsing experience VSCODE-722 #1214

Uh oh!

Conversation

tculig commented Jan 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Summary: VSCODE-722 – Enhanced Data Browsing Experience

Overview

Key Changes

New Data Browsing Infrastructure

Tree View Updates

Extension Controller Integration

Webview Controller Refactoring

Message Protocol

Test Infrastructure

Dependencies

Description

Checklist

Motivation and Context

Open Questions

Dependents

Types of changes

Uh oh!

Anemy left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gagik Jan 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gagik Jan 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

tculig commented Jan 7, 2026 •

edited

Loading

gagik Jan 12, 2026 •

edited

Loading

gagik Jan 12, 2026 •

edited

Loading