add analytics for Create Index Button Clicked

Author: rubydong

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

@@ -39,7 +39,7 @@ export type CreateIndexFormProps = {
   namespace: string;
   fields: Field[];
   serverVersion: string;
-  currentTab: Tab;
+  currentTab: Tab | null;
   onSelectFieldNameClick: (idx: number, name: string) => void;
   onSelectFieldTypeClick: (idx: number, fType: string) => void;
   onAddFieldClick: () => void; // Plus icon.
@@ -85,7 +85,7 @@ function CreateIndexForm({
         className={createIndexModalFieldsStyles}
         data-testid="create-index-form"
       >
-        {showIndexesGuidanceVariant ? (
+        {showIndexesGuidanceVariant && !!currentTab ? (
           <RadioBoxGroup
             aria-labelledby="index-flows"
             data-testid="create-index-form-flows"

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

@@ -34,7 +34,7 @@ type CreateIndexModalProps = React.ComponentProps<typeof CreateIndexForm> & {
   isVisible: boolean;
   namespace: string;
   error: string | null;
-  currentTab: Tab;
+  currentTab: Tab | null;
   onErrorBannerCloseClick: () => void;
   onCreateIndexClick: () => void;
   onCancelCreateIndexClick: () => void;
@@ -83,6 +83,10 @@ function CreateIndexModal({
   const enableInIndexesGuidanceExp = usePreference('enableIndexesGuidanceExp');
   const showIndexesGuidanceVariant =
     usePreference('showIndexesGuidanceVariant') && enableInIndexesGuidanceExp;
+  if (showIndexesGuidanceVariant && !currentTab) {
+    // If user is in the variant and there has not been a currentTab set, default it to IndexFlow
+    props.onTabClick('IndexFlow');
+  }
 
   useFireExperimentViewed({
     testName: TestName.earlyJourneyIndexesGuidance,

packages/compass-indexes/src/modules/create-index.tsx

@@ -295,7 +295,7 @@ export type State = {
   options: Options;
 
   // current tab that user is on (Query Flow or Index Flow)
-  currentTab: Tab;
+  currentTab: Tab | null;
 };
 
 export const INITIAL_STATE: State = {
@@ -304,7 +304,7 @@ export const INITIAL_STATE: State = {
   error: null,
   fields: INITIAL_FIELDS_STATE,
   options: INITIAL_OPTIONS_STATE,
-  currentTab: 'IndexFlow',
+  currentTab: null,
 };
 
 function getInitialState(): State {
@@ -365,7 +365,17 @@ export const createIndexFormSubmitted = (): IndexesThunkAction<
   void,
   ErrorEncounteredAction | CreateIndexFormSubmittedAction
 > => {
-  return (dispatch, getState) => {
+  return (dispatch, getState, { track }) => {
+    const currentTab = getState().createIndex.currentTab;
+    track('Create Index Button Clicked', {
+      context: 'Create Index Modal',
+      flow: !currentTab
+        ? undefined
+        : currentTab === 'IndexFlow'
+        ? 'Start with Index'
+        : 'Start with Query',
+    });
+
     // Check for field errors.
     if (
       getState().createIndex.fields.some(

packages/compass-telemetry/src/telemetry-events.ts

@@ -2678,6 +2678,14 @@ type ExperimentViewedEvent = CommonEvent<{
   payload: { test_name: string };
 }>;
 
+type CreateIndexButtonClickedEvent = CommonEvent<{
+  name: 'Create Index Button Clicked';
+  payload: {
+    flow: 'Start with Query' | 'Start with Index' | undefined;
+    context: string;
+  };
+}>;
+
 export type TelemetryEvent =
   | AggregationCanceledEvent
   | AggregationCopiedEvent
@@ -2799,4 +2807,5 @@ export type TelemetryEvent =
   | FirstInputDelayEvent
   | CumulativeLayoutShiftEvent
   | TimeToFirstByteEvent
-  | ExperimentViewedEvent;
+  | ExperimentViewedEvent
+  | CreateIndexButtonClickedEvent;