update modal title, size, and description

rubydong · rubydong · commit 4a08032baad9 · 2025-04-08T16:49:24.000-04:00
diff --git a/packages/compass-components/src/components/modals/modal-header.tsx b/packages/compass-components/src/components/modals/modal-header.tsx
@@ -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,
@@ -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();
 
@@ -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>
+      )}
       {subtitle && <Body>{subtitle}</Body>}
     </div>
   );
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
@@ -32,7 +32,6 @@ type CreateIndexFormProps = {
   onSelectFieldTypeClick: (idx: number, fType: string) => void;
   onAddFieldClick: () => void; // Plus icon.
   onRemoveFieldClick: (idx: number) => void; // Minus icon.
-  showIndexesGuidanceVariant: boolean;
 };
 
 function CreateIndexForm({
@@ -43,7 +42,6 @@ function CreateIndexForm({
   onSelectFieldTypeClick,
   onAddFieldClick,
   onRemoveFieldClick,
-  showIndexesGuidanceVariant,
 }: CreateIndexFormProps) {
   const { id: connectionId } = useConnectionInfo();
   const rollingIndexesFeatureEnabled = !!usePreference('enableRollingIndexes');
@@ -70,22 +68,6 @@ function CreateIndexForm({
         className={createIndexModalFieldsStyles}
         data-testid="create-index-form"
       >
-        {/* @experiment Early Journey Indexes Guidance & Awareness  | Jira Epic: CLOUDP-239367 */}
-        {showIndexesGuidanceVariant && (
-          <Body>
-            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{' '}
-            <a
-              href="https://docs.mongodb.com/manual/applications/indexes/"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Index Strategies Documentation.
-            </a>
-          </Body>
-        )}
-
         <Body weight="medium" className={indexFieldsHeaderStyles}>
           Index fields
         </Body>
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
@@ -5,6 +5,8 @@ import {
   ModalFooter,
   ModalHeader,
   ModalBody,
+  Link,
+  palette,
 } from '@mongodb-js/compass-components';
 import {
   fieldAdded,
@@ -33,7 +35,6 @@ type CreateIndexModalProps = React.ComponentProps<typeof CreateIndexForm> & {
   onErrorBannerCloseClick: () => void;
   onCreateIndexClick: () => void;
   onCancelCreateIndexClick: () => void;
-  showIndexesGuidanceVariant: boolean;
 };
 
 function CreateIndexModal({
@@ -43,6 +44,7 @@ function CreateIndexModal({
   onErrorBannerCloseClick,
   onCreateIndexClick,
   onCancelCreateIndexClick,
+  ...props
 }: CreateIndexModalProps) {
   const connectionInfoRef = useConnectionInfoRef();
   const onSetOpen = useCallback(
@@ -73,10 +75,10 @@ function CreateIndexModal({
   );
 
   // @experiment Early Journey Indexes Guidance & Awareness  | Jira Epic: CLOUDP-239367
-  const enableInIndexesGuidanceExp =
-    usePreference('enableIndexesGuidanceExp') || true;
-  // const showIndexesGuidanceVariant =
-  //   usePreference('showIndexesGuidanceVariant') || true;
+  const enableInIndexesGuidanceExp = usePreference('enableIndexesGuidanceExp');
+  const showIndexesGuidanceVariant = usePreference(
+    'showIndexesGuidanceVariant'
+  );
 
   useTrackOnChange(
     (track: TrackFunction) => {
@@ -95,8 +97,31 @@ function CreateIndexModal({
       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} />
