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

package.json

@@ -55,7 +55,7 @@
     "pretest": "pnpm run compile",
     "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/{webview-app,data-browsing-app}/**/*.test.tsx\"",
     "ai-accuracy-tests": "env TS_NODE_FILES=true mocha -r ts-node/register --grep=\"${MOCHA_GREP}\" --file ./src/test/ai-accuracy-tests/test-setup.ts ./src/test/ai-accuracy-tests/ai-accuracy-tests.ts",
     "analyze-bundle": "webpack --mode production --analyze",
     "vscode:prepublish": "pnpm run clean && pnpm run compile:constants && pnpm run compile:resources && webpack --mode production",

scripts/check-vsix-size.ts

@@ -15,7 +15,7 @@ const vsixFileName = path.resolve(
 );
 const size = fs.statSync(vsixFileName).size;
 
-const maxSize = 12_000_000;
+const maxSize = 15_000_000;
 
 if (size >= maxSize) {
   throw new Error(

src/commands/index.ts

@@ -75,6 +75,10 @@ export const ExtensionCommand = {
   mdbStopStreamProcessor: 'mdb.stopStreamProcessor',
   mdbDropStreamProcessor: 'mdb.dropStreamProcessor',
 
+  // Commands for the data browsing upgrade.
+  mdbOpenCollectionPreviewFromTreeView:
+    'mdb.internal.openCollectionPreviewFromTreeView',
+
   // Chat participant.
   openParticipantCodeInPlayground: 'mdb.openParticipantCodeInPlayground',
   sendMessageToParticipant: 'mdb.sendMessageToParticipant',

src/explorer/collectionTreeItem.ts

@@ -6,11 +6,13 @@ import DocumentListTreeItem, {
   CollectionType,
   MAX_DOCUMENTS_VISIBLE,
 } from './documentListTreeItem';
+import ShowPreviewTreeItem from './documentListPreviewItem';
 import formatError from '../utils/formatError';
 import { getImagesPath } from '../extensionConstants';
 import IndexListTreeItem from './indexListTreeItem';
 import type TreeItemParent from './treeItemParentInterface';
 import SchemaTreeItem from './schemaTreeItem';
+import { getFeatureFlag } from '../featureFlags';
 
 function getIconPath(
   type: string,
@@ -47,22 +49,31 @@ export type CollectionDetailsType = Awaited<
 >[number];
 
 function isChildCacheOutOfSync(
-  child: DocumentListTreeItem | SchemaTreeItem | IndexListTreeItem,
+  child:
+    | ShowPreviewTreeItem
+    | DocumentListTreeItem
+    | SchemaTreeItem
+    | IndexListTreeItem,
 ): boolean {
+  if (!('isExpanded' in child)) {
+    return false;
+  }
   const isExpanded = child.isExpanded;
   const collapsibleState = child.collapsibleState;
   return isExpanded
     ? collapsibleState !== vscode.TreeItemCollapsibleState.Expanded
     : collapsibleState !== vscode.TreeItemCollapsibleState.Collapsed;
 }
 
+export type DocumentsTreeItem = ShowPreviewTreeItem | DocumentListTreeItem;
+
 export default class CollectionTreeItem
   extends vscode.TreeItem
   implements TreeItemParent, vscode.TreeDataProvider<CollectionTreeItem>
 {
   contextValue = 'collectionTreeItem' as const;
 
-  private _documentListChild: DocumentListTreeItem;
+  private _documentsChild: DocumentsTreeItem;
   private _schemaChild: SchemaTreeItem;
   private _indexListChild: IndexListTreeItem;
 
@@ -90,7 +101,7 @@ export default class CollectionTreeItem
     isExpanded,
     cacheIsUpToDate,
     cachedDocumentCount,
-    existingDocumentListChild,
+    existingDocumentsChild,
     existingSchemaChild,
     existingIndexListChild,
   }: {
@@ -100,7 +111,7 @@ export default class CollectionTreeItem
     isExpanded: boolean;
     cacheIsUpToDate: boolean;
     cachedDocumentCount: number | null;
-    existingDocumentListChild?: DocumentListTreeItem;
+    existingDocumentsChild?: DocumentsTreeItem;
     existingSchemaChild?: SchemaTreeItem;
     existingIndexListChild?: IndexListTreeItem;
   }) {
@@ -120,20 +131,41 @@ export default class CollectionTreeItem
     this.isExpanded = isExpanded;
     this.documentCount = cachedDocumentCount;
     this.cacheIsUpToDate = cacheIsUpToDate;
-    this._documentListChild = existingDocumentListChild
-      ? existingDocumentListChild
-      : new DocumentListTreeItem({
-          collectionName: this.collectionName,
-          databaseName: this.databaseName,
-          type: this._type,
-          dataService: this._dataService,
-          isExpanded: false,
-          maxDocumentsToShow: MAX_DOCUMENTS_VISIBLE,
-          cachedDocumentCount: this.documentCount,
-          refreshDocumentCount: this.refreshDocumentCount,
-          cacheIsUpToDate: false,
-          childrenCache: [], // Empty cache.
-        });
+
+    const useEnhancedDataBrowsing = getFeatureFlag(
+      'useEnhancedDataBrowsingExperience',
+    );
+
+    // Use existing child if provided, otherwise create the appropriate type
+    // based on the feature flag.
+    if (existingDocumentsChild) {
+      this._documentsChild = existingDocumentsChild;
+    } else if (useEnhancedDataBrowsing) {
+      this._documentsChild = new ShowPreviewTreeItem({
+        collectionName: this.collectionName,
+        databaseName: this.databaseName,
+        type: this._type,
+        dataService: this._dataService,
+        maxDocumentsToShow: MAX_DOCUMENTS_VISIBLE,
+        cachedDocumentCount: this.documentCount,
+        refreshDocumentCount: this.refreshDocumentCount,
+        cacheIsUpToDate: false,
+      });
+    } else {
+      this._documentsChild = new DocumentListTreeItem({
+        collectionName: this.collectionName,
+        databaseName: this.databaseName,
+        type: this._type,
+        dataService: this._dataService,
+        isExpanded: false,
+        maxDocumentsToShow: MAX_DOCUMENTS_VISIBLE,
+        cachedDocumentCount: this.documentCount,
+        refreshDocumentCount: this.refreshDocumentCount,
+        cacheIsUpToDate: false,
+        childrenCache: [], // Empty cache.
+      });
+    }
+
     this._schemaChild = existingSchemaChild
       ? existingSchemaChild
       : new SchemaTreeItem({
@@ -183,7 +215,7 @@ export default class CollectionTreeItem
     }
 
     if (this.cacheIsUpToDate) {
-      return [this._documentListChild, this._schemaChild, this._indexListChild];
+      return [this._documentsChild, this._schemaChild, this._indexListChild];
     }
 
     this.cacheIsUpToDate = true;
@@ -192,22 +224,35 @@ export default class CollectionTreeItem
     // is ensure to be set by vscode.
     this.rebuildChildrenCache();
 
-    return [this._documentListChild, this._schemaChild, this._indexListChild];
+    return [this._documentsChild, this._schemaChild, this._indexListChild];
   }
 
-  rebuildDocumentListTreeItem(): void {
-    this._documentListChild = new DocumentListTreeItem({
-      collectionName: this.collectionName,
-      databaseName: this.databaseName,
-      type: this._type,
-      dataService: this._dataService,
-      isExpanded: this._documentListChild.isExpanded,
-      maxDocumentsToShow: this._documentListChild.getMaxDocumentsToShow(),
-      cachedDocumentCount: this.documentCount,
-      refreshDocumentCount: this.refreshDocumentCount,
-      cacheIsUpToDate: this._documentListChild.cacheIsUpToDate,
-      childrenCache: this._documentListChild.getChildrenCache(),
-    });
+  rebuildDocumentsChild(): void {
+    if (this._documentsChild instanceof ShowPreviewTreeItem) {
+      this._documentsChild = new ShowPreviewTreeItem({
+        collectionName: this.collectionName,
+        databaseName: this.databaseName,
+        type: this._type,
+        dataService: this._dataService,
+        maxDocumentsToShow: MAX_DOCUMENTS_VISIBLE,
+        cachedDocumentCount: this.documentCount,
+        refreshDocumentCount: this.refreshDocumentCount,
+        cacheIsUpToDate: this._documentsChild.cacheIsUpToDate,
+      });
+    } else {
+      this._documentsChild = new DocumentListTreeItem({
+        collectionName: this.collectionName,
+        databaseName: this.databaseName,
+        type: this._type,
+        dataService: this._dataService,
+        isExpanded: this._documentsChild.isExpanded,
+        maxDocumentsToShow: this._documentsChild.getMaxDocumentsToShow(),
+        cachedDocumentCount: this.documentCount,
+        refreshDocumentCount: this.refreshDocumentCount,
+        cacheIsUpToDate: this._documentsChild.cacheIsUpToDate,
+        childrenCache: this._documentsChild.getChildrenCache(),
+      });
+    }
   }
 
   rebuildSchemaTreeItem(): void {
@@ -237,14 +282,14 @@ export default class CollectionTreeItem
   rebuildChildrenCache(): void {
     // We rebuild the children here so their controlled `expanded` state
     // is ensure to be set by vscode.
-    this.rebuildDocumentListTreeItem();
+    this.rebuildDocumentsChild();
     this.rebuildSchemaTreeItem();
     this.rebuildIndexListTreeItem();
   }
 
   needsToUpdateCache(): boolean {
     return (
-      isChildCacheOutOfSync(this._documentListChild) ||
+      isChildCacheOutOfSync(this._documentsChild) ||
       isChildCacheOutOfSync(this._schemaChild) ||
       isChildCacheOutOfSync(this._indexListChild)
     );
@@ -268,18 +313,36 @@ export default class CollectionTreeItem
     this.cacheIsUpToDate = false;
     this.documentCount = null;
 
-    this._documentListChild = new DocumentListTreeItem({
-      collectionName: this.collectionName,
-      databaseName: this.databaseName,
-      type: this._type,
-      dataService: this._dataService,
-      isExpanded: false,
-      maxDocumentsToShow: MAX_DOCUMENTS_VISIBLE,
-      cachedDocumentCount: this.documentCount,
-      refreshDocumentCount: this.refreshDocumentCount,
-      cacheIsUpToDate: false,
-      childrenCache: [], // Empty cache.
-    });
+    const useEnhancedDataBrowsing = getFeatureFlag(
+      'useEnhancedDataBrowsingExperience',
+    );
+
+    if (useEnhancedDataBrowsing) {
+      this._documentsChild = new ShowPreviewTreeItem({
+        collectionName: this.collectionName,
+        databaseName: this.databaseName,
+        type: this._type,
+        dataService: this._dataService,
+        maxDocumentsToShow: MAX_DOCUMENTS_VISIBLE,
+        cachedDocumentCount: this.documentCount,
+        refreshDocumentCount: this.refreshDocumentCount,
+        cacheIsUpToDate: false,
+      });
+    } else {
+      this._documentsChild = new DocumentListTreeItem({
+        collectionName: this.collectionName,
+        databaseName: this.databaseName,
+        type: this._type,
+        dataService: this._dataService,
+        isExpanded: false,
+        maxDocumentsToShow: MAX_DOCUMENTS_VISIBLE,
+        cachedDocumentCount: this.documentCount,
+        refreshDocumentCount: this.refreshDocumentCount,
+        cacheIsUpToDate: false,
+        childrenCache: [], // Empty cache.
+      });
+    }
+
     this._schemaChild = new SchemaTreeItem({
       collectionName: this.collectionName,
       databaseName: this.databaseName,
@@ -300,22 +363,23 @@ export default class CollectionTreeItem
     });
   }
 
-  getDocumentListChild(): DocumentListTreeItem {
-    return this._documentListChild;
+  getDocumentsChild(): DocumentsTreeItem {
+    return this._documentsChild;
   }
+
   getSchemaChild(): SchemaTreeItem {
     return this._schemaChild;
   }
+
   getIndexListChild(): IndexListTreeItem {
     return this._indexListChild;
   }
 
   getMaxDocumentsToShow(): number {
-    if (!this._documentListChild) {
-      return MAX_DOCUMENTS_VISIBLE;
+    if (this._documentsChild instanceof DocumentListTreeItem) {
+      return this._documentsChild.getMaxDocumentsToShow();
     }
-
-    return this._documentListChild.getMaxDocumentsToShow();
+    return MAX_DOCUMENTS_VISIBLE;
   }
 
   refreshDocumentCount = async (): Promise<number> => {

src/explorer/databaseTreeItem.ts

@@ -93,7 +93,7 @@ export default class DatabaseTreeItem
           isExpanded: prevChild.isExpanded,
           cacheIsUpToDate: prevChild.cacheIsUpToDate,
           cachedDocumentCount: prevChild.documentCount,
-          existingDocumentListChild: prevChild.getDocumentListChild(),
+          existingDocumentsChild: prevChild.getDocumentsChild(),
           existingSchemaChild: prevChild.getSchemaChild(),
           existingIndexListChild: prevChild.getIndexListChild(),
         });
@@ -147,8 +147,8 @@ export default class DatabaseTreeItem
             cacheIsUpToDate: pastChildrenCache[collection.name].cacheIsUpToDate,
             cachedDocumentCount:
               pastChildrenCache[collection.name].documentCount,
-            existingDocumentListChild:
-              pastChildrenCache[collection.name].getDocumentListChild(),
+            existingDocumentsChild:
+              pastChildrenCache[collection.name].getDocumentsChild(),
             existingSchemaChild:
               pastChildrenCache[collection.name].getSchemaChild(),
             existingIndexListChild: