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 7 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
25 changes: 17 additions & 8 deletions packages/compass-components/src/components/modals/modal-header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { spacing } from '@leafygreen-ui/tokens';
import { Variant as ButtonVariant } from '@leafygreen-ui/button';

import { useDarkMode } from '../../hooks/use-theme';
import { Body, Icon } from '../leafygreen';
import { Body, H3, Icon } from '../leafygreen';

export const Variant = {
Default: ButtonVariant.Primary,
Expand Down Expand Up @@ -65,12 +65,14 @@ type ModalHeaderProps = {
title: React.ReactNode;
subtitle?: React.ReactNode;
variant?: Variant;
useLeafyGreenStyling?: boolean;
};

function ModalHeader({
title,
subtitle,
variant = Variant.Default,
useLeafyGreenStyling = false,
}: ModalHeaderProps) {
const darkMode = useDarkMode();

Expand All @@ -87,13 +89,20 @@ function ModalHeader({
/>
</div>
)}
<h1
className={cx(titleStyle, darkMode && titleStyleDark)}
data-testid="modal-title"
id="modal-title"
>
{title}
</h1>

{useLeafyGreenStyling ? (
<H3 data-testid="modal-title" id="modal-title">
{title}
</H3>
) : (
<h1
className={cx(titleStyle, darkMode && titleStyleDark)}
data-testid="modal-title"
id="modal-title"
>
{title}
</h1>
)}
Copy link
Collaborator

@gribnoysup gribnoysup Apr 11, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

The purpose of compass-components package is to have uniform, consistent components for all places where they are used in compass and this goes very much against it. For the experiment if we really need to do this, this should really just stay scoped to the create index modal, but generally speaking this is just not aligned with how we are building compass: why only this single modal needs a custom header style that will not be aligned with everything else in the application?

Copy link
Collaborator Author

@rubydong rubydong Apr 11, 2025

Choose a reason for hiding this comment

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

this has been approved by Claudia and Diancheng also reviewed the designs! also i tried to make it more generic by saying 'useLeafyGreenStyling', which is consistent with leafy green at least. if useLeafyGreenStyling is false (which it is by default) then it'd be uniform for all the other modals!

Copy link
Collaborator

@gribnoysup gribnoysup Apr 14, 2025

Choose a reason for hiding this comment

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

More generic configurable option is not the same as uniform styles (more variants less uniformity) 🙂 If Claudia signed off on switching all modals to this style because it's aligned with leafygreen more, let's just do it. Adding a generic option that we will be using only once in one specific place for an experiment that can be scrapped is not how we approach adding new components or properties to this particular package

Copy link
Collaborator Author

@rubydong rubydong Apr 14, 2025

Choose a reason for hiding this comment

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

seems like Claudia is OOO and i'm not sure if there's a plan to switch the others just that she signed off on the design for this specific modal. would it be better if i make a separate component for modal header or update the prop name to be specific to index guidance?

Copy link
Collaborator

@gribnoysup gribnoysup Apr 15, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

Better would be to create a separate component in packages/compass-indexes/src/components/create-index-modal/create-index-modal.tsx file and use it instead of ModalHeader and not modify compass-components, it's just two existing leafygreen components you need to stack together, there is absolutely no point to generalize this if we're not planning to update other parts of Compass to use it. Just to stress again: we don't put one-off components in the compass-components package, we don't put feature specific props in the components in this package

{subtitle && <Body>{subtitle}</Body>}
</div>
);
Expand Down
43 changes: 42 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 @@ -5,6 +5,8 @@ import {
ModalFooter,
ModalHeader,
ModalBody,
Link,
palette,
} from '@mongodb-js/compass-components';
import {
fieldAdded,
Expand All @@ -23,6 +25,11 @@ import {
type TrackFunction,
} from '@mongodb-js/compass-telemetry/provider';
import { useConnectionInfoRef } from '@mongodb-js/compass-connections/provider';
import { usePreference } from 'compass-preferences-model/provider';
import {
useFireExperimentViewed,
TestName,
} from '@mongodb-js/compass-telemetry';

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

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

useFireExperimentViewed({
testName: TestName.earlyJourneyIndexesGuidance,
shouldFire: enableInIndexesGuidanceExp || true,
});

return (
<Modal
open={isVisible}
setOpen={onSetOpen}
data-testid="create-index-modal"
size={showIndexesGuidanceVariant ? 'large' : 'default'}
>
<ModalHeader title="Create Index" subtitle={namespace} />
{showIndexesGuidanceVariant ? (
<ModalHeader
title="Create Index"
subtitle={
<span style={{ color: palette.gray.dark1 }}>
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>
.
</span>
}
useLeafyGreenStyling={true}
/>
) : (
<ModalHeader title="Create Index" subtitle={namespace} />
)}

<ModalBody>
<CreateIndexForm namespace={namespace} {...props} />
Expand Down
20 changes: 20 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 @@ -23,6 +23,8 @@ export type FeatureFlags = {
enableProxySupport: boolean;
enableRollingIndexes: boolean;
enableGlobalWrites: boolean;
enableIndexesGuidanceExp: boolean;
showIndexesGuidanceVariant: boolean;
};

export const featureFlags: Required<{
Expand Down Expand Up @@ -111,4 +113,22 @@ export const featureFlags: Required<{
short: 'Enable schema export',
},
},

/**
* 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',
},
},
};
2 changes: 2 additions & 0 deletions packages/compass-preferences-model/src/preferences-schema.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,8 @@ export type AtlasProjectPreferences = {

export type AtlasOrgPreferences = {
enableGenAIFeaturesAtlasOrg: boolean;
enableIndexesGuidanceExp: boolean;
showIndexesGuidanceVariant: boolean;
};

export type AllPreferences = UserPreferences &
Expand Down
29 changes: 29 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,29 @@
import {
useTrackOnChange,
type TrackFunction,
} from '@mongodb-js/compass-telemetry/provider';

export enum TestName {
earlyJourneyIndexesGuidance = 'EARLY_JOURNEY_INDEXES_GUIDANCE_20250328',
}

export const useFireExperimentViewed = ({
testName,
shouldFire = true,
}: {
testName: TestName;
shouldFire?: boolean;
}) => {
useTrackOnChange(
(track: TrackFunction) => {
if (!shouldFire) {
return;
}
track('Experiment Viewed', {
test_name: testName,
});
},
[],
undefined
);
};
1 change: 1 addition & 0 deletions packages/compass-telemetry/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,4 @@ export type {
IdentifyTraits,
ExtraConnectionData,
} from './types';
export { TestName, useFireExperimentViewed } from './growth-experiments';
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