feat(data-modeling): open diagram COMPASS-9546 #7127

mabaasit · 2025-07-21T14:52:22Z

In this PR, I added an option to open (import) a data modeling diagram.

Preview

Screen.Recording.2025-07-21.at.17.19.16.mov

Description

Checklist

New tests and/or benchmarks are included
Documentation is changed or added
If this change updates the UI, screenshots/videos are added and a design review is requested
I have signed the MongoDB Contributor License Agreement (https://www.mongodb.com/legal/contributor-agreement)

Motivation and Context

Bugfix
New feature
Dependency update
Misc

Open Questions

Dependents

Types of changes

Backport Needed
Patch (non-breaking change which fixes an issue)
Minor (non-breaking change which adds functionality)
Major (fix or feature that would cause existing functionality to change)

…PASS-9546-open-diagram

Copilot

Pull Request Overview

This PR implements functionality to open diagram files in Compass Data Modeling by adding file import capabilities and comprehensive test coverage. The feature allows users to select a local .compass file and load it as a new diagram with automatic name deduplication.

Adds a new "Open Diagram" button with file selection functionality across the data modeling interface
Implements file parsing, validation, and diagram loading with proper error handling
Extends existing e2e tests to verify the complete save/open workflow

Reviewed Changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
`packages/compass-e2e-tests/tests/data-modeling-tab.test.ts`	Extends test to verify diagram opening functionality after download
`packages/compass-e2e-tests/helpers/selectors.ts`	Adds selectors for file input and updates diagram list item selector
`packages/compass-data-modeling/src/store/diagram.ts`	Implements openDiagramFromFile action with file parsing and storage
`packages/compass-data-modeling/src/services/open-and-download-diagram.ts`	Adds file parsing and diagram name generation utilities
`packages/compass-data-modeling/src/services/open-and-download-diagram.spec.ts`	Comprehensive tests for file parsing and name generation functions
`packages/compass-data-modeling/src/services/data-model-storage.ts`	Refactors schema validation for reuse in file parsing
`packages/compass-data-modeling/src/components/saved-diagrams-list.tsx`	Integrates import functionality into diagram list UI
`packages/compass-data-modeling/src/components/open-diagram-button.tsx`	New reusable component for file selection
`packages/compass-data-modeling/src/components/diagram-list-toolbar.tsx`	Adds import button to toolbar
`packages/compass-components/src/index.ts`	Exports new FileSelector component
`packages/compass-components/src/components/file-selector.tsx`	New generic file selection component
`configs/mocha-config-compass/register/jsdom-extra-mocks-register.js`	Adds File and Blob mocks for testing

Copilot · 2025-07-21T14:52:49Z

packages/compass-data-modeling/src/services/open-and-download-diagram.ts

+        const parsedContent = JSON.parse(content);
+
+        if (
+          parsedContent.version !== kCurrentVersion &&


The logical operator should be OR (||) instead of AND (&&). The current condition will only reject files if BOTH version and type are incorrect, but it should reject if EITHER is incorrect.

Suggested change

parsedContent.version !== kCurrentVersion &&

parsedContent.version !== kCurrentVersion ||

nice catch!

…PASS-9546-open-diagram

gribnoysup · 2025-07-22T09:18:09Z

packages/compass-components/src/components/file-selector.tsx

+  onSelect: (files: File[]) => void;
+};
+
+export function FileSelector({


Not necessarily completely your problem to solve, but the fact that we now expose two file inputs from compass-components is very confusing. In the spirit of trying to make code universal, maybe we should rename the other one to make it clear that it's electron only and mark it as deprecated with a JSDoc annotation?

Renaming it makes sense, but why deprecation?

Universal code should be the default almost always, everything else should be an exception, we call this out often in a lot of places, but something that highlights component as "do not use unless you're really truly sure about it" seems to be a useful mechanism, @deprecated is just a tool to achieve that if people just pick up components automatically based on import suggestions

gribnoysup · 2025-07-22T09:51:55Z

packages/compass-data-modeling/src/services/open-and-download-diagram.ts

+          parsedContent.version !== kCurrentVersion ||
+          parsedContent.type !== kFileTypeDescription
+        ) {
+          return reject(new Error('Unsupported diagram file format'));


Nit: I think makes more sense to just throw here so that the same error message adjustments can be applied to all errors that parsing the file contents can produce

Suggested change

return reject(new Error('Unsupported diagram file format'));

throw new Error('Unsupported diagram file format');

cleaned in fc64ffb

gribnoysup · 2025-07-22T09:52:35Z

packages/compass-data-modeling/src/services/open-and-download-diagram.ts

+        const { name, edits } = parsedContent;
+
+        if (!name || !edits || typeof edits !== 'string') {
+          return reject(new Error('Diagram file is missing required fields'));


Same as above

Suggested change

return reject(new Error('Diagram file is missing required fields'));

throw new Error('Diagram file is missing required fields')

gribnoysup · 2025-07-22T09:55:20Z

packages/compass-data-modeling/test/fixtures/flights-diagram.json

Whoops, have I added the same fixture file you already had there? Sorry!

gribnoysup

Two small notes, otherwise LGTM

paula-stacho · 2025-07-22T11:29:23Z

packages/compass-data-modeling/src/services/open-and-download-diagram.ts

+  expectedName: string
+): string {
+  let name = expectedName;
+  let index = 1;


Instead of starting with 1 always, we can check if there's already an index, so that re-importing diagram (1) doesn't resolve in diagram (1) (1). Not a big deal, but this would be consistent with the connection copies naming logic.

mabaasit added 7 commits July 16, 2025 14:09

add import file button

8db037e

import diagram

26ac7b8

Merge branch 'main' of https://github.com/mongodb-js/compass into COM…

b285178

…PASS-9546-open-diagram

open diagram back

d76618c

e2e tests

bd331ea

clean up

8a87bcc

make ts happy

f64c626

Copilot AI review requested due to automatic review settings July 21, 2025 14:52

mabaasit requested a review from a team as a code owner July 21, 2025 14:52

Copilot AI reviewed Jul 21, 2025

View reviewed changes

mabaasit added 2 commits July 21, 2025 17:05

bot review

92ba8c2

Merge branch 'main' of https://github.com/mongodb-js/compass into COM…

79c97b1

…PASS-9546-open-diagram

github-actions bot added the feat label Jul 21, 2025

use existing diagram

bea3e3d

mabaasit added feature flagged PRs labeled with this label will not be included in the release notes of the next release no release notes Fix or feature not for release notes labels Jul 21, 2025

change text to import

9db4b8e

gribnoysup reviewed Jul 22, 2025

View reviewed changes

gribnoysup approved these changes Jul 22, 2025

View reviewed changes

paula-stacho reviewed Jul 22, 2025

View reviewed changes

cleaner error handling

fc64ffb

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(data-modeling): open diagram COMPASS-9546 #7127

feat(data-modeling): open diagram COMPASS-9546 #7127

mabaasit commented Jul 21, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jul 21, 2025

Uh oh!

mabaasit Jul 21, 2025

Uh oh!

gribnoysup Jul 22, 2025

Uh oh!

mabaasit Jul 22, 2025

Uh oh!

gribnoysup Jul 22, 2025

Uh oh!

gribnoysup Jul 22, 2025 •

edited

Loading

Uh oh!

mabaasit Jul 22, 2025

Uh oh!

gribnoysup Jul 22, 2025

Uh oh!

gribnoysup Jul 22, 2025

Uh oh!

gribnoysup left a comment

Uh oh!

paula-stacho Jul 22, 2025 •

edited

Loading

Uh oh!

Uh oh!

	parsedContent.version !== kCurrentVersion &&
	parsedContent.version !== kCurrentVersion \|\|

	return reject(new Error('Unsupported diagram file format'));
	throw new Error('Unsupported diagram file format');

	return reject(new Error('Diagram file is missing required fields'));
	throw new Error('Diagram file is missing required fields')

feat(data-modeling): open diagram COMPASS-9546 #7127

Are you sure you want to change the base?

feat(data-modeling): open diagram COMPASS-9546 #7127

Conversation

mabaasit commented Jul 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Motivation and Context

Open Questions

Dependents

Types of changes

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Jul 21, 2025

Choose a reason for hiding this comment

Uh oh!

mabaasit Jul 21, 2025

Choose a reason for hiding this comment

Uh oh!

gribnoysup Jul 22, 2025

Choose a reason for hiding this comment

Uh oh!

mabaasit Jul 22, 2025

Choose a reason for hiding this comment

Uh oh!

gribnoysup Jul 22, 2025

Choose a reason for hiding this comment

Uh oh!

gribnoysup Jul 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mabaasit Jul 22, 2025

Choose a reason for hiding this comment

Uh oh!

gribnoysup Jul 22, 2025

Choose a reason for hiding this comment

Uh oh!

gribnoysup Jul 22, 2025

Choose a reason for hiding this comment

Uh oh!

gribnoysup left a comment

Choose a reason for hiding this comment

Uh oh!

paula-stacho Jul 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

mabaasit commented Jul 21, 2025 •

edited

Loading

gribnoysup Jul 22, 2025 •

edited

Loading

paula-stacho Jul 22, 2025 •

edited

Loading