feat(data-modeling): add collection COMPASS-9655 #7195

paula-stacho · 2025-08-13T14:50:56Z

Description

Adding a new collection flow.

Click the button in the toolbar
Drawer is opened and name input focused
Once the name is updated (on blur), the collection appears in the diagram and the form updates to a normal edit state

Note: The coordinates calculation doesn't work as expected, I am still trying to figure out why I'm getting different numbers in compass.

Note2: One todo left around the model.database addition, this might turn into a follow up

Screen.Recording.2025-08-14.at.16.48.06.mov

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)

Copilot

Pull Request Overview

This PR adds functionality to create new collections directly from the data modeling diagram editor. Users can click an "Add Collection" button in the toolbar to open a drawer with a focused name input field, and when the name is updated (on blur), the collection appears in the diagram and transitions to a normal edit state.

Key changes:

Added an "Add Collection" button to the diagram editor toolbar
Implemented collection creation flow with drawer UI that focuses the name input for new collections
Added state management for collection creation with proper validation and positioning logic

Reviewed Changes

Copilot reviewed 13 out of 14 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/compass-e2e-tests/tests/data-modeling-tab.test.ts	Adds end-to-end test for the new collection creation workflow
packages/compass-e2e-tests/helpers/selectors.ts	Updates selectors to support the new Add Collection button
packages/compass-data-modeling/src/store/diagram.ts	Implements core state management for collection creation including new actions, reducers, and positioning logic
packages/compass-data-modeling/src/store/diagram.spec.ts	Adds unit tests for the collection creation flow
packages/compass-data-modeling/src/services/data-model-storage.ts	Extends the edit schema to support AddCollection operations
packages/compass-data-modeling/src/components/icons/add-collection.tsx	Creates custom SVG icon for the Add Collection button
packages/compass-data-modeling/src/components/drawer/diagram-editor-side-panel.tsx	Updates drawer to handle new collection state with optional IDs and appropriate labeling
packages/compass-data-modeling/src/components/drawer/collection-drawer-content.tsx	Modifies collection form to support creation mode with auto-focus and disabled controls
packages/compass-data-modeling/src/components/diagram-editor.tsx	Integrates collection creation with drawer opening functionality
packages/compass-data-modeling/src/components/diagram-editor-toolbar.tsx	Adds the Add Collection button to the toolbar UI
packages/compass-data-modeling/package.json	Updates diagramming library dependency for new positioning functionality

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

packages/compass-data-modeling/src/components/drawer/collection-drawer-content.tsx

packages/compass-data-modeling/src/store/diagram.ts

packages/compass-data-modeling/src/components/drawer/collection-drawer-content.tsx

packages/compass-data-modeling/src/store/diagram.ts

gribnoysup · 2025-08-15T07:22:05Z

Feel free to tell me if you discussed this with design already and it's decided upon 😆 but I do find it a bit weird when playing with the branch locally that new collection doesn't appear immediately when adding it. Everything else we have in the view is immediately synced to the diagram and this specific action is not (but that might be just me)

paula-stacho · 2025-08-15T11:05:08Z

Feel free to tell me if you discussed this with design already and it's decided upon 😆 but I do find it a bit weird when playing with the branch locally that new collection doesn't appear immediately when adding it. Everything else we have in the view is immediately synced to the diagram and this specific action is not (but that might be just me)

It's something we've discussed with Rhys, I'm actually not sure if the behaviour was reviewed by Ben. I don't find the delayed appearance of the collection on the diagram that weird, but tbh because of the problem with placement it's usually underneath the drawer for me 🙈 . We can check with Ben when he's back next week, it'll also be easier to reason about now that we have a prototype. I'd like to keep the creation+naming as one edit, but there are other ways to achieve that.

One idea, connecting this with the other (missing id) point:

creating the collection immediately, as a <database>.new-collection-<number>
(optionally) the initial renaming will update the AddCollection edit, instead of creating a new edit

gribnoysup · 2025-08-15T11:20:17Z

Like your suggestion of using a placeholder (new-collection-n) name! I think that's a pretty reasonable way to deal with that and should be easy to iterate on later

(optionally) the initial renaming will update the AddCollection edit, instead of creating a new edit

Yeah, I think that's not a bad idea either if we want to try it out!

Anemy · 2025-08-17T14:40:37Z

I like how we're now creating the collection immediately.
When we create the collection can we center it in the view port? We can use setCenter that useDiagram provides:
https://reactflow.dev/api-reference/types/react-flow-instance#setcenter
The export diagram model is already using the useDiagram for reference: https://github.com/mongodb-js/compass/blob/92d2dc7a0e0879b9f0ee5257336488b1e44dc120/packages/compass-data-modeling/src/components/export-diagram-modal.tsx#L68C19-L68C29

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

packages/compass-data-modeling/src/components/drawer/collection-drawer-content.tsx

addaleax · 2025-08-18T14:03:22Z

packages/compass-data-modeling/src/store/diagram.spec.ts

-      expect(selectedFields.collection1).to.deep.include(['prop2', 'prop2A']);
-      expect(selectedFields.collection1).to.deep.include([
+      expect(selectedFields).to.have.property('db.collection1');
+      expect(selectedFields['db.collection1']).to.deep.include(['prop1']);


Probably not super actionable in the context of this PR, but it could be nice if all collection names were typed as `${string}.${string}` instead of just string. That may feel a bit silly, but it does clarify in particular there we don't need to worry about conflicts with built-in methods from Object.prototype such as hasOwnProperty (which, as far as I can tell, was a bug that got "accidentally" fixed by this PR?)

packages/compass-data-modeling/src/store/diagram.ts

packages/compass-data-modeling/src/components/diagram-editor.tsx

gribnoysup · 2025-08-19T07:24:56Z

packages/compass-components/src/components/drawer-portal.tsx

+export const useDrawerState = () => {
+  const drawerToolbarContext = useDrawerToolbarContext();
+  const drawerState = useContext(DrawerStateContext);
+  return {
+    isOpen:
+      drawerToolbarContext.isDrawerOpen &&
+      // the second check is a workaround, because LG doesn't set isDrawerOpen to false when it's empty
+      drawerState.length > 0,
+  };
+};


If we have to add this, we have to do more wiring to actually make it work in our paradigm, this hook will only work if you're using this INSIDE leafygreen layout provider (because that's the only place where useDrawerToolbarContext is available), but not inside our drawer provider, which will not be always true in our case. If you want to add a hook like that you have to first move this isDrawerOpen state higher up to our provider and re-expose it from there

Should be easier when this is implemented and we can just manage this state on our own, but fot now this needs more logic from us. Also worth adding a test for this

packages/compass-data-modeling/src/store/diagram.ts

packages/compass-data-modeling/src/components/drawer/collection-drawer-content.tsx

packages/compass-data-modeling/src/store/diagram.ts

packages/compass-components/src/components/drawer-portal.tsx

Anemy

nice!

gribnoysup

I had a few small comments here and there, but otherwise looks good to me

packages/compass-components/src/components/drawer-portal.spec.tsx

gribnoysup · 2025-08-22T09:03:43Z

packages/compass-data-modeling/src/components/diagram-editor.tsx

@@ -183,6 +188,35 @@ const DiagramContent: React.FunctionComponent<{
    });
  }, []);

+  // Center on a new collection when it is added
+  const previouslyOpenedDrawer = useRef<boolean>(false);
+  useEffect(() => {


I know I will never convince y'all to avoid useEffect usage as much as possible 😆 but I just have to mention that while yes, this is an effect of sorts, I think a better way to think about this as (at least as it is right now) a side-effect directly of calling the createNewCollection action and so can be just a function that is called right after the onAddCollectionClick callback prop

hmm, do we know that the new collection will already be there?

packages/compass-data-modeling/src/components/drawer/diagram-editor-side-panel.tsx

github-actions bot added the feat label Aug 13, 2025

paula-stacho added the feature flagged PRs labeled with this label will not be included in the release notes of the next release label Aug 14, 2025

paula-stacho marked this pull request as ready for review August 14, 2025 14:49

Copilot AI review requested due to automatic review settings August 14, 2025 14:49

paula-stacho requested a review from a team as a code owner August 14, 2025 14:49

paula-stacho requested a review from Anemy August 14, 2025 14:50

Copilot AI reviewed Aug 14, 2025

View reviewed changes

Anemy changed the title ~~feat: add collection COMPASS-9655~~ feat(data-modeling): add collection COMPASS-9655 Aug 14, 2025

gribnoysup reviewed Aug 15, 2025

View reviewed changes

packages/compass-data-modeling/src/store/diagram.ts Outdated Show resolved Hide resolved

addaleax reviewed Aug 18, 2025

View reviewed changes

addaleax approved these changes Aug 18, 2025

View reviewed changes

packages/compass-data-modeling/src/components/diagram-editor.tsx Outdated Show resolved Hide resolved

paula-stacho force-pushed the COMPASS-9655 branch from 943c31b to dd07568 Compare August 19, 2025 07:01

gribnoysup reviewed Aug 19, 2025

View reviewed changes

packages/compass-data-modeling/src/store/diagram.ts Outdated Show resolved Hide resolved

gribnoysup reviewed Aug 19, 2025

View reviewed changes

packages/compass-data-modeling/src/components/drawer/collection-drawer-content.tsx Outdated Show resolved Hide resolved

gribnoysup reviewed Aug 19, 2025

View reviewed changes

packages/compass-data-modeling/src/store/diagram.ts Show resolved Hide resolved

gribnoysup reviewed Aug 19, 2025

View reviewed changes

packages/compass-components/src/components/drawer-portal.tsx Outdated Show resolved Hide resolved

Anemy approved these changes Aug 20, 2025

View reviewed changes

paula-stacho added 8 commits August 21, 2025 15:23

feat: add collection COMPASS-9655

76701c4

cleanup

9649383

fix and add tests

5dc5e85

add initial schema and store test

736c9eb

add e2e test

198c966

temporarily downgrade selectors

9fca137

create collection immediately with a draft name

b68ba41

update tests

0922830

paula-stacho added 9 commits August 21, 2025 15:23

center on newly added collection

38c5644

add ticket numbers for follow ups

ecc0457

update test

9cba1a0

refactor centering calc

39fe3c4

fix lock after rebase

9cce817

address PR suggestions

926f035

finish the open context

c50b81f

fixes

650b898

update test

df0db50

paula-stacho force-pushed the COMPASS-9655 branch from 71059bb to df0db50 Compare August 21, 2025 14:05

paula-stacho added 2 commits August 21, 2025 16:23

cleanup

49659cd

?

346d0d0

gribnoysup approved these changes Aug 22, 2025

View reviewed changes

paula-stacho added 3 commits August 22, 2025 11:49

cleanup and update selector

3df807f

disable overlay for e2e tests

c1fb51a

fix unit test

9eb4f44

paula-stacho merged commit d719b48 into main Aug 22, 2025
59 checks passed

paula-stacho deleted the COMPASS-9655 branch August 22, 2025 14:48

feat(data-modeling): add collection COMPASS-9655 #7195

feat(data-modeling): add collection COMPASS-9655 #7195

Uh oh!

Conversation

paula-stacho commented Aug 13, 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!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

Anemy commented Aug 17, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

addaleax Aug 18, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

gribnoysup Aug 19, 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!

gribnoysup Aug 19, 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!

Uh oh!

Uh oh!

Uh oh!

Anemy left a comment

Choose a reason for hiding this comment

Uh oh!

gribnoysup left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

gribnoysup Aug 22, 2025

Choose a reason for hiding this comment

Uh oh!

paula-stacho Aug 22, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

paula-stacho commented Aug 13, 2025 •

edited

Loading

gribnoysup commented Aug 15, 2025 •

edited

Loading

paula-stacho commented Aug 15, 2025 •

edited

Loading

gribnoysup commented Aug 15, 2025 •

edited

Loading

gribnoysup Aug 19, 2025 •

edited

Loading

gribnoysup Aug 19, 2025 •

edited

Loading