chore(data-modeling, components): move diagramming package to compass-component to dedupe leafygreen deps (#7449)

* chore(data-modeling, components): move diagramming package to compass-component to dedupe leafygreen deps

* chore(components): named exports instead of one namespace export

* chore(components): remove namespace export

Author: gribnoysup

package-lock.json

@@ -98,6 +98,7 @@
     "@lg-chat/suggestions": "^0.2.3",
     "@lg-chat/title-bar": "^4.0.7",
     "@mongodb-js/compass-context-menu": "^0.2.13",
+    "@mongodb-js/diagramming": "^1.8.0",
     "@react-aria/interactions": "^3.9.1",
     "@react-aria/utils": "^3.13.1",
     "@react-aria/visually-hidden": "^3.3.1",

packages/compass-components/package.json

@@ -229,3 +229,19 @@ export { ParagraphSkeleton } from '@leafygreen-ui/skeleton-loader';
 export { InsightsChip } from './components/insights-chip';
 export * from './components/drawer-portal';
 export { FileSelector } from './components/file-selector';
+export {
+  DiagramProvider,
+  Diagram,
+  useDiagram,
+  getNodesBounds,
+  getViewportForBounds,
+  applyLayout,
+  getCoordinatesForNewNode,
+} from '@mongodb-js/diagramming';
+export type {
+  EdgeProps,
+  NodeProps,
+  DiagramInstance,
+  NodeField,
+  NodeGlyph,
+} from '@mongodb-js/diagramming';

packages/compass-components/src/index.ts

@@ -63,7 +63,6 @@
     "@mongodb-js/compass-user-data": "^0.10.4",
     "@mongodb-js/compass-utils": "^0.9.19",
     "@mongodb-js/compass-workspaces": "^0.61.0",
-    "@mongodb-js/diagramming": "^1.8.0",
     "bson": "^6.10.4",
     "compass-preferences-model": "^2.59.0",
     "html-to-image": "1.11.11",

packages/compass-data-modeling/package.json

@@ -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/data-modeling.tsx

@@ -14,12 +14,9 @@ import type {
   Edit,
   MongoDBDataModelDescription,
 } from '../services/data-model-storage';
-import diagramming from '@mongodb-js/diagramming';
-import sinon from 'sinon';
-import { DiagramProvider } from '@mongodb-js/diagramming';
 import { DataModelingWorkspaceTab } from '..';
 import { openDiagram } from '../store/diagram';
-import { DrawerAnchor } from '@mongodb-js/compass-components';
+import { DrawerAnchor, DiagramProvider } from '@mongodb-js/compass-components';
 import { type AnalysisOptions, startAnalysis } from '../store/analysis-process';
 import type { DataService } from '@mongodb-js/compass-connections/provider';
 
@@ -167,7 +164,11 @@ const renderDiagramEditor = async ({
   } = await renderWithActiveConnection(
     <DrawerAnchor>
       <DiagramProvider fitView>
-        <DiagramEditor />
+        <DiagramEditor
+          // We need to stub the Diagram component because the imported one is
+          // not bundled for CJS correctly and will throw on render
+          DiagramComponent={mockDiagramming.Diagram}
+        />
       </DiagramProvider>
     </DrawerAnchor>,
     mockConnections[0],
@@ -206,14 +207,6 @@ const renderDiagramEditor = async ({
 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);
-  });
-
   context('with existing diagram', function () {
     beforeEach(async function () {
       const result = await renderDiagramEditor({

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

@@ -20,6 +20,7 @@ import {
   addCollection,
   selectField,
 } from '../store/diagram';
+import type { EdgeProps, NodeProps } from '@mongodb-js/compass-components';
 import {
   Banner,
   CancelLoader,
@@ -32,14 +33,10 @@ import {
   useDrawerState,
   useThrottledProps,
   rafraf,
-} from '@mongodb-js/compass-components';
-import { cancelAnalysis, retryAnalysis } from '../store/analysis-process';
-import {
   Diagram,
-  type NodeProps,
-  type EdgeProps,
   useDiagram,
-} from '@mongodb-js/diagramming';
+} from '@mongodb-js/compass-components';
+import { cancelAnalysis, retryAnalysis } from '../store/analysis-process';
 import type { FieldPath, StaticModel } from '../services/data-model-storage';
 import DiagramEditorToolbar from './diagram-editor-toolbar';
 import ExportDiagramModal from './export-diagram-modal';
@@ -149,6 +146,7 @@ const DiagramContent: React.FunctionComponent<{
     foreignNamespace: string;
   }) => void;
   onRelationshipDrawn: () => void;
+  DiagramComponent?: typeof Diagram;
 }> = ({
   diagramLabel,
   database,
@@ -166,6 +164,7 @@ const DiagramContent: React.FunctionComponent<{
   onCreateNewRelationship,
   onRelationshipDrawn,
   selectedItems,
+  DiagramComponent = Diagram,
 }) => {
   const isDarkMode = useDarkMode();
   const diagram = useRef(useDiagram());
@@ -389,7 +388,7 @@ const DiagramContent: React.FunctionComponent<{
             impact your data
           </Banner>
         )}
-        <Diagram
+        <DiagramComponent
           {...throttledDiagramProps}
           // With threshold too low clicking sometimes gets confused with
           // dragging.
@@ -434,12 +433,14 @@ const DiagramEditor: React.FunctionComponent<{
   onRetryClick: () => void;
   onCancelClick: () => void;
   onAddCollectionClick: () => void;
+  DiagramComponent?: typeof Diagram;
 }> = ({
   step,
   diagramId,
   onRetryClick,
   onCancelClick,
   onAddCollectionClick,
+  DiagramComponent = Diagram,
 }) => {
   const { openDrawer } = useDrawerActions();
   let content;
@@ -499,6 +500,7 @@ const DiagramEditor: React.FunctionComponent<{
         key={diagramId}
         isInRelationshipDrawingMode={isInRelationshipDrawingMode}
         onRelationshipDrawn={onRelationshipDrawn}
+        DiagramComponent={DiagramComponent}
       ></ConnectedDiagramContent>
     );
   }

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { DiagramInstance } from '@mongodb-js/compass-components';
 import {
   Button,
   css,
@@ -13,6 +14,7 @@ import {
   spacing,
   SpinLoader,
   PngIcon,
+  useDiagram,
 } from '@mongodb-js/compass-components';
 import type { ExportDiagramFormat } from '../store/export-diagram';
 import {
@@ -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/components/export-diagram-modal.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';
 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 type { DiagramInstance } from '@mongodb-js/compass-components';
+import {
+  rafraf,
+  spacing,
+  Diagram,
+  DiagramProvider,
+  getNodesBounds,
+  getViewportForBounds,
+} from '@mongodb-js/compass-components';
 import { raceWithAbort } from '@mongodb-js/compass-utils';
 
 function moveSvgDefsToViewportElement(

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

@@ -5,7 +5,7 @@ import { analyzeDocuments, type MongoDBJSONSchema } from 'mongodb-schema';
 import { getCurrentDiagramFromState } from './diagram';
 import { UUID } from 'bson';
 import type { Relationship } from '../services/data-model-storage';
-import { applyLayout } from '@mongodb-js/diagramming';
+import { applyLayout } from '@mongodb-js/compass-components';
 import { collectionToBaseNodeForLayout } from '../utils/nodes-and-edges';
 import { inferForeignToLocalRelationshipsForCollection } from './relationships';
 import { mongoLogId } from '@mongodb-js/compass-logging/provider';