fix: clarify import functionality COMPASS-9833 (#7649)

Author: paula-stacho

packages/compass-data-modeling/src/components/export-diagram-modal.tsx

@@ -83,12 +83,12 @@ const ExportDiagramModal = ({
               <Radio
                 checked={exportFormat === 'diagram'}
                 value="diagram"
-                aria-label="Diagram File"
+                aria-label="MDM File"
                 onClick={() => onSelectFormat('diagram')}
                 size="small"
                 description="Importable into Compass and Data Explorer so teammates can collaborate."
               >
-                Diagram File
+                MDM File
               </Radio>
             </div>
             <div className={radioItemStyles}>

packages/compass-data-modeling/src/components/import-diagram-button.tsx

@@ -3,6 +3,7 @@ import {
   Button,
   type ButtonProps,
   FileSelector,
+  Tooltip,
 } from '@mongodb-js/compass-components';
 
 type ImportDiagramButtonProps = Omit<ButtonProps, 'onClick'> & {
@@ -14,22 +15,31 @@ export const ImportDiagramButton = ({
   ...buttonProps
 }: ImportDiagramButtonProps) => {
   return (
-    <FileSelector
-      id="import-diagram-file-input"
-      data-testid="import-diagram-file-input"
-      multiple={false}
-      accept=".mdm"
-      onSelect={(files) => {
-        if (files.length === 0) {
-          return;
-        }
-        onImportDiagram(files[0]);
-      }}
-      trigger={({ onClick }) => (
-        <Button {...buttonProps} onClick={onClick}>
-          Import diagram
-        </Button>
-      )}
-    />
+    <Tooltip
+      trigger={
+        <span>
+          <FileSelector
+            id="import-diagram-file-input"
+            data-testid="import-diagram-file-input"
+            multiple={false}
+            accept=".mdm"
+            onSelect={(files) => {
+              if (files.length === 0) {
+                return;
+              }
+              onImportDiagram(files[0]);
+            }}
+            trigger={({ onClick }) => (
+              <Button {...buttonProps} onClick={onClick}>
+                Import diagram
+              </Button>
+            )}
+          />
+        </span>
+      }
+    >
+      Only MDM files exported from Compass or Atlas Data Explorer can be
+      imported.
+    </Tooltip>
   );
 };

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

@@ -1460,7 +1460,7 @@ export const DataModelExportButton = 'button[aria-label="Export"]';
 export const DataModelExportModal = '[data-testid="export-diagram-modal"]';
 export const DataModelExportPngOption = `${DataModelExportModal} input[aria-label="PNG"]`;
 export const DataModelExportJsonOption = `${DataModelExportModal} input[aria-label="JSON"]`;
-export const DataModelExportDiagramOption = `${DataModelExportModal} input[aria-label="Diagram File"]`;
+export const DataModelExportDiagramOption = `${DataModelExportModal} input[aria-label="MDM File"]`;
 export const DataModelExportModalConfirmButton =
   '[data-testid="export-button"]';
 export const DataModelsListItem = (diagramName?: string) => {