From 6ce793ad00ec589f540ff986f71d99ee56ce2dba Mon Sep 17 00:00:00 2001 From: Ruby Dong Date: Tue, 22 Apr 2025 12:04:36 -0400 Subject: [PATCH 1/3] add analytics for Create Index Button Clicked --- .../create-index-form/create-index-form.tsx | 4 ++-- .../create-index-modal/create-index-modal.tsx | 6 +++++- .../compass-indexes/src/modules/create-index.tsx | 16 +++++++++++++--- .../compass-telemetry/src/telemetry-events.ts | 11 ++++++++++- 4 files changed, 30 insertions(+), 7 deletions(-) diff --git a/packages/compass-indexes/src/components/create-index-form/create-index-form.tsx b/packages/compass-indexes/src/components/create-index-form/create-index-form.tsx index e2b19ab532b..173738cc343 100644 --- a/packages/compass-indexes/src/components/create-index-form/create-index-form.tsx +++ b/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 ? ( & { 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, diff --git a/packages/compass-indexes/src/modules/create-index.tsx b/packages/compass-indexes/src/modules/create-index.tsx index 89eab255407..ed3e86780ac 100644 --- a/packages/compass-indexes/src/modules/create-index.tsx +++ b/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( diff --git a/packages/compass-telemetry/src/telemetry-events.ts b/packages/compass-telemetry/src/telemetry-events.ts index c6e01aaf1e0..554d3a681ad 100644 --- a/packages/compass-telemetry/src/telemetry-events.ts +++ b/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; From 0e961154d1f67c484e36ca9dc3ce465dd7030f59 Mon Sep 17 00:00:00 2001 From: Ruby Dong Date: Tue, 22 Apr 2025 12:11:04 -0400 Subject: [PATCH 2/3] made it bit more readable --- packages/compass-indexes/src/modules/create-index.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/compass-indexes/src/modules/create-index.tsx b/packages/compass-indexes/src/modules/create-index.tsx index ed3e86780ac..9e12503bb51 100644 --- a/packages/compass-indexes/src/modules/create-index.tsx +++ b/packages/compass-indexes/src/modules/create-index.tsx @@ -367,13 +367,14 @@ export const createIndexFormSubmitted = (): IndexesThunkAction< > => { 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', + flow: currentTab + ? currentTab === 'IndexFlow' + ? 'Start with Index' + : 'Start with Query' + : undefined, }); // Check for field errors. From 1b222874c4473c526eff26aa0120b1594c6b6b4a Mon Sep 17 00:00:00 2001 From: Ruby Dong Date: Tue, 22 Apr 2025 14:15:38 -0400 Subject: [PATCH 3/3] address pr comments --- .../create-index-form/create-index-form.tsx | 4 ++-- .../create-index-modal/create-index-modal.tsx | 6 +----- .../src/modules/create-index.tsx | 20 +++++++++++-------- .../compass-telemetry/src/telemetry-events.ts | 4 +++- 4 files changed, 18 insertions(+), 16 deletions(-) diff --git a/packages/compass-indexes/src/components/create-index-form/create-index-form.tsx b/packages/compass-indexes/src/components/create-index-form/create-index-form.tsx index 173738cc343..e2b19ab532b 100644 --- a/packages/compass-indexes/src/components/create-index-form/create-index-form.tsx +++ b/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 | null; + currentTab: Tab; 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 && !!currentTab ? ( + {showIndexesGuidanceVariant ? ( & { isVisible: boolean; namespace: string; error: string | null; - currentTab: Tab | null; + currentTab: Tab; onErrorBannerCloseClick: () => void; onCreateIndexClick: () => void; onCancelCreateIndexClick: () => void; @@ -83,10 +83,6 @@ 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, diff --git a/packages/compass-indexes/src/modules/create-index.tsx b/packages/compass-indexes/src/modules/create-index.tsx index 9e12503bb51..ad78e8da201 100644 --- a/packages/compass-indexes/src/modules/create-index.tsx +++ b/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 | null; + currentTab: Tab; }; 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: null, + currentTab: 'IndexFlow', }; function getInitialState(): State { @@ -365,16 +365,20 @@ export const createIndexFormSubmitted = (): IndexesThunkAction< void, ErrorEncounteredAction | CreateIndexFormSubmittedAction > => { - return (dispatch, getState, { track }) => { + return (dispatch, getState, { track, preferences }) => { + // @experiment Early Journey Indexes Guidance & Awareness | Jira Epic: CLOUDP-239367 const currentTab = getState().createIndex.currentTab; + const { enableIndexesGuidanceExp, showIndexesGuidanceVariant } = + preferences.getPreferences(); track('Create Index Button Clicked', { context: 'Create Index Modal', - flow: currentTab - ? currentTab === 'IndexFlow' - ? 'Start with Index' - : 'Start with Query' - : undefined, + flow: + enableIndexesGuidanceExp && showIndexesGuidanceVariant + ? currentTab === 'IndexFlow' + ? 'Start with Index' + : 'Start with Query' + : undefined, }); // Check for field errors. diff --git a/packages/compass-telemetry/src/telemetry-events.ts b/packages/compass-telemetry/src/telemetry-events.ts index 554d3a681ad..a9f4bee0c6f 100644 --- a/packages/compass-telemetry/src/telemetry-events.ts +++ b/packages/compass-telemetry/src/telemetry-events.ts @@ -2678,11 +2678,13 @@ type ExperimentViewedEvent = CommonEvent<{ payload: { test_name: string }; }>; +export type CreateIndexModalContext = 'Create Index Modal'; + type CreateIndexButtonClickedEvent = CommonEvent<{ name: 'Create Index Button Clicked'; payload: { flow: 'Start with Query' | 'Start with Index' | undefined; - context: string; + context: CreateIndexModalContext; }; }>;