finished styling + added tooltip and code equivalent

rubydong · rubydong · commit 54f8b3f71591 · 2025-04-18T17:54:31.000-04:00
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
@@ -6,6 +6,7 @@ import {
   Link,
   palette,
   spacing,
+  Toggle,
   Tooltip,
 } from '@mongodb-js/compass-components';
 import React from 'react';
@@ -14,14 +15,24 @@ const headerStyles = css({
   marginBottom: spacing[200],
 });
 
+const indexFieldsHeaderContainterStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+});
+
 const indexFieldsCalloutStyles = css({
   border: `1px solid ${palette.gray.light2}`,
   borderRadius: '12px',
   padding: spacing[600],
-  minHeight: '132px',
   marginBottom: spacing[600],
 });
 
+const coveredQueriesHeaderContainterStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+});
+
 const coveredQueriesCalloutStyles = css({
   border: `1px solid ${palette.gray.light2}`,
   background: palette.gray.light3,
@@ -30,6 +41,11 @@ const coveredQueriesCalloutStyles = css({
   marginBottom: spacing[600],
 });
 
+const buttonContainerStyles = css({
+  display: 'flex',
+  justifyContent: 'right',
+});
+
 const coveredQueriesButtonStyles = css({
   height: spacing[600] + 4,
   float: 'right',
@@ -52,25 +68,43 @@ const IndexFlowSection = ({
 }) => {
   return (
     <div>
-      <Body baseFontSize={16} weight="medium" className={headerStyles}>
-        Input Index
-      </Body>
+      <div className={indexFieldsHeaderContainterStyles}>
+        <Body baseFontSize={16} weight="medium" className={headerStyles}>
+          Input Index
+        </Body>
+        <Toggle
+          size="xsmall"
+          aria-label="Toggle Auto Preview"
+          onChange={() => {
+            () => {
+              // TODO in CLOUDP-311784
+            };
+          }}
+          checked={false}
+        >
+          Code Equivalent
+        </Toggle>
+      </div>
       <div className={indexFieldsCalloutStyles}>
         {createIndexFieldsComponent}
 
-        <Button
-          className={coveredQueriesButtonStyles}
-          onClick={() => {
-            // TODO in CLOUDP-311782 generate covered queries
-            // TODO in CLOUDP-311783 generate optimal queries
-          }}
-        >
-          Show me covered queries
-        </Button>
+        <div className={buttonContainerStyles}>
+          <Button
+            className={coveredQueriesButtonStyles}
+            onClick={() => {
+              // TODO in CLOUDP-311782 generate covered queries
+              // TODO in CLOUDP-311783 generate optimal queries
+            }}
+          >
+            Show me covered queries
+          </Button>
+        </div>
       </div>
 
-      <Body baseFontSize={16} weight="medium" className={headerStyles}>
-        Covered Queries{' '}
+      <div className={coveredQueriesHeaderContainterStyles}>
+        <Body baseFontSize={16} weight="medium" className={headerStyles}>
+          Covered Queries
+        </Body>
         <Tooltip
           enabled={true}
           trigger={
@@ -89,7 +123,7 @@ const IndexFlowSection = ({
           index and does not have to examine any documents. If a query is
           covered, it is highly performant.
         </Tooltip>
-      </Body>
+      </div>
 
       <div className={coveredQueriesCalloutStyles}>
         {/* Covered Queries, clean up with actual covered queries examples in CLOUDP-311782 */}
@@ -105,7 +139,7 @@ const IndexFlowSection = ({
           </u>
           {/* Optimal queries, clean up with actual optimal queries in CLOUDP-311783 */}
           <Body baseFontSize={13} className={codeStyles}>
-            {`{awards.wins : 5, imdb.rating: {$gt : 5} }.sort({ awards.nominations : 1 }`}
+            {`{ awards.wins : 5, imdb.rating: {$gt : 5} }.sort({ awards.nominations : 1 }`}
           </Body>
         </p>
 
