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

packages/compass-components/package.json

@@ -69,7 +69,7 @@
     "@leafygreen-ui/radio-group": "^12.0.2",
     "@leafygreen-ui/search-input": "^5.0.2",
     "@leafygreen-ui/segmented-control": "^10.0.2",
-    "@leafygreen-ui/select": "^14.0.2",
+    "@leafygreen-ui/select": "^16.2.0",
     "@leafygreen-ui/skeleton-loader": "^2.0.11",
     "@leafygreen-ui/split-button": "^4.1.5",
     "@leafygreen-ui/table": "^13.0.1",
@@ -98,7 +98,7 @@
     "@lg-chat/suggestions": "^0.2.3",
     "@lg-chat/title-bar": "^4.0.7",
     "@mongodb-js/compass-context-menu": "^0.3.0",
-    "@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-crud/src/components/table-view/types-dropdown.tsx

@@ -32,7 +32,6 @@ const TypesDropdown: React.FunctionComponent<TypesDropdownProps> = ({
       onChange={handleTypeChange}
       allowDeselect={false}
       value={element.currentType}
-      readOnly={false}
       // NOTE: Leafygreen doesn't support aria-label and only understand "aria-labelledby" and "label" instead
       aria-labelledby=""
       aria-label="Field type"

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

@@ -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';
 
@@ -172,6 +174,11 @@ const DiagramContent: React.FunctionComponent<{
     fieldPath: FieldPath,
     newName: string
   ) => void;
+  onChangeFieldType: (data: {
+    ns: string;
+    fieldPath: FieldPath;
+    newTypes: string[];
+  }) => void;
   onDiagramBackgroundClicked: () => void;
   onDeleteCollection: (ns: string) => void;
   onDeleteRelationship: (rId: string) => void;
@@ -201,6 +208,7 @@ const DiagramContent: React.FunctionComponent<{
   onRelationshipSelect,
   onFieldSelect,
   onRenameField,
+  onChangeFieldType,
   onDiagramBackgroundClicked,
   onCreateNewRelationship,
   onRelationshipDrawn,
@@ -401,6 +409,17 @@ const DiagramContent: React.FunctionComponent<{
     [onAddFieldToObjectField]
   );
 
+  const onFieldTypeChange = useCallback(
+    (ns: string, fieldPath: FieldPath, newTypes: string[]) => {
+      onChangeFieldType({
+        ns,
+        fieldPath,
+        newTypes,
+      });
+    },
+    [onChangeFieldType]
+  );
+
   const deleteItem = useCallback(() => {
     switch (selectedItems?.type) {
       case 'collection':
@@ -449,8 +468,10 @@ const DiagramContent: React.FunctionComponent<{
         onEdgeClick,
         onFieldClick,
         onFieldNameChange: onRenameField,
+        onFieldTypeChange,
         onNodeDragStop,
         onConnect,
+        fieldTypes: FIELD_TYPES,
         onNodeExpandToggle: isCollapseFlagEnabled
           ? handleNodeExpandedToggle
           : undefined,
@@ -467,6 +488,7 @@ const DiagramContent: React.FunctionComponent<{
       onEdgeClick,
       onFieldClick,
       onRenameField,
+      onFieldTypeChange,
       onNodeDragStop,
       onConnect,
       handleNodeExpandedToggle,
@@ -533,6 +555,7 @@ const ConnectedDiagramContent = connect(
     onRelationshipSelect: selectRelationship,
     onFieldSelect: selectField,
     onRenameField: renameField,
+    onChangeFieldType: changeFieldType,
     onDiagramBackgroundClicked: selectBackground,
     onCreateNewRelationship: createNewRelationship,
     onDeleteCollection: deleteCollection,

packages/compass-data-modeling/src/components/drawer/field-drawer-content.tsx

@@ -9,7 +9,6 @@ import {
   ComboboxOption,
   TextInput,
 } from '@mongodb-js/compass-components';
-import { BSONType } from 'mongodb';
 import {
   changeFieldType,
   createNewRelationship,
@@ -33,6 +32,7 @@ import {
   isIdField,
   isRelationshipOfAField,
 } from '../../utils/utils';
+import { FIELD_TYPES } from '../../utils/field-types';
 
 type FieldDrawerContentProps = {
   namespace: string;
@@ -57,18 +57,14 @@ type FieldDrawerContentProps = {
   onChangeFieldType: ({
     ns,
     fieldPath,
-    oldTypes,
     newTypes,
   }: {
     ns: string;
     fieldPath: FieldPath;
-    oldTypes: string[];
     newTypes: string[];
   }) => void;
 };
 
-const BSON_TYPES = Object.keys(BSONType);
-
 export function getIsFieldNameValid(
   currentFieldPath: FieldPath,
   existingFields: FieldPath[],
@@ -158,7 +154,6 @@ const FieldDrawerContent: React.FunctionComponent<FieldDrawerContentProps> = ({
     onChangeFieldType({
       ns: namespace,
       fieldPath,
-      oldTypes: fieldTypes,
       newTypes,
     });
   };
@@ -195,7 +190,7 @@ const FieldDrawerContent: React.FunctionComponent<FieldDrawerContentProps> = ({
             state={fieldTypeEditErrorMessage ? 'error' : undefined}
             errorMessage={fieldTypeEditErrorMessage}
           >
-            {BSON_TYPES.map((type) => (
+            {FIELD_TYPES.map((type) => (
               <ComboboxOption key={type} value={type} />
             ))}
           </Combobox>

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

@@ -830,12 +830,10 @@ export function getTypeNameForTelemetry(
 export function changeFieldType({
   ns,
   fieldPath,
-  oldTypes,
   newTypes,
 }: {
   ns: string;
   fieldPath: FieldPath;
-  oldTypes: string[];
   newTypes: string[];
 }): DataModelingThunkAction<void, ApplyEditAction | RevertFailedEditAction> {
   return (dispatch, getState, { track }) => {
@@ -847,6 +845,7 @@ export function changeFieldType({
       jsonSchema: collectionSchema,
       fieldPath: fieldPath,
     });
+    const oldTypes = field?.fieldTypes;
     if (!field) throw new Error('Field not found in schema');
     const to = getSchemaWithNewTypes(field.jsonSchema, newTypes);
 

packages/compass-data-modeling/src/utils/field-types.ts

@@ -0,0 +1,3 @@
+import { BSONType } from 'mongodb';
+
+export const FIELD_TYPES = Object.keys(BSONType);