Fix pagination issue (#2298)

* Add changes for Load more option to work

* Remove localhost

* Add Mongo Pagination tests

* Run npm format

* Fix error in tests

* Cleanup CORSByPass

* Revert "Cleanup CORSByPass"

This reverts commit de11ece337.

package-lock.json

@@ -117,6 +117,7 @@
         "utility-types": "3.10.0",
         "uuid": "9.0.0",
         "web-vitals": "4.2.4",
+        "ws": "8.17.1",
         "zustand": "3.5.0"
       },
       "devDependencies": {
@@ -204,7 +205,7 @@
         "webpack-bundle-analyzer": "5.2.0",
         "webpack-cli": "5.1.4",
         "webpack-dev-server": "5.2.3",
-        "ws": "8.18.0"
+        "ws": "8.17.1"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -18072,6 +18073,7 @@
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
       "hasInstallScript": true,
       "optional": true,
       "os": [
@@ -21638,6 +21640,27 @@
         "node": ">=12"
       }
     },
+    "node_modules/jest-environment-jsdom/node_modules/ws": {
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
+      "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/jest-environment-jsdom/node_modules/xml-name-validator": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
@@ -33009,6 +33032,27 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/webpack-dev-server/node_modules/ws": {
+      "version": "8.19.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.19.0.tgz",
+      "integrity": "sha512-blAT2mjOEIi0ZzruJfIhb3nps74PRWTCz1IjglWEEpQl5XS/UNama6u2/rjFkDDouqr4L67ry+1aGIALViWjDg==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/webpack-merge": {
       "version": "5.10.0",
       "dev": true,
@@ -33383,11 +33427,10 @@
       }
     },
     "node_modules/ws": {
-      "version": "8.18.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
-      "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
+      "version": "8.17.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
+      "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": ">=10.0.0"
       },

package.json

@@ -113,7 +113,7 @@
     "uuid": "9.0.0",
     "web-vitals": "4.2.4",
     "zustand": "3.5.0",
-    "ws": "8.18.0"
+    "ws": "8.17.1"
   },
   "devDependencies": {
     "@babel/core": "7.24.7",
@@ -200,7 +200,7 @@
     "webpack-bundle-analyzer": "5.2.0",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "5.2.3",
-    "ws": "8.18.0"
+    "ws": "8.17.1"
   },
   "scripts": {
     "postinstall": "patch-package",

src/Common/MongoProxyClient.ts

@@ -38,7 +38,7 @@ export function queryIterator(databaseId: string, collection: Collection, query:
   let continuationToken: string;
   return {
     fetchNext: () => {
-      return queryDocuments(databaseId, collection, false, query).then((response) => {
+      return queryDocuments(databaseId, collection, false, query, continuationToken).then((response) => {
         continuationToken = response.continuationToken;
         const headers: { [key: string]: string | number } = {};
         response.headers.forEach((value, key) => {

test/CORSBypass.ts

@@ -2,20 +2,54 @@ import { Page } from "@playwright/test";
 
 export async function setupCORSBypass(page: Page) {
   await page.route("**/api/mongo/explorer{,/**}", async (route) => {
+    const request = route.request();
+    const origin = request.headers()["origin"];
+
+    // If there's no origin, it's not a CORS request. Let it proceed without modification.
+    if (!origin) {
+      await route.continue();
+      return;
+    }
+
+    //// Handle preflight (OPTIONS) requests separately.
+    // These should not be forwarded to the target server.
+    if (request.method() === "OPTIONS") {
+      await route.fulfill({
+        status: 204, // No Content
+        headers: {
+          "Access-Control-Allow-Origin": origin,
+          "Access-Control-Allow-Credentials": "true",
+          "Access-Control-Allow-Methods": "GET,POST,PUT,DELETE,OPTIONS,HEAD",
+          "Access-Control-Request-Headers": "*, x-ms-continuation",
+          "Access-Control-Max-Age": "86400", // Cache preflight response for 1 day
+          Vary: "Origin",
+        },
+      });
+      return;
+    }
+
+    // Handle the actual GET/POST request
     const response = await route.fetch({
       headers: {
-        ...route.request().headers(),
+        ...request.headers(),
       },
     });
 
+    const responseHeaders = response.headers();
+    // Clean up any pre-existing CORS headers from the real response to avoid conflicts.
+    delete responseHeaders["access-control-allow-origin"];
+    delete responseHeaders["access-control-allow-credentials"];
+
     await route.fulfill({
       status: response.status(),
       headers: {
-        ...response.headers(),
-        "Access-Control-Allow-Origin": "*",
-        "Access-Control-Allow-Methods": "*",
+        ...responseHeaders,
+        "Access-Control-Allow-Origin": origin,
+        "Access-Control-Allow-Credentials": "true",
+        "Access-Control-Allow-Methods": "GET,POST,PUT,DELETE,OPTIONS,HEAD",
         "Access-Control-Allow-Headers": "*",
-        "Access-Control-Allow-Credentials": "*",
+        "Access-Control-Expose-Headers": "x-ms-continuation,x-ms-request-charge,x-ms-session-token",
+        Vary: "Origin",
       },
       body: await response.body(),
     });

test/mongo/pagination.spec.ts

@@ -0,0 +1,132 @@
+import { expect, test } from "@playwright/test";
+import { setupCORSBypass } from "../CORSBypass";
+import { DataExplorer, QueryTab, TestAccount, CommandBarButton, Editor } from "../fx";
+import { serializeMongoToJson } from "../testData";
+
+const databaseId = "test-e2etests-mongo-pagination";
+const collectionId = "test-coll-mongo-pagination";
+let explorer: DataExplorer = null!;
+
+test.setTimeout(5 * 60 * 1000);
+
+test.describe("Test Mongo Pagination", () => {
+  let queryTab: QueryTab;
+  let queryEditor: Editor;
+
+  test.beforeEach("Open query tab", async ({ page }) => {
+    await setupCORSBypass(page);
+    explorer = await DataExplorer.open(page, TestAccount.MongoReadonly);
+
+    const containerNode = await explorer.waitForContainerNode(databaseId, collectionId);
+    await containerNode.expand();
+
+    const containerMenuNode = await explorer.waitForContainerDocumentsNode(databaseId, collectionId);
+    await containerMenuNode.openContextMenu();
+    await containerMenuNode.contextMenuItem("New Query").click();
+
+    queryTab = explorer.queryTab("tab0");
+    queryEditor = queryTab.editor();
+    await queryEditor.locator.waitFor({ timeout: 30 * 1000 });
+    await queryTab.executeCTA.waitFor();
+    await explorer.frame.getByTestId("NotificationConsole/ExpandCollapseButton").click();
+    await explorer.frame.getByTestId("NotificationConsole/Contents").waitFor();
+  });
+
+  test("should execute a query and load more results", async ({ page }) => {
+    const query = "{}";
+
+    await queryEditor.locator.click();
+    await queryEditor.setText(query);
+
+    const executeQueryButton = explorer.commandBarButton(CommandBarButton.ExecuteQuery);
+    await executeQueryButton.click();
+
+    // Wait for query execution to complete
+    await expect(queryTab.resultsView).toBeVisible({ timeout: 60000 });
+    await expect(queryTab.resultsEditor.locator).toBeAttached({ timeout: 30000 });
+
+    // Get initial results
+    const resultText = await queryTab.resultsEditor.text();
+
+    if (!resultText || resultText.trim() === "" || resultText.trim() === "[]") {
+      throw new Error("Query returned no results - the collection appears to be empty");
+    }
+
+    const resultData = serializeMongoToJson(resultText);
+
+    if (resultData.length === 0) {
+      throw new Error("Parsed results contain 0 documents - collection is empty");
+    }
+
+    if (resultData.length < 100) {
+      expect(resultData.length).toBeGreaterThan(0);
+      return;
+    }
+
+    expect(resultData.length).toBe(100);
+
+    // Pagination test
+    let totalPagesLoaded = 1;
+    const maxLoadMoreAttempts = 10;
+
+    for (let loadMoreAttempts = 0; loadMoreAttempts < maxLoadMoreAttempts; loadMoreAttempts++) {
+      const loadMoreButton = queryTab.resultsView.getByText("Load more");
+
+      try {
+        await expect(loadMoreButton).toBeVisible({ timeout: 5000 });
+      } catch {
+        // Load more button not visible - pagination complete
+        break;
+      }
+
+      const beforeClickText = await queryTab.resultsEditor.text();
+      const beforeClickHash = Buffer.from(beforeClickText || "")
+        .toString("base64")
+        .substring(0, 50);
+
+      await loadMoreButton.click();
+
+      // Wait for content to update
+      let editorContentChanged = false;
+      for (let waitAttempt = 1; waitAttempt <= 3; waitAttempt++) {
+        await page.waitForTimeout(2000);
+
+        const currentEditorText = await queryTab.resultsEditor.text();
+        const currentHash = Buffer.from(currentEditorText || "")
+          .toString("base64")
+          .substring(0, 50);
+
+        if (currentHash !== beforeClickHash) {
+          editorContentChanged = true;
+          break;
+        }
+      }
+
+      if (editorContentChanged) {
+        totalPagesLoaded++;
+      } else {
+        // No content change detected, stop pagination
+        break;
+      }
+
+      await page.waitForTimeout(1000);
+    }
+
+    // Final verification
+    const finalIndicator = queryTab.resultsView.locator("text=/\\d+ - \\d+/");
+    const finalIndicatorText = await finalIndicator.textContent();
+
+    if (finalIndicatorText) {
+      const match = finalIndicatorText.match(/(\d+) - (\d+)/);
+      if (match) {
+        const totalDocuments = parseInt(match[2]);
+        expect(totalDocuments).toBe(405);
+        expect(totalPagesLoaded).toBe(5);
+      } else {
+        throw new Error(`Invalid results indicator format: ${finalIndicatorText}`);
+      }
+    } else {
+      expect(totalPagesLoaded).toBe(5);
+    }
+  });
+});