update covered queries with new links, esr order swap, copy change

Author: rubydong

packages/compass-indexes/src/components/create-index-form/index-flow-section.spec.tsx

@@ -75,6 +75,55 @@ describe('IndexFlowSection', () => {
     });
   });
 
+  describe('when 4 index fields are filled in and user clicks on covered queries button', () => {
+    const fields: Field[] = [
+      { name: 'field1', type: '1 (asc)' },
+      { name: 'field2', type: '-1 (desc)' },
+      { name: 'field3', type: '1 (asc)' },
+      { name: 'field4', type: '1 (asc)' },
+    ];
+
+    beforeEach(() => {
+      renderComponent({ fields });
+      screen.getByTestId('index-flow-section-covered-queries-button').click();
+    });
+
+    it('renders the covered queries examples', () => {
+      const coveredQueriesExamples = screen.getByTestId(
+        'index-flow-section-covered-queries-examples'
+      );
+      expect(coveredQueriesExamples).to.exist;
+      expect(coveredQueriesExamples).to.contain.text(
+        JSON.stringify({
+          field1: 1,
+          field2: 2,
+          field3: 3,
+          field4: 4,
+        })
+      );
+    });
+
+    it('renders the optimal query examples', () => {
+      const optimalQueriesExamples = screen.getByTestId(
+        'index-flow-section-optimal-queries-examples'
+      );
+      expect(optimalQueriesExamples).to.exist;
+      expect(optimalQueriesExamples).to.contain.text(
+        `{"field1":1,"field2":2,"field4":{"$gt":3}}.sort("field3": 1})`
+      );
+    });
+
+    it('renders the Covered Queries Learn More link', () => {
+      const link = screen.getByText('Learn about covered queries');
+      expect(link).to.be.visible;
+    });
+
+    it('renders the ESR Learn More link', () => {
+      const link = screen.getByText('Learn about ESR');
+      expect(link).to.be.visible;
+    });
+  });
+
   describe('when 3 index fields are filled in and user clicks on covered queries button', () => {
     const fields: Field[] = [
       { name: 'field1', type: '1 (asc)' },
@@ -107,12 +156,17 @@ describe('IndexFlowSection', () => {
       );
       expect(optimalQueriesExamples).to.exist;
       expect(optimalQueriesExamples).to.contain.text(
-        `{"field1":1,"field2":{"$gt":2}}.sort(field3: 1})`
+        `{"field1":1,"field3":{"$gt":2}}.sort("field2": 1})`
       );
     });
 
-    it('renders the Learn More link', () => {
-      const link = screen.getByText('Learn More');
+    it('renders the Covered Queries Learn More link', () => {
+      const link = screen.getByText('Learn about covered queries');
+      expect(link).to.be.visible;
+    });
+
+    it('renders the ESR Learn More link', () => {
+      const link = screen.getByText('Learn about ESR');
       expect(link).to.be.visible;
     });
   });

packages/compass-indexes/src/components/create-index-form/index-flow-section.tsx

@@ -156,23 +156,27 @@ const generateOptimalQueries = (
   }
 
   // If there are more than two fields, we want to show a longer optimal query with gt and sort
-  // i.e. {a:1, b:2, c:{gt:3}}.sort({d:1})
+  // i.e. {a:1, b:2, d:{gt:3}}.sort({c:1})
+
+  const secondToLastField = coveredQueriesArr[numOfFields - 2];
+  const secondToLastFieldKey = Object.keys(secondToLastField)[0];
+
   const optimalQueries = coveredQueriesArr
-    .slice(0, -1)
+    .slice(0, -2)
     .reduce<Record<string, unknown>>((acc, obj, index) => {
       const key = Object.keys(obj)[0];
       const value = obj[key];
 
-      if (index === numOfFields - 2) {
-        acc[key] = { $gt: value };
-      } else {
-        acc[key] = value;
-      }
+      acc[key] = value;
 
       return acc;
     }, {});
 
-  return JSON.stringify(optimalQueries) + `.sort(${lastFieldKey}: 1})`;
+  // 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})`
+  );
 };
 
 const IndexFlowSection = ({
@@ -358,15 +362,25 @@ const IndexFlowSection = ({
               className={codeStyles}
               data-testid="index-flow-section-covered-queries-examples"
             >
-              {coveredQueries}
+              <p>{coveredQueries}</p>
             </Body>
+            <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>
 
             {!!optimalQueries && (
               <>
                 <p>
                   <span className={underlineStyles}>
                     Follow the Equality, Sort, Range (ESR) Rule. This index is
-                    optimal for queries that have this pattern:
+                    great for queries that have this pattern:
                   </span>
                   {/* Optimal queries */}
                   <Body
@@ -376,18 +390,19 @@ const IndexFlowSection = ({
                     {optimalQueries}
                   </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 More
-                </Link>
               </>
             )}
+
+            <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>
         </>
       )}

packages/compass-telemetry/src/telemetry-events.ts

@@ -2849,6 +2849,13 @@ type CreateIndexCoveredQueriesLearnMoreClicked = CommonEvent<{
   };
 }>;
 
+type CreateIndexESRLearnMoreClicked = CommonEvent<{
+  name: 'ESR Learn More Clicked';
+  payload: {
+    context: CreateIndexModalContext;
+  };
+}>;
+
 type CreateIndexInputIndexCopied = CommonEvent<{
   name: 'Input Index Copied';
   payload: {
@@ -3003,6 +3010,7 @@ export type TelemetryEvent =
   | CreateIndexCodeEquivalentToggled
   | CreateIndexCoveredQueriesButtonClicked
   | CreateIndexCoveredQueriesLearnMoreClicked
+  | CreateIndexESRLearnMoreClicked
   | CreateIndexIndexTabClicked
   | CreateIndexModalCancelled
   | CreateIndexModalClosed