updated index flow's copy and updated text input to codemirror editor

rubydong · rubydong · commit 59c469631741 · 2025-04-24T12:34:19.000-04:00
diff --git a/packages/compass-indexes/src/components/create-index-form/index-flow-section.tsx b/packages/compass-indexes/src/components/create-index-form/index-flow-section.tsx
@@ -153,8 +153,8 @@ const IndexFlowSection = ({
         </Body>
         <p>
           <span className={underlineStyles}>
-            Follow the Equality, Sort, Range (ESR) Rule and this index is
-            optimal for queries that have this pattern:
+            Follow the Equality, Sort, Range (ESR) Rule. This index is optimal
+            for queries that have this pattern:
           </span>
           {/* Optimal queries, clean up with actual optimal queries in CLOUDP-311783 */}
           <Body
diff --git a/packages/compass-indexes/src/components/create-index-form/query-flow-section.spec.tsx b/packages/compass-indexes/src/components/create-index-form/query-flow-section.spec.tsx
@@ -4,12 +4,10 @@ import QueryFlowSection from './query-flow-section';
 import { expect } from 'chai';
 
 describe('QueryFlowSection', () => {
-  it('renders the input query section with placeholder text', () => {
+  it('renders the input query section with a code editor', () => {
     render(<QueryFlowSection />);
-    const inputElement = screen.getByPlaceholderText(
-      "Type a query: { field: 'value' }"
-    );
-    expect(inputElement).to.be.visible;
+    const codeEditor = screen.getByTestId('query-flow-section-json-editor');
+    expect(codeEditor).to.be.visible;
   });
 
   it('renders the "Show me suggested index" button', () => {
diff --git a/packages/compass-indexes/src/components/create-index-form/query-flow-section.tsx b/packages/compass-indexes/src/components/create-index-form/query-flow-section.tsx
@@ -1,14 +1,13 @@
 import {
   Button,
   palette,
-  TextInput,
   Body,
-  fontFamilies,
   Code,
   Link,
 } from '@mongodb-js/compass-components';
 import React from 'react';
 import { css, spacing } from '@mongodb-js/compass-components';
+import { CodemirrorInlineEditor } from '@mongodb-js/compass-editor';
 
 const inputQueryContainerStyles = css({
   marginBottom: spacing[600],
@@ -23,18 +22,6 @@ const headerStyles = css({
   marginBottom: spacing[200],
 });
 
-const queryInputStyles = css({
-  div: {
-    border: 0,
-  },
-  input: {
-    fontFamily: `${fontFamilies.code} !important`,
-    '&::placeholder': {
-      fontFamily: fontFamilies.code,
-    },
-  },
-});
-
 const suggestedIndexContainerStyles = css({
   flexDirection: 'column',
   display: 'flex',
@@ -64,17 +51,22 @@ db.getSiblingDB("${db_name}").getCollection("${collection_name}").createIndex(
 `;
   };
 
+  const [inputQuery, setInputQuery] = React.useState('');
+
   return (
     <>
       <Body baseFontSize={16} weight="medium" className={headerStyles}>
         Input Query
       </Body>
       <div className={inputQueryContainerStyles}>
         <div>
-          <TextInput
+          <CodemirrorInlineEditor
+            data-testid="query-flow-section-json-editor"
+            language="json"
+            text={inputQuery}
+            onChangeText={(text) => setInputQuery(text)}
+            initialJSONFoldAll={false}
             placeholder="Type a query: { field: 'value' }"
-            aria-labelledby="query-text-area"
-            className={queryInputStyles}
           />
         </div>
         <div>
