feat(compass-indexes): Add instrumentation for search activation program P1 COMPASS-10444

packages/compass-aggregations/src/components/search-index-does-not-exist-banner.tsx

@@ -6,6 +6,7 @@ import {
   Banner,
   useDrawerActions,
 } from '@mongodb-js/compass-components';
+import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
 import { mapSearchStageOperatorToSearchIndexType } from '../utils/stage';
 import type { SearchStageOperator } from '../utils/stage';
 import type { SearchIndexType } from '../modules/search-indexes';
@@ -30,6 +31,7 @@ export default function SearchIndexDoesNotExistBanner({
   onCreateSearchIndexClick,
 }: SearchIndexDoesNotExistBannerProps) {
   const { openDrawer } = useDrawerActions();
+  const track = useTelemetry();
   const searchIndexType =
     mapSearchStageOperatorToSearchIndexType(searchStageOperator);
   const message = `${
@@ -48,6 +50,9 @@ export default function SearchIndexDoesNotExistBanner({
         <>
           <Link
             onClick={() => {
+              track('Search Index View Indexes Link Clicked', {
+                context: 'Search Index Does Not Exist Banner',
+              });
               openDrawer('compass-indexes-drawer');
               onViewIndexesClick();
             }}
@@ -57,6 +62,10 @@ export default function SearchIndexDoesNotExistBanner({
           {' or '}
           <Link
             onClick={() => {
+              track('Search Index Create Link Clicked', {
+                context: 'Search Index Does Not Exist Banner',
+                index_type: searchIndexType,
+              });
               openDrawer('compass-indexes-drawer');
               onCreateSearchIndexClick(searchIndexType);
             }}

packages/compass-aggregations/src/components/search-index-stale-results-banner.tsx

@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 import { buildAtlasSearchLink } from '@mongodb-js/atlas-service/provider';
 
 import { css, spacing, Link, Banner } from '@mongodb-js/compass-components';
+import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
 import { useConnectionInfo } from '@mongodb-js/compass-connections/provider';
 import type { RootState } from '../modules';
 
@@ -25,6 +26,7 @@ function SearchIndexStaleResultsBanner({
 }: SearchIndexStaleResultsBannerProps) {
   const [showBanner, setShowBanner] = React.useState(true);
   const { atlasMetadata } = useConnectionInfo();
+  const track = useTelemetry();
   const message =
     'Results shown are based on the most recently built index version.';
 
@@ -46,7 +48,19 @@ function SearchIndexStaleResultsBanner({
       dismissible
       onClose={() => setShowBanner(false)}
     >
-      {message} {href && <Link href={href}>View Index Definition</Link>}
+      {message}{' '}
+      {href && (
+        <Link
+          href={href}
+          onClick={() => {
+            track('Search Index View Definition Link Clicked', {
+              context: 'Search Index Stale Results Banner',
+            });
+          }}
+        >
+          View Index Definition
+        </Link>
+      )}
     </Banner>
   ) : null;
 }

packages/compass-aggregations/src/components/server-error-banner.tsx

@@ -7,6 +7,7 @@ import {
   Banner,
   useDrawerActions,
 } from '@mongodb-js/compass-components';
+import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
 import { isSearchIndexDefinitionError } from '../utils/search-stage-errors';
 
 const bannerStyles = css({
@@ -31,6 +32,7 @@ export default function ServerErrorBanner({
   dataTestId = 'server-error-banner',
 }: ServerErrorBannerProps) {
   const { openDrawer } = useDrawerActions();
+  const track = useTelemetry();
 
   return (
     <Banner
@@ -47,6 +49,9 @@ export default function ServerErrorBanner({
             {' '}
             <Link
               onClick={() => {
+                track('Search Index Edit Link Clicked', {
+                  context: 'Server Error Banner',
+                });
                 openDrawer('compass-indexes-drawer');
                 onEditSearchIndexClick(searchIndexName);
               }}

packages/compass-aggregations/src/components/stage-toolbar/index.tsx

@@ -23,6 +23,7 @@ import OptionMenu from './option-menu';
 import type { StoreStage } from '../../modules/pipeline-builder/stage-editor';
 import { getInsightForStage } from '../../utils/insights';
 import { usePreference } from 'compass-preferences-model/provider';
+import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
 import type { ServerEnvironment } from '../../modules/env';
 import {
   createSearchIndex,
@@ -137,6 +138,7 @@ export function StageToolbar({
   );
   const darkMode = useDarkMode();
   const { openDrawer } = useDrawerActions();
+  const track = useTelemetry();
 
   const insight = useMemo(
     () =>
@@ -174,6 +176,9 @@ export function StageToolbar({
               size="xsmall"
               className={viewIndexesButtonStyles}
               onClick={() => {
+                track('Search Index View Indexes Button Clicked', {
+                  context: 'Stage Toolbar',
+                });
                 openDrawer('compass-indexes-drawer');
                 onClickViewSearchIndexes();
               }}

packages/compass-indexes/src/components/drawer-views/create-search-index-drawer-view.tsx

@@ -49,8 +49,12 @@ import searchIndexSchema from '@mongodb-js/search-index-schema/output/search/ind
 import vectorSearchIndexSchema from '@mongodb-js/search-index-schema/output/vectorSearch/index_jsonEditor.json';
 import type { JSONSchema7 } from 'json-schema';
 import { selectReadWriteAccess } from '../../utils/indexes-read-write-access';
-import { useConnectionInfo } from '@mongodb-js/compass-connections/provider';
+import {
+  useConnectionInfo,
+  useConnectionInfoRef,
+} from '@mongodb-js/compass-connections/provider';
 import { usePreferences } from 'compass-preferences-model/provider';
+import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
 
 /**
  * Strips snippet tab-stop placeholders (e.g. `${1:default}` → `default`)
@@ -107,6 +111,17 @@ const CreateSearchIndexDrawerView: React.FunctionComponent<
   createIndex,
   onIndexDefinitionEdit,
 }) => {
+  const track = useTelemetry();
+  const connectionInfoRef = useConnectionInfoRef();
+
+  useEffect(() => {
+    track(
+      'Screen',
+      { name: 'create_search_index_drawer' },
+      connectionInfoRef.current
+    );
+  }, [track, connectionInfoRef]);
+
   const editorRef = useRef<EditorRef>(null);
   const [indexDefinition, setIndexDefinition] = useState(
     normalizeSnippet(
@@ -166,12 +181,16 @@ const CreateSearchIndexDrawerView: React.FunctionComponent<
   );
 
   const onCreateClick = useCallback(() => {
+    track('Search Index Create Submitted', {
+      context: 'Create Search Index Drawer View',
+      index_type: currentIndexType,
+    });
     createIndex({
       name,
       definition: parseShellBSON(indexDefinition),
       type: currentIndexType,
     });
-  }, [name, indexDefinition, createIndex, currentIndexType]);
+  }, [name, indexDefinition, createIndex, currentIndexType, track]);
 
   const indexLabel =
     currentIndexType === 'vectorSearch'
@@ -236,7 +255,13 @@ const CreateSearchIndexDrawerView: React.FunctionComponent<
         <Button
           data-testid="create-search-index-drawer-view-cancel-button"
           variant="default"
-          onClick={onClose}
+          onClick={() => {
+            track('Search Index Create Cancelled', {
+              context: 'Create Search Index Drawer View',
+              index_type: currentIndexType,
+            });
+            onClose();
+          }}
         >
           Cancel
         </Button>

packages/compass-indexes/src/components/drawer-views/edit-search-index-drawer-view.tsx

@@ -54,8 +54,12 @@ import searchIndexSchema from '@mongodb-js/search-index-schema/output/search/ind
 import vectorSearchIndexSchema from '@mongodb-js/search-index-schema/output/vectorSearch/index_jsonEditor.json';
 import type { JSONSchema7 } from 'json-schema';
 import { selectReadWriteAccess } from '../../utils/indexes-read-write-access';
-import { useConnectionInfo } from '@mongodb-js/compass-connections/provider';
+import {
+  useConnectionInfo,
+  useConnectionInfoRef,
+} from '@mongodb-js/compass-connections/provider';
 import { usePreferences } from 'compass-preferences-model/provider';
+import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
 
 const scrollContainerStyles = css({
   overflowX: 'auto',
@@ -92,6 +96,17 @@ const EditSearchIndexDrawerView: React.FunctionComponent<
   updateIndex,
   onIndexDefinitionEdit,
 }) => {
+  const track = useTelemetry();
+  const connectionInfoRef = useConnectionInfoRef();
+
+  useEffect(() => {
+    track(
+      'Screen',
+      { name: 'edit_search_index_drawer' },
+      connectionInfoRef.current
+    );
+  }, [track, connectionInfoRef]);
+
   const editorRef = useRef<EditorRef>(null);
   const [indexDefinition, setIndexDefinition] = useState(
     JSON.stringify(searchIndex.latestDefinition, null, 2)
@@ -157,11 +172,15 @@ const EditSearchIndexDrawerView: React.FunctionComponent<
   );
 
   const onSaveClick = useCallback(() => {
+    track('Search Index Edit Submitted', {
+      context: 'Edit Search Index Drawer View',
+      index_type: searchIndex.type ?? 'search',
+    });
     updateIndex({
       name: searchIndex.name,
       definition: parseShellBSON(indexDefinition),
     });
-  }, [searchIndex, indexDefinition, updateIndex]);
+  }, [searchIndex, indexDefinition, updateIndex, track]);
 
   const indexLabel =
     searchIndex.type === 'vectorSearch'
@@ -236,7 +255,13 @@ const EditSearchIndexDrawerView: React.FunctionComponent<
         <Button
           data-testid="edit-search-index-drawer-view-cancel-button"
           variant="default"
-          onClick={onClose}
+          onClick={() => {
+            track('Search Index Edit Cancelled', {
+              context: 'Edit Search Index Drawer View',
+              index_type: searchIndex.type ?? 'search',
+            });
+            onClose();
+          }}
         >
           Cancel
         </Button>

packages/compass-indexes/src/components/drawer-views/indexes-list-drawer-view.tsx

@@ -30,8 +30,12 @@ import ViewPipelineIncompatibleBanner from '../view-incompatible-components/view
 import ViewStandardIndexesIncompatibleEmptyState from '../view-incompatible-components/view-standard-indexes-incompatible-empty-state';
 import { selectIsViewSearchCompatible } from '../../utils/is-view-search-compatible';
 import { selectReadWriteAccess } from '../../utils/indexes-read-write-access';
-import { useConnectionInfo } from '@mongodb-js/compass-connections/provider';
+import {
+  useConnectionInfo,
+  useConnectionInfoRef,
+} from '@mongodb-js/compass-connections/provider';
 import { usePreferences } from 'compass-preferences-model/provider';
+import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
 import RegularIndexesDrawerTable from '../regular-indexes-table/regular-indexes-drawer-table';
 import SearchIndexesDrawerTable from '../search-indexes-table/search-indexes-drawer-table';
 
@@ -85,6 +89,12 @@ const IndexesListDrawerView: React.FunctionComponent<
 }) => {
   const [searchTerm, setSearchTerm] = useState<string>('');
   const { openDrawer } = useDrawerActions();
+  const track = useTelemetry();
+  const connectionInfoRef = useConnectionInfoRef();
+
+  useEffect(() => {
+    track('Screen', { name: 'indexes_list_drawer' }, connectionInfoRef.current);
+  }, [track, connectionInfoRef]);
 
   const { atlasMetadata } = useConnectionInfo();
   const isAtlas = !!atlasMetadata;
@@ -119,18 +129,30 @@ const IndexesListDrawerView: React.FunctionComponent<
     (action: string) => {
       switch (action) {
         case 'createRegularIndex':
+          track('Index Create Action Clicked', {
+            context: 'Indexes List Drawer View',
+            index_type: 'regular',
+          });
           return onCreateRegularIndexClick();
         case 'createSearchIndex':
+          track('Index Create Action Clicked', {
+            context: 'Indexes List Drawer View',
+            index_type: 'search',
+          });
           onCreateSearchIndexClick('search');
           openDrawer(INDEXES_DRAWER_ID);
           return;
         case 'createVectorSearchIndex':
+          track('Index Create Action Clicked', {
+            context: 'Indexes List Drawer View',
+            index_type: 'vectorSearch',
+          });
           onCreateSearchIndexClick('vectorSearch');
           openDrawer(INDEXES_DRAWER_ID);
           return;
       }
     },
-    [onCreateRegularIndexClick, onCreateSearchIndexClick, openDrawer]
+    [onCreateRegularIndexClick, onCreateSearchIndexClick, openDrawer, track]
   );
 
   const getSearchIndexesBanner = () => {
@@ -166,7 +188,12 @@ const IndexesListDrawerView: React.FunctionComponent<
             isRefreshing ||
             (!isRegularIndexesReadable && !isSearchIndexesReadable)
           }
-          onClick={onRefreshClick}
+          onClick={() => {
+            track('Index Refresh Clicked', {
+              context: 'Indexes List Drawer View',
+            });
+            onRefreshClick();
+          }}
           variant="default"
           size="xsmall"
           leftGlyph={refreshButtonIcon}

packages/compass-indexes/src/components/search-indexes-table/search-indexes-drawer-table.tsx

@@ -21,6 +21,7 @@ import SearchIndexActions from './search-index-actions';
 import type { RootState } from '../../modules';
 import { useConnectionInfo } from '@mongodb-js/compass-connections/provider';
 import { usePreferences } from 'compass-preferences-model/provider';
+import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
 import { selectReadWriteAccess } from '../../utils/indexes-read-write-access';
 import {
   getIndexFields,
@@ -126,6 +127,7 @@ export const SearchIndexesDrawerTable: React.FunctionComponent<
   onDropIndexClick,
   onCreateSearchIndexClick,
 }) => {
+  const track = useTelemetry();
   const { atlasMetadata } = useConnectionInfo();
   const isAtlas = !!atlasMetadata;
 
@@ -149,12 +151,20 @@ export const SearchIndexesDrawerTable: React.FunctionComponent<
     (action: string) => {
       switch (action) {
         case 'createSearchIndex':
+          track('Index Create Action Clicked', {
+            context: 'Search Indexes Drawer Table',
+            index_type: 'search',
+          });
           return onCreateSearchIndexClick('search');
         case 'createVectorSearchIndex':
+          track('Index Create Action Clicked', {
+            context: 'Search Indexes Drawer Table',
+            index_type: 'vectorSearch',
+          });
           return onCreateSearchIndexClick('vectorSearch');
       }
     },
-    [onCreateSearchIndexClick]
+    [onCreateSearchIndexClick, track]
   );
 
   const renderActions = useCallback(

packages/compass-indexes/src/modules/search-indexes.ts

@@ -632,7 +632,7 @@ const fetchIndexes = (
   return async (
     dispatch,
     getState,
-    { dataService, preferences, connectionInfoRef }
+    { dataService, preferences, connectionInfoRef, track }
   ) => {
     const {
       isWritable,
@@ -682,7 +682,12 @@ const fetchIndexes = (
           previousIndexes,
           indexes,
           atlasMetadata,
-          namespace
+          namespace,
+          (index) => {
+            track('Search Index Status Details Link Clicked', {
+              index_type: index.type ?? 'search',
+            });
+          }
         );
       }
     } catch (err) {