fixed infosprinkle and calls to CreateIndexFields

rubydong · rubydong · commit 7e551e6f821b · 2025-04-23T15:40:21.000-04:00
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
@@ -85,24 +85,6 @@ function CreateIndexForm({
   const showIndexesGuidanceQueryFlow =
     showIndexesGuidanceVariant && currentTab === 'QueryFlow';
 
-  const RenderCreateIndexFields = () => {
-    if (fields.length > 0 && !showIndexesGuidanceQueryFlow) {
-      return (
-        <CreateIndexFields
-          schemaFields={schemaFieldNames}
-          fields={fields}
-          serverVersion={serverVersion}
-          isRemovable={!(fields.length > 1)}
-          onSelectFieldNameClick={onSelectFieldNameClick}
-          onSelectFieldTypeClick={onSelectFieldTypeClick}
-          onAddFieldClick={onAddFieldClick}
-          onRemoveFieldClick={onRemoveFieldClick}
-        />
-      );
-    }
-    return null;
-  };
-
   return (
     <>
       <div
@@ -133,13 +115,39 @@ function CreateIndexForm({
           </RadioBoxGroup>
         )}
 
-        {showIndexesGuidanceVariant && showIndexesGuidanceIndexFlow ? (
-          <IndexFlowSection
-            createIndexFieldsComponent={RenderCreateIndexFields()}
-          />
-        ) : (
-          RenderCreateIndexFields()
-        )}
+        {fields.length > 0 ? (
+          // Variant UI
+          showIndexesGuidanceVariant && showIndexesGuidanceIndexFlow ? (
+            <IndexFlowSection
+              createIndexFieldsComponent={
+                <CreateIndexFields
+                  schemaFields={schemaFieldNames}
+                  fields={fields}
+                  serverVersion={serverVersion}
+                  isRemovable={!(fields.length > 1)}
+                  onSelectFieldNameClick={onSelectFieldNameClick}
+                  onSelectFieldTypeClick={onSelectFieldTypeClick}
+                  onAddFieldClick={onAddFieldClick}
+                  onRemoveFieldClick={onRemoveFieldClick}
+                />
+              }
+            />
+          ) : (
+            // Control UI
+            !showIndexesGuidanceQueryFlow && (
+              <CreateIndexFields
+                schemaFields={schemaFieldNames}
+                fields={fields}
+                serverVersion={serverVersion}
+                isRemovable={!(fields.length > 1)}
+                onSelectFieldNameClick={onSelectFieldNameClick}
+                onSelectFieldTypeClick={onSelectFieldTypeClick}
+                onAddFieldClick={onAddFieldClick}
+                onRemoveFieldClick={onRemoveFieldClick}
+              />
+            )
+          )
+        ) : null}
       </div>
 
       {/* TODO in CLOUDP-314036: update the accordion design */}
diff --git a/packages/compass-indexes/src/components/create-index-form/index-flow-section.tsx b/packages/compass-indexes/src/components/create-index-form/index-flow-section.tsx
@@ -3,14 +3,13 @@ import {
   Button,
   css,
   cx,
-  Icon,
   Label,
   Link,
   palette,
   spacing,
   Toggle,
-  Tooltip,
   fontFamilies,
+  InfoSprinkle,
 } from '@mongodb-js/compass-components';
 import React from 'react';
 
@@ -66,9 +65,8 @@ const codeStyles = css({
   fontFamily: fontFamilies.code,
 });
 
-const infoWithCircleIconStyles = css({
-  color: palette.gray.dark1,
-  marginLeft: spacing[200],
+const coveredQueriesHeaderStyles = css({
+  marginRight: spacing[200],
 });
 
 export type IndexFlowSectionProps = {
@@ -127,28 +125,20 @@ const IndexFlowSection = ({
       <div
         className={cx(coveredQueriesHeaderContainerStyles, flexContainerStyles)}
       >
-        <Body baseFontSize={16} weight="medium">
+        <Body
+          baseFontSize={16}
+          weight="medium"
+          className={coveredQueriesHeaderStyles}
+        >
           Covered Queries
         </Body>
-        <Tooltip
-          enabled={true}
-          trigger={
-            <span>
-              <Icon
-                glyph="InfoWithCircle"
-                className={cx(infoWithCircleIconStyles, flexContainerStyles)}
-                data-testid="index-flow-section-covered-queries-tooltip"
-              />
-            </span>
-          }
-          triggerEvent="hover"
-          align="top"
-          justify="middle"
-        >
+
+        <InfoSprinkle align="top" justify="middle">
+          {' '}
           A covered query is a query that can be satisfied entirely using an
           index and does not have to examine any documents. If a query is
           covered, it is highly performant.
-        </Tooltip>
+        </InfoSprinkle>
       </div>
 
       <div className={coveredQueriesCalloutStyles}>
