added autocomplete + fixed up tests

Author: rubydong

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

@@ -151,7 +151,12 @@ function CreateIndexForm({
         ) : null}
       </div>
 
-      {showIndexesGuidanceQueryFlow && <QueryFlowSection />}
+      {showIndexesGuidanceQueryFlow && (
+        <QueryFlowSection
+          schemaFields={schemaFields}
+          serverVersion={serverVersion}
+        />
+      )}
 
       {/* TODO in CLOUDP-314036: update the accordion design */}
       <Accordion data-testid="create-index-modal-toggle-options" text="Options">

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

@@ -4,28 +4,31 @@ import QueryFlowSection from './query-flow-section';
 import { expect } from 'chai';
 
 describe('QueryFlowSection', () => {
+  const renderComponent = () => {
+    render(<QueryFlowSection schemaFields={[]} serverVersion="5.0.0" />);
+  };
   it('renders the input query section with a code editor', () => {
-    render(<QueryFlowSection />);
-    const codeEditor = screen.getByTestId('query-flow-section-json-editor');
+    renderComponent();
+    const codeEditor = screen.getByTestId('query-flow-section-code-editor');
     expect(codeEditor).to.be.visible;
   });
 
   it('renders the "Show me suggested index" button', () => {
-    render(<QueryFlowSection />);
+    renderComponent();
     const buttonElement = screen.getByText('Show me suggested index');
     expect(buttonElement).to.be.visible;
   });
 
   it('renders the suggested index section with formatted index code', () => {
-    render(<QueryFlowSection />);
+    renderComponent();
     const codeElement = screen.getByTestId(
       'query-flow-section-suggested-index'
     );
     expect(codeElement).to.be.visible;
   });
 
   it('renders the link to the MongoDB documentation', () => {
-    render(<QueryFlowSection />);
+    renderComponent();
     const linkElement = screen.getByText('here');
     expect(linkElement).to.be.visible;
   });

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

@@ -7,7 +7,10 @@ import {
 } from '@mongodb-js/compass-components';
 import React from 'react';
 import { css, spacing } from '@mongodb-js/compass-components';
-import { CodemirrorInlineEditor } from '@mongodb-js/compass-editor';
+import {
+  CodemirrorInlineEditor,
+  createQueryAutocompleter,
+} from '@mongodb-js/compass-editor';
 
 const inputQueryContainerStyles = css({
   marginBottom: spacing[600],
@@ -37,7 +40,13 @@ const programmingLanguageLinkStyles = css({
   marginTop: spacing[100],
 });
 
-const QueryFlowSection = () => {
+const QueryFlowSection = ({
+  schemaFields,
+  serverVersion,
+}: {
+  schemaFields: { name: string; description?: string }[];
+  serverVersion: string;
+}) => {
   // TODO in CLOUDP-311786, replace hardcoded values with actual data
   const db_name = 'sample_mflix';
   const collection_name = 'comments';
@@ -61,14 +70,18 @@ db.getSiblingDB("${db_name}").getCollection("${collection_name}").createIndex(
       <div className={inputQueryContainerStyles}>
         <div>
           <CodemirrorInlineEditor
-            data-testid="query-flow-section-json-editor"
-            language="json"
+            data-testid="query-flow-section-code-editor"
+            language="javascript-expression"
             text={inputQuery}
             onChangeText={(text) => setInputQuery(text)}
-            initialJSONFoldAll={false}
             placeholder="Type a query: { field: 'value' }"
+            completer={createQueryAutocompleter({
+              fields: schemaFields,
+              serverVersion,
+            })}
           />
         </div>
+
         <div>
           <Button
             onClick={() => {