feat(data-modeling): add add field button to object in diagram COMPASS-9742

[Anemy]

COMPASS-9742

Adds some field editing e2e testing as well. Left two comments/questions for reviewers.

add.field.to.object.mp4

[Anemy]

Should we add a use-icon-button-hover-ring hook in compass-components?

[Anemy]

I don't love two functions that do pretty much the same thing, but it seemed better than doing something like:

export const getFieldsFromSchema = ({
  jsonSchema,
  renderOptions,
}: {
  jsonSchema: MongoDBJSONSchema;
  renderOptions?: {
    highlightedFields: FieldPath[];
    selectedField?: FieldPath;
    onClickAddNestedField: (parentFieldPath: string[]) => void;
  };
}): NodeProps['fields'] => {

[Copilot]

Pull Request Overview

This PR adds functionality to allow users to add fields to object types directly from the diagram view in the data modeling feature. The implementation includes both the UI components to display "add field" buttons on object fields and the corresponding E2E tests to validate the new functionality.

Key changes:

• Added "add field" button to object field types in the diagram
• Created new E2E test helper functions for diagram interaction
• Extended field editing functionality to support nested field creation

Reviewed Changes

Copilot reviewed 14 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	Added comprehensive E2E test for field editing and new drag helper function
packages/compass-e2e-tests/helpers/selectors.ts	Added selectors for new add field buttons and field type combobox
packages/compass-e2e-tests/helpers/commands/set-multi-combo-box-value.ts	New helper command for setting multiple combobox values
packages/compass-data-modeling/src/utils/schema.ts	Enhanced field name generation to support nested object paths
packages/compass-data-modeling/src/utils/nodes-and-edges.tsx	Added object field type component and nested field functionality
packages/compass-data-modeling/src/components/diagram/object-field-type.tsx	New component rendering object type with add field button
packages/compass-data-modeling/src/store/diagram.ts	Added action handler for creating nested fields
packages/compass-data-modeling/src/components/diagram-editor.tsx	Connected nested field creation to the diagram editor

---

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