feat(data-modeling): allow inline field type changes COMPASS-9799 (#7514)

* dump lg select and fix tests

* integrate with local version

* bootstrap

* undo irrelevant changes

* pr feedback

Author: mabaasit

package-lock.json

@@ -85,7 +85,7 @@
     "@lg-chat/leafygreen-chat-provider": "^5.0.2",
     "@lg-chat/message": "^8.2.0",
     "@mongodb-js/compass-context-menu": "^0.3.1",
-    "@mongodb-js/diagramming": "^2.2.1",
+    "@mongodb-js/diagramming": "^2.2.2",
     "@react-aria/interactions": "^3.9.1",
     "@react-aria/utils": "^3.13.1",
     "@react-aria/visually-hidden": "^3.3.1",

packages/compass-components/package.json

@@ -23,6 +23,7 @@ import {
   deleteRelationship,
   removeField,
   renameField,
+  changeFieldType,
   toggleCollectionExpanded,
 } from '../store/diagram';
 import type {
@@ -60,6 +61,7 @@ import {
   relationshipToDiagramEdge,
 } from '../utils/nodes-and-edges';
 import toNS from 'mongodb-ns';
+import { FIELD_TYPES } from '../utils/field-types';
 import { getNamespaceRelationships } from '../utils/utils';
 import { usePreference } from 'compass-preferences-model/provider';
 
@@ -185,6 +187,12 @@ const DiagramContent: React.FunctionComponent<{
     newName: string;
     source: 'diagram';
   }) => void;
+  onChangeFieldType: (data: {
+    ns: string;
+    fieldPath: FieldPath;
+    newTypes: string[];
+    source: 'diagram';
+  }) => void;
   onDiagramBackgroundClicked: () => void;
   onDeleteCollection: (ns: string) => void;
   onDeleteRelationship: (rId: string) => void;
@@ -214,6 +222,7 @@ const DiagramContent: React.FunctionComponent<{
   onRelationshipSelect,
   onFieldSelect,
   onRenameField,
+  onChangeFieldType,
   onDiagramBackgroundClicked,
   onCreateNewRelationship,
   onRelationshipDrawn,
@@ -414,6 +423,18 @@ const DiagramContent: React.FunctionComponent<{
     [onAddFieldToObjectField]
   );
 
+  const onFieldTypeChange = useCallback(
+    (ns: string, fieldPath: FieldPath, newTypes: string[]) => {
+      onChangeFieldType({
+        ns,
+        fieldPath,
+        newTypes,
+        source: 'diagram',
+      });
+    },
+    [onChangeFieldType]
+  );
+
   const deleteItem = useCallback(() => {
     switch (selectedItems?.type) {
       case 'collection':
@@ -463,11 +484,13 @@ const DiagramContent: React.FunctionComponent<{
         onFieldClick,
         onFieldNameChange: (ns, field, newName) =>
           onRenameField({ ns, field, newName, source: 'diagram' }),
+        onFieldTypeChange,
         onNodeDragStop,
         onConnect,
         onNodeExpandToggle: isCollapseFlagEnabled
           ? handleNodeExpandedToggle
           : undefined,
+        fieldTypes: FIELD_TYPES,
       } satisfies DiagramProps),
     [
       isDarkMode,
@@ -481,6 +504,7 @@ const DiagramContent: React.FunctionComponent<{
       onEdgeClick,
       onFieldClick,
       onRenameField,
+      onFieldTypeChange,
       onNodeDragStop,
       onConnect,
       handleNodeExpandedToggle,
@@ -547,6 +571,7 @@ const ConnectedDiagramContent = connect(
     onRelationshipSelect: selectRelationship,
     onFieldSelect: selectField,
     onRenameField: renameField,
+    onChangeFieldType: changeFieldType,
     onDiagramBackgroundClicked: selectBackground,
     onCreateNewRelationship: createNewRelationship,
     onDeleteCollection: deleteCollection,