fix(schema): use code mirror for rendering schema export instead of leafygreen code for performance

Author: Anemy

package-lock.json

@@ -111,8 +111,7 @@ describe('Collection schema tab', function () {
 
   describe('with the enableExportSchema feature flag enabled', function () {
     beforeEach(async function () {
-      // TODO(COMPASS-8819): remove web skip when defaulted true.
-      skipForWeb(this, "can't toggle features in compass-web");
+      // TODO(COMPASS-8819): remove when defaulted true
       await browser.setFeature('enableExportSchema', true);
     });
 
@@ -135,7 +134,14 @@ describe('Collection schema tab', function () {
 
       const exportSchemaContent = browser.$(Selectors.ExportSchemaOutput);
       await exportSchemaContent.waitForDisplayed();
-      const text = await browser.$(Selectors.ExportSchemaOutput).getText();
+
+      let text = '';
+      await browser.waitUntil(async function () {
+        text = await browser.getCodemirrorEditorText(
+          Selectors.ExportSchemaOutput
+        );
+        return text.includes('$schema:');
+      });
       const parsedText = JSON.parse(text);
       delete parsedText.$defs;
       expect(parsedText).to.deep.equal({

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

@@ -75,6 +75,7 @@
     "@mongodb-js/compass-collection": "^4.49.1",
     "@mongodb-js/compass-components": "^1.34.1",
     "@mongodb-js/compass-connections": "^1.50.1",
+    "@mongodb-js/compass-editor": "^0.36.1",
     "@mongodb-js/compass-field-store": "^9.25.1",
     "@mongodb-js/compass-logging": "^1.6.1",
     "@mongodb-js/compass-telemetry": "^1.4.1",

packages/compass-schema/package.json

@@ -2,7 +2,7 @@ import React, { type ChangeEvent, useCallback } from 'react';
 import { connect } from 'react-redux';
 import {
   Button,
-  Code,
+  KeylineCard,
   ModalBody,
   ModalHeader,
   ModalFooter,
@@ -15,6 +15,7 @@ import {
   Label,
   CancelLoader,
 } from '@mongodb-js/compass-components';
+import { CodemirrorMultilineEditor } from '@mongodb-js/compass-editor';
 
 import type { RootState } from '../stores/store';
 import {
@@ -34,11 +35,17 @@ const contentContainerStyles = css({
   paddingBottom: spacing[400],
 });
 
-const codeStyles = css({
+const codeEditorContainerStyles = css({
   maxHeight: `${spacing[1600] * 4 - spacing[800]}px`,
   overflow: 'auto',
 });
 
+const codeStyles = css({
+  '& .cm-editor': {
+    paddingLeft: spacing[2],
+  },
+});
+
 const footerStyles = css({
   display: 'flex',
   gap: spacing[200],
@@ -137,15 +144,21 @@ const ExportSchemaModal: React.FunctionComponent<{
             />
           )}
           {exportStatus === 'complete' && (
-            <Code
-              id="export-schema-content"
-              data-testid="export-schema-content"
-              language="json"
-              className={codeStyles}
-              copyable={true}
-            >
-              {exportedSchema ?? 'Empty'}
-            </Code>
+            <KeylineCard className={codeEditorContainerStyles}>
+              <CodemirrorMultilineEditor
+                id="export-schema-content"
+                data-testid="export-schema-content"
+                language="json"
+                className={codeStyles}
+                copyable={true}
+                showAnnotationsGutter={false}
+                showLineNumbers={false}
+                formattable={false}
+                initialJSONFoldAll={false}
+                readOnly
+                text={exportedSchema ?? 'Empty'}
+              ></CodemirrorMultilineEditor>
+            </KeylineCard>
           )}
           {exportStatus === 'error' && errorMessage && (
             <ErrorSummary