added link

Author: rubydong

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

@@ -4,26 +4,36 @@ import MDBCodeViewer from './mdb-code-viewer';
 import { expect } from 'chai';
 
 describe('MDBCodeViewer', () => {
-  it('shows the db name, collection name, and field names, and field types', () => {
-    const dbName = 'testDB';
-    const collectionName = 'testCollection';
-    const indexNameTypeMap = {
-      field1: '1 (asc)',
-      field2: '-1 (desc)',
-      field3: '2dsphere',
-      field4: 'text',
-    };
+  const dbName = 'testDB';
+  const collectionName = 'testCollection';
+  const indexNameTypeMap = {
+    field1: '1 (asc)',
+    field2: '-1 (desc)',
+    field3: '2dsphere',
+    field4: 'text',
+  };
 
+  const renderComponent = () => {
     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('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

@@ -1,6 +1,16 @@
-import { Code } from '@mongodb-js/compass-components';
+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 MDBCodeViewer = ({
   dbName,
   collectionName,
@@ -30,9 +40,22 @@ const MDBCodeViewer = ({
   };
 
   return (
-    <Code data-testid="mdb-code-viewer" language="javascript">
-      {generateCode()}
-    </Code>
+    <div className={containerStyles}>
+      <Code data-testid="mdb-code-viewer" language="javascript">
+        {generateCode()}
+      </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>
   );
 };