chore(web): bundle driver with the package CLOUDP-228421 (#5733)

* chore(web): bundle driver with the package

* chore: update package-lock after merge

* chore(web): always package dist with NODE_ENV=production

* chore(web): ensure that component always gets new instance of globalAppRegistry on mount

Author: gribnoysup

package-lock.json

@@ -761,7 +761,7 @@ export async function startBrowser(
     ...webdriverOptions,
     ...wdioOptions,
   })) as CompassBrowser;
-  await browser.navigateTo('http://localhost:8080/');
+  await browser.navigateTo('http://localhost:7777/');
   const compass = new Compass(name, browser, {
     mode: 'web',
     writeCoverage: false,

packages/compass-e2e-tests/helpers/compass.ts

@@ -16,8 +16,9 @@ ignores:
  - 'events'
  - 'process'
  - 'util'
-# Already a dependency of mongodb-data-service -> devtools-connect, only
-# referenced in webpack for weird polyfilling reasons (see config)
- - 'resolve-mongodb-srv'
+# Not explicitly used, but helpful to have them in devDeps to make sure
+# compass-web is on the same version as other package in the monorepo
+ - 'mongodb'
+ - 'bson'
 ignore-patterns:
  - 'dist'

packages/compass-web/.depcheckrc

@@ -53,13 +53,10 @@
     "reformat": "npm run eslint . -- --fix && npm run prettier -- --write ."
   },
   "peerDependencies": {
-    "bson": "^6.2.0",
-    "mongodb": "^6.5.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@gribnoysup/mongodb-browser": "^1.3.0",
     "@mongodb-js/atlas-service": "^0.16.0",
     "@mongodb-js/compass-aggregations": "^9.27.0",
     "@mongodb-js/compass-app-stores": "^7.11.0",
@@ -94,29 +91,38 @@
     "@types/react": "^17.0.5",
     "@types/react-dom": "^17.0.10",
     "@types/sinon-chai": "^3.2.5",
+    "browser-process-hrtime": "^1.0.0",
+    "bson": "^6.2.0",
     "buffer": "^6.0.3",
     "chai": "^4.3.6",
     "compass-preferences-model": "^2.19.0",
+    "crypto-browserify": "^3.12.0",
     "debug": "^4.2.0",
     "depcheck": "^1.4.1",
+    "dns-query": "^0.11.2",
     "electron": "^29.3.1",
     "eslint": "^7.25.0",
     "events": "^3.3.0",
     "express": "^4.19.2",
     "express-http-proxy": "^2.0.0",
     "hadron-app-registry": "^9.1.9",
+    "is-ip": "^5.0.1",
     "mocha": "^10.2.0",
+    "mongodb": "^6.5.0",
     "mongodb-connection-string-url": "^2.6.0",
     "mongodb-data-service": "^22.19.0",
     "mongodb-log-writer": "^1.3.0",
     "nyc": "^15.1.0",
+    "os-browserify": "^0.3.0",
     "path-browserify": "^1.0.1",
     "prettier": "^2.7.1",
     "process": "^0.11.10",
     "readable-stream": "^4.5.0",
     "sinon": "^17.0.1",
+    "timers-browserify": "^2.0.12",
     "util": "^0.12.5",
     "vm-browserify": "^1.1.2",
-    "whatwg-url": "^13.0.0"
+    "whatwg-url": "^13.0.0",
+    "ws": "^8.16.0"
   }
 }

packages/compass-web/package.json

@@ -0,0 +1,51 @@
+import { query, lookupTxt } from 'dns-query';
+import { promisify } from 'util';
+
+const dohEndpoints = process.env.COMPASS_WEB_DOH_ENDPOINT ?? [
+  'dns.google',
+  'dns.cloudflare.com',
+];
+
+export function resolveSrv(
+  hostname: string,
+  cb: (err: null | any, answers?: any[]) => void
+) {
+  query(
+    { question: { type: 'SRV', name: hostname } },
+    { endpoints: dohEndpoints }
+  ).then(({ answers }) => {
+    const res =
+      answers?.flatMap((answer) => {
+        if (answer.type === 'SRV') {
+          return {
+            ...answer.data,
+            name: answer.data.target,
+          };
+        }
+        return [];
+      }) ?? [];
+    cb(null, res);
+  }, cb);
+}
+export function resolveTxt(
+  hostname: string,
+  cb: (err: null | any, answers?: string[][]) => void
+) {
+  lookupTxt(hostname, { endpoints: dohEndpoints }).then(({ entries }) => {
+    const res = entries.map((entry) => {
+      return [entry.data];
+    });
+    cb(null, res);
+  }, cb);
+}
+
+export const promises = {
+  resolveSrv: promisify(resolveSrv),
+  resolveTxt: promisify(resolveTxt),
+};
+
+export default {
+  resolveSrv,
+  resolveTxt,
+  promises,
+};

packages/compass-web/polyfills/@mongodb-js/compass-connection-import-export/index.ts

@@ -2,6 +2,12 @@ export const promises = {
   chmod() {
     return Promise.resolve();
   },
+  access() {
+    return Promise.reject(new Error('Not supported in browser environment'));
+  },
+  readFile() {
+    return Promise.reject(new Error('Not supported in browser environment'));
+  },
 };
 export function rmSync() {
   // noop

packages/compass-web/polyfills/crypto/index.ts

@@ -0,0 +1,2 @@
+import { promises } from 'fs';
+export default promises;

packages/compass-web/polyfills/dns/index.ts

@@ -0,0 +1,128 @@
+import { ipVersion } from 'is-ip';
+import { Duplex } from 'stream';
+
+const PROXY_PORT = process.env.COMPASS_WEB_WS_PROXY_PORT
+  ? Number(process.env.COMPASS_WEB_WS_PROXY_PORT)
+  : 1337;
+
+/**
+ * net.Socket interface that works over the WebSocket connection. For now, only
+ * used when running compass-web in a local sandbox, mms has their own
+ * implementation
+ */
+class Socket extends Duplex {
+  private _ws: WebSocket | null = null;
+  private _setOptions: {
+    setKeepAlive?: { enabled?: boolean; initialDelay?: number };
+    setTimeout?: { timeout?: number };
+    setNoDelay?: { noDelay?: boolean };
+  } = {};
+  constructor() {
+    super();
+  }
+  connect(options: { host: string; port: number; tls?: boolean }) {
+    this._ws = new WebSocket(`ws://localhost:${PROXY_PORT}`);
+    this._ws.binaryType = 'arraybuffer';
+    this._ws.addEventListener(
+      'open',
+      () => {
+        const connectMsg = JSON.stringify({
+          connectOptions: options,
+          setOptions: this._setOptions,
+        });
+        setTimeout(() => {
+          this._ws?.send(connectMsg);
+        });
+      },
+      { once: true }
+    );
+    this._ws.addEventListener('close', () => {
+      this.emit('close');
+    });
+    this._ws.addEventListener('error', () => {
+      this.emit('error', 'WebSocket connection was closed due to an error');
+    });
+    this._ws.addEventListener(
+      'message',
+      ({ data }: MessageEvent<string | ArrayBuffer>) => {
+        if (typeof data === 'string') {
+          try {
+            const { evt, error } = JSON.parse(data) as {
+              evt: string;
+              error?: Error;
+            };
+            setTimeout(() => {
+              this.emit(
+                evt,
+                evt === 'error' ? Object.assign(new Error(), error) : undefined
+              );
+            });
+          } catch (err) {
+            // eslint-disable-next-line no-console
+            console.error('error parsing proxy message "%s":', data, err);
+          }
+        } else {
+          setTimeout(() => {
+            this.emit('data', Buffer.from(data));
+          });
+        }
+      }
+    );
+    return this;
+  }
+  _read() {
+    // noop
+  }
+  _write(chunk: ArrayBufferLike, _encoding: BufferEncoding, cb: () => void) {
+    this._ws?.send(chunk);
+    setTimeout(() => {
+      cb();
+    });
+  }
+  destroy() {
+    this._ws?.close();
+    return this;
+  }
+  end(fn?: () => void) {
+    if (this._ws?.readyState === this._ws?.CLOSED) {
+      setTimeout(() => {
+        fn?.();
+      });
+      return this;
+    }
+    this._ws?.addEventListener(
+      'close',
+      () => {
+        fn?.();
+      },
+      { once: true }
+    );
+    this._ws?.close();
+    return this;
+  }
+  setKeepAlive(enabled = false, initialDelay = 0) {
+    this._setOptions.setKeepAlive = { enabled, initialDelay };
+    return this;
+  }
+  setTimeout(timeout: number, cb?: () => void) {
+    this._setOptions.setTimeout = { timeout };
+    if (cb) {
+      this.once('timeout', cb);
+    }
+    return this;
+  }
+  setNoDelay(noDelay = true) {
+    this._setOptions.setNoDelay = { noDelay };
+    return this;
+  }
+}
+
+export { isIPv4, isIPv6 } from 'is-ip';
+export const isIP = (input: string) => ipVersion(input) ?? 0;
+export const createConnection = (options: { host: string; port: number }) => {
+  const socket = new Socket();
+  setTimeout(() => {
+    socket.connect(options);
+  });
+  return socket;
+};