feat(compass-data-modeling): delete and rename field COMPASS-9659

Author: paula-stacho

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

@@ -12,6 +12,7 @@ import RelationshipDrawerContent from './relationship-drawer-content';
 import {
   deleteCollection,
   deleteRelationship,
+  removeField,
   selectCurrentModelFromState,
   type SelectedItems,
 } from '../../store/diagram';
@@ -241,6 +242,6 @@ export default connect(
   {
     onDeleteCollection: deleteCollection,
     onDeleteRelationship: deleteRelationship,
-    onDeleteField: () => {}, // TODO(COMPASS-9659) part 2 - implement onDeleteField,
+    onDeleteField: removeField,
   }
 )(DiagramEditorSidePanel);

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

@@ -13,6 +13,7 @@ import { BSONType } from 'mongodb';
 import {
   createNewRelationship,
   deleteRelationship,
+  renameField,
   selectCurrentModelFromState,
   selectRelationship,
 } from '../../store/diagram';
@@ -24,7 +25,10 @@ import {
 import { useChangeOnBlur } from './use-change-on-blur';
 import { RelationshipsSection } from './relationships-section';
 import { getFieldFromSchema } from '../../utils/schema-traversal';
-import { areFieldPathsEqual } from '../../utils/utils';
+import {
+  areFieldPathsEqual,
+  isRelationshipInvolvingField,
+} from '../../utils/utils';
 
 type FieldDrawerContentProps = {
   namespace: string;
@@ -44,7 +48,7 @@ type FieldDrawerContentProps = {
   onRenameField: (
     namespace: string,
     fromFieldPath: FieldPath,
-    toFieldPath: FieldPath
+    newName: string
   ) => void;
   onChangeFieldType: (
     namespace: string,
@@ -108,10 +112,7 @@ const FieldDrawerContent: React.FunctionComponent<FieldDrawerContentProps> = ({
       if (!isFieldNameValid) {
         return;
       }
-      onRenameField(namespace, fieldPath, [
-        ...fieldPath.slice(0, fieldPath.length - 1),
-        trimmedName,
-      ]);
+      onRenameField(namespace, fieldPath, trimmedName);
     }
   );
 
@@ -131,7 +132,6 @@ 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}
@@ -192,24 +192,20 @@ export default connect(
           fieldPath: ownProps.fieldPath,
         })?.fieldTypes ?? [],
       fieldPaths: [], // TODO(COMPASS-9659): get existing field paths
-      relationships: model.relationships.filter((r) => {
-        const [local, foreign] = r.relationship;
-        return (
-          (local.ns === ownProps.namespace &&
-            local.fields &&
-            areFieldPathsEqual(local.fields, ownProps.fieldPath)) ||
-          (foreign.ns === ownProps.namespace &&
-            foreign.fields &&
-            areFieldPathsEqual(foreign.fields, ownProps.fieldPath))
-        );
-      }),
+      relationships: model.relationships.filter(({ relationship }) =>
+        isRelationshipInvolvingField(
+          relationship,
+          ownProps.namespace,
+          ownProps.fieldPath
+        )
+      ),
     };
   },
   {
     onCreateNewRelationshipClick: createNewRelationship,
     onEditRelationshipClick: selectRelationship,
     onDeleteRelationshipClick: deleteRelationship,
-    onRenameField: () => {}, // TODO(COMPASS-9659): renameField,
+    onRenameField: renameField,
     onChangeFieldType: () => {}, // TODO(COMPASS-9659): updateFieldSchema,
   }
 )(FieldDrawerContent);

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

@@ -99,7 +99,7 @@ const EditSchemaVariants = z.discriminatedUnion('type', [
     type: z.literal('RenameField'),
     ns: z.string(),
     from: FieldPathSchema,
-    to: FieldPathSchema,
+    to: z.string(),
   }),
   z.object({
     type: z.literal('RemoveField'),

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

@@ -29,7 +29,15 @@ 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 {
+  removeFieldFromSchema,
+  traverseSchema,
+  updateSchema,
+} from '../utils/schema-traversal';
+import {
+  areFieldPathsEqual,
+  isRelationshipInvolvingField,
+} from '../utils/utils';
 
 function isNonEmptyArray<T>(arr: T[]): arr is [T, ...T[]] {
   return Array.isArray(arr) && arr.length > 0;
@@ -658,6 +666,21 @@ export function updateCollectionNote(
   return applyEdit({ type: 'UpdateCollectionNote', ns, note });
 }
 
+export function removeField(
+  ns: string,
+  field: FieldPath
+): DataModelingThunkAction<boolean, ApplyEditAction | ApplyEditFailedAction> {
+  return applyEdit({ type: 'RemoveField', ns, field });
+}
+
+export function renameField(
+  ns: string,
+  field: FieldPath,
+  newName: string
+): DataModelingThunkAction<boolean, ApplyEditAction | ApplyEditFailedAction> {
+  return applyEdit({ type: 'RenameField', ns, from: field, to: newName });
+}
+
 function getPositionForNewCollection(
   existingCollections: DataModelCollection[],
   newCollection: Omit<DataModelCollection, 'displayPosition'>
@@ -850,6 +873,52 @@ function _applyEdit(edit: Edit, model?: StaticModel): StaticModel {
         }),
       };
     }
+    case 'RemoveField': {
+      return {
+        ...model,
+        // Remove any relationships involving the field being removed.
+        relationships: model.relationships.filter(({ relationship }) => {
+          return !isRelationshipInvolvingField(
+            relationship,
+            edit.ns,
+            edit.field
+          );
+        }),
+        collections: model.collections.map((collection) => {
+          if (collection.ns !== edit.ns) return collection;
+          return {
+            ...collection,
+            jsonSchema: updateSchema({
+              jsonSchema: collection.jsonSchema,
+              fieldPath: edit.field,
+              update: 'removeField',
+            }),
+          };
+        }),
+      };
+    }
+    case 'RenameField': {
+      return {
+        ...model,
+        // Update any relationships involving the field being renamed.
+        relationships: model.relationships.map((r) => {
+          // TODO
+          return r;
+        }),
+        collections: model.collections.map((collection) => {
+          if (collection.ns !== edit.ns) return collection;
+          return {
+            ...collection,
+            jsonSchema: updateSchema({
+              jsonSchema: collection.jsonSchema,
+              fieldPath: edit.from,
+              update: 'renameField',
+              newFieldName: edit.to,
+            }),
+          };
+        }),
+      };
+    }
     default: {
       return model;
     }