diff --git a/package-lock.json b/package-lock.json index 61fa6d16259..61fe9f9020a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -46555,6 +46555,7 @@ "@mongodb-js/compass-collection": "^4.49.2", "@mongodb-js/compass-components": "^1.34.2", "@mongodb-js/compass-connections": "^1.50.2", + "@mongodb-js/compass-editor": "^0.36.2", "@mongodb-js/compass-field-store": "^9.25.2", "@mongodb-js/compass-logging": "^1.6.2", "@mongodb-js/compass-query-bar": "^8.51.2", @@ -58352,6 +58353,7 @@ "@mongodb-js/compass-collection": "^4.49.2", "@mongodb-js/compass-components": "^1.34.2", "@mongodb-js/compass-connections": "^1.50.2", + "@mongodb-js/compass-editor": "^0.36.2", "@mongodb-js/compass-field-store": "^9.25.2", "@mongodb-js/compass-logging": "^1.6.2", "@mongodb-js/compass-query-bar": "^8.51.2", diff --git a/packages/compass-e2e-tests/tests/auto-connect.test.ts b/packages/compass-e2e-tests/tests/auto-connect.test.ts index c66a8e5f479..927614f746c 100644 --- a/packages/compass-e2e-tests/tests/auto-connect.test.ts +++ b/packages/compass-e2e-tests/tests/auto-connect.test.ts @@ -308,9 +308,7 @@ describe('Automatically connecting from the command line', function () { await browser.execute(() => { // eslint-disable-next-line @typescript-eslint/no-var-requires - (require('electron').ipcRenderer as any).call( - 'test:show-connect-window' - ); + require('electron').ipcRenderer.call('test:show-connect-window'); }); // Switch to the other window diff --git a/packages/compass-e2e-tests/tests/collection-schema-tab.test.ts b/packages/compass-e2e-tests/tests/collection-schema-tab.test.ts index a979c759cef..8817366e613 100644 --- a/packages/compass-e2e-tests/tests/collection-schema-tab.test.ts +++ b/packages/compass-e2e-tests/tests/collection-schema-tab.test.ts @@ -135,7 +135,9 @@ describe('Collection schema tab', function () { const exportSchemaContent = browser.$(Selectors.ExportSchemaOutput); await exportSchemaContent.waitForDisplayed(); - const text = await browser.$(Selectors.ExportSchemaOutput).getText(); + const text = await browser.getCodemirrorEditorText( + Selectors.ExportSchemaOutput + ); const parsedText = JSON.parse(text); delete parsedText.$defs; expect(parsedText).to.deep.equal({ diff --git a/packages/compass-editor/src/editor.tsx b/packages/compass-editor/src/editor.tsx index 7bdb7e91eeb..9f893996f1d 100644 --- a/packages/compass-editor/src/editor.tsx +++ b/packages/compass-editor/src/editor.tsx @@ -1407,6 +1407,7 @@ type MultilineEditorProps = EditorProps & { editorClassName?: string; actionsClassName?: string; onExpand?: () => void; + onCopy?: () => void; expanded?: boolean; }; @@ -1420,6 +1421,7 @@ const MultilineEditor = React.forwardRef( editorClassName, actionsClassName, darkMode: _darkMode, + onCopy, onExpand, expanded, ...props @@ -1430,6 +1432,9 @@ const MultilineEditor = React.forwardRef( const containerRef = useRef(null); const editorRef = useRef(null); + const onCopyRef = useRef(onCopy); + onCopyRef.current = onCopy; + useImperativeHandle( ref, () => { @@ -1441,6 +1446,7 @@ const MultilineEditor = React.forwardRef( return editorRef.current?.unfoldAll() ?? false; }, copyAll() { + onCopyRef.current?.(); return editorRef.current?.copyAll() ?? false; }, prettify() { diff --git a/packages/compass-schema/package.json b/packages/compass-schema/package.json index 3c516faa9c1..589b473ac52 100644 --- a/packages/compass-schema/package.json +++ b/packages/compass-schema/package.json @@ -75,6 +75,7 @@ "@mongodb-js/compass-collection": "^4.49.2", "@mongodb-js/compass-components": "^1.34.2", "@mongodb-js/compass-connections": "^1.50.2", + "@mongodb-js/compass-editor": "^0.36.2", "@mongodb-js/compass-field-store": "^9.25.2", "@mongodb-js/compass-logging": "^1.6.2", "@mongodb-js/compass-telemetry": "^1.4.2", diff --git a/packages/compass-schema/src/components/export-schema-modal.tsx b/packages/compass-schema/src/components/export-schema-modal.tsx index 08768eea7fb..605bb5af778 100644 --- a/packages/compass-schema/src/components/export-schema-modal.tsx +++ b/packages/compass-schema/src/components/export-schema-modal.tsx @@ -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 { @@ -35,11 +36,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], @@ -139,17 +146,22 @@ const ExportSchemaModal: React.FunctionComponent<{ onCancel={onCancelSchemaExport} /> )} - {exportStatus === 'complete' && ( - - {exportedSchema ?? 'Empty'} - + {exportStatus === 'complete' && exportedSchema && ( + + + )} {exportStatus === 'error' && errorMessage && (