moved func out, escaped quotes, fixed tests

Author: rubydong

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

@@ -5,15 +5,21 @@ import { expect } from 'chai';
 
 describe('MDBCodeViewer', () => {
   const dbName = 'testDB';
-  const collectionName = 'testCollection';
-  const indexNameTypeMap = {
+  const defaultCollectionName = 'testCollection';
+  const defaultIndexNameTypeMap = {
     field1: '1 (asc)',
     field2: '-1 (desc)',
     field3: '2dsphere',
     field4: 'text',
   };
 
-  const renderComponent = () => {
+  const renderComponent = ({
+    collectionName = defaultCollectionName,
+    indexNameTypeMap = defaultIndexNameTypeMap,
+  }: {
+    collectionName?: string;
+    indexNameTypeMap?: { [key: string]: string };
+  }) => {
     render(
       <MDBCodeViewer
         dbName={dbName}
@@ -24,15 +30,26 @@ describe('MDBCodeViewer', () => {
   };
 
   it('shows the db name, collection name, and field names, and field types', () => {
-    renderComponent();
+    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"});'
+      '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();
+    renderComponent({});
     const linkElement = screen.getByText('here');
     expect(linkElement).to.be.visible;
   });

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

@@ -11,40 +11,67 @@ const programmingLanguageLinkStyles = css({
   marginTop: spacing[100],
 });
 
-const MDBCodeViewer = ({
+const NUMERIC_INDEX_TYPES = [-1, 1];
+
+const escapeText = (text: string) => {
+  return text.replaceAll('"', '\\"');
+};
+
+const generateCode = ({
   dbName,
   collectionName,
   indexNameTypeMap,
-  dataTestId,
 }: {
   dbName: string;
   collectionName: string;
   indexNameTypeMap: { [key: string]: string };
-  dataTestId?: string;
 }) => {
-  const generateCode = () => {
-    let codeStr = `db.getSiblingDB("${dbName}").getCollection("${collectionName}").createIndex{(\n`;
+  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();
 
-    Object.entries(indexNameTypeMap).forEach(([name, type], index) => {
-      // Replacing everything inside the parenthesis i.e. (asc)
-      const parsedType = type.replace(/\(.*?\)/g, '').trim();
-      codeStr += `  "${name}": "${parsedType}"`;
+    codeStr += `  "${parsedName}": ${parsedType}`;
 
-      if (index !== Object.keys(indexNameTypeMap).length - 1) {
-        codeStr += ',';
-      }
+    if (index !== Object.keys(indexNameTypeMap).length - 1) {
+      codeStr += ',';
+    }
 
-      codeStr += '\n';
-    });
+    codeStr += '\n';
+  });
 
-    codeStr += `});`;
-    return codeStr;
-  };
+  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">
-        {generateCode()}
+        {GeneratedCode}
       </Code>
       <span className={programmingLanguageLinkStyles}>
         View programming language driver syntax{' '}