chore(compass-indexes): replace ace editor with codemirror (#4189)

Author: gribnoysup

packages/compass-e2e-tests/helpers/selectors.ts

@@ -894,10 +894,7 @@ export const indexOptionInput = (
   fieldName: string,
   type: 'code' | 'text' | 'number' | 'checkbox' = 'text'
 ) => {
-  if (type === 'code') {
-    return `[data-testid="create-index-modal-${fieldName}-code"] .ace_editor`;
-  }
-  return `input[data-testid="create-index-modal-${fieldName}-${type}"]`;
+  return `[data-testid="create-index-modal-${fieldName}-${type}"]`;
 };
 
 // Indexes modal

packages/compass-e2e-tests/tests/collection-indexes-tab.test.ts

@@ -147,7 +147,7 @@ describe('Collection indexes tab', function () {
       );
 
       // set the text in the editor
-      await browser.setAceValue(
+      await browser.setCodemirrorEditorValue(
         Selectors.indexOptionInput('wildcardProjection', 'code'),
         '{ "fieldA": 1, "fieldB.fieldC": 1 }'
       );

packages/compass-editor/src/json-editor.tsx

@@ -1264,6 +1264,7 @@ const MultilineEditor = React.forwardRef<EditorRef, MultilineEditorProps>(
             ref={editorRef}
             className={editorClassName}
             language="javascript"
+            minLines={10}
             {...props}
           ></BaseEditor>
         </div>

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

@@ -1,5 +1,5 @@
 import { CollapsibleFieldSet, TextInput } from '@mongodb-js/compass-components';
-import { Editor, EditorVariant } from '@mongodb-js/compass-editor';
+import { CodemirrorMultilineEditor } from '@mongodb-js/compass-editor';
 import React from 'react';
 import { connect } from 'react-redux';
 import type { RootState } from '../../modules/create-index';
@@ -54,14 +54,13 @@ export const CollapsibleInput: React.FunctionComponent<
       disabled={disabled}
     >
       {type === 'code' ? (
-        <Editor
-          text={value}
+        <CodemirrorMultilineEditor
           data-testid={inputId}
-          variant={EditorVariant.Shell}
+          text={value}
           onChangeText={(newVal) => {
             onChange(name, newVal);
           }}
-          name={inputId}
+          id={inputId}
           aria-labelledby={id}
           readOnly={disabled}
         />