.

Author: paula-stacho

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

@@ -74,7 +74,7 @@ describe('DiagramEditorSidePanel', function () {
     result.plugin.store.dispatch(selectCollection('flights.airlines'));
 
     await waitFor(() => {
-      expect(screen.getByTitle('flights.airlines')).to.be.visible;
+      expect(screen.getByTitle('airlines')).to.be.visible;
     });
 
     const nameInput = screen.getByLabelText('Name');

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

@@ -10,6 +10,7 @@ import toNS from 'mongodb-ns';
 import {
   createNewRelationship,
   deleteRelationship,
+  renameField,
   selectCurrentModelFromState,
   selectRelationship,
 } from '../../store/diagram';
@@ -98,10 +99,15 @@ const FieldDrawerContent: React.FunctionComponent<FieldDrawerContentProps> = ({
     fieldPath[fieldPath.length - 1],
     (fieldName) => {
       const trimmedName = fieldName.trim();
-      if (trimmedName === fieldName) {
+      console.log(
+        `[Rename] ${fieldPath[fieldPath.length - 1]} -> ${trimmedName}`
+      );
+      if (trimmedName === fieldPath[fieldPath.length - 1]) {
+        console.log('[Rename] No change in field name, skipping');
         return;
       }
       if (!isFieldNameValid) {
+        console.log('[Rename] Invalid field name, skipping');
         return;
       }
       onRenameField(namespace, fieldPath, [
@@ -123,6 +129,7 @@ const FieldDrawerContent: React.FunctionComponent<FieldDrawerContentProps> = ({
         <DMFormFieldContainer>
           <TextInput
             label="Field name"
+            disabled={true} // TODO: enable when field renaming is implemented
             data-testid="data-model-collection-drawer-name-input"
             sizeVariant="small"
             value={fieldName}
@@ -186,7 +193,7 @@ export default connect(
     onCreateNewRelationshipClick: createNewRelationship,
     onEditRelationshipClick: selectRelationship,
     onDeleteRelationshipClick: deleteRelationship,
-    onRenameField: () => {}, // TODO: renameField,
+    onRenameField: renameField,
     onChangeFieldType: () => {}, // TODO: updateFieldSchema,
   }
 )(FieldDrawerContent);

packages/compass-data-modeling/src/services/data-model-storage.ts

@@ -1,5 +1,4 @@
 import { z } from '@mongodb-js/compass-user-data';
-import { JSON_SCHEMA } from 'js-yaml';
 import type { MongoDBJSONSchema } from 'mongodb-schema';
 
 export const FieldPathSchema = z.array(z.string());

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

@@ -25,6 +25,7 @@ import {
   getDiagramName,
 } from '../services/open-and-download-diagram';
 import type { MongoDBJSONSchema } from 'mongodb-schema';
+import { traverseSchema } from '../utils/nodes-and-edges';
 
 function isNonEmptyArray<T>(arr: T[]): arr is [T, ...T[]] {
   return Array.isArray(arr) && arr.length > 0;
@@ -439,6 +440,29 @@ export function renameCollection(
   };
 }
 
+export function renameField(
+  ns: string,
+  from: FieldPath,
+  to: FieldPath
+): DataModelingThunkAction<
+  void,
+  ApplyEditAction | ApplyEditFailedAction | CollectionSelectedAction
+> {
+  return (dispatch) => {
+    const edit: Omit<
+      Extract<Edit, { type: 'RenameField' }>,
+      'id' | 'timestamp'
+    > = {
+      type: 'RenameField',
+      ns,
+      from,
+      to,
+    };
+
+    dispatch(applyEdit(edit));
+  };
+}
+
 export function applyEdit(
   rawEdit: EditAction
 ): DataModelingThunkAction<boolean, ApplyEditAction | ApplyEditFailedAction> {
@@ -679,6 +703,44 @@ function _applyEdit(edit: Edit, model?: StaticModel): StaticModel {
         })),
       };
     }
+    case 'RenameField': {
+      return {
+        ...model,
+        // Update relationships to point to the renamed field.
+        relationships: model.relationships.map((relationship) => {
+          const [local, foreign] = relationship.relationship;
+
+          return {
+            ...relationship,
+            relationship: [
+              {
+                ...local,
+                fields:
+                  local.ns === edit.ns &&
+                  JSON.stringify(local.fields) === JSON.stringify(edit.from)
+                    ? edit.to
+                    : local.fields,
+              },
+              {
+                ...foreign,
+                fields:
+                  local.ns === edit.ns &&
+                  JSON.stringify(local.fields) === JSON.stringify(edit.from)
+                    ? edit.to
+                    : local.fields,
+              },
+            ],
+          };
+        }),
+        collections: model.collections.map((collection) => ({
+          ...collection,
+          // TODO: Rename the field.
+          // jsonSchema: collection.ns !== edit.ns
+          //   ? collection.jsonSchema
+          //   : renameFieldInSchema(collection.jsonSchema, edit.from, edit.to)
+        })),
+      };
+    }
     case 'UpdateCollectionNote': {
       return {
         ...model,
@@ -763,31 +825,14 @@ export const selectCurrentModelFromState = (state: DataModelingState) => {
   return selectCurrentModel(selectCurrentDiagramFromState(state).edits);
 };
 
-function extractFields(
-  parentSchema: MongoDBJSONSchema,
-  parentKey?: string[],
-  fields: string[][] = []
-) {
-  if ('anyOf' in parentSchema && parentSchema.anyOf) {
-    for (const schema of parentSchema.anyOf) {
-      extractFields(schema, parentKey, fields);
-    }
-  }
-  if ('items' in parentSchema && parentSchema.items) {
-    const items = Array.isArray(parentSchema.items)
-      ? parentSchema.items
-      : [parentSchema.items];
-    for (const schema of items) {
-      extractFields(schema, parentKey, fields);
-    }
-  }
-  if ('properties' in parentSchema && parentSchema.properties) {
-    for (const [key, value] of Object.entries(parentSchema.properties)) {
-      const fullKey = parentKey ? [...parentKey, key] : [key];
-      fields.push(fullKey);
-      extractFields(value, fullKey, fields);
-    }
-  }
+function extractFieldsFromSchema(parentSchema: MongoDBJSONSchema): FieldPath[] {
+  const fields: FieldPath[] = [];
+  traverseSchema({
+    jsonSchema: parentSchema,
+    visitor: ({ fieldPath }) => {
+      fields.push(fieldPath);
+    },
+  });
   return fields;
 }
 
@@ -797,7 +842,7 @@ function getFieldsForCurrentModel(
   const model = selectCurrentModel(edits);
   const fields = Object.fromEntries(
     model.collections.map((collection) => {
-      return [collection.ns, extractFields(collection.jsonSchema)];
+      return [collection.ns, extractFieldsFromSchema(collection.jsonSchema)];
     })
   );
   return fields;

packages/compass-data-modeling/src/utils/nodes-and-edges.spec.tsx

@@ -8,7 +8,7 @@ import {
 } from '@mongodb-js/testing-library-compass';
 import { getFieldsFromSchema } from '../utils/nodes-and-edges';
 
-describe.only('getFieldsFromSchema', function () {
+describe('getFieldsFromSchema', function () {
   const validateMixedType = async (
     type: React.ReactNode,
     expectedTooltip: RegExp

packages/compass-data-modeling/src/utils/nodes-and-edges.tsx

@@ -83,11 +83,9 @@ export const traverseSchema = ({
   jsonSchema: MongoDBJSONSchema;
   visitor: ({
     fieldPath,
-    fieldName,
     fieldTypes,
   }: {
     fieldPath: FieldPath;
-    fieldName: string;
     fieldTypes: string[];
   }) => void;
   parentFieldPath?: FieldPath;
@@ -128,7 +126,6 @@ export const traverseSchema = ({
 
     visitor({
       fieldPath: newFieldPath,
-      fieldName: name,
       fieldTypes: types.flat(),
     });
 
@@ -158,9 +155,9 @@ export const getFieldsFromSchema = ({
 
   traverseSchema({
     jsonSchema,
-    visitor: ({ fieldPath, fieldName, fieldTypes }) => {
+    visitor: ({ fieldPath, fieldTypes }) => {
       fields.push({
-        name: fieldName,
+        name: fieldPath[fieldPath.length - 1],
         id: fieldPath,
         type: getFieldTypeDisplay(fieldTypes),
         depth: fieldPath.length - 1,