From 994753313eee84bdc2109cd5d9ac8a97dd606828 Mon Sep 17 00:00:00 2001
From: Maurizio Casimirri <maurizio.cas@gmail.com>
Date: Tue, 27 May 2025 11:29:42 +0200
Subject: [PATCH 1/2] chore(telemetry): add tracking for AI modals and query
 generation funnel

---
 .../src/components/ai-experience-entry.tsx    | 17 +++++-
 .../src/components/ai-optin-modal.tsx         | 18 +++++-
 .../src/components/ai-signin-modal.tsx        | 19 +++++-
 .../src/components/query-bar.tsx              |  4 ++
 .../compass-telemetry/src/telemetry-events.ts | 60 +++++++++++++++++++
 5 files changed, 111 insertions(+), 7 deletions(-)

diff --git a/packages/compass-generative-ai/src/components/ai-experience-entry.tsx b/packages/compass-generative-ai/src/components/ai-experience-entry.tsx
index 8a6fef7d6a2..cc653feb4e9 100644
--- a/packages/compass-generative-ai/src/components/ai-experience-entry.tsx
+++ b/packages/compass-generative-ai/src/components/ai-experience-entry.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import {
   css,
   cx,
@@ -8,6 +8,10 @@ import {
   useDarkMode,
   WorkspaceContainer,
 } from '@mongodb-js/compass-components';
+import {
+  type TrackFunction,
+  useTelemetry,
+} from '@mongodb-js/compass-telemetry/provider';
 
 import {
   AIEntrySVG,
@@ -95,6 +99,12 @@ function AIExperienceEntry({
   onClick: () => void;
 }) {
   const darkMode = useDarkMode();
+  const track = useTelemetry();
+
+  const handleClick = useCallback(() => {
+    track('AI Generate Query Clicked', { type });
+    onClick();
+  }, [track, onClick, type]);
 
   return (
     <button
@@ -102,7 +112,7 @@ function AIExperienceEntry({
         aiEntryStyles,
         darkMode ? aiEntryDarkModeStyles : aiEntryLightModeStyles
       )}
-      onClick={onClick}
+      onClick={handleClick}
       data-testid={dataTestId}
       type="button"
       title={`Generate ${type}`}
@@ -119,10 +129,12 @@ function createAIPlaceholderHTMLPlaceholder({
   onClickAI,
   darkMode,
   placeholderText,
+  track,
 }: {
   onClickAI: () => void;
   darkMode?: boolean;
   placeholderText: string;
+  track: TrackFunction;
 }): HTMLElement {
   const containerEl = document.createElement('div');
 
@@ -144,6 +156,7 @@ function createAIPlaceholderHTMLPlaceholder({
   aiButtonEl.addEventListener('click', (e) => {
     e.preventDefault();
     e.stopPropagation();
+    track('AI Generate Query Clicked' as const, { type: 'query' });
     onClickAI();
   });
 
diff --git a/packages/compass-generative-ai/src/components/ai-optin-modal.tsx b/packages/compass-generative-ai/src/components/ai-optin-modal.tsx
index 05ebd124390..13244680e73 100644
--- a/packages/compass-generative-ai/src/components/ai-optin-modal.tsx
+++ b/packages/compass-generative-ai/src/components/ai-optin-modal.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useCallback } from 'react';
 import { connect } from 'react-redux';
 import {
   Banner,
@@ -15,6 +15,7 @@ import { AiImageBanner } from './ai-image-banner';
 import { closeOptInModal, optIn } from '../store/atlas-optin-reducer';
 import type { RootState } from '../store/atlas-ai-store';
 import { usePreference } from 'compass-preferences-model/provider';
+import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
 
 const GEN_AI_FAQ_LINK = 'https://www.mongodb.com/docs/generative-ai-faq/';
 
@@ -79,16 +80,29 @@ export const AIOptInModal: React.FunctionComponent<OptInModalProps> = ({
   projectId,
 }) => {
   const isProjectAIEnabled = usePreference('enableGenAIFeaturesAtlasProject');
+  const track = useTelemetry();
   const PROJECT_SETTINGS_LINK = projectId
     ? window.location.origin + '/v2/' + projectId + '#/settings/groupSettings'
     : null;
 
+  useEffect(() => {
+    if (isOptInModalVisible) {
+      track('AI Opt In Modal Shown', {});
+    }
+  }, [isOptInModalVisible, track]);
+
   const onConfirmClick = () => {
     if (isOptInInProgress) {
       return;
     }
     onOptInClick();
   };
+
+  const handleModalClose = useCallback(() => {
+    track('AI Opt In Modal Dismissed' as const, {});
+    onOptInModalClose();
+  }, [track, onOptInModalClose]);
+
   return (
     <ConfirmationModal
       open={isOptInModalVisible}
@@ -99,7 +113,7 @@ export const AIOptInModal: React.FunctionComponent<OptInModalProps> = ({
         onClick: onConfirmClick,
       }}
       cancelButtonProps={{
-        onClick: onOptInModalClose,
+        onClick: handleModalClose,
       }}
     >
       <Body className={bodyStyles}>
diff --git a/packages/compass-generative-ai/src/components/ai-signin-modal.tsx b/packages/compass-generative-ai/src/components/ai-signin-modal.tsx
index c5ef7a10796..05c9a779752 100644
--- a/packages/compass-generative-ai/src/components/ai-signin-modal.tsx
+++ b/packages/compass-generative-ai/src/components/ai-signin-modal.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useCallback } from 'react';
 import { connect } from 'react-redux';
 import {
   Body,
@@ -13,6 +13,7 @@ import {
 import { AiImageBanner } from './ai-image-banner';
 import { closeSignInModal, signIn } from '../store/atlas-signin-reducer';
 import type { RootState } from '../store/atlas-ai-store';
+import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
 
 const GEN_AI_FAQ_LINK = 'https://www.mongodb.com/docs/generative-ai-faq/';
 
@@ -41,6 +42,18 @@ const AISignInModal: React.FunctionComponent<SignInModalProps> = ({
   onSignInClick,
 }) => {
   const darkMode = useDarkMode();
+  const track = useTelemetry();
+
+  useEffect(() => {
+    if (isSignInModalVisible) {
+      track('AI Sign In Modal Shown', {});
+    }
+  }, [isSignInModalVisible, track]);
+
+  const handleModalClose = useCallback(() => {
+    track('AI Sign In Modal Dismissed', {});
+    onSignInModalClose?.();
+  }, [track, onSignInModalClose]);
 
   return (
     <MarketingModal
@@ -62,7 +75,7 @@ const AISignInModal: React.FunctionComponent<SignInModalProps> = ({
         </div>
       }
       open={isSignInModalVisible}
-      onClose={onSignInModalClose}
+      onClose={handleModalClose}
       // @ts-expect-error leafygreen only allows strings, but we need to pass
       // icons
       buttonText={
@@ -88,7 +101,7 @@ const AISignInModal: React.FunctionComponent<SignInModalProps> = ({
         onSignInClick?.();
       }}
       linkText="Not now"
-      onLinkClick={onSignInModalClose}
+      onLinkClick={handleModalClose}
     >
       <Body>
         Atlas users can now quickly create queries and aggregations with
diff --git a/packages/compass-query-bar/src/components/query-bar.tsx b/packages/compass-query-bar/src/components/query-bar.tsx
index 20a5da7ad8f..0b067ff8be9 100644
--- a/packages/compass-query-bar/src/components/query-bar.tsx
+++ b/packages/compass-query-bar/src/components/query-bar.tsx
@@ -15,6 +15,7 @@ import {
 } from '@mongodb-js/compass-generative-ai';
 import { connect } from '../stores/context';
 import { useIsAIFeatureEnabled } from 'compass-preferences-model/provider';
+import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
 
 import {
   OPTION_DEFINITION,
@@ -158,6 +159,7 @@ export const QueryBar: React.FunctionComponent<QueryBarProps> = ({
 }) => {
   const darkMode = useDarkMode();
   const isAIFeatureEnabled = useIsAIFeatureEnabled();
+  const track = useTelemetry();
 
   const onFormSubmit = useCallback(
     (evt: React.FormEvent) => {
@@ -177,6 +179,7 @@ export const QueryBar: React.FunctionComponent<QueryBarProps> = ({
           },
           darkMode,
           placeholderText: OPTION_DEFINITION.filter.placeholder,
+          track,
         })
       : placeholders?.filter;
   }, [
@@ -185,6 +188,7 @@ export const QueryBar: React.FunctionComponent<QueryBarProps> = ({
     darkMode,
     placeholders?.filter,
     onShowAIInputClick,
+    track,
   ]);
 
   const showAIEntryButton = useMemo(() => {
diff --git a/packages/compass-telemetry/src/telemetry-events.ts b/packages/compass-telemetry/src/telemetry-events.ts
index 3a5182ac913..e66f851447b 100644
--- a/packages/compass-telemetry/src/telemetry-events.ts
+++ b/packages/compass-telemetry/src/telemetry-events.ts
@@ -1524,6 +1524,61 @@ type AiResponseGeneratedEvent = ConnectionScopedEvent<{
   };
 }>;
 
+/**
+ * This event is fired when the AI Opt-In Modal is shown to the user.
+ *
+ * @category Gen AI
+ */
+type AiOptInModalShownEvent = CommonEvent<{
+  name: 'AI Opt In Modal Shown';
+  payload: Record<string, never>;
+}>;
+
+/**
+ * This event is fired when the AI Opt-In Modal is dismissed by the user.
+ *
+ * @category Gen AI
+ */
+type AiOptInModalDismissedEvent = CommonEvent<{
+  name: 'AI Opt In Modal Dismissed';
+  payload: Record<string, never>;
+}>;
+
+/**
+ * This event is fired when the AI Sign-In Modal is shown to the user.
+ *
+ * @category Gen AI
+ */
+type AiSignInModalShownEvent = CommonEvent<{
+  name: 'AI Sign In Modal Shown';
+  payload: Record<string, never>;
+}>;
+
+/**
+ * This event is fired when the AI Sign-In Modal is dismissed by the user.
+ *
+ * @category Gen AI
+ */
+type AiSignInModalDismissedEvent = CommonEvent<{
+  name: 'AI Sign In Modal Dismissed';
+  payload: Record<string, never>;
+}>;
+
+/**
+ * This event is fired when a user clicks the Generate Query / Aggregation entry point.
+ *
+ * @category Gen AI
+ */
+type AiGenerateQueryClickedEvent = CommonEvent<{
+  name: 'AI Generate Query Clicked';
+  payload: {
+    /**
+     * The type of query being generated.
+     */
+    type: 'aggregation' | 'query';
+  };
+}>;
+
 /**
  * This event is fired when a user submits feedback for a pipeline generation.
  *
@@ -2710,6 +2765,11 @@ export type TelemetryEvent =
   | AggregationTimedOutEvent
   | AggregationUseCaseAddedEvent
   | AggregationUseCaseSavedEvent
+  | AiOptInModalShownEvent
+  | AiOptInModalDismissedEvent
+  | AiSignInModalShownEvent
+  | AiSignInModalDismissedEvent
+  | AiGenerateQueryClickedEvent
   | AiPromptSubmittedEvent
   | AiQueryFeedbackEvent
   | AiResponseFailedEvent

From dfff22945265ed877ac6e0740258d7de25545fb8 Mon Sep 17 00:00:00 2001
From: Maurizio Casimirri <maurizio.cas@gmail.com>
Date: Tue, 27 May 2025 13:15:20 +0200
Subject: [PATCH 2/2] fix depcheck

---
 package-lock.json                           | 2 ++
 packages/compass-generative-ai/package.json | 1 +
 2 files changed, 3 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 56b1129d1a7..442a06c57c2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -45196,6 +45196,7 @@
         "@mongodb-js/compass-connections": "^1.57.0",
         "@mongodb-js/compass-intercom": "^0.23.0",
         "@mongodb-js/compass-logging": "^1.6.10",
+        "@mongodb-js/compass-telemetry": "^1.7.1",
         "@mongodb-js/compass-utils": "^0.8.9",
         "bson": "^6.10.3",
         "compass-preferences-model": "^2.39.0",
@@ -57170,6 +57171,7 @@
         "@mongodb-js/compass-connections": "^1.57.0",
         "@mongodb-js/compass-intercom": "^0.23.0",
         "@mongodb-js/compass-logging": "^1.6.10",
+        "@mongodb-js/compass-telemetry": "^1.7.1",
         "@mongodb-js/compass-utils": "^0.8.9",
         "@mongodb-js/connection-info": "^0.14.1",
         "@mongodb-js/eslint-config-compass": "^1.3.9",
diff --git a/packages/compass-generative-ai/package.json b/packages/compass-generative-ai/package.json
index 1dce9741ed0..ec4c9e506cb 100644
--- a/packages/compass-generative-ai/package.json
+++ b/packages/compass-generative-ai/package.json
@@ -57,6 +57,7 @@
     "@mongodb-js/compass-connections": "^1.57.0",
     "@mongodb-js/compass-intercom": "^0.23.0",
     "@mongodb-js/compass-logging": "^1.6.10",
+    "@mongodb-js/compass-telemetry": "^1.7.1",
     "@mongodb-js/compass-utils": "^0.8.9",
     "bson": "^6.10.3",
     "compass-preferences-model": "^2.39.0",