chore(web): make sure that onTrackRef always set to latest prop value (#7049)

Author: gribnoysup

packages/compass-web/sandbox/sandbox-logger.ts

@@ -1,5 +1,5 @@
 import createDebug from 'debug';
-import type { LogMessage } from '../src/logger-and-telemetry';
+import type { LogMessage } from '../src/logger';
 
 const logging: LogMessage[] = ((globalThis as any).logging = []);
 

packages/compass-web/src/entrypoint.tsx

@@ -51,18 +51,19 @@ import { TelemetryProvider } from '@mongodb-js/compass-telemetry/provider';
 import CompassConnections from '@mongodb-js/compass-connections';
 import { AtlasCloudConnectionStorageProvider } from './connection-storage';
 import { AtlasCloudAuthServiceProvider } from './atlas-auth-service';
-import type {
-  TrackFunction,
-  LogFunction,
-  DebugFunction,
-} from './logger-and-telemetry';
-import { useCompassWebLoggerAndTelemetry } from './logger-and-telemetry';
+import type { LogFunction, DebugFunction } from './logger';
+import { useCompassWebLogger } from './logger';
 import { type TelemetryServiceOptions } from '@mongodb-js/compass-telemetry';
 import { WebWorkspaceTab as WelcomeWorkspaceTab } from '@mongodb-js/compass-welcome';
 import { useCompassWebPreferences } from './preferences';
 import { WorkspaceTab as DataModelingWorkspace } from '@mongodb-js/compass-data-modeling';
 import { DataModelStorageServiceProviderInMemory } from '@mongodb-js/compass-data-modeling/web';
 
+export type TrackFunction = (
+  event: string,
+  properties: Record<string, any>
+) => void;
+
 const WithAtlasProviders: React.FC = ({ children }) => {
   return (
     <AtlasCloudAuthServiceProvider>
@@ -269,7 +270,7 @@ const CompassWeb = ({
   onFailToLoadConnections,
 }: CompassWebProps) => {
   const appRegistry = useRef(new AppRegistry());
-  const logger = useCompassWebLoggerAndTelemetry({
+  const logger = useCompassWebLogger({
     onLog,
     onDebug,
   });
@@ -285,6 +286,7 @@ const CompassWeb = ({
       : initialAutoconnectId ?? undefined;
 
   const onTrackRef = useRef(onTrack);
+  onTrackRef.current = onTrack;
 
   const telemetryOptions = useRef<TelemetryServiceOptions>({
     sendTrack: (event: string, properties: Record<string, any> | undefined) => {

packages/compass-web/src/logger-and-telemetry.spec.tsx renamed to packages/compass-web/src/logger.spec.tsx

@@ -4,27 +4,22 @@ import {
   LoggerProvider,
   useLogger,
 } from '@mongodb-js/compass-logging/provider';
-import type {
-  DebugFunction,
-  LogFunction,
-  TrackFunction,
-} from './logger-and-telemetry';
-import { useCompassWebLoggerAndTelemetry } from './logger-and-telemetry';
-import { renderHook, cleanup } from '@mongodb-js/testing-library-compass';
+import type { DebugFunction, LogFunction } from './logger';
+import { useCompassWebLogger } from './logger';
+import { renderHook } from '@mongodb-js/testing-library-compass';
 import Sinon from 'sinon';
 import { expect } from 'chai';
 
-describe('useCompassWebLoggerAndTelemetry', function () {
-  function renderLoggerAndTelemetryHook({
+describe('useCompassWebLogger', function () {
+  function renderLoggerHook({
     onDebug,
     onLog,
   }: {
-    onTrack?: TrackFunction;
     onDebug?: DebugFunction;
     onLog?: LogFunction;
   } = {}) {
     const Wrapper: React.FunctionComponent = ({ children }) => {
-      const logger = useCompassWebLoggerAndTelemetry({
+      const logger = useCompassWebLogger({
         onDebug,
         onLog,
       });
@@ -39,20 +34,17 @@ describe('useCompassWebLoggerAndTelemetry', function () {
     );
   }
 
-  beforeEach(cleanup);
-
   it('should call callback props when logger is called', function () {
     const logs: any[] = [];
     const onLog = Sinon.stub().callsFake((entry) => logs.push(entry));
-    const onTrack = Sinon.stub();
     const onDebug = Sinon.stub();
 
     const {
-      result: { current: loggerAndTelemetry },
-    } = renderLoggerAndTelemetryHook({ onLog, onTrack, onDebug });
+      result: { current: logger },
+    } = renderLoggerHook({ onLog, onDebug });
 
-    loggerAndTelemetry.debug('foo bar');
-    loggerAndTelemetry.log.info(mongoLogId(123), 'Ctx', 'msg', { attr: 1 });
+    logger.debug('foo bar');
+    logger.log.info(mongoLogId(123), 'Ctx', 'msg', { attr: 1 });
 
     expect(onDebug).to.have.been.calledOnceWith('TEST', 'foo bar');
     expect(logs).to.deep.equal([

packages/compass-web/src/logger-and-telemetry.tsx renamed to packages/compass-web/src/logger.tsx

@@ -4,11 +4,6 @@ import { PassThrough } from 'stream';
 import { mongoLogId } from '@mongodb-js/compass-logging/provider';
 import { useRef } from 'react';
 
-export type TrackFunction = (
-  event: string,
-  properties: Record<string, any>
-) => void;
-
 export type LogMessage = {
   id: number;
   t: { $date: string };
@@ -53,7 +48,7 @@ function createCompassWebDebugger(
   );
 }
 
-export class CompassWebLoggerAndTelemetry implements Logger {
+export class CompassWebLogger implements Logger {
   log: Logger['log'];
 
   debug: Debugger;
@@ -81,19 +76,19 @@ export class CompassWebLoggerAndTelemetry implements Logger {
   mongoLogId = mongoLogId;
 
   createLogger = (component: string): Logger => {
-    return new CompassWebLoggerAndTelemetry(component, this.callbackRef);
+    return new CompassWebLogger(component, this.callbackRef);
   };
 }
 
-export function useCompassWebLoggerAndTelemetry(callbacks: {
+export function useCompassWebLogger(callbacks: {
   onLog?: LogFunction;
   onDebug?: DebugFunction;
-}): CompassWebLoggerAndTelemetry {
+}): CompassWebLogger {
   const callbackRef = useRef(callbacks);
   callbackRef.current = callbacks;
-  const loggerAndTelemetryRef = useRef<CompassWebLoggerAndTelemetry>();
+  const loggerAndTelemetryRef = useRef<CompassWebLogger>();
   if (!loggerAndTelemetryRef.current) {
-    loggerAndTelemetryRef.current = new CompassWebLoggerAndTelemetry(
+    loggerAndTelemetryRef.current = new CompassWebLogger(
       'COMPASS-WEB',
       callbackRef
     );