Skip to content

feat: setting up early indexes experimentation and experiment viewed event CLOUDP-311776 #6860

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 16 commits into from
Apr 18, 2025
Merged

feat: setting up early indexes experimentation and experiment viewed event CLOUDP-311776 #6860

Show file tree
Hide file tree
Changes from 14 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
61384ae
setting up experimentation file + receiving data from mms
rubydong Apr 8, 2025
4a08032
update modal title, size, and description
rubydong Apr 8, 2025
fda1d08
simplifiedexperiment viewed func
rubydong Apr 9, 2025
1c42217
Merge branch 'main' into cloudp-311776
rubydong Apr 10, 2025
2b288bb
moved growth-experiments to telemetry folder + updated hook name
rubydong Apr 11, 2025
22fd8f6
Merge remote-tracking branch 'origin/main' into cloudp-311776
rubydong Apr 11, 2025
b10c782
Merge branch 'cloudp-311776' of https://github.com/mongodb-js/compass…
rubydong Apr 11, 2025
a3990c3
Merge remote-tracking branch 'origin/main' into cloudp-311776
rubydong Apr 14, 2025
da566de
moved func to provider
rubydong Apr 14, 2025
18168b9
created a CreateIndexModalHeader component
rubydong Apr 15, 2025
07c902d
added unit tests for create-index-modal-header
rubydong Apr 15, 2025
31b419d
fire EV if modal is open + removed preferences from AtlasOrgPreferences
rubydong Apr 16, 2025
5fa1a06
remove extra space in modal-header
rubydong Apr 16, 2025
8001399
resolve merge conflicts
rubydong Apr 16, 2025
349d10e
remove extra h3 and body export
rubydong Apr 18, 2025
0307155
updated styling
rubydong Apr 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/compass-components/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ export { VisuallyHidden } from '@react-aria/visually-hidden';
export { openToast, closeToast, ToastArea } from './hooks/use-toast';

export { breakpoints, spacing } from '@leafygreen-ui/tokens';
export { H3, Body } from '@leafygreen-ui/typography';
Copy link
Member

@Anemy Anemy Apr 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We're already exporting these from the leafygreen.tsx file:

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

Line 162 in 7371e1b

H3,

So we can remove this.

Suggested change
export { H3, Body } from '@leafygreen-ui/typography';

import IndexIcon from './components/index-icon';

export { default as FormFieldContainer } from './components/form-field-container';
Expand Down
27 changes: 27 additions & 0 deletions ...ages/compass-indexes/src/components/create-index-modal/create-index-modal-header.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import React from 'react';
import { render, screen } from '@mongodb-js/testing-library-compass';
import CreateIndexModalHeader from './create-index-modal-header';
import { expect } from 'chai';

describe('CreateIndexModalHeader', () => {
it('renders the modal title', () => {
render(<CreateIndexModalHeader />);
const title = screen.getByTestId('create-index-modal-header-title');

expect(title.textContent).to.be.equal('Create Index');
});

it('renders the subtitle text', () => {
render(<CreateIndexModalHeader />);
const subtitle = screen.getByTestId('create-index-modal-header-subtitle');
expect(subtitle).to.exist;
});

it('renders the link to the Index Strategies Documentation', () => {
render(<CreateIndexModalHeader />);
const link = screen.getByRole('link', {
name: /Index Strategies Documentation/i,
});
expect(link).to.exist;
});
});
42 changes: 42 additions & 0 deletions packages/compass-indexes/src/components/create-index-modal/create-index-modal-header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import {
H3,
Body,
spacing,
css,
cx,
palette,
Link,
} from '@mongodb-js/compass-components';
import React from 'react';

const headerStyle = css({
padding: spacing[5],
Copy link
Member

@Anemy Anemy Apr 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
padding: spacing[5],
padding: spacing[800],

nit The single digit values here are deprecated (we'll be updating all of them in #6871 )

paddingBottom: 0,
});

const CreateIndexModalHeader = () => {
return (
<div className={cx(headerStyle)}>
Copy link
Member

@Anemy Anemy Apr 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<div className={cx(headerStyle)}>
<div className={headerStyle}>

<H3 data-testid="create-index-modal-header-title">Create Index</H3>

<Body
data-testid="create-index-modal-header-subtitle"
style={{ color: palette.gray.dark1 }}
Copy link
Member

@Anemy Anemy Apr 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Small nit, we typically avoid using style unless it's a dynamic value we're passing to it. Instead we would create a css style variable and pass that to the className like we do for headerStyle.

Copy link
Member

@Anemy Anemy Apr 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we account for dark mode here? Is there a reason we need to explicitly set the color here and not use the default color? Typically we try to default to the colors from the leafygreen typography components. They're also plugged into the dark mode provider so they automatically switch when it changes.
If we explicitly want to have a color here, and we want it to change based on the theme, you can look for the useDarkMode() hook in the code base as a reference.

Copy link
Collaborator Author

@rubydong rubydong Apr 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

designs for dark mode will come out but is not available right now, here's a ticket: https://jira.mongodb.org/browse/CLOUDP-313986.

i only followed the design for the dark gray color though and in the design it was that color

>
The best indexes for your application should consider a number of
factors, such as your data model, and the queries you use most often. To
learn more about indexing best practices, read the{' '}
<Link
href="https://docs.mongodb.com/manual/applications/indexes/"
target="_blank"
rel="noopener noreferrer"
>
Index Strategies Documentation
</Link>
.
</Body>
</div>
);
};

export default CreateIndexModalHeader;
21 changes: 20 additions & 1 deletion packages/compass-indexes/src/components/create-index-modal/create-index-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,12 @@ import type { RootState } from '../../modules';
import {
useTrackOnChange,
type TrackFunction,
useFireExperimentViewed,
TestName,
} from '@mongodb-js/compass-telemetry/provider';
import { useConnectionInfoRef } from '@mongodb-js/compass-connections/provider';
import { usePreference } from 'compass-preferences-model/provider';
import CreateIndexModalHeader from './create-index-modal-header';

type CreateIndexModalProps = React.ComponentProps<typeof CreateIndexForm> & {
isVisible: boolean;
Expand Down Expand Up @@ -70,13 +74,28 @@ function CreateIndexModal({
undefined
);

// @experiment Early Journey Indexes Guidance & Awareness | Jira Epic: CLOUDP-239367
const enableInIndexesGuidanceExp = usePreference('enableIndexesGuidanceExp');
const showIndexesGuidanceVariant =
usePreference('showIndexesGuidanceVariant') && enableInIndexesGuidanceExp;

useFireExperimentViewed({
testName: TestName.earlyJourneyIndexesGuidance,
shouldFire: enableInIndexesGuidanceExp && isVisible,
Copy link
Member

@Anemy Anemy Apr 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe I'm understanding this wrong, should this be showIndexesGuidanceVariant and not enableInIndexesGuidanceExp?

Suggested change
shouldFire: enableInIndexesGuidanceExp && isVisible,
shouldFire: showIndexesGuidanceVariant && isVisible,

Copy link
Collaborator Author

@rubydong rubydong Apr 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nope this should fire for when user is in the control as well so it should be enableInIndexesGuidanceExp

Copy link
Member

@Anemy Anemy Apr 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we track that they're in the control then? Or is there already a way we differentiate that they are shown/not shown the new experience?

Copy link
Collaborator Author

@rubydong rubydong Apr 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this tracks if they are in the control as well, if they are in the experiment enableInIndexesGuidanceExp is true. i need to confirm once i get the latest into our mms but i think by default we have code set up to send down whether user is in the variant or control

Copy link
Member

@Anemy Anemy Apr 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it make things easier if we track if they're in the control or shown the experience here as some metadata for the tracking event? If it's on the mms side I suppose we don't need to since we'll be able to correlate them anyway. Feel free to resolve!

});

return (
<Modal
open={isVisible}
setOpen={onSetOpen}
data-testid="create-index-modal"
size={showIndexesGuidanceVariant ? 'large' : 'default'}
>
<ModalHeader title="Create Index" subtitle={namespace} />
{showIndexesGuidanceVariant ? (
<CreateIndexModalHeader />
) : (
<ModalHeader title="Create Index" subtitle={namespace} />
)}

<ModalBody>
<CreateIndexForm namespace={namespace} {...props} />
Expand Down
21 changes: 21 additions & 0 deletions packages/compass-preferences-model/src/feature-flags.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@ export type FeatureFlags = {
enableRollingIndexes: boolean;
enableGlobalWrites: boolean;
enableDataModeling: boolean;
enableIndexesGuidanceExp: boolean;
showIndexesGuidanceVariant: boolean;
};

export const featureFlags: Required<{
Expand Down Expand Up @@ -122,4 +124,23 @@ export const featureFlags: Required<{
short: 'Design, Visualize, and Evolve your Data Model',
},
},

/**
* Feature flags for Early Journey Indexes Guidance & Awareness | Jira Epic: CLOUDP-239367
* These are passed from MMS and not editable by user
*/
enableIndexesGuidanceExp: {
stage: 'development',
description: {
short: 'Enable Indexes Guidance Experiment',
},
},

showIndexesGuidanceVariant: {
stage: 'development',
description: {
short:
'Used to check if user is in the Indexes Guidance Experiment Variant',
},
},
};
3 changes: 3 additions & 0 deletions packages/compass-telemetry/src/growth-experiments.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export enum TestName {
earlyJourneyIndexesGuidance = 'EARLY_JOURNEY_INDEXES_GUIDANCE_20250328',
}
35 changes: 35 additions & 0 deletions packages/compass-telemetry/src/provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { createServiceLocator } from 'hadron-app-registry';
import { createTrack, type TelemetryServiceOptions } from './generic-track';
import { useLogger } from '@mongodb-js/compass-logging/provider';
import type { TrackFunction } from './types';
import { TestName } from './growth-experiments';

const noop = () => {
// noop
Expand Down Expand Up @@ -101,4 +102,38 @@ export function useTrackOnChange(
}, [...dependencies, track, options.skipOnMount]);
}

/**
* Hook that fires Experiment Viewed if user is in an experiment
*
* @param testName - The name of the experiment to track.
* @param shouldFire - A boolean indicating whether to fire the event. Defaults to true.
*
* @example
* useFireExperimentViewed({
* testName: TestName.earlyJourneyIndexesGuidance,
* shouldFire: enableInIndexesGuidanceExp ,
* });
*/
export const useFireExperimentViewed = ({
testName,
shouldFire = true,
}: {
testName: TestName;
shouldFire?: boolean;
}) => {
useTrackOnChange(
(track: TrackFunction) => {
if (!shouldFire) {
return;
}
track('Experiment Viewed', {
test_name: testName,
});
},
[shouldFire, testName],
undefined
);
};

export type { TrackFunction };
export { TestName };
8 changes: 7 additions & 1 deletion packages/compass-telemetry/src/telemetry-events.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2673,6 +2673,11 @@ type SecretStorageNotAvailableEvent = CommonEvent<{
payload: Record<string, never>;
}>;

type ExperimentViewedEvent = CommonEvent<{
name: 'Experiment Viewed';
payload: { test_name: string };
}>;

export type TelemetryEvent =
| AggregationCanceledEvent
| AggregationCopiedEvent
Expand Down Expand Up @@ -2793,4 +2798,5 @@ export type TelemetryEvent =
| LargestContentfulPaintEvent
| FirstInputDelayEvent
| CumulativeLayoutShiftEvent
| TimeToFirstByteEvent;
| TimeToFirstByteEvent
| ExperimentViewedEvent;
Loading