feat(web): provide callback props for logging and telemetry CLOUDP-25…

…3932 (#5931) * feat(web): provide callback props for logging and telemetry * chore: fix tests and checks * fix: restore data-service object.assign
mongodb-js · Jun 18, 2024 · 4d295fa · 4d295fa
1 parent dd59697
commit 4d295fa
Show file tree

Hide file tree

Showing 9 changed files with 418 additions and 160 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/compass-logging/src/provider.ts b/packages/compass-logging/src/provider.ts
@@ -119,3 +119,5 @@ export function withLoggerAndTelemetry<
 export function mongoLogId(id: number): MongoLogId { // !dupedLogId
   return { __value: id };
 }
+
+export type { MongoLogWriter } from 'mongodb-log-writer';
diff --git a/packages/compass-web/package.json b/packages/compass-web/package.json
@@ -88,6 +88,7 @@
     "@mongodb-js/tsconfig-compass": "^1.0.4",
     "@mongodb-js/webpack-config-compass": "^1.3.10",
     "@testing-library/react": "^12.1.5",
+    "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^13.5.0",
     "@types/chai": "^4.2.21",
     "@types/chai-dom": "^0.0.10",
@@ -117,7 +118,6 @@
     "mongodb": "^6.6.2",
     "mongodb-connection-string-url": "^3.0.1",
     "mongodb-data-service": "^22.20.2",
-    "mongodb-log-writer": "^1.4.2",
     "nyc": "^15.1.0",
     "os-browserify": "^0.3.0",
     "path-browserify": "^1.0.1",

diff --git a/packages/compass-web/sandbox/index.tsx b/packages/compass-web/sandbox/index.tsx
@@ -21,7 +21,6 @@ import {
 } from 'mongodb-connection-string-url';
 
 import { CompassWeb } from '../src/index';
-import { LoggerAndTelemetryProvider } from '@mongodb-js/compass-logging/provider';
 import type { ConnectionInfo } from '@mongodb-js/connection-storage/renderer';
 import { sandboxLogger } from './sandbox-logger';
 import { useWorkspaceTabRouter } from './use-workspace-tab-router';
@@ -276,50 +275,51 @@ function ConnectedApp({ connectionInfo }: { connectionInfo: ConnectionInfo }) {
       value={!isAtlas ? connectionInfo : null}
     >
       <Body as="div" className={sandboxContainerStyles}>
-        <LoggerAndTelemetryProvider value={sandboxLogger}>
-          <CompassWeb
-            {...(isAtlas
-              ? {
-                  orgId: connectionInfo.atlasMetadata.orgId,
-                  projectId: connectionInfo.atlasMetadata.projectId,
+        <CompassWeb
+          {...(isAtlas
+            ? {
+                orgId: connectionInfo.atlasMetadata.orgId,
+                projectId: connectionInfo.atlasMetadata.projectId,
+              }
+            : {
+                // We don't want to make those props optional as they are
+                // always required in DE, at the same time we still want to
+                // support non-Atlas connections in sandbox. For that purpose
+                // we pass empty strings when connecting here. If those values
+                // are empty AND sandbox autoconnect provider didn't get the
+                // value, sandbox will fail to connect
+                orgId: '',
+                projectId: '',
+              })}
+          initialWorkspace={initialCurrentTabRef.current}
+          onActiveWorkspaceTabChange={updateCurrentTab}
+          initialPreferences={{
+            enablePerformanceAdvisorBanner: isAtlas,
+            enableAtlasSearchIndexes: !isAtlas,
+            maximumNumberOfActiveConnections: isAtlas ? 1 : 10,
+            atlasServiceBackendPreset: atlasServiceSandboxBackendVariant,
+          }}
+          renderConnecting={(connectionInfo) => {
+            return (
+              <LoadingScreen
+                connectionString={
+                  connectionInfo?.atlasMetadata?.clusterName ??
+                  connectionInfo?.connectionOptions.connectionString
                 }
-              : {
-                  // We don't want to make those props optional as they are
-                  // always required in DE, at the same time we still want to
-                  // support non-Atlas connections in sandbox. For that purpose
-                  // we pass empty strings when connecting here. If those values
-                  // are empty AND sandbox autoconnect provider didn't get the
-                  // value, sandbox will fail to connect
-                  orgId: '',
-                  projectId: '',
-                })}
-            initialWorkspace={initialCurrentTabRef.current}
-            onActiveWorkspaceTabChange={updateCurrentTab}
-            initialPreferences={{
-              enablePerformanceAdvisorBanner: isAtlas,
-              enableAtlasSearchIndexes: !isAtlas,
-              maximumNumberOfActiveConnections: isAtlas ? 1 : 10,
-              atlasServiceBackendPreset: atlasServiceSandboxBackendVariant,
-            }}
-            renderConnecting={(connectionInfo) => {
-              return (
-                <LoadingScreen
-                  connectionString={
-                    connectionInfo?.atlasMetadata?.clusterName ??
-                    connectionInfo?.connectionOptions.connectionString
-                  }
-                ></LoadingScreen>
-              );
-            }}
-            renderError={(_connectionInfo, err) => {
-              return (
-                <ErrorScreen
-                  error={err.message ?? 'Error occured when connecting'}
-                ></ErrorScreen>
-              );
-            }}
-          ></CompassWeb>
-        </LoggerAndTelemetryProvider>
+              ></LoadingScreen>
+            );
+          }}
+          renderError={(_connectionInfo, err) => {
+            return (
+              <ErrorScreen
+                error={err.message ?? 'Error occured when connecting'}
+              ></ErrorScreen>
+            );
+          }}
+          onTrack={sandboxLogger.track}
+          onDebug={sandboxLogger.debug}
+          onLog={sandboxLogger.log}
+        ></CompassWeb>
       </Body>
     </SandboxAutoconnectProvider>
   );

diff --git a/packages/compass-web/sandbox/sandbox-logger.ts b/packages/compass-web/sandbox/sandbox-logger.ts
@@ -1,7 +1,4 @@
 import createDebug from 'debug';
-import { mongoLogId } from '@mongodb-js/compass-logging/provider';
-import type { LoggerAndTelemetry } from '@mongodb-js/compass-logging';
-import type { MongoLogWriter } from 'mongodb-log-writer';
 
 const tracking: { event: string; properties: any }[] = ((
   globalThis as any
@@ -11,36 +8,16 @@ const logging: { name: string; component: string; args: any[] }[] = ((
   globalThis as any
 ).logging = []);
 
-export const sandboxLogger = {
-  createLogger: (component = 'SANDBOX-LOGGER'): LoggerAndTelemetry => {
-    const logger = (name: 'debug' | 'info' | 'warn' | 'error' | 'fatal') => {
-      return (...args: any[]) => {
-        logging.push({ name, component, args });
-      };
-    };
-
-    const track = (event: string, properties: any) => {
-      tracking.push({ event, properties });
-    };
+const debug = createDebug(`mongodb-compass:compass-web-sandbox`);
 
-    const debug = createDebug(`mongodb-compass:${component.toLowerCase()}`);
+export const sandboxLogger = {
+  log: (name: string, component: string, ...args: any[]) => {
+    logging.push({ name, component, args });
+  },
 
-    return {
-      log: {
-        component,
-        get unbound() {
-          return this as unknown as MongoLogWriter;
-        },
-        write: () => true,
-        debug: logger('debug'),
-        info: logger('info'),
-        warn: logger('warn'),
-        error: logger('error'),
-        fatal: logger('fatal'),
-      },
-      debug,
-      track,
-      mongoLogId,
-    };
+  track: (event: string, properties: any) => {
+    tracking.push({ event, properties });
   },
+
+  debug,
 };
diff --git a/packages/compass-web/src/compass-web-connection-storage.ts b/packages/compass-web/src/compass-web-connection-storage.ts