mongodb-js · lerouxb · Oct 21, 2025 · Sep 29, 2025 · Sep 30, 2025 · Oct 10, 2025
@@ -46,20 +46,21 @@ export type UseChatHelpers<UI_MESSAGE extends UIMessage> = {
   | 'clearError'
 >;
 
-export type UseChatOptions<UI_MESSAGE extends UIMessage> =
-  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
-  ({ chat: Chat<UI_MESSAGE> } | ChatInit<UI_MESSAGE>) & {
-    /**
+export type UseChatOptions<UI_MESSAGE extends UIMessage> = (
+  | { chat: Chat<UI_MESSAGE> }
+  | ChatInit<UI_MESSAGE>
+) & {
+  /**
 Custom throttle wait in ms for the chat messages and data updates.
 Default is undefined, which disables throttling.
    */
-    experimental_throttle?: number;
+  experimental_throttle?: number;
 
-    /**
-     * Whether to resume an ongoing chat generation stream.
-     */
-    resume?: boolean;
-  };
+  /**
+   * Whether to resume an ongoing chat generation stream.
+   */
+  resume?: boolean;
+};
 
 export function useChat<UI_MESSAGE extends UIMessage = UIMessage>({
   experimental_throttle: throttleWaitMs,

@@ -53,19 +53,25 @@ import {
   TableBody,
   flexRender,
   useLeafyGreenTable,
+  useLeafyGreenVirtualTable,
+  type LeafyGreenVirtualItem,
   getExpandedRowModel,
   getFilteredRowModel,
+  type TableProps,
 } from '@leafygreen-ui/table';
 import type { Row as LgTableRowType } from '@tanstack/table-core'; // TODO(COMPASS-8437): import from LG
 
 export type {
   LGColumnDef,
   HeaderGroup,
+  LeafyGreenVirtualTable,
+  LeafyGreenTable,
   LeafyGreenTableCell,
   LeafyGreenTableRow,
   LGTableDataType,
   LGRowData,
   SortingState,
+  CellContext,
 } from '@leafygreen-ui/table';
 import { Tabs, Tab } from '@leafygreen-ui/tabs';
 import TextArea from '@leafygreen-ui/text-area';
@@ -200,6 +206,9 @@ export {
   InfoSprinkle,
   flexRender,
   useLeafyGreenTable,
+  useLeafyGreenVirtualTable,
+  type LeafyGreenVirtualItem,
+  type TableProps,
   getExpandedRowModel,
   getFilteredRowModel,
   type LgTableRowType,

@@ -8,7 +8,7 @@ export async function navigateToDatabaseCollectionsTab(
   dbName: string
 ): Promise<void> {
   await browser.navigateToConnectionTab(connectionName, 'Databases');
-  await browser.clickVisible(Selectors.databaseCardClickable(dbName));
+  await browser.clickVisible(`${Selectors.databaseRow(dbName)} td:first-child`);
   await waitUntilActiveDatabaseTab(browser, connectionName, dbName);
 }
 

@@ -49,8 +49,33 @@ export async function scrollToVirtualItem(
   browser: CompassBrowser,
   containerSelector: string,
   targetSelector: string,
-  role: 'grid' | 'tree'
+  role: 'grid' | 'tree' | 'table'
 ): Promise<boolean> {
+  if (role === 'table') {
+    // we disable virtual scrolling for tables for now
+    const expectedRowCount = parseInt(
+      await browser
+        .$(`${containerSelector} table`)
+        .getAttribute('aria-rowcount'),
+      10
+    );
+    const rowCount = await browser.$$('tbody tr').length;
+
+    if (rowCount !== expectedRowCount) {
+      throw new Error(
+        `${rowCount} rows found, but expected ${expectedRowCount}. Is virtual rendering of the table disabled as expected?`
+      );
+    }
+
+    const targetElement = browser.$(targetSelector);
+    await targetElement.waitForExist();
+    // align the bottom of the element to the bottom of the view so it doesn't
+    // sit under the sticky header
+    await targetElement.scrollIntoView(false);
+    await targetElement.waitForDisplayed();
+    return true;
+  }
+
   const config = role === 'tree' ? treeConfig : gridConfig;
 
   let found = false;

@@ -660,6 +660,10 @@ async function startCompassElectron(
   // Making sure end-of-life connection modal is not shown, simplify any test connecting to such a server
   process.env.COMPASS_DISABLE_END_OF_LIFE_CONNECTION_MODAL = 'true';
 
+  // TODO(COMPASS-9977) Turn off virtual scrolling in e2e tests until we can fix
+  // browser.scrollToVirtualItem() to work with it
+  process.env.COMPASS_DISABLE_VIRTUAL_TABLE_RENDERING = 'true';
+
   const options = {
     automationProtocol: 'webdriver' as const,
     capabilities: {

@@ -503,56 +503,47 @@ export const ShellInput = '[data-testid="shell-input"]';
 export const ShellOutput = '[data-testid="shell-output"]';
 
 // Instance screen
-export const DatabasesTable = '[data-testid="database-grid"]';
+export const DatabasesTable = '[data-testid="databases-list"]';
 export const InstanceCreateDatabaseButton =
   '[data-testid="create-controls"] button';
 export const InstanceRefreshDatabaseButton =
   '[data-testid="refresh-controls"] button';
-export const DatabaseCard = '[data-testid="database-grid-item"]';
-// assume that there's only one hovered card at a time and that the first and only button is the drop button
-export const DatabaseCardDrop =
-  '[data-testid="database-grid"] [data-testid="namespace-card-actions"] button';
-export const ServerStats = '.serverstats';
-export const DatabaseStatLoader = `${DatabaseCard} [data-testid="namespace-param-fallback"][data-ready=false]`;
+export const DatabaseStatLoader =
+  '[data-testid="databases-list"] [data-testid="placeholder"]';
 
-export const databaseCard = (dbName: string): string => {
-  return `${DatabaseCard}[data-id="${dbName}"]`;
+export const databaseRow = (dbName: string): string => {
+  return `[data-testid="databases-list-row-${dbName}"]`;
 };
 
-export const databaseCardClickable = (dbName: string): string => {
-  // webdriver does not like clicking on the card even though the card has the
-  // click handler, so click on the title
-  return `${databaseCard(dbName)} [title="${dbName}"]`;
+export const databaseRowDrop = (dbName: string): string => {
+  return `${databaseRow(dbName)} button[data-action="delete"]`;
 };
 
+// Performance screen
+export const ServerStats = '.serverstats';
+
 // Database screen
-export const CollectionsGrid = '[data-testid="collection-grid"]';
+export const CollectionsTable = '[data-testid="collections-list"]';
 export const DatabaseCreateCollectionButton =
   '[data-testid="create-controls"] button';
 export const DatabaseRefreshCollectionButton =
   '[data-testid="refresh-controls"] button';
-export const CollectionCard = '[data-testid="collection-grid-item"]';
-// assume that there's only one hovered card at a time and that the first and only button is the drop button
-export const CollectionCardDrop =
-  '[data-testid="collection-grid"] [data-testid="namespace-card-actions"] button';
 
-export const collectionCard = (
+export const collectionRow = (
   dbName: string,
   collectionName: string
 ): string => {
-  return `${CollectionCard}[data-id="${dbName}.${collectionName}"]`;
+  return `[data-testid="collections-list-row-${collectionName}"]`;
 };
 
-export const collectionCardClickable = (
+export const collectionRowDrop = (
   dbName: string,
   collectionName: string
 ): string => {
-  // webdriver does not like clicking on the card even though the card has the
-  // click handler, so click on the title
-  return `${collectionCard(
+  return `${collectionRow(
     dbName,
     collectionName
-  )} [title="${collectionName}"]`;
+  )} button[data-action="delete"]`;
 };
 
 // Collection screen

@@ -92,6 +92,11 @@ export async function mochaGlobalSetup(this: Mocha.Runner) {
 
       if (isTestingWeb(context) && !isTestingAtlasCloudExternal(context)) {
         debug('Starting Compass Web server ...');
+
+        // TODO(COMPASS-9977) Turn off virtual scrolling in e2e tests until we can fix
+        // browser.scrollToVirtualItem() to work with it
+        process.env.COMPASS_DISABLE_VIRTUAL_TABLE_RENDERING = 'true';
+
         if (isTestingAtlasCloudSandbox(context)) {
           const compassWeb = await spawnCompassWebSandboxAndSignInToAtlas(
             {

@@ -26,7 +26,16 @@ const FIRST_TEST = 'tests/time-to-first-query.test.ts';
 async function cleanupOnInterrupt() {
   // First trigger an abort on the mocha runner
   abortRunner?.();
-  await runnerPromise;
+  // Don't wait when bailing because it can take minutes of retries before it
+  // finally times out, the process exits back to the terminal but some zombie
+  // child stays around and keeps logging.. We only use bail locally when
+  // working on tests manually and in that case we probably don't care about the
+  // cleanup. If you see a test you're working on waiting for something that's
+  // never going to happen then you probably want to kill it and get back
+  // control immediately.
+  if (!context.mochaBail) {
+    await runnerPromise;
+  }
 }
 
 function terminateOnTimeout() {

@@ -23,10 +23,10 @@
     "stop-server-2": "mongodb-runner stop --id=e2e-2",
     "start-servers": "npm run start-server-1 && npm run start-server-2",
     "stop-servers": "npm run stop-server-1 && npm run stop-server-2",
-    "test-noserver": "env DEBUG=hadron*,mongo*,compass*,xvfb-maybe* npm run test -- --disable-start-stop --bail",
-    "test-noserver-nocompile": "env DEBUG=hadron*,mongo*,compass*,xvfb-maybe* npm run test -- --no-native-modules --no-compile --disable-start-stop --bail",
+    "test-noserver": "env DEBUG=hadron*,mongo*,compass*,xvfb-maybe* npm run test -- --disable-start-stop --mocha-bail",
+    "test-noserver-nocompile": "env DEBUG=hadron*,mongo*,compass*,xvfb-maybe* npm run test -- --no-native-modules --no-compile --disable-start-stop --mocha-bail",
     "test-web": "env DEBUG=hadron*,mongo*,compass*,xvfb-maybe* npm run test web",
-    "test-web-noserver": "env DEBUG=hadron*,mongo*,compass*,xvfb-maybe* npm run test web -- --disable-start-stop --bail",
+    "test-web-noserver": "env DEBUG=hadron*,mongo*,compass*,xvfb-maybe* npm run test web -- --disable-start-stop --mocha-bail",
     "coverage-merge": "nyc merge .log/coverage .nyc_output/coverage.json",
     "coverage-report": "npm run coverage-merge && nyc report"
   },

@@ -22,23 +22,23 @@ async function waitForCollectionAndBadge(
   collectionName: string,
   badgeSelector: string
 ) {
-  const cardSelector = Selectors.collectionCard(dbName, collectionName);
+  const rowSelector = Selectors.collectionRow(dbName, collectionName);
   await browser.scrollToVirtualItem(
-    Selectors.CollectionsGrid,
-    cardSelector,
-    'grid'
+    Selectors.CollectionsTable,
+    rowSelector,
+    'table'
   );
 
-  // Hit refresh because depending on timing the card might appear without the
+  // Hit refresh because depending on timing the row might appear without the
   // badge at first. Especially in Firefox for whatever reason.
   await browser.clickVisible(Selectors.DatabaseRefreshCollectionButton);
 
   await browser.scrollToVirtualItem(
-    Selectors.CollectionsGrid,
-    cardSelector,
-    'grid'
+    Selectors.CollectionsTable,
+    rowSelector,
+    'table'
   );
-  await browser.$(cardSelector).$(badgeSelector).waitForDisplayed();
+  await browser.$(rowSelector).$(badgeSelector).waitForDisplayed();
 }
 
 describe('Database collections tab', function () {
@@ -71,7 +71,7 @@ describe('Database collections tab', function () {
   });
 
   it('contains a list of collections', async function () {
-    const collectionsGrid = browser.$(Selectors.CollectionsGrid);
+    const collectionsGrid = browser.$(Selectors.CollectionsTable);
     await collectionsGrid.waitForDisplayed();
 
     for (const collectionName of [
@@ -80,29 +80,28 @@ describe('Database collections tab', function () {
       'json-file',
       'numbers',
     ]) {
-      const collectionSelector = Selectors.collectionCard(
+      const collectionSelector = Selectors.collectionRow(
         'test',
         collectionName
       );
       const found = await browser.scrollToVirtualItem(
-        Selectors.CollectionsGrid,
+        Selectors.CollectionsTable,
         collectionSelector,
-        'grid'
+        'table'
       );
       expect(found, collectionSelector).to.be.true;
     }
   });
 
-  it('links collection cards to the collection documents tab', async function () {
+  it('links collection rows to the collection documents tab', async function () {
     await browser.scrollToVirtualItem(
-      Selectors.CollectionsGrid,
-      Selectors.collectionCard('test', 'json-array'),
-      'grid'
+      Selectors.CollectionsTable,
+      Selectors.collectionRow('test', 'json-array'),
+      'table'
     );
 
     await browser.clickVisible(
-      Selectors.collectionCardClickable('test', 'json-array'),
-      { scroll: true }
+      `${Selectors.collectionRow('test', 'json-array')} td:first-child`
     );
 
     // lands on the collection screen with all its tabs
@@ -137,22 +136,20 @@ describe('Database collections tab', function () {
       'test'
     );
 
-    const selector = Selectors.collectionCard('test', collectionName);
+    const selector = Selectors.collectionRow('test', collectionName);
     await browser.scrollToVirtualItem(
-      Selectors.CollectionsGrid,
+      Selectors.CollectionsTable,
       selector,
-      'grid'
+      'table'
     );
 
-    const collectionCard = browser.$(selector);
-    await collectionCard.waitForDisplayed();
-
-    await collectionCard.scrollIntoView(false);
+    const collectionRow = browser.$(selector);
+    await collectionRow.waitForDisplayed();
 
     await browser.waitUntil(async () => {
-      // open the drop collection modal from the collection card
-      await browser.hover(`${selector} [title="${collectionName}"]`);
-      const el = browser.$(Selectors.CollectionCardDrop);
+      // open the drop collection modal from the collection row
+      await browser.hover(`${selector}`);
+      const el = browser.$(Selectors.collectionRowDrop('test', collectionName));
       if (await el.isDisplayed()) {
         return true;
       }
@@ -162,12 +159,14 @@ describe('Database collections tab', function () {
       return false;
     });
 
-    await browser.clickVisible(Selectors.CollectionCardDrop);
+    await browser.clickVisible(
+      Selectors.collectionRowDrop('test', collectionName)
+    );
 
     await browser.dropNamespace(collectionName);
 
     // wait for it to be gone
-    await collectionCard.waitForExist({ reverse: true });
+    await collectionRow.waitForExist({ reverse: true });
 
     // the app should still be on the database Collections tab because there are
     // other collections in this database
@@ -345,13 +344,13 @@ describe('Database collections tab', function () {
     );
     await browser.clickVisible(Selectors.DatabaseRefreshCollectionButton);
 
-    const collSelector = Selectors.collectionCard(db, coll);
+    const collSelector = Selectors.collectionRow(db, coll);
     await browser.scrollToVirtualItem(
-      Selectors.CollectionsGrid,
+      Selectors.CollectionsTable,
       collSelector,
-      'grid'
+      'table'
     );
-    const coll2Card = browser.$(collSelector);
-    await coll2Card.waitForDisplayed();
+    const coll2Row = browser.$(collSelector);
+    await coll2Row.waitForDisplayed();
   });
 });