chore(compass-web): build devtools-connect into compass web COMPASS-9793

Author: nbbeeken

package-lock.json

@@ -8,6 +8,7 @@ ignores:
  - '@types/chai-dom'
  - '@types/react'
  - '@types/react-dom'
+ - 'devtools-connect-original'
 # Used in electron-proxy through @ts-check, but depcheckrc can't detect it
  - '@types/express-http-proxy'
 # Used in webpack config as polyfills, depcheck can't detect that because of `/`

packages/compass-web/.depcheckrc

@@ -99,6 +99,7 @@
     "@mongodb-js/compass-workspaces": "^0.69.2",
     "@mongodb-js/connection-info": "^0.23.0",
     "@mongodb-js/connection-storage": "^0.62.2",
+    "@mongodb-js/devtools-connect": "^3.10.0",
     "@mongodb-js/devtools-proxy-support": "^0.5.5",
     "@mongodb-js/eslint-config-compass": "^1.4.12",
     "@mongodb-js/mocha-config-compass": "^1.7.2",

packages/compass-web/package.json

@@ -0,0 +1,3 @@
+declare module 'devtools-connect-original' {
+  export * from '@mongodb-js/devtools-connect';
+}

packages/compass-web/polyfills/@mongodb-js/devtools-connect/devtools-connect-original.d.ts

@@ -1,6 +1,10 @@
+import * as devtools_connect from 'devtools-connect-original';
+import { createMongoDBOIDCPlugin } from '../oidc-plugin';
+
 export function hookLogger() {
   /* no-op */
 }
+
 export async function connectMongoClient(
   url: string,
   options: any,
@@ -16,23 +20,21 @@ export async function connectMongoClient(
   delete options.parentState;
   delete options.parentHandle;
   options.__skipPingOnConnect = true;
-  const client = new MongoClient(url, options);
-  await client.connect();
+  const { client } = await devtools_connect.connectMongoClient(
+    url,
+    options,
+    logger,
+    MongoClient
+  );
   return {
     client,
     state: {
-      getStateShareServer() {
-        return Promise.resolve('Not Available');
-      },
-      oidcPlugin: {
-        logger,
-        serialize() {
-          return Promise.resolve(undefined);
-        },
-      },
-      destroy() {
-        return Promise.resolve();
+      // eslint-disable-next-line @typescript-eslint/require-await
+      async getStateShareServer() {
+        return 'Not Available';
       },
+      oidcPlugin: createMongoDBOIDCPlugin({ logger }),
+      async destroy() {},
     },
   };
 }

packages/compass-web/polyfills/@mongodb-js/devtools-connect/index.ts

@@ -10,14 +10,20 @@ export function createSocks5Tunnel(): void {
 export function hookLogger(): void {
   // no-op
 }
-export function createFetch(): never {
-  throw new Error('node-fetch like-API not available in compass-web');
+export function createFetch(): typeof fetch {
+  // eslint-disable-next-line @typescript-eslint/require-await
+  return async () => {
+    throw new Error('node-fetch not available in compass web');
+  };
 }
-export function systemCA(): never {
-  throw new Error('system CA access not available in compass-web');
+// eslint-disable-next-line @typescript-eslint/require-await
+export async function systemCA(): Promise<never> {
+  const error = new Error('system CA access not available in compass-web');
+  (error as unknown as { code: 'OUT_OF_MEM' }).code = 'OUT_OF_MEM'; // This is a "tls" error code that makes devtools-connect not use the systemCA
+  throw error;
 }
 export function resetSystemCACache(): never {
-  throw new Error('system CA access not available in compass-web');
+  throw new Error('reset system CA access not available in compass-web');
 }
 
 // Explicitly web-compatible

packages/compass-web/polyfills/@mongodb-js/devtools-proxy-support/index.ts

@@ -0,0 +1,10 @@
+export function hookLoggerToMongoLogWriter() {}
+export function createMongoDBOIDCPlugin({ logger }: any) {
+  return {
+    mongoClientOptions: {},
+    logger,
+    /* eslint-disable @typescript-eslint/require-await */
+    serialize: async () => '',
+    destroy: () => {},
+  };
+}

packages/compass-web/polyfills/@mongodb-js/oidc-plugin/index.ts

@@ -27,8 +27,12 @@ class Socket extends Duplex {
     lookup?: ConnectionOptions['lookup'];
     tls?: boolean;
   }) {
+    // WS does not support callback lookup
+    if ((lookup?.length ?? 0) > 0) lookup = undefined;
+
     const { wsURL, ...atlasOptions } =
       lookup?.() ?? ({} as { wsURL?: string; clusterName?: string });
+
     this._ws = new WebSocket(wsURL ?? '/ws-proxy');
     this._ws.binaryType = 'arraybuffer';
     this._ws.addEventListener(
@@ -156,8 +160,6 @@ 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);
-  });
+  socket.connect(options);
   return socket;
 };

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

@@ -0,0 +1,7 @@
+import { resolveSrv, resolveTxt } from '../dns';
+
+export const wasNativelyLookedUp = () => false;
+export const withNodeFallback = {
+  resolveSrv,
+  resolveTxt,
+};

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

@@ -45,6 +45,7 @@ module.exports = (env, args) => {
         '@mongodb-js/devtools-proxy-support': localPolyfill(
           '@mongodb-js/devtools-proxy-support'
         ),
+        '@mongodb-js/oidc-plugin': localPolyfill('@mongodb-js/oidc-plugin'),
 
         ...(config.mode === 'production'
           ? {
@@ -56,14 +57,17 @@ module.exports = (env, args) => {
             }
           : {}),
 
-        // Replace 'devtools-connect' with a package that just directly connects
-        // using the driver (= web-compatible driver) logic, because devtools-connect
-        // contains a lot of logic that makes sense in a desktop application/CLI but
-        // not in a web environment (DNS resolution, OIDC, CSFLE/QE, etc.)
+        // We replace the direct import without own the sanitizes unsupported options
+        // from the web env that are never relevant to connecting on web.
         '@mongodb-js/devtools-connect': localPolyfill(
           '@mongodb-js/devtools-connect'
         ),
 
+        // Then we call into the real devtools-connect package
+        'devtools-connect-original': require.resolve(
+          '@mongodb-js/devtools-connect'
+        ),
+
         // TODO(COMPASS-7407): compass-logging
         // hard to disable the whole thing while there are direct dependencies
         // on log-writer
@@ -124,6 +128,7 @@ module.exports = (env, args) => {
         os: require.resolve('os-browserify/browser'),
         crypto: require.resolve('crypto-browserify'),
         dns: localPolyfill('dns'),
+        'os-dns-native': localPolyfill('os-dns-native'),
         // Built-in Node.js modules imported by the driver directly and used in
         // ways that requires us to provide a no-op polyfill
         zlib: localPolyfill('zlib'),