feat(data-modeling): field sidebar COMPASS-9659

[paula-stacho]

Description

This is getting big, so let's do it in steps:

1. Read only field drawer <--- WE ARE HERE
2. Field rename, change type and delete
3. E2E tests
4. Move the schema methods

This part includes:

• Field drawer with name + type as readonly inputs
• Relationship section (reused from the collection relationship section)
• 2 methods for schema traversal
  • traverseSchema with a visitor is extracted from the existing code
  • getFieldFromSchema follows a given path to get a field

We will need at least one similar method for making updates. I plan to move the methods to @mongodb-js/mongodb-schema, but to speed things up and have easier time testing, I want to finish the functionality first and only move them once it's all settled.

TODO:

• add unit tests
• add tickets to todos
• find out where to get a list of bson types
• find out why the type combobox height is glitching
• resolve all the conflicts

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)

[paula-stacho]

taken from the collection-drawer content

[Copilot]

Pull Request Overview

This PR implements a read-only field drawer component as part of a larger field sidebar feature. The implementation enables users to select fields in the data modeling diagram and view their properties and relationships in a side panel.

• Adds schema traversal utilities for navigating MongoDB JSON schemas
• Implements field selection functionality and drawer UI
• Refactors relationship sections for reuse between collections and fields

Reviewed Changes

Copilot reviewed 14 out of 15 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
data-model-with-relationships.json	Updates test fixture schema structure for testing
schema-traversal.tsx	Adds utilities for traversing schemas and finding specific fields
schema-traversal.spec.tsx	Comprehensive tests for schema traversal functionality
nodes-and-edges.tsx	Refactors field extraction to use new traversal utilities
nodes-and-edges.spec.tsx	Updates tests to match new field data structure
diagram.ts	Adds field selection state management and actions
data-model-storage.ts	Defines field path types and edit operation schemas
relationships-section.tsx	Extracts reusable relationship section component
field-drawer-content.tsx	Implements field drawer with properties and relationships
diagram-editor-side-panel.tsx	Integrates field drawer into main side panel
diagram-editor-side-panel.spec.tsx	Tests for field drawer functionality
collection-drawer-content.tsx	Refactors to use shared relationship section
diagram-editor.tsx	Adds field click handling in diagram
package.json	Updates diagramming package dependency

---

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

[gribnoysup]

Not sure if it's a leafygreen issue or something, but this combobox jumps weirdly when I re-select the field

[paula-stacho]

I have this as a todo (on the PR, hoping to resolve it with this one), so far I have no idea why it's jumping like that

[gribnoysup]

Some non-blocking nits, but otherwise looks good to me.

[gribnoysup]

Nit: seems a bit redundant to check for anyOf here as your traversal function will handle it anyway when you're going through the children (you're also not doing this in other cases where it can happen, so for consistency feels better better not to do it here either)

Suggested change

	children.push((field.items as MongoDBJSONSchema).anyOf || field.items);
	children.push(field.items);

[paula-stacho]

What other cases do you have in mind?
In this case we go two levels in (field.items.anyOf), because that's where the children are (example { friends: ['peter', { name: 'John', alias: 'Johny' } ] } --> name and alias are the children of friends). Same happens in the other case where the children are variant.items which translates to field.anyOf[].items. It looks like it's skipping a step but the path only increases by one step.
I'm not sure if I'm explaining it well. You can also check out the an array of mixed items (including objects) test.

[gribnoysup]

Ah, I actually missed that in your code and made a comment assuming it will cover anyOf as part of traversal, but it only covers it for fields of children. You're kinda artificially "skipping" a level here looking into the next row of items, this is not bad, but just sliiightly unconventional for recursive functions to work that way, you'd usually want them to go through the levels in a more uniformed manner applying the same rules to all calls, although again, not the worst thing for our specific scenario. In particular here it causes a bug where traversal doesn't happen if your top level jsonSchema is just anyOf (and this is a valid schema based on types).

I would suggest to move anyOf handling at the very top of your traverse, then you are "unwrapping" it before all the other code and you don't need to deal with it separately for fields and items, but also feel free to consider this a corner case, maybe let's just document that this functino doesn't work for this case

[paula-stacho]

yeah I realised I'm making an implicit assumption that the first call is on a collection schema. In the update function I'm avoiding this assumption, perhaps I can refactor these two before moving them to the lib.

[paula-stacho]

Note: The combobox jumps are a problem with the LG component, created https://jira.mongodb.org/browse/LG-5469