mongodb-js · rubydong · Apr 18, 2025 · Apr 8, 2025 · Apr 8, 2025 · Apr 9, 2025
diff --git a/packages/compass-components/src/components/modals/modal-header.tsx b/packages/compass-components/src/components/modals/modal-header.tsx
@@ -87,13 +87,15 @@ function ModalHeader({
           />
         </div>
       )}
+
       <h1
         className={cx(titleStyle, darkMode && titleStyleDark)}
         data-testid="modal-title"
         id="modal-title"
       >
         {title}
       </h1>
+
       {subtitle && <Body>{subtitle}</Body>}
     </div>
   );

diff --git a/packages/compass-components/src/index.ts b/packages/compass-components/src/index.ts
@@ -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';
 H3, 
-export { H3, Body } from '@leafygreen-ui/typography';
 H3, 
-export { H3, Body } from '@leafygreen-ui/typography';
 import IndexIcon from './components/index-icon';
 
 export { default as FormFieldContainer } from './components/form-field-container';

@@ -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;
+  });
+});
@@ -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],
-  padding: spacing[5],
+  padding: spacing[800],
-  padding: spacing[5],
+  padding: spacing[800],
+  paddingBottom: 0,
+});
+
+const CreateIndexModalHeader = () => {
+  return (
+    <div className={cx(headerStyle)}>
-    <div className={cx(headerStyle)}>
+    <div className={headerStyle}>
-    <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 }}
+      >
+        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,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;
@@ -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,
+  });
+
   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} />

@@ -23,6 +23,8 @@ export type FeatureFlags = {
   enableProxySupport: boolean;
   enableRollingIndexes: boolean;
   enableGlobalWrites: boolean;
+  enableIndexesGuidanceExp: boolean;
+  showIndexesGuidanceVariant: boolean;
 };
 
 export const featureFlags: Required<{
@@ -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',
+    },
+  },
 };
diff --git a/packages/compass-preferences-model/src/preferences-schema.ts b/packages/compass-preferences-model/src/preferences-schema.ts
@@ -135,6 +135,8 @@ export type AtlasProjectPreferences = {
 
 export type AtlasOrgPreferences = {
   enableGenAIFeaturesAtlasOrg: boolean;
+  enableIndexesGuidanceExp: boolean;
+  showIndexesGuidanceVariant: boolean;
 };
 
 export type AllPreferences = UserPreferences &

@@ -0,0 +1,3 @@
+export enum TestName {
+  earlyJourneyIndexesGuidance = 'EARLY_JOURNEY_INDEXES_GUIDANCE_20250328',
+}
@@ -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
@@ -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 };
@@ -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
@@ -2793,4 +2798,5 @@ export type TelemetryEvent =
   | LargestContentfulPaintEvent
   | FirstInputDelayEvent
   | CumulativeLayoutShiftEvent
-  | TimeToFirstByteEvent;
+  | TimeToFirstByteEvent
+  | ExperimentViewedEvent;