Skip to content

fix(schema): use editor for rendering schema export instead of LG code for performance COMPASS-8980 #6731

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Feb 20, 2025
Merged

fix(schema): use editor for rendering schema export instead of LG code for performance COMPASS-8980 #6731

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
249437a
fix(schema): use code mirror for rendering schema export instead of l…
Anemy Feb 18, 2025
7348128
fixup: wait for set preferences function to be set before setting pre…
Anemy Feb 18, 2025
7537e4d
fixup: e2e test code mirror selector
Anemy Feb 19, 2025
0c958ed
fixup: remove e2e test compass web preference setting, lets do that i…
Anemy Feb 19, 2025
2a41fcf
merge main
Anemy Feb 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 1 addition & 3 deletions packages/compass-e2e-tests/tests/auto-connect.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 3 additions & 1 deletion packages/compass-e2e-tests/tests/collection-schema-tab.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down
1 change: 1 addition & 0 deletions packages/compass-schema/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
34 changes: 23 additions & 11 deletions packages/compass-schema/src/components/export-schema-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { type ChangeEvent, useCallback } from 'react';
import { connect } from 'react-redux';
import {
Button,
Code,
KeylineCard,
ModalBody,
ModalHeader,
ModalFooter,
Expand All @@ -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 {
Expand All @@ -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],
Expand Down Expand Up @@ -137,15 +144,20 @@ 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
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
Expand Down
Loading