chore(data-modeling): bump diagramming, pass new options, remove related code (#7387)

Author: Anemy

package-lock.json

@@ -119,6 +119,7 @@
     "@leafygreen-ui/marketing-modal": "^5.0.2",
     "@leafygreen-ui/typography": "^20.0.2",
     "@leafygreen-ui/icon": "^13.1.2",
+    "@leafygreen-ui/inline-definition": "^9.0.5",
     "@leafygreen-ui/popover": "^13.0.11",
     "@leafygreen-ui/badge": "^9.0.2",
     "@leafygreen-ui/banner": "^10.1.0",

package.json

@@ -63,7 +63,7 @@
     "@mongodb-js/compass-user-data": "^0.10.2",
     "@mongodb-js/compass-utils": "^0.9.17",
     "@mongodb-js/compass-workspaces": "^0.59.1",
-    "@mongodb-js/diagramming": "^1.5.1",
+    "@mongodb-js/diagramming": "^1.8.0",
     "bson": "^6.10.4",
     "compass-preferences-model": "^2.57.1",
     "html-to-image": "1.11.11",

packages/compass-data-modeling/package.json

@@ -205,14 +205,11 @@ const DiagramContent: React.FunctionComponent<{
           selectedItems?.type === 'field' && selectedItems.namespace === coll.ns
             ? selectedItems.fieldPath
             : undefined,
-        onClickAddNewFieldToCollection: () =>
-          onAddNewFieldToCollection(coll.ns),
         selected,
         isInRelationshipDrawingMode,
       });
     });
   }, [
-    onAddNewFieldToCollection,
     model?.collections,
     model?.relationships,
     selectedItems,
@@ -319,6 +316,14 @@ const DiagramContent: React.FunctionComponent<{
     [handleNodesConnect]
   );
 
+  const onClickAddFieldToCollection = useCallback(
+    (event: React.MouseEvent<Element>, ns: string) => {
+      event.stopPropagation();
+      onAddNewFieldToCollection(ns);
+    },
+    [onAddNewFieldToCollection]
+  );
+
   return (
     <div
       ref={setDiagramContainerRef}
@@ -355,6 +360,7 @@ const DiagramContent: React.FunctionComponent<{
           fitViewOptions={ZOOM_OPTIONS}
           onNodeDragStop={onNodeDragStop}
           onConnect={onConnect}
+          onAddFieldToNodeClick={onClickAddFieldToCollection}
         />
       </div>
     </div>

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

@@ -1,28 +1,7 @@
-import React from 'react';
 import { expect } from 'chai';
-import {
-  screen,
-  waitFor,
-  render,
-  userEvent,
-} from '@mongodb-js/testing-library-compass';
 import { getFieldsFromSchema } from './nodes-and-edges';
 
 describe('getFieldsFromSchema', function () {
-  const validateMixedType = async (
-    type: React.ReactNode,
-    expectedTooltip: RegExp
-  ) => {
-    render(<>{type}</>);
-    const mixed = screen.getByText('(mixed)');
-    expect(mixed).to.be.visible;
-    expect(screen.queryByText(expectedTooltip)).to.not.exist;
-    userEvent.hover(mixed);
-    await waitFor(() => {
-      expect(screen.getByText(expectedTooltip)).to.be.visible;
-    });
-  };
-
   describe('flat schema', function () {
     it('return empty array for empty schema', function () {
       const result = getFieldsFromSchema({ jsonSchema: {} });
@@ -63,7 +42,7 @@ describe('getFieldsFromSchema', function () {
       ]);
     });
 
-    it('returns mixed fields with tooltip on hover', async function () {
+    it('returns mixed fields', function () {
       const result = getFieldsFromSchema({
         jsonSchema: {
           bsonType: 'object',
@@ -72,16 +51,16 @@ describe('getFieldsFromSchema', function () {
           },
         },
       });
-      expect(result[0]).to.deep.include({
+      expect(result[0]).to.deep.equal({
         name: 'age',
         id: ['age'],
         depth: 0,
         glyphs: [],
         selectable: true,
         selected: false,
+        type: ['int', 'string'],
         variant: undefined,
       });
-      await validateMixedType(result[0].type, /int, string/);
     });
 
     it('highlights the correct field', function () {
@@ -445,32 +424,6 @@ describe('getFieldsFromSchema', function () {
       ]);
     });
 
-    it('returns [] for array', function () {
-      const result = getFieldsFromSchema({
-        jsonSchema: {
-          bsonType: 'object',
-          properties: {
-            tags: {
-              bsonType: 'array',
-              items: { bsonType: 'string' },
-            },
-          },
-        },
-      });
-      expect(result).to.deep.equal([
-        {
-          name: 'tags',
-          id: ['tags'],
-          type: '[]',
-          depth: 0,
-          glyphs: [],
-          selectable: true,
-          selected: false,
-          variant: undefined,
-        },
-      ]);
-    });
-
     it('returns fields for an array of objects', function () {
       const result = getFieldsFromSchema({
         jsonSchema: {
@@ -493,7 +446,7 @@ describe('getFieldsFromSchema', function () {
         {
           name: 'todos',
           id: ['todos'],
-          type: '[]',
+          type: 'array',
           depth: 0,
           glyphs: [],
           selectable: true,
@@ -523,7 +476,7 @@ describe('getFieldsFromSchema', function () {
       ]);
     });
 
-    it('returns fields for a mixed schema with objects', async function () {
+    it('returns fields for a mixed schema with objects', function () {
       const result = getFieldsFromSchema({
         jsonSchema: {
           bsonType: 'object',
@@ -544,16 +497,16 @@ describe('getFieldsFromSchema', function () {
         },
       });
       expect(result).to.have.lengthOf(3);
-      expect(result[0]).to.deep.include({
+      expect(result[0]).to.deep.equal({
         name: 'name',
         id: ['name'],
         depth: 0,
+        type: ['string', 'object'],
         glyphs: [],
         selectable: true,
         selected: false,
         variant: undefined,
       });
-      await validateMixedType(result[0].type, /string, object/);
       expect(result[1]).to.deep.equal({
         name: 'first',
         id: ['name', 'first'],
@@ -603,7 +556,7 @@ describe('getFieldsFromSchema', function () {
         {
           name: 'todos',
           id: ['todos'],
-          type: '[]',
+          type: 'array',
           depth: 0,
           glyphs: [],
           selectable: true,