updated spacing and the brackets

rubydong · rubydong · commit e29ef4e98985 · 2025-06-13T10:46:33.000-04:00
diff --git a/packages/compass-indexes/src/components/create-index-form/index-flow-section.spec.tsx b/packages/compass-indexes/src/components/create-index-form/index-flow-section.spec.tsx
@@ -109,7 +109,7 @@ describe('IndexFlowSection', () => {
       );
       expect(optimalQueriesExamples).to.exist;
       expect(optimalQueriesExamples).to.contain.text(
-        `{"field1":1,"field2":2,"field4":{"$gt":3}}.sort("field3": 1})`
+        `{"field1":1,"field2":2,"field4":{"$gt":3}}.sort({"field3": 1})`
       );
     });
 
@@ -156,7 +156,7 @@ describe('IndexFlowSection', () => {
       );
       expect(optimalQueriesExamples).to.exist;
       expect(optimalQueriesExamples).to.contain.text(
-        `{"field1":1,"field3":{"$gt":2}}.sort("field2": 1})`
+        `{"field1":1,"field3":{"$gt":2}}.sort({"field2": 1})`
       );
     });
 
@@ -195,7 +195,7 @@ describe('IndexFlowSection', () => {
       );
       expect(optimalQueriesExamples).to.exist;
       expect(optimalQueriesExamples).to.contain.text(
-        `{"field1":1,"field2":{"$gt":2}}}`
+        `{"field1":1,"field2":{"$gt":2}}`
       );
       expect(optimalQueriesExamples).to.contain.text(
         `{"field1":1}.sort({"field2":2})`
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
@@ -92,6 +92,14 @@ const coveredQueriesHeaderStyles = css({
   marginRight: spacing[200],
 });
 
+const coveredQueriesLinkStyles = css({
+  marginTop: spacing[200],
+});
+
+const optimalQueriesStyles = css({
+  marginTop: spacing[400],
+});
+
 export type IndexFlowSectionProps = {
   fields: Field[];
   createIndexFieldsComponent: JSX.Element | null;
@@ -148,7 +156,7 @@ const generateOptimalQueries = (
 
     return (
       <>
-        {`{"${firstFieldKey}":1,"${lastFieldKey}":{"$gt":2}}}`}
+        {`{"${firstFieldKey}":1,"${lastFieldKey}":{"$gt":2}}`}
         <br />
         {`{"${firstFieldKey}":1}.sort({"${lastFieldKey}":2})`}
       </>
@@ -175,7 +183,7 @@ const generateOptimalQueries = (
   // Put last field in range and second to last field in sort
   optimalQueries[lastFieldKey] = { $gt: coveredQueriesArr.length - 1 };
   return (
-    JSON.stringify(optimalQueries) + `.sort("${secondToLastFieldKey}": 1})`
+    JSON.stringify(optimalQueries) + `.sort({"${secondToLastFieldKey}": 1})`
   );
 };
 
@@ -358,51 +366,54 @@ const IndexFlowSection = ({
             )}
           >
             {/* Covered Queries */}
-            <Body
-              className={codeStyles}
-              data-testid="index-flow-section-covered-queries-examples"
-            >
-              {coveredQueries}
-            </Body>
-            <p>
-              <Link
-                href="https://www.mongodb.com/docs/manual/core/query-optimization/"
-                onClick={() => {
-                  track('Covered Queries Learn More Clicked', {
-                    context: 'Create Index Modal',
-                  });
-                }}
-              >
-                Learn about covered queries
-              </Link>
-            </p>
 
-            {!!optimalQueries && (
-              <>
-                <p>
-                  <span className={underlineStyles}>
-                    Follow the Equality, Sort, Range (ESR) Rule. This index is
-                    great for queries that have this pattern:
-                  </span>
-                  {/* Optimal queries */}
-                  <Body
-                    className={codeStyles}
-                    data-testid="index-flow-section-optimal-queries-examples"
-                  >
-                    {optimalQueries}
-                  </Body>
-                </p>
+            <div>
+              <Body
+                className={codeStyles}
+                data-testid="index-flow-section-covered-queries-examples"
+              >
+                {coveredQueries}
+              </Body>
+              <div className={coveredQueriesLinkStyles}>
                 <Link
-                  href="https://www.mongodb.com/docs/manual/tutorial/equality-sort-range-guideline/"
+                  href="https://www.mongodb.com/docs/manual/core/query-optimization/"
                   onClick={() => {
-                    track('ESR Learn More Clicked', {
+                    track('Covered Queries Learn More Clicked', {
                       context: 'Create Index Modal',
                     });
                   }}
                 >
-                  Learn about ESR
+                  Learn about covered queries
                 </Link>
-              </>
+              </div>
+            </div>
+
+            {!!optimalQueries && (
+              <div className={optimalQueriesStyles}>
+                <span className={underlineStyles}>
+                  Follow the Equality, Sort, Range (ESR) Rule. This index is
+                  great for queries that have this pattern:
+                </span>
+                {/* Optimal queries */}
+                <Body
+                  className={codeStyles}
+                  data-testid="index-flow-section-optimal-queries-examples"
+                >
+                  {optimalQueries}
+                </Body>
+                <div className={coveredQueriesLinkStyles}>
+                  <Link
+                    href="https://www.mongodb.com/docs/manual/tutorial/equality-sort-range-guideline/"
+                    onClick={() => {
+                      track('ESR Learn More Clicked', {
+                        context: 'Create Index Modal',
+                      });
+                    }}
+                  >
+                    Learn about ESR
+                  </Link>
+                </div>
+              </div>
             )}
           </div>
         </>
