feat: Add analytics for early index journey guidance CLOUDP-311789

packages/compass-components/src/components/accordion.tsx

@@ -52,12 +52,14 @@ interface AccordionProps extends React.HTMLProps<HTMLButtonElement> {
   hintText?: string;
   open?: boolean;
   setOpen?: (newValue: boolean) => void;
+  onOpenCallback?: () => void;
 }
 function Accordion({
   text,
   hintText,
   open: _open,
   setOpen: _setOpen,
+  onOpenCallback,
   ...props
 }: React.PropsWithChildren<AccordionProps>): React.ReactElement {
   const darkMode = useDarkMode();
@@ -70,6 +72,9 @@ function Accordion({
       setOpenRef.current?.(newValue);
       return newValue;
     });
+    if (typeof onOpenCallback === 'function') {
+      onOpenCallback();
+    }
   }, []);
   const regionId = useId();
   const labelId = useId();

packages/compass-indexes/src/components/create-index-actions/create-index-actions.tsx

@@ -4,6 +4,7 @@ import { connect } from 'react-redux';
 import { areAllFieldsFilledIn } from '../../utils/create-index-modal-validation';
 import type { Field, Tab } from '../../modules/create-index';
 import type { RootState } from '../../modules';
+import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
 
 const containerStyles = css({
   display: 'flex',
@@ -45,6 +46,8 @@ function CreateIndexActions({
   showIndexesGuidanceVariant: boolean;
   indexSuggestions: Record<string, number> | null;
 }) {
+  const track = useTelemetry();
+
   let isCreateIndexButtonDisabled = false;
 
   if (showIndexesGuidanceVariant) {
@@ -81,7 +84,12 @@ function CreateIndexActions({
 
       <Button
         data-testid="create-index-actions-cancel-button"
-        onClick={onCancelCreateIndexClick}
+        onClick={() => {
+          onCancelCreateIndexClick();
+          track('Cancel Button Clicked', {
+            context: 'Create Index Modal',
+          });
+        }}
       >
         Cancel
       </Button>

packages/compass-indexes/src/components/create-index-fields.tsx

@@ -13,6 +13,7 @@ import {
 } from '@mongodb-js/compass-components';
 
 import type { Field } from '../modules/create-index';
+import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
 
 /**
  * Current allowed types for indexes.
@@ -63,6 +64,8 @@ function CreateIndexFields({
   onSelectFieldNameClick,
   onSelectFieldTypeClick,
 }: CreateIndexFieldsProps): React.ReactElement {
+  const track = useTelemetry();
+
   const [indexTypes, selectorWidth] = useMemo(() => {
     const serverSupportsColumnStoreIndex =
       hasColumnstoreIndexesSupport(serverVersion);
@@ -88,6 +91,13 @@ function CreateIndexFields({
     [onSelectFieldNameClick]
   );
 
+  const handleOnAddFieldClick = useCallback(() => {
+    onAddFieldClick();
+    track('New Index Field Added', {
+      context: 'Create Index Modal',
+    });
+  }, []);
+
   const comboboxOptions = schemaFields.map((value) => ({ value }));
 
   return (
@@ -154,7 +164,7 @@ function CreateIndexFields({
           </div>
         </div>
       )}
-      onAddItem={onAddFieldClick}
+      onAddItem={handleOnAddFieldClick}
       onRemoveItem={onRemoveFieldClick}
       addButtonTestId="add-index-field-button"
       removeButtonTestId="remove-index-field-button"

packages/compass-indexes/src/components/create-index-form/create-index-form.tsx

@@ -22,6 +22,7 @@ import IndexFlowSection from './index-flow-section';
 import QueryFlowSection from './query-flow-section';
 import toNS from 'mongodb-ns';
 import type { Document } from 'mongodb';
+import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
 
 const createIndexModalFieldsStyles = css({
   margin: `${spacing[600]}px 0 ${spacing[800]}px 0`,
@@ -74,6 +75,9 @@ function CreateIndexForm({
   );
   const showRollingIndexOption =
     rollingIndexesFeatureEnabled && supportsRollingIndexes;
+
+  const track = useTelemetry();
+
   const schemaFields = useAutocompleteFields(namespace);
   const schemaFieldNames = useMemo(() => {
     return schemaFields
@@ -108,6 +112,13 @@ function CreateIndexForm({
             data-testid="create-index-form-flows"
             id="create-index-form-flows"
             onChange={(e) => {
+              const tabName =
+                e.target.value === 'IndexFlow'
+                  ? 'Start with an Index'
+                  : 'Start with a Query';
+              track(`${tabName} Tab Clicked`, {
+                context: 'Create Index Modal',
+              });
               onTabClick(e.target.value as Tab);
             }}
             value={currentTab}
@@ -173,6 +184,11 @@ function CreateIndexForm({
       <Accordion
         data-testid="create-index-modal-toggle-options"
         text={showIndexesGuidanceVariant ? 'Index Options' : 'Options'}
+        onOpenCallback={() => {
+          track('Options Clicked', {
+            context: 'Create Index Modal',
+          });
+        }}
       >
         <div
           data-testid="create-index-modal-options"

packages/compass-indexes/src/components/create-index-form/index-flow-section.tsx

@@ -210,6 +210,10 @@ const IndexFlowSection = ({
       return { [field.name]: index + 1 };
     });
 
+    track('Covered Queries Button Clicked', {
+      context: 'Create Index Modal',
+    });
+
     try {
       setCoveredQueriesObj({
         coveredQueries: generateCoveredQueries(coveredQueriesArr, track),
@@ -251,7 +255,12 @@ const IndexFlowSection = ({
             size="xsmall"
             id="code-equivalent-toggle"
             aria-label="Toggle Code Equivalent"
-            onChange={(value) => setIsCodeEquivalentToggleChecked(value)}
+            onChange={(value) => {
+              setIsCodeEquivalentToggleChecked(value);
+              track('Code Equivalent Toggled', {
+                context: 'Create Index Modal',
+              });
+            }}
             checked={isCodeEquivalentToggleChecked}
             disabled={!areAllFieldsFilledIn}
           />
@@ -336,7 +345,14 @@ const IndexFlowSection = ({
                     {optimalQueries}
                   </Body>
                 </p>
-                <Link href="https://www.mongodb.com/docs/manual/core/query-optimization/">
+                <Link
+                  href="https://www.mongodb.com/docs/manual/core/query-optimization/"
+                  onClick={() => {
+                    track('Covered Queries Learn More Clicked', {
+                      context: 'Create Index Modal',
+                    });
+                  }}
+                >
                   Learn More
                 </Link>
               </>

packages/compass-indexes/src/components/create-index-form/mdb-code-viewer.tsx

@@ -1,4 +1,5 @@
 import { Code, Link, css, spacing } from '@mongodb-js/compass-components';
+import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
 import React from 'react';
 
 const containerStyles = css({
@@ -62,6 +63,7 @@ const MDBCodeViewer = ({
   indexNameTypeMap: Record<string, string | number>;
   dataTestId?: string;
 }) => {
+  const track = useTelemetry();
   const GeneratedCode = generateCode({
     dbName,
     collectionName,
@@ -79,6 +81,11 @@ const MDBCodeViewer = ({
           href="https://www.mongodb.com/docs/manual/core/indexes/create-index/"
           target="_blank"
           rel="noreferrer noopener"
+          onClick={() => {
+            track('View Programming Language Syntax Clicked', {
+              context: 'Create Index Modal',
+            });
+          }}
         >
           here
         </Link>

packages/compass-indexes/src/components/create-index-form/query-flow-section.tsx

@@ -23,6 +23,7 @@ import type {
 } from '../../modules/create-index';
 import { connect } from 'react-redux';
 import { parseFilter } from 'mongodb-query-parser';
+import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
 
 const inputQueryContainerStyles = css({
   display: 'flex',
@@ -109,8 +110,9 @@ const QueryFlowSection = ({
   fetchingSuggestionsState: IndexSuggestionState;
   initialQuery: Document | null;
 }) => {
+  const track = useTelemetry();
   const [inputQuery, setInputQuery] = React.useState(
-    JSON.stringify(initialQuery ?? '', null, 2)
+    initialQuery ? JSON.stringify(initialQuery, null, 2) : ''
   );
   const [hasNewChanges, setHasNewChanges] = React.useState(
     initialQuery !== null
@@ -143,6 +145,10 @@ const QueryFlowSection = ({
       inputQuery: sanitizedInputQuery,
     });
 
+    track('Suggested Index Button Clicked', {
+      context: 'Create Index Modal',
+    });
+
     setHasNewChanges(false);
   }, [inputQuery, dbName, collectionName, onSuggestedIndexButtonClick]);
 

packages/compass-indexes/src/components/create-index-modal/create-index-modal.tsx

@@ -25,6 +25,7 @@ import {
   type TrackFunction,
   useFireExperimentViewed,
   TestName,
+  useTelemetry,
 } from '@mongodb-js/compass-telemetry/provider';
 import { useConnectionInfoRef } from '@mongodb-js/compass-connections/provider';
 import { usePreference } from 'compass-preferences-model/provider';
@@ -55,10 +56,15 @@ function CreateIndexModal({
   ...props
 }: CreateIndexModalProps) {
   const connectionInfoRef = useConnectionInfoRef();
+  const track = useTelemetry();
+
   const onSetOpen = useCallback(
     (open) => {
       if (!open) {
         onCancelCreateIndexClick();
+        track('Create Index Modal Closed', {
+          context: 'Create Index Modal',
+        });
       }
     },
     [onCancelCreateIndexClick]