fix: clarify import functionality COMPASS-9833

[paula-stacho]

Description

As per figma designs: https://www.figma.com/design/nz84lFaVMLqq9ih4ZJtuP6/Data-modeling-viz-tool?node-id=4184-55423&m=dev

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
• If this change could impact the load on the MongoDB cluster, please describe the expected and worst case impact
• 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 updates the naming of the diagram export format from "Diagram File" to "MDM File" to align with Figma designs. The change improves clarity by using the more specific MDM (MongoDB Data Model) file type designation throughout the UI and test selectors.

• Updated export modal UI labels and aria-labels from "Diagram File" to "MDM File"
• Updated E2E test selector to match the new aria-label
• Added tooltip to import button clarifying that only MDM files from Compass or Atlas Data Explorer can be imported

Reviewed changes

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

File	Description
packages/compass-e2e-tests/helpers/selectors.ts	Updated test selector to match new "MDM File" aria-label
packages/compass-data-modeling/src/components/import-diagram-button.tsx	Added tooltip explaining MDM file import restrictions
packages/compass-data-modeling/src/components/export-diagram-modal.tsx	Changed "Diagram File" labels to "MDM File" in export modal

[Copilot]

The wrapping <span> prevents proper keyboard navigation and focus management for the button inside. Consider using the disabled prop pattern or removing the span wrapper to maintain accessibility.

[paula-stacho]

The span is important, we have two triggers on that btn and it gets messed up otherwise. I checked the keyboard navigation and it works fine

[Anemy]

Would a div element with inline styles work? span is usually for text content.

[paula-stacho]

It would work the same, sure, but is it for text content? According to mdn,

<span> is very much like a <div> element, but <div> is a block-level element whereas a <span> is an inline-level element.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/span