feat(compass-data-modeling): update field type COMPASS-9659

paula-stacho · paula-stacho · commit 0d367edcb95d · 2025-08-28T17:53:28.000+02:00
diff --git a/packages/compass-data-modeling/src/components/drawer/field-drawer-content.tsx b/packages/compass-data-modeling/src/components/drawer/field-drawer-content.tsx
@@ -11,6 +11,7 @@ import {
 } from '@mongodb-js/compass-components';
 import { BSONType } from 'mongodb';
 import {
+  changeFieldType,
   createNewRelationship,
   deleteRelationship,
   getCurrentDiagramFromState,
@@ -56,8 +57,7 @@ type FieldDrawerContentProps = {
   onChangeFieldType: (
     namespace: string,
     fieldPath: FieldPath,
-    fromBsonType: string | string[],
-    toBsonType: string | string[]
+    newTypes: string[]
   ) => void;
 };
 
@@ -137,17 +137,19 @@ const FieldDrawerContent: React.FunctionComponent<FieldDrawerContentProps> = ({
       [fieldPath, fieldPaths, fieldName]
     );
 
-  const handleTypeChange = (newTypes: string | string[]) => {
-    onChangeFieldType(namespace, fieldPath, types, newTypes);
+  const handleTypeChange = (newTypes: string[]) => {
+    onChangeFieldType(namespace, fieldPath, newTypes);
   };
 
+  const isReadOnly = useMemo(() => isIdField(fieldPath), [fieldPath]);
+
   return (
     <>
       <DMDrawerSection label="Field properties">
         <DMFormFieldContainer>
           <TextInput
             label="Field name"
-            disabled={isIdField(fieldPath)}
+            disabled={isReadOnly}
             data-testid="data-model-collection-drawer-name-input"
             sizeVariant="small"
             value={fieldName}
@@ -162,7 +164,7 @@ const FieldDrawerContent: React.FunctionComponent<FieldDrawerContentProps> = ({
             data-testid="lg-combobox-datatype"
             label="Datatype"
             aria-label="Datatype"
-            disabled={true} // TODO(COMPASS-9659): enable when field type change is implemented
+            disabled={isReadOnly}
             value={types}
             size="small"
             multiselect={true}
@@ -228,6 +230,6 @@ export default connect(
     onEditRelationshipClick: selectRelationship,
     onDeleteRelationshipClick: deleteRelationship,
     onRenameField: renameField,
-    onChangeFieldType: () => {}, // TODO(COMPASS-9659): updateFieldSchema,
+    onChangeFieldType: changeFieldType,
   }
 )(FieldDrawerContent);
diff --git a/packages/compass-data-modeling/src/store/apply-edit.ts b/packages/compass-data-modeling/src/store/apply-edit.ts
@@ -167,7 +167,7 @@ export function applyEdit(edit: Edit, model?: StaticModel): StaticModel {
             jsonSchema: updateSchema({
               jsonSchema: collection.jsonSchema,
               fieldPath: edit.field,
-              update: 'removeField',
+              updateParameters: { update: 'removeField' },
             }),
           };
         }),
@@ -198,8 +198,29 @@ export function applyEdit(edit: Edit, model?: StaticModel): StaticModel {
             jsonSchema: updateSchema({
               jsonSchema: collection.jsonSchema,
               fieldPath: edit.field,
-              update: 'renameField',
-              newFieldName: edit.newName,
+              updateParameters: {
+                update: 'renameField',
+                newFieldName: edit.newName,
+              },
+            }),
+          };
+        }),
+      };
+    }
+    case 'ChangeFieldType': {
+      return {
+        ...model,
+        collections: model.collections.map((collection) => {
+          if (collection.ns !== edit.ns) return collection;
+          return {
+            ...collection,
+            jsonSchema: updateSchema({
+              jsonSchema: collection.jsonSchema,
+              fieldPath: edit.field,
+              updateParameters: {
+                update: 'changeFieldSchema',
+                newFieldSchema: edit.to,
+              },
             }),
           };
         }),
diff --git a/packages/compass-data-modeling/src/store/diagram.ts b/packages/compass-data-modeling/src/store/diagram.ts
@@ -29,7 +29,11 @@ import type { MongoDBJSONSchema } from 'mongodb-schema';
 import { getCoordinatesForNewNode } from '@mongodb-js/diagramming';
 import { collectionToDiagramNode } from '../utils/nodes-and-edges';
 import toNS from 'mongodb-ns';
-import { traverseSchema } from '../utils/schema-traversal';
+import {
+  getFieldFromSchema,
+  getSchemaForNewTypes,
+  traverseSchema,
+} from '../utils/schema-traversal';
 import { applyEdit as _applyEdit } from './apply-edit';
 
 function isNonEmptyArray<T>(arr: T[]): arr is [T, ...T[]] {
@@ -684,6 +688,34 @@ export function renameField(
   return applyEdit({ type: 'RenameField', ns, field, newName });
 }
 
+export function changeFieldType(
+  ns: string,
+  fieldPath: FieldPath,
+  newTypes: string[]
+): DataModelingThunkAction<void, ApplyEditAction | ApplyEditFailedAction> {
+  return (dispatch, getState) => {
+    const collectionSchema = selectCurrentModelFromState(
+      getState()
+    ).collections.find((collection) => collection.ns === ns)?.jsonSchema;
+    if (!collectionSchema) throw new Error('Collection not found in model');
+    const field = getFieldFromSchema({
+      jsonSchema: collectionSchema,
+      fieldPath: fieldPath,
+    });
+    if (!field) throw new Error('Field not found in schema');
+    const to = getSchemaForNewTypes(field, newTypes);
+    dispatch(
+      applyEdit({
+        type: 'ChangeFieldType',
+        ns,
+        field: fieldPath,
+        from: field.jsonSchema,
+        to,
+      })
+    );
+  };
+}
+
 function getPositionForNewCollection(
   existingCollections: DataModelCollection[],
   newCollection: Omit<DataModelCollection, 'displayPosition'>
diff --git a/packages/compass-data-modeling/src/utils/schema-traversal.tsx b/packages/compass-data-modeling/src/utils/schema-traversal.tsx
@@ -1,4 +1,4 @@
-import type { MongoDBJSONSchema } from 'mongodb-schema';
+import type { JSONSchema, MongoDBJSONSchema } from 'mongodb-schema';
 import type { FieldPath } from '../services/data-model-storage';
 
 /**
@@ -167,14 +167,16 @@ export const getFieldFromSchema = ({
 };
 
 type UpdateOperationParameters = {
-  update: 'removeField' | 'renameField';
+  update: 'removeField' | 'renameField' | 'changeFieldSchema';
   newFieldName?: string;
+  newFieldSchema?: MongoDBJSONSchema;
 };
 
 const applySchemaUpdate = ({
   schema,
   fieldName,
   newFieldName,
+  newFieldSchema,
   update,
 }: {
   schema: MongoDBJSONSchema;
@@ -205,6 +207,22 @@ const applySchemaUpdate = ({
         ),
       };
     }
+    case 'changeFieldSchema': {
+      if (!schema.properties || !schema.properties[fieldName])
+        throw new Error('Field to change type does not exist');
+      if (!newFieldSchema)
+        throw new Error(
+          'New field schema is required for the change operation'
+        );
+      return {
+        ...schema,
+        properties: Object.fromEntries(
+          Object.entries(schema.properties).map(([key, value]) =>
+            key === fieldName ? [key, newFieldSchema] : [key, value]
+          )
+        ),
+      };
+    }
     default:
       return schema;
   }
@@ -216,12 +234,12 @@ const applySchemaUpdate = ({
 export const updateSchema = ({
   jsonSchema,
   fieldPath,
-  update,
-  newFieldName,
+  updateParameters,
 }: {
   jsonSchema: MongoDBJSONSchema;
   fieldPath: FieldPath;
-} & UpdateOperationParameters): MongoDBJSONSchema => {
+  updateParameters: UpdateOperationParameters;
+}): MongoDBJSONSchema => {
   const newSchema = {
     ...jsonSchema,
   };
@@ -234,17 +252,15 @@ export const updateSchema = ({
       return applySchemaUpdate({
         schema: newSchema,
         fieldName: nextInPath,
-        update,
-        newFieldName,
+        ...updateParameters,
       });
     }
     newSchema.properties = {
       ...newSchema.properties,
       [nextInPath]: updateSchema({
         jsonSchema: newSchema.properties[nextInPath],
         fieldPath: remainingFieldPath,
-        update,
-        newFieldName,
+        updateParameters,
       }),
     };
   }
@@ -253,8 +269,7 @@ export const updateSchema = ({
       updateSchema({
         jsonSchema: variant,
         fieldPath: fieldPath,
-        update,
-        newFieldName,
+        updateParameters,
       })
     );
   }
@@ -263,20 +278,129 @@ export const updateSchema = ({
       newSchema.items = updateSchema({
         jsonSchema: newSchema.items,
         fieldPath: fieldPath,
-        update,
-        newFieldName,
+        updateParameters,
       });
     } else {
       newSchema.items = newSchema.items.map((item) =>
         updateSchema({
           jsonSchema: item,
           fieldPath: fieldPath,
-          update,
-          newFieldName,
+          updateParameters,
         })
       );
     }
   }
 
   return newSchema;
 };
+
+const getMin1ArrayVariants = (oldSchema: JSONSchema) => {
+  const arrayVariants = oldSchema.anyOf?.filter(
+    (variant) => variant.bsonType === 'array'
+  );
+  if (arrayVariants && arrayVariants.length > 0) {
+    return arrayVariants as [MongoDBJSONSchema, ...MongoDBJSONSchema[]];
+  }
+  return [
+    {
+      bsonType: 'array',
+      items: oldSchema.items || [],
+    },
+  ];
+};
+
+const getMin1ObjectVariants = (
+  oldSchema: JSONSchema
+): [MongoDBJSONSchema, ...MongoDBJSONSchema[]] => {
+  const objectVariants = oldSchema.anyOf?.filter(
+    (variant) => variant.bsonType === 'object'
+  );
+  if (objectVariants && objectVariants.length > 0) {
+    return objectVariants as [MongoDBJSONSchema, ...MongoDBJSONSchema[]];
+  }
+  return [
+    {
+      bsonType: 'object',
+      items: oldSchema.properties || {},
+      required: oldSchema.required || [],
+    },
+  ];
+};
+
+const getOtherVariants = (
+  oldSchema: JSONSchema,
+  newTypes: string[]
+): MongoDBJSONSchema[] => {
+  const existingAnyOfVariants =
+    oldSchema.anyOf?.filter(
+      (variant) => variant.bsonType !== 'object' && variant.bsonType !== 'array'
+    ) || [];
+  const existingAnyOfTypes = existingAnyOfVariants
+    .map((v) => v.bsonType)
+    .flat();
+  const existingBasicTypes = oldSchema.bsonType
+    ? []
+    : Array.isArray(oldSchema.bsonType)
+    ? oldSchema.bsonType
+    : [oldSchema.bsonType];
+  const existingBasicVariants = existingBasicTypes
+    .filter(
+      (type) => newTypes.includes(type) && type !== 'object' && type !== 'array'
+    )
+    .map((type) => ({ bsonType: type }));
+  const newVariants = newTypes
+    .filter(
+      (type) =>
+        type !== 'object' &&
+        type !== 'array' &&
+        !existingAnyOfTypes.includes(type) &&
+        !existingBasicTypes.includes(type)
+    )
+    .map((type) => ({ bsonType: type }));
+  return [...existingAnyOfVariants, ...existingBasicVariants, ...newVariants];
+};
+
+export function getSchemaForNewTypes(
+  field: {
+    fieldTypes: string[];
+    jsonSchema: MongoDBJSONSchema;
+  },
+  newTypes: string[]
+): MongoDBJSONSchema {
+  const { fieldTypes: oldTypes, jsonSchema: oldSchema } = field;
+  if (oldTypes.join(',') === newTypes.join(',')) return oldSchema;
+  const newSchema: MongoDBJSONSchema = { ...oldSchema };
+
+  // Simple schema - new type does includes neither object nor array
+  if (!newTypes.some((t) => t === 'object' || t === 'array')) {
+    newSchema.bsonType = newTypes;
+    delete newSchema.anyOf;
+    delete newSchema.properties;
+    delete newSchema.items;
+    delete newSchema.required;
+    return newSchema;
+  }
+
+  // Complex schema
+
+  // We collect array sub-schemas we need to keep
+  // Then we add new sub-schemas if needed
+  const arraySchemas: MongoDBJSONSchema[] = newTypes.includes('array')
+    ? getMin1ArrayVariants(oldSchema)
+    : [];
+
+  // We collect object sub-schemas we need to keep
+  const objectSchemas: MongoDBJSONSchema[] = newTypes.includes('object')
+    ? getMin1ObjectVariants(oldSchema)
+    : [];
+
+  const otherSchemas: MongoDBJSONSchema[] = getOtherVariants(
+    oldSchema,
+    newTypes
+  );
+
+  // Finally we set the anyOf to the collected sub-schemas
+  newSchema.anyOf = [...arraySchemas, ...objectSchemas, ...otherSchemas];
+
+  return newSchema;
+}
