feat: Added code equivalent functionality CLOUDP-311784 (#6882)

* wip

* implemented code equivalent

* added db and collection name + tests

* added link

* added code viewer to query flow section and fixed tests

* add spacing for query flow section bottom

* fixed how to get db + collection name

* moved func out, escaped quotes, fixed tests

Author: rubydong

packages/compass-indexes/src/components/create-index-fields.tsx

@@ -108,6 +108,7 @@ function CreateIndexFields({
               size="default"
               clearable={false}
               overflow="scroll-x"
+              inputValue={field.name}
               onChange={(fieldName: string | null) =>
                 onSelectFieldName(index, fieldName)
               }

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

@@ -20,6 +20,7 @@ import {
 import { usePreference } from 'compass-preferences-model/provider';
 import IndexFlowSection from './index-flow-section';
 import QueryFlowSection from './query-flow-section';
+import toNS from 'mongodb-ns';
 
 const createIndexModalFieldsStyles = css({
   margin: `${spacing[600]}px 0 ${spacing[800]}px 0`,
@@ -86,6 +87,8 @@ function CreateIndexForm({
   const showIndexesGuidanceQueryFlow =
     showIndexesGuidanceVariant && currentTab === 'QueryFlow';
 
+  const { database: dbName, collection: collectionName } = toNS(namespace);
+
   return (
     <>
       <div
@@ -120,6 +123,9 @@ function CreateIndexForm({
           // Variant UI
           showIndexesGuidanceVariant && showIndexesGuidanceIndexFlow ? (
             <IndexFlowSection
+              fields={fields}
+              dbName={dbName}
+              collectionName={collectionName}
               createIndexFieldsComponent={
                 <CreateIndexFields
                   schemaFields={schemaFieldNames}
@@ -155,6 +161,8 @@ function CreateIndexForm({
         <QueryFlowSection
           schemaFields={schemaFields}
           serverVersion={serverVersion}
+          dbName={dbName}
+          collectionName={collectionName}
         />
       )}
 

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

@@ -8,6 +8,9 @@ describe('IndexFlowSection', () => {
     render(
       <IndexFlowSection
         createIndexFieldsComponent={createIndexFieldsComponent ?? null}
+        fields={[]}
+        dbName={'fakeDBName'}
+        collectionName={'fakeCollectionName'}
       />
     );
   };

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

@@ -11,7 +11,9 @@ import {
   fontFamilies,
   InfoSprinkle,
 } from '@mongodb-js/compass-components';
-import React from 'react';
+import React, { useState } from 'react';
+import type { Field } from '../../modules/create-index';
+import MDBCodeViewer from './mdb-code-viewer';
 
 const flexContainerStyles = css({
   display: 'flex',
@@ -70,12 +72,41 @@ const coveredQueriesHeaderStyles = css({
 });
 
 export type IndexFlowSectionProps = {
+  fields: Field[];
   createIndexFieldsComponent: JSX.Element | null;
+  dbName: string;
+  collectionName: string;
 };
 
 const IndexFlowSection = ({
   createIndexFieldsComponent,
+  fields,
+  dbName,
+  collectionName,
 }: IndexFlowSectionProps) => {
+  const [isCodeEquivalentToggleChecked, setIsCodeEquivalentToggleChecked] =
+    useState(false);
+
+  const areAllFieldsFilledIn = fields.every((field) => {
+    return field.name && field.type;
+  });
+
+  const isCoveredQueriesButtonDisabled =
+    !areAllFieldsFilledIn ||
+    fields.some((field) => {
+      return field.type === '2dsphere' || field.type === 'text';
+    });
+
+  const indexNameTypeMap = fields.reduce<Record<string, string>>(
+    (accumulator, currentValue) => {
+      if (currentValue.name && currentValue.type) {
+        accumulator[currentValue.name] = currentValue.type;
+      }
+      return accumulator;
+    },
+    {}
+  );
+
   return (
     <div>
       <div
@@ -96,17 +127,22 @@ const IndexFlowSection = ({
             size="xsmall"
             id="code-equivalent-toggle"
             aria-label="Toggle Code Equivalent"
-            onChange={() => {
-              () => {
-                // TODO in CLOUDP-311784
-              };
-            }}
-            // checked={false}
+            onChange={(value) => setIsCodeEquivalentToggleChecked(value)}
+            checked={isCodeEquivalentToggleChecked}
+            disabled={!areAllFieldsFilledIn}
           />
         </div>
       </div>
       <div className={indexFieldsCalloutStyles}>
-        {createIndexFieldsComponent}
+        {isCodeEquivalentToggleChecked ? (
+          <MDBCodeViewer
+            dbName={dbName}
+            collectionName={collectionName}
+            indexNameTypeMap={indexNameTypeMap}
+          />
+        ) : (
+          createIndexFieldsComponent
+        )}
 
         <div className={buttonContainerStyles}>
           <Button
@@ -116,6 +152,7 @@ const IndexFlowSection = ({
               // TODO in CLOUDP-311783 generate optimal queries
             }}
             size="small"
+            disabled={isCoveredQueriesButtonDisabled}
           >
             Show covered queries
           </Button>

packages/compass-indexes/src/components/create-index-form/mdb-code-viewer.spec.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { render, screen } from '@mongodb-js/testing-library-compass';
+import MDBCodeViewer from './mdb-code-viewer';
+import { expect } from 'chai';
+
+describe('MDBCodeViewer', () => {
+  const dbName = 'testDB';
+  const defaultCollectionName = 'testCollection';
+  const defaultIndexNameTypeMap = {
+    field1: '1 (asc)',
+    field2: '-1 (desc)',
+    field3: '2dsphere',
+    field4: 'text',
+  };
+
+  const renderComponent = ({
+    collectionName = defaultCollectionName,
+    indexNameTypeMap = defaultIndexNameTypeMap,
+  }: {
+    collectionName?: string;
+    indexNameTypeMap?: { [key: string]: string };
+  }) => {
+    render(
+      <MDBCodeViewer
+        dbName={dbName}
+        collectionName={collectionName}
+        indexNameTypeMap={indexNameTypeMap}
+      />
+    );
+  };
+
+  it('shows the db name, collection name, and field names, and field types', () => {
+    renderComponent({});
+    const codeElement = screen.getByTestId('mdb-code-viewer');
+    expect(codeElement).to.have.text(
+      'db.getSiblingDB("testDB").getCollection("testCollection").createIndex({  "field1": 1,  "field2": -1,  "field3": "2dsphere",  "field4": "text"});'
+    );
+  });
+
+  it('shows the escaped version of collection name and field name when there are quotes', () => {
+    renderComponent({
+      collectionName: 'collection"With"quotes',
+      indexNameTypeMap: { 'field"With"quotes': '1' },
+    });
+    const codeElement = screen.getByTestId('mdb-code-viewer');
+    expect(codeElement).to.have.text(
+      'db.getSiblingDB("testDB").getCollection("collection\\"With\\"quotes").createIndex({  "field\\"With\\"quotes": 1});'
+    );
+  });
+
+  it('renders the link to the MongoDB documentation', () => {
+    renderComponent({});
+    const linkElement = screen.getByText('here');
+    expect(linkElement).to.be.visible;
+  });
+});

packages/compass-indexes/src/components/create-index-form/mdb-code-viewer.tsx

@@ -0,0 +1,91 @@
+import { Code, Link, css, spacing } from '@mongodb-js/compass-components';
+import React from 'react';
+
+const containerStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+const programmingLanguageLinkStyles = css({
+  marginLeft: 'auto',
+  marginTop: spacing[100],
+});
+
+const NUMERIC_INDEX_TYPES = [-1, 1];
+
+const escapeText = (text: string) => {
+  return text.replaceAll('"', '\\"');
+};
+
+const generateCode = ({
+  dbName,
+  collectionName,
+  indexNameTypeMap,
+}: {
+  dbName: string;
+  collectionName: string;
+  indexNameTypeMap: { [key: string]: string };
+}) => {
+  let codeStr = `db.getSiblingDB("${dbName}").getCollection("${escapeText(
+    collectionName
+  )}").createIndex({\n`;
+
+  Object.entries(indexNameTypeMap).forEach(([name, type], index) => {
+    // Replacing everything inside the parenthesis i.e. (asc)
+    let parsedType = escapeText(type.replace(/\(.*?\)/g, '')).trim();
+    if (!NUMERIC_INDEX_TYPES.includes(Number(parsedType))) {
+      parsedType = `"${parsedType}"`;
+    }
+    const parsedName = escapeText(name).trim();
+
+    codeStr += `  "${parsedName}": ${parsedType}`;
+
+    if (index !== Object.keys(indexNameTypeMap).length - 1) {
+      codeStr += ',';
+    }
+
+    codeStr += '\n';
+  });
+
+  codeStr += `});`;
+  return codeStr;
+};
+
+const MDBCodeViewer = ({
+  dbName,
+  collectionName,
+  indexNameTypeMap,
+  dataTestId,
+}: {
+  dbName: string;
+  collectionName: string;
+  indexNameTypeMap: { [key: string]: string };
+  dataTestId?: string;
+}) => {
+  const GeneratedCode = generateCode({
+    dbName,
+    collectionName,
+    indexNameTypeMap,
+  });
+
+  return (
+    <div className={containerStyles}>
+      <Code data-testid={dataTestId || 'mdb-code-viewer'} language="javascript">
+        {GeneratedCode}
+      </Code>
+      <span className={programmingLanguageLinkStyles}>
+        View programming language driver syntax{' '}
+        <Link
+          href="https://www.mongodb.com/docs/manual/core/indexes/create-index/"
+          target="_blank"
+          rel="noreferrer noopener"
+        >
+          here
+        </Link>
+        .
+      </span>
+    </div>
+  );
+};
+
+export default MDBCodeViewer;

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

@@ -5,7 +5,14 @@ import { expect } from 'chai';
 
 describe('QueryFlowSection', () => {
   const renderComponent = () => {
-    render(<QueryFlowSection schemaFields={[]} serverVersion="5.0.0" />);
+    render(
+      <QueryFlowSection
+        schemaFields={[]}
+        serverVersion="5.0.0"
+        dbName={'fakeDBName'}
+        collectionName={'fakeCollectionName'}
+      />
+    );
   };
   it('renders the input query section with a code editor', () => {
     renderComponent();
@@ -26,10 +33,4 @@ describe('QueryFlowSection', () => {
     );
     expect(codeElement).to.be.visible;
   });
-
-  it('renders the link to the MongoDB documentation', () => {
-    renderComponent();
-    const linkElement = screen.getByText('here');
-    expect(linkElement).to.be.visible;
-  });
 });