fix: add connectionInfo to telemetry calls, and connectionId to events COMPASS-7968 (#5977)

Author: paula-stacho

configs/eslint-config-compass/index.js

@@ -30,6 +30,12 @@ const tsOverrides = {
 const tsxRules = {
   ...common.tsxRules,
   ...extraTsRules,
+  'react-hooks/exhaustive-deps': [
+    'warn',
+    {
+      additionalHooks: 'useTrackOnChange',
+    },
+  ],
 };
 
 const tsxOverrides = {

packages/compass-aggregations/src/components/aggregation-side-panel/index.tsx

@@ -18,6 +18,7 @@ import { FeedbackLink } from './feedback-link';
 import { addWizard } from '../../modules/pipeline-builder/stage-editor';
 import { UseCaseCard } from './stage-wizard-use-cases';
 import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
+import { useConnectionInfoAccess } from '@mongodb-js/compass-connections/provider';
 
 const containerStyles = css({
   height: '100%',
@@ -79,6 +80,7 @@ export const AggregationSidePanel = ({
   onSelectUseCase,
 }: AggregationSidePanelProps) => {
   const track = useTelemetry();
+  const connectionInfoAccess = useConnectionInfoAccess();
   const [searchText, setSearchText] = useState<string>('');
   const darkMode = useDarkMode();
 
@@ -104,12 +106,16 @@ export const AggregationSidePanel = ({
         return;
       }
       onSelectUseCase(id, useCase.stageOperator);
-      track('Aggregation Use Case Added', {
-        drag_and_drop: false,
-        stage_name: useCase.stageOperator,
-      });
+      track(
+        'Aggregation Use Case Added',
+        {
+          drag_and_drop: false,
+          stage_name: useCase.stageOperator,
+        },
+        connectionInfoAccess.getCurrentConnectionInfo()
+      );
     },
-    [onSelectUseCase, track]
+    [onSelectUseCase, track, connectionInfoAccess]
   );
 
   return (

packages/compass-aggregations/src/components/create-view-modal/create-view-modal.tsx

@@ -13,6 +13,11 @@ import { createView, changeViewName, close } from '../../modules/create-view';
 import type { CreateViewRootState } from '../../stores/create-view';
 import { withTelemetry } from '@mongodb-js/compass-telemetry/provider';
 import type { TrackFunction } from '@mongodb-js/compass-telemetry';
+import {
+  type ConnectionRepository,
+  withConnectionRepository,
+  type ConnectionInfo,
+} from '@mongodb-js/compass-connections/provider';
 
 const progressContainerStyles = css({
   display: 'flex',
@@ -29,9 +34,11 @@ type CreateViewModalProps = {
   isDuplicating?: boolean;
   source?: string;
   pipeline?: unknown[];
+  connectionId: ConnectionInfo['id'];
   isRunning?: boolean;
   error: Error | null;
   track: TrackFunction;
+  connectionRepository: ConnectionRepository;
 };
 
 class CreateViewModal extends PureComponent<CreateViewModalProps> {
@@ -46,7 +53,11 @@ class CreateViewModal extends PureComponent<CreateViewModalProps> {
 
   componentDidUpdate(prevProps: CreateViewModalProps) {
     if (prevProps.isVisible !== this.props.isVisible && this.props.isVisible) {
-      this.props.track('Screen', { name: 'create_view_modal' });
+      const connectionInfo =
+        this.props.connectionRepository.getConnectionInfoById(
+          this.props.connectionId
+        );
+      this.props.track('Screen', { name: 'create_view_modal' }, connectionInfo);
     }
   }
 
@@ -107,18 +118,21 @@ const mapStateToProps = (state: CreateViewRootState) => ({
   error: state.error,
   source: state.source,
   pipeline: state.pipeline,
+  connectionId: state.connectionId,
 });
 
 /**
  * Connect the redux store to the component.
  * (dispatch)
  */
 const MappedCreateViewModal = withTelemetry(
-  connect(mapStateToProps, {
-    createView,
-    changeViewName,
-    closeModal: close,
-  })(CreateViewModal)
+  withConnectionRepository(
+    connect(mapStateToProps, {
+      createView,
+      changeViewName,
+      closeModal: close,
+    })(CreateViewModal)
+  )
 );
 
 export default MappedCreateViewModal;

packages/compass-aggregations/src/components/pipeline-builder-workspace/pipeline-as-text-workspace/pipeline-editor.tsx

@@ -21,6 +21,7 @@ import { changeEditorValue } from '../../../modules/pipeline-builder/text-editor
 import type { PipelineParserError } from '../../../modules/pipeline-builder/pipeline-parser/utils';
 import { useAutocompleteFields } from '@mongodb-js/compass-field-store';
 import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
+import { useConnectionInfoAccess } from '@mongodb-js/compass-connections/provider';
 
 const containerStyles = css({
   position: 'relative',
@@ -80,6 +81,7 @@ export const PipelineEditor: React.FunctionComponent<PipelineEditorProps> = ({
 }) => {
   const fields = useAutocompleteFields(namespace);
   const track = useTelemetry();
+  const connectionInfoAccess = useConnectionInfoAccess();
   const editorInitialValueRef = useRef<string>(pipelineText);
   const editorCurrentValueRef = useRef<string>(pipelineText);
   editorCurrentValueRef.current = pipelineText;
@@ -100,13 +102,17 @@ export const PipelineEditor: React.FunctionComponent<PipelineEditorProps> = ({
       !!editorCurrentValueRef.current &&
       editorCurrentValueRef.current !== editorInitialValueRef.current
     ) {
-      track('Aggregation Edited', {
-        num_stages,
-        editor_view_type: 'text',
-      });
+      track(
+        'Aggregation Edited',
+        {
+          num_stages,
+          editor_view_type: 'text',
+        },
+        connectionInfoAccess.getCurrentConnectionInfo()
+      );
       editorInitialValueRef.current = editorCurrentValueRef.current;
     }
-  }, [num_stages, track]);
+  }, [num_stages, track, connectionInfoAccess]);
 
   const annotations: Annotation[] = useMemo(() => {
     return syntaxErrors

packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-ai.spec.tsx

@@ -171,6 +171,7 @@ describe('PipelineAI Component', function () {
               {
                 event: 'PipelineAI Feedback',
                 properties: {
+                  connection_id: 'TEST',
                   feedback: 'positive',
                   request_id: 'pineapple',
                   text: 'this is the pipeline I was looking for',

packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-ai.tsx

@@ -15,10 +15,12 @@ import type { RootState } from '../../modules';
 import { useLogger } from '@mongodb-js/compass-logging/provider';
 import { getPipelineStageOperatorsFromBuilderState } from '../../modules/pipeline-builder/builder-helpers';
 import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
+import { useConnectionInfoAccess } from '@mongodb-js/compass-connections/provider';
 
 const useOnSubmitFeedback = (lastAIPipelineRequestId: string | null) => {
   const logger = useLogger('AI-PIPELINE-UI');
   const track = useTelemetry();
+  const connectionInfoAccess = useConnectionInfoAccess();
   return useCallback(
     (feedback: 'positive' | 'negative', text: string) => {
       const { log, mongoLogId } = logger;
@@ -33,19 +35,23 @@ const useOnSubmitFeedback = (lastAIPipelineRequestId: string | null) => {
         }
       );
 
-      track('PipelineAI Feedback', () => ({
-        feedback,
-        request_id: lastAIPipelineRequestId,
-        text,
-      }));
+      track(
+        'PipelineAI Feedback',
+        () => ({
+          feedback,
+          request_id: lastAIPipelineRequestId,
+          text,
+        }),
+        connectionInfoAccess.getCurrentConnectionInfo()
+      );
 
       openToast('pipeline-ai-feedback-submitted', {
         variant: 'success',
         title: 'Your feedback has been submitted.',
         timeout: 10_000,
       });
     },
-    [logger, track, lastAIPipelineRequestId]
+    [logger, track, lastAIPipelineRequestId, connectionInfoAccess]
   );
 };
 

packages/compass-aggregations/src/components/stage-editor/stage-editor.tsx

@@ -25,6 +25,7 @@ import type { RootState } from '../../modules';
 import type { PipelineParserError } from '../../modules/pipeline-builder/pipeline-parser/utils';
 import { useAutocompleteFields } from '@mongodb-js/compass-field-store';
 import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
+import { useConnectionInfoAccess } from '@mongodb-js/compass-connections/provider';
 
 const editorContainerStyles = css({
   display: 'flex',
@@ -97,6 +98,7 @@ export const StageEditor = ({
   editorRef,
 }: StageEditorProps) => {
   const track = useTelemetry();
+  const connectionInfoAccess = useConnectionInfoAccess();
   const darkMode = useDarkMode();
   const editorInitialValueRef = useRef<string | null>(stageValue);
   const editorCurrentValueRef = useRef<string | null>(stageValue);
@@ -136,16 +138,27 @@ export const StageEditor = ({
       !!editorCurrentValueRef.current &&
       editorCurrentValueRef.current !== editorInitialValueRef.current
     ) {
-      track('Aggregation Edited', {
-        num_stages: num_stages,
-        stage_index: index + 1,
-        stage_action: 'stage_content_changed',
-        stage_name: stageOperator,
-        editor_view_type: editor_view_type,
-      });
+      track(
+        'Aggregation Edited',
+        {
+          num_stages: num_stages,
+          stage_index: index + 1,
+          stage_action: 'stage_content_changed',
+          stage_name: stageOperator,
+          editor_view_type: editor_view_type,
+        },
+        connectionInfoAccess.getCurrentConnectionInfo()
+      );
       editorInitialValueRef.current = editorCurrentValueRef.current;
     }
-  }, [track, num_stages, index, stageOperator, editor_view_type]);
+  }, [
+    track,
+    num_stages,
+    index,
+    stageOperator,
+    editor_view_type,
+    connectionInfoAccess,
+  ]);
 
   return (
     <div

packages/compass-aggregations/src/index.ts

@@ -13,7 +13,7 @@ import {
   type DataServiceLocator,
 } from '@mongodb-js/compass-connections/provider';
 import { createLoggerLocator } from '@mongodb-js/compass-logging/provider';
-import { createTelemetryLocator } from '@mongodb-js/compass-telemetry/provider';
+import { telemetryLocator } from '@mongodb-js/compass-telemetry/provider';
 import type {
   OptionalDataServiceProps,
   RequiredDataServiceProps,
@@ -27,6 +27,7 @@ import { preferencesLocator } from 'compass-preferences-model/provider';
 import { atlasAuthServiceLocator } from '@mongodb-js/atlas-service/provider';
 import { atlasAiServiceLocator } from '@mongodb-js/compass-generative-ai/provider';
 import { pipelineStorageLocator } from '@mongodb-js/my-queries-storage/provider';
+import { connectionRepositoryAccessLocator } from '@mongodb-js/compass-connections/provider';
 
 export const CompassAggregationsHadronPlugin = registerHadronPlugin(
   {
@@ -43,7 +44,7 @@ export const CompassAggregationsHadronPlugin = registerHadronPlugin(
     instance: mongoDBInstanceLocator,
     preferences: preferencesLocator,
     logger: createLoggerLocator('COMPASS-AGGREGATIONS-UI'),
-    track: createTelemetryLocator(),
+    track: telemetryLocator,
     atlasAuthService: atlasAuthServiceLocator,
     atlasAiService: atlasAiServiceLocator,
     pipelineStorage: pipelineStorageLocator,
@@ -67,8 +68,9 @@ export const CreateViewPlugin = registerHadronPlugin(
   },
   {
     connectionsManager: connectionsManagerLocator,
+    connectionRepository: connectionRepositoryAccessLocator,
     logger: createLoggerLocator('COMPASS-CREATE-VIEW-UI'),
-    track: createTelemetryLocator(),
+    track: telemetryLocator,
     workspaces: workspacesServiceLocator,
   }
 );

packages/compass-aggregations/src/modules/aggregation.spec.ts

@@ -41,6 +41,7 @@ const getMockedStore = (
         preferences: defaultPreferencesInstance,
         logger: createNoopLogger(),
         track: createNoopTrack(),
+        connectionInfoAccess: { getCurrentConnectionInfo: () => {} },
       })
     )
   );

packages/compass-aggregations/src/modules/aggregation.ts

@@ -289,7 +289,7 @@ export const runAggregation = (): PipelineBuilderThunkAction<Promise<void>> => {
   return async (
     dispatch,
     getState,
-    { pipelineBuilder, instance, dataService, track }
+    { pipelineBuilder, instance, dataService, track, connectionInfoAccess }
   ) => {
     const pipeline = getPipelineFromBuilderState(getState(), pipelineBuilder);
 
@@ -309,10 +309,14 @@ export const runAggregation = (): PipelineBuilderThunkAction<Promise<void>> => {
       type: ActionTypes.RunAggregation,
       pipeline,
     });
-    track('Aggregation Executed', () => ({
-      num_stages: pipeline.length,
-      editor_view_type: mapPipelineModeToEditorViewType(getState()),
-    }));
+    track(
+      'Aggregation Executed',
+      () => ({
+        num_stages: pipeline.length,
+        editor_view_type: mapPipelineModeToEditorViewType(getState()),
+      }),
+      connectionInfoAccess.getCurrentConnectionInfo()
+    );
     return dispatch(fetchAggregationData());
   };
 };
@@ -363,8 +367,12 @@ export const cancelAggregation = (): PipelineBuilderThunkAction<
   void,
   Actions
 > => {
-  return (dispatch, getState, { track }) => {
-    track('Aggregation Canceled');
+  return (dispatch, getState, { track, connectionInfoAccess }) => {
+    track(
+      'Aggregation Canceled',
+      {},
+      connectionInfoAccess.getCurrentConnectionInfo()
+    );
     const {
       aggregation: { abortController },
     } = getState();
@@ -387,7 +395,13 @@ const fetchAggregationData = (
   return async (
     dispatch,
     getState,
-    { preferences, logger: { log, mongoLogId }, track, globalAppRegistry }
+    {
+      preferences,
+      logger: { log, mongoLogId },
+      track,
+      connectionInfoAccess,
+      globalAppRegistry,
+    }
   ) => {
     const {
       namespace,
@@ -470,7 +484,11 @@ const fetchAggregationData = (
           page,
         });
         if ((e as MongoServerError).codeName === 'MaxTimeMSExpired') {
-          track('Aggregation Timed Out', { max_time_ms: maxTimeMS ?? null });
+          track(
+            'Aggregation Timed Out',
+            { max_time_ms: maxTimeMS ?? null },
+            connectionInfoAccess.getCurrentConnectionInfo()
+          );
         }
         log.warn(
           mongoLogId(1001000106),