Skip to content

Commit 5abf09b

Browse files
rubydongrubydong
authored
feat: setting up early indexes experimentation and experiment viewed event CLOUDP-311776 (#6860)
* setting up experimentation file + receiving data from mms * update modal title, size, and description * simplifiedexperiment viewed func * moved growth-experiments to telemetry folder + updated hook name * moved func to provider * created a CreateIndexModalHeader component * added unit tests for create-index-modal-header * fire EV if modal is open + removed preferences from AtlasOrgPreferences * remove extra space in modal-header * remove extra h3 and body export * updated styling
1 parent ab9c068 commit 5abf09b

File tree

7 files changed

+158
-2
lines changed

7 files changed

+158
-2
lines changed

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

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react';
2+
import { render, screen } from '@mongodb-js/testing-library-compass';
3+
import CreateIndexModalHeader from './create-index-modal-header';
4+
import { expect } from 'chai';
5+
6+
describe('CreateIndexModalHeader', () => {
7+
it('renders the modal title', () => {
8+
render(<CreateIndexModalHeader />);
9+
const title = screen.getByTestId('create-index-modal-header-title');
10+
11+
expect(title.textContent).to.be.equal('Create Index');
12+
});
13+
14+
it('renders the subtitle text', () => {
15+
render(<CreateIndexModalHeader />);
16+
const subtitle = screen.getByTestId('create-index-modal-header-subtitle');
17+
expect(subtitle).to.exist;
18+
});
19+
20+
it('renders the link to the Index Strategies Documentation', () => {
21+
render(<CreateIndexModalHeader />);
22+
const link = screen.getByRole('link', {
23+
name: /Index Strategies Documentation/i,
24+
});
25+
expect(link).to.exist;
26+
});
27+
});

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

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import {
2+
H3,
3+
Body,
4+
spacing,
5+
css,
6+
palette,
7+
Link,
8+
} from '@mongodb-js/compass-components';
9+
import React from 'react';
10+
11+
const headerStyle = css({
12+
padding: spacing[800],
13+
paddingBottom: 0,
14+
});
15+
16+
const subtitleStyle = css({
17+
color: palette.gray.dark1,
18+
});
19+
20+
const CreateIndexModalHeader = () => {
21+
return (
22+
<div className={headerStyle}>
23+
<H3 data-testid="create-index-modal-header-title">Create Index</H3>
24+
25+
<Body
26+
data-testid="create-index-modal-header-subtitle"
27+
className={subtitleStyle}
28+
>
29+
The best indexes for your application should consider a number of
30+
factors, such as your data model, and the queries you use most often. To
31+
learn more about indexing best practices, read the{' '}
32+
<Link
33+
href="https://docs.mongodb.com/manual/applications/indexes/"
34+
target="_blank"
35+
rel="noopener noreferrer"
36+
>
37+
Index Strategies Documentation
38+
</Link>
39+
.
40+
</Body>
41+
</div>
42+
);
43+
};
44+
45+
export default CreateIndexModalHeader;

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

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,12 @@ import type { RootState } from '../../modules';
2121
import {
2222
useTrackOnChange,
2323
type TrackFunction,
24+
useFireExperimentViewed,
25+
TestName,
2426
} from '@mongodb-js/compass-telemetry/provider';
2527
import { useConnectionInfoRef } from '@mongodb-js/compass-connections/provider';
28+
import { usePreference } from 'compass-preferences-model/provider';
29+
import CreateIndexModalHeader from './create-index-modal-header';
2630

2731
type CreateIndexModalProps = React.ComponentProps<typeof CreateIndexForm> & {
2832
isVisible: boolean;
@@ -70,13 +74,28 @@ function CreateIndexModal({
7074
undefined
7175
);
7276

77+
// @experiment Early Journey Indexes Guidance & Awareness | Jira Epic: CLOUDP-239367
78+
const enableInIndexesGuidanceExp = usePreference('enableIndexesGuidanceExp');
79+
const showIndexesGuidanceVariant =
80+
usePreference('showIndexesGuidanceVariant') && enableInIndexesGuidanceExp;
81+
82+
useFireExperimentViewed({
83+
testName: TestName.earlyJourneyIndexesGuidance,
84+
shouldFire: enableInIndexesGuidanceExp && isVisible,
85+
});
86+
7387
return (
7488
<Modal
7589
open={isVisible}
7690
setOpen={onSetOpen}
7791
data-testid="create-index-modal"
92+
size={showIndexesGuidanceVariant ? 'large' : 'default'}
7893
>
79-
<ModalHeader title="Create Index" subtitle={namespace} />
94+
{showIndexesGuidanceVariant ? (
95+
<CreateIndexModalHeader />
96+
) : (
97+
<ModalHeader title="Create Index" subtitle={namespace} />
98+
)}
8099

81100
<ModalBody>
82101
<CreateIndexForm namespace={namespace} {...props} />

‎packages/compass-preferences-model/src/feature-flags.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ export type FeatureFlags = {
2424
enableRollingIndexes: boolean;
2525
enableGlobalWrites: boolean;
2626
enableDataModeling: boolean;
27+
enableIndexesGuidanceExp: boolean;
28+
showIndexesGuidanceVariant: boolean;
2729
};
2830

2931
export const featureFlags: Required<{
@@ -122,4 +124,23 @@ export const featureFlags: Required<{
122124
short: 'Design, Visualize, and Evolve your Data Model',
123125
},
124126
},
127+
128+
/**
129+
* Feature flags for Early Journey Indexes Guidance & Awareness | Jira Epic: CLOUDP-239367
130+
* These are passed from MMS and not editable by user
131+
*/
132+
enableIndexesGuidanceExp: {
133+
stage: 'development',
134+
description: {
135+
short: 'Enable Indexes Guidance Experiment',
136+
},
137+
},
138+
139+
showIndexesGuidanceVariant: {
140+
stage: 'development',
141+
description: {
142+
short:
143+
'Used to check if user is in the Indexes Guidance Experiment Variant',
144+
},
145+
},
125146
};

‎packages/compass-telemetry/src/growth-experiments.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export enum TestName {
2+
earlyJourneyIndexesGuidance = 'EARLY_JOURNEY_INDEXES_GUIDANCE_20250328',
3+
}

‎packages/compass-telemetry/src/provider.tsx

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { createServiceLocator } from 'hadron-app-registry';
33
import { createTrack, type TelemetryServiceOptions } from './generic-track';
44
import { useLogger } from '@mongodb-js/compass-logging/provider';
55
import type { TrackFunction } from './types';
6+
import { TestName } from './growth-experiments';
67

78
const noop = () => {
89
// noop
@@ -101,4 +102,38 @@ export function useTrackOnChange(
101102
}, [...dependencies, track, options.skipOnMount]);
102103
}
103104

105+
/**
106+
* Hook that fires Experiment Viewed if user is in an experiment
107+
*
108+
* @param testName - The name of the experiment to track.
109+
* @param shouldFire - A boolean indicating whether to fire the event. Defaults to true.
110+
*
111+
* @example
112+
* useFireExperimentViewed({
113+
* testName: TestName.earlyJourneyIndexesGuidance,
114+
* shouldFire: enableInIndexesGuidanceExp ,
115+
* });
116+
*/
117+
export const useFireExperimentViewed = ({
118+
testName,
119+
shouldFire = true,
120+
}: {
121+
testName: TestName;
122+
shouldFire?: boolean;
123+
}) => {
124+
useTrackOnChange(
125+
(track: TrackFunction) => {
126+
if (!shouldFire) {
127+
return;
128+
}
129+
track('Experiment Viewed', {
130+
test_name: testName,
131+
});
132+
},
133+
[shouldFire, testName],
134+
undefined
135+
);
136+
};
137+
104138
export type { TrackFunction };
139+
export { TestName };

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2673,6 +2673,11 @@ type SecretStorageNotAvailableEvent = CommonEvent<{
26732673
payload: Record<string, never>;
26742674
}>;
26752675

2676+
type ExperimentViewedEvent = CommonEvent<{
2677+
name: 'Experiment Viewed';
2678+
payload: { test_name: string };
2679+
}>;
2680+
26762681
export type TelemetryEvent =
26772682
| AggregationCanceledEvent
26782683
| AggregationCopiedEvent
@@ -2793,4 +2798,5 @@ export type TelemetryEvent =
27932798
| LargestContentfulPaintEvent
27942799
| FirstInputDelayEvent
27952800
| CumulativeLayoutShiftEvent
2796-
| TimeToFirstByteEvent;
2801+
| TimeToFirstByteEvent
2802+
| ExperimentViewedEvent;

0 commit comments

Comments
 (0)