diff --git a/packages/compass-indexes/src/components/create-index-actions/create-index-actions.tsx b/packages/compass-indexes/src/components/create-index-actions/create-index-actions.tsx index 20c20501d4c..8b0c31d446b 100644 --- a/packages/compass-indexes/src/components/create-index-actions/create-index-actions.tsx +++ b/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 | null; }) { + const track = useTelemetry(); + let isCreateIndexButtonDisabled = false; if (showIndexesGuidanceVariant) { @@ -81,7 +84,12 @@ function CreateIndexActions({ diff --git a/packages/compass-indexes/src/components/create-index-fields.tsx b/packages/compass-indexes/src/components/create-index-fields.tsx index 617504a7880..e13adf0e849 100644 --- a/packages/compass-indexes/src/components/create-index-fields.tsx +++ b/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({ )} - onAddItem={onAddFieldClick} + onAddItem={handleOnAddFieldClick} onRemoveItem={onRemoveFieldClick} addButtonTestId="add-index-field-button" removeButtonTestId="remove-index-field-button" 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 38b46e01153..55e42b7b674 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 @@ -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({ { + track('Options Clicked', { + context: 'Create Index Modal', + }); + }} >
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}

- + { + track('Covered Queries Learn More Clicked', { + context: 'Create Index Modal', + }); + }} + > Learn More diff --git a/packages/compass-indexes/src/components/create-index-form/mdb-code-viewer.tsx b/packages/compass-indexes/src/components/create-index-form/mdb-code-viewer.tsx index e3d7f46f913..49e4c6bbb5a 100644 --- a/packages/compass-indexes/src/components/create-index-form/mdb-code-viewer.tsx +++ b/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; 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 diff --git a/packages/compass-indexes/src/components/create-index-form/query-flow-section.tsx b/packages/compass-indexes/src/components/create-index-form/query-flow-section.tsx index 0c304747fff..7e1ea1f2ace 100644 --- a/packages/compass-indexes/src/components/create-index-form/query-flow-section.tsx +++ b/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]); diff --git a/packages/compass-indexes/src/components/create-index-modal/create-index-modal.tsx b/packages/compass-indexes/src/components/create-index-modal/create-index-modal.tsx index 88205465d46..ddb140f2e30 100644 --- a/packages/compass-indexes/src/components/create-index-modal/create-index-modal.tsx +++ b/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] diff --git a/packages/compass-telemetry/src/telemetry-events.ts b/packages/compass-telemetry/src/telemetry-events.ts index 580f8f30a61..d31f3344ef0 100644 --- a/packages/compass-telemetry/src/telemetry-events.ts +++ b/packages/compass-telemetry/src/telemetry-events.ts @@ -2716,6 +2716,83 @@ type UUIDEncounteredEvent = CommonEvent<{ }; }>; +type CreateIndexNewFieldAdded = CommonEvent<{ + name: 'New Index Field Added'; + payload: { + context: CreateIndexModalContext; + }; +}>; + +type CreateIndexOptionsClicked = CommonEvent<{ + name: 'Options Clicked'; + payload: { + context: CreateIndexModalContext; + }; +}>; + +type CreateIndexCoveredQueriesButtonClicked = CommonEvent<{ + name: 'Covered Queries Button Clicked'; + payload: { + context: CreateIndexModalContext; + }; +}>; + +type CreateIndexSuggestedIndexButtonClicked = CommonEvent<{ + name: 'Suggested Index Button Clicked'; + payload: { + context: CreateIndexModalContext; + }; +}>; + +type CreateIndexIndexTabClicked = CommonEvent<{ + name: 'Start with an Index Tab Clicked'; + payload: { + context: CreateIndexModalContext; + }; +}>; + +type CreateIndexQueryTabClicked = CommonEvent<{ + name: 'Start with a Query Tab Clicked'; + payload: { + context: CreateIndexModalContext; + }; +}>; + +type CreateIndexCodeEquivalentToggled = CommonEvent<{ + name: 'Code Equivalent Toggled'; + payload: { + context: CreateIndexModalContext; + }; +}>; + +type CreateIndexModalClosed = CommonEvent<{ + name: 'Create Index Modal Closed'; + payload: { + context: CreateIndexModalContext; + }; +}>; + +type CreateIndexModalCancelled = CommonEvent<{ + name: 'Cancel Button Clicked'; + payload: { + context: CreateIndexModalContext; + }; +}>; + +type CreateIndexProgrammingLanguageLinkClicked = CommonEvent<{ + name: 'View Programming Language Syntax Clicked'; + payload: { + context: CreateIndexModalContext; + }; +}>; + +type CreateIndexCoveredQueriesLearnMoreClicked = CommonEvent<{ + name: 'Covered Queries Learn More Clicked'; + payload: { + context: CreateIndexModalContext; + }; +}>; + export type TelemetryEvent = | AggregationCanceledEvent | AggregationCopiedEvent @@ -2841,4 +2918,15 @@ export type TelemetryEvent = | CreateIndexButtonClickedEvent | CreateIndexErrorParsingQueryEvent | CreateIndexErrorGettingCoveredQueriesEvent + | CreateIndexCodeEquivalentToggled + | CreateIndexCoveredQueriesButtonClicked + | CreateIndexCoveredQueriesLearnMoreClicked + | CreateIndexIndexTabClicked + | CreateIndexModalCancelled + | CreateIndexModalClosed + | CreateIndexNewFieldAdded + | CreateIndexOptionsClicked + | CreateIndexProgrammingLanguageLinkClicked + | CreateIndexQueryTabClicked + | CreateIndexSuggestedIndexButtonClicked | UUIDEncounteredEvent;