chore: move diagramming dependency to compass-components COMPASS-9902

packages/compass-components/package.json

@@ -78,6 +78,7 @@
     "@leafygreen-ui/tooltip": "^13.0.13",
     "@leafygreen-ui/typography": "^20.0.2",
     "@mongodb-js/compass-context-menu": "^0.2.5",
+    "@mongodb-js/diagramming": "^1.3.3",
     "@react-aria/interactions": "^3.9.1",
     "@react-aria/utils": "^3.13.1",
     "@react-aria/visually-hidden": "^3.3.1",

packages/compass-components/src/components/diagramming.tsx

@@ -0,0 +1,13 @@
+export {
+  Diagram,
+  DiagramProvider,
+  applyLayout,
+  getNodesBounds,
+  getViewportForBounds,
+  useDiagram,
+} from '@mongodb-js/diagramming';
+export type {
+  EdgeProps,
+  DiagramInstance,
+  NodeProps,
+} from '@mongodb-js/diagramming';

packages/compass-components/src/index.ts

@@ -1,3 +1,4 @@
+export * from './components/diagramming';
 export * from './components/leafygreen';
 
 export {

packages/compass-data-modeling/package.json

@@ -63,7 +63,6 @@
     "@mongodb-js/compass-user-data": "^0.9.0",
     "@mongodb-js/compass-utils": "^0.9.10",
     "@mongodb-js/compass-workspaces": "^0.51.0",
-    "@mongodb-js/diagramming": "^1.3.3",
     "bson": "^6.10.4",
     "compass-preferences-model": "^2.50.0",
     "html-to-image": "1.11.11",
@@ -78,6 +77,7 @@
     "redux-thunk": "^2.4.2"
   },
   "devDependencies": {
+    "@mongodb-js/diagramming": "^1.3.3",
     "@mongodb-js/eslint-config-compass": "^1.4.6",
     "@mongodb-js/mocha-config-compass": "^1.7.0",
     "@mongodb-js/prettier-config-compass": "^1.2.8",

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

@@ -4,7 +4,7 @@ import DiagramEditor from './diagram-editor';
 import SavedDiagramsList from './saved-diagrams-list';
 import NewDiagramFormModal from './new-diagram-form';
 import type { DataModelingState } from '../store/reducer';
-import { DiagramProvider } from '@mongodb-js/diagramming';
+import { DiagramProvider } from '@mongodb-js/compass-components';
 import DiagramEditorSidePanel from './drawer/diagram-editor-side-panel';
 
 type DataModelingProps = {

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

@@ -13,7 +13,7 @@ import type {
 } from '../services/data-model-storage';
 import diagramming from '@mongodb-js/diagramming';
 import sinon from 'sinon';
-import { DiagramProvider } from '@mongodb-js/diagramming';
+import { DiagramProvider } from '@mongodb-js/compass-components';
 import { DataModelingWorkspaceTab } from '..';
 import { openDiagram } from '../store/diagram';
 
@@ -156,13 +156,16 @@ describe('DiagramEditor', function () {
   let store: DataModelingStore;
 
   before(function () {
-    // We need to tub the Diagram import because it has problems with ESM/CJS interop
     sinon.stub(diagramming, 'Diagram').callsFake(mockDiagramming.Diagram);
     sinon
       .stub(diagramming, 'applyLayout')
       .callsFake(mockDiagramming.applyLayout as any);
   });
 
+  after(function () {
+    sinon.restore();
+  });
+
   context('with existing diagram', function () {
     beforeEach(async function () {
       const result = renderDiagramEditor({

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

@@ -19,21 +19,18 @@ import {
 import {
   Banner,
   CancelLoader,
+  Diagram,
   WorkspaceContainer,
   css,
   spacing,
   Button,
   useDarkMode,
+  useDiagram,
   useDrawerActions,
   rafraf,
 } from '@mongodb-js/compass-components';
 import { cancelAnalysis, retryAnalysis } from '../store/analysis-process';
-import {
-  Diagram,
-  type NodeProps,
-  type EdgeProps,
-  useDiagram,
-} from '@mongodb-js/diagramming';
+import type { NodeProps, EdgeProps } from '@mongodb-js/compass-components';
 import type { StaticModel } from '../services/data-model-storage';
 import DiagramEditorToolbar from './diagram-editor-toolbar';
 import ExportDiagramModal from './export-diagram-modal';

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import {
   Button,
-  css,
   Icon,
   Label,
   Modal,
@@ -13,7 +12,10 @@ import {
   spacing,
   SpinLoader,
   PngIcon,
+  css,
+  useDiagram,
 } from '@mongodb-js/compass-components';
+import type { DiagramInstance } from '@mongodb-js/compass-components';
 import type { ExportDiagramFormat } from '../store/export-diagram';
 import {
   closeExportModal,
@@ -22,8 +24,6 @@ import {
 } from '../store/export-diagram';
 import { connect } from 'react-redux';
 import type { DataModelingState } from '../store/reducer';
-import { useDiagram } from '@mongodb-js/diagramming';
-import type { DiagramInstance } from '@mongodb-js/diagramming';
 
 const modelBodyStyles = css({
   paddingTop: spacing[600],

packages/compass-data-modeling/src/services/export-diagram.tsx

@@ -1,15 +1,16 @@
 import React from 'react';
 import {
-  getNodesBounds,
-  getViewportForBounds,
   DiagramProvider,
   Diagram,
-} from '@mongodb-js/diagramming';
-import type { DiagramInstance } from '@mongodb-js/diagramming';
+  getNodesBounds,
+  getViewportForBounds,
+  rafraf,
+  spacing,
+} from '@mongodb-js/compass-components';
+import type { DiagramInstance } from '@mongodb-js/compass-components';
 import type { StaticModel } from './data-model-storage';
 import ReactDOM from 'react-dom';
 import { toPng } from 'html-to-image';
-import { rafraf, spacing } from '@mongodb-js/compass-components';
 import { raceWithAbort } from '@mongodb-js/compass-utils';
 
 function moveSvgDefsToViewportElement(

packages/compass-data-modeling/src/store/analysis-process.ts

@@ -6,7 +6,7 @@ import { getCurrentDiagramFromState } from './diagram';
 import type { Document } from 'bson';
 import type { AggregationCursor } from 'mongodb';
 import type { Relationship } from '../services/data-model-storage';
-import { applyLayout } from '@mongodb-js/diagramming';
+import { applyLayout } from '@mongodb-js/compass-components';
 import { collectionToDiagramNode } from '../utils/nodes-and-edges';
 
 export type AnalysisProcessState = {

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

@@ -5,7 +5,7 @@ import { exportToJson, exportToPng } from '../services/export-diagram';
 import { selectCurrentModelFromState } from './diagram';
 import { openToast } from '@mongodb-js/compass-components';
 import { isCancelError } from '@mongodb-js/compass-utils';
-import type { DiagramInstance } from '@mongodb-js/diagramming';
+import type { DiagramInstance } from '@mongodb-js/compass-components';
 import { downloadDiagram } from '../services/open-and-download-diagram';
 
 export type ExportDiagramFormat = 'png' | 'json' | 'diagram';

packages/compass-data-modeling/src/utils/nodes-and-edges.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import toNS from 'mongodb-ns';
 import { InlineDefinition, Body, css } from '@mongodb-js/compass-components';
-import type { NodeProps, EdgeProps } from '@mongodb-js/diagramming';
+import type { NodeProps, EdgeProps } from '@mongodb-js/compass-components';
 import type { MongoDBJSONSchema } from 'mongodb-schema';
 import type { SelectedItems } from '../store/diagram';
 import type {