feat(data-explorer): COMPASS-9742-add-add-field

Author: Anemy

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

@@ -10,6 +10,7 @@ import type { DataModelingState } from '../store/reducer';
 import {
   addNewFieldToCollection,
   moveCollection,
+  onAddNestedField,
   selectCollection,
   selectRelationship,
   selectBackground,
@@ -131,6 +132,7 @@ const DiagramContent: React.FunctionComponent<{
   isInRelationshipDrawingMode: boolean;
   editErrors?: string[];
   newCollection?: string;
+  onAddFieldToObjectField: (ns: string, parentPath: string[]) => void;
   onAddNewFieldToCollection: (ns: string) => void;
   onMoveCollection: (ns: string, newPosition: [number, number]) => void;
   onCollectionSelect: (namespace: string) => void;
@@ -153,6 +155,7 @@ const DiagramContent: React.FunctionComponent<{
   model,
   isInRelationshipDrawingMode,
   newCollection,
+  onAddFieldToObjectField,
   onAddNewFieldToCollection,
   onMoveCollection,
   onCollectionSelect,
@@ -324,6 +327,13 @@ const DiagramContent: React.FunctionComponent<{
     [onAddNewFieldToCollection]
   );
 
+  const onClickAddFieldToObjectField = useCallback(
+    (event: React.MouseEvent, nodeId: string, parentPath: string[]) => {
+      onAddFieldToObjectField(nodeId, parentPath);
+    },
+    [onAddFieldToObjectField]
+  );
+
   return (
     <div
       ref={setDiagramContainerRef}
@@ -361,6 +371,7 @@ const DiagramContent: React.FunctionComponent<{
           onNodeDragStop={onNodeDragStop}
           onConnect={onConnect}
           onAddFieldToNodeClick={onClickAddFieldToCollection}
+          onAddFieldToObjectFieldClick={onClickAddFieldToObjectField}
         />
       </div>
     </div>
@@ -384,6 +395,7 @@ const ConnectedDiagramContent = connect(
   },
   {
     onAddNewFieldToCollection: addNewFieldToCollection,
+    onAddFieldToObjectField: onAddNestedField,
     onMoveCollection: moveCollection,
     onCollectionSelect: selectCollection,
     onRelationshipSelect: selectRelationship,

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

@@ -500,6 +500,38 @@ export function redoEdit(): DataModelingThunkAction<void, RedoEditAction> {
   };
 }
 
+export function onAddNestedField(
+  ns: string,
+  parentFieldPath: string[]
+): DataModelingThunkAction<void, ApplyEditAction | ApplyEditFailedAction> {
+  return (dispatch, getState) => {
+    const modelState = selectCurrentModelFromState(getState());
+
+    const collection = modelState.collections.find((c) => c.ns === ns);
+    if (!collection) {
+      throw new Error('Collection to add field to not found');
+    }
+
+    const edit: Omit<
+      Extract<Edit, { type: 'AddField' }>,
+      'id' | 'timestamp'
+    > = {
+      type: 'AddField',
+      ns,
+      // Use the first unique field name we can use.
+      field: [
+        ...parentFieldPath,
+        getNewUnusedFieldName(collection.jsonSchema, parentFieldPath),
+      ],
+      jsonSchema: {
+        bsonType: 'string',
+      },
+    };
+
+    return dispatch(applyEdit(edit));
+  };
+}
+
 export function addNewFieldToCollection(
   ns: string
 ): DataModelingThunkAction<void, ApplyEditAction | ApplyEditFailedAction> {

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

@@ -1,5 +1,10 @@
 import toNS from 'mongodb-ns';
-import type { NodeProps, EdgeProps, NodeGlyph } from '@mongodb-js/diagramming';
+import type {
+  NodeProps,
+  EdgeProps,
+  NodeGlyph,
+  NodeField,
+} from '@mongodb-js/diagramming';
 import type { MongoDBJSONSchema } from 'mongodb-schema';
 import type { SelectedItems } from '../store/diagram';
 import type {
@@ -33,6 +38,37 @@ export const getHighlightedFields = (
   return selection;
 };
 
+const getBaseNodeField = (fieldPath: string[]): NodeField => {
+  return {
+    name: fieldPath[fieldPath.length - 1],
+    id: fieldPath,
+    depth: fieldPath.length - 1,
+  };
+};
+
+/**
+ * Create the base field list to be used for positioning and measuring in node layouts.
+ */
+export const getBaseFieldsFromSchema = ({
+  jsonSchema,
+}: {
+  jsonSchema: MongoDBJSONSchema;
+}): NodeField[] => {
+  if (!jsonSchema || !jsonSchema.properties) {
+    return [];
+  }
+  const fields: NodeField[] = [];
+
+  traverseSchema({
+    jsonSchema,
+    visitor: ({ fieldPath }) => {
+      fields.push(getBaseNodeField(fieldPath));
+    },
+  });
+
+  return fields;
+};
+
 const KEY_GLYPH: NodeGlyph[] = ['key'];
 const NO_GLYPH: NodeGlyph[] = [];
 
@@ -54,17 +90,18 @@ export const getFieldsFromSchema = ({
     jsonSchema,
     visitor: ({ fieldPath, fieldTypes }) => {
       fields.push({
-        name: fieldPath[fieldPath.length - 1],
-        id: fieldPath,
+        ...getBaseNodeField(fieldPath),
         type: fieldTypes.length === 1 ? fieldTypes[0] : fieldTypes,
+        id: fieldPath,
         depth: fieldPath.length - 1,
         glyphs:
           fieldTypes.length === 1 && fieldTypes[0] === 'objectId'
             ? KEY_GLYPH
             : NO_GLYPH,
         selectable: true,
         selected:
-          !!selectedField && areFieldPathsEqual(fieldPath, selectedField),
+          !!selectedField?.length &&
+          areFieldPathsEqual(fieldPath, selectedField),
         variant:
           highlightedFields.length &&
           highlightedFields.some((highlightedField) =>
@@ -96,7 +133,7 @@ export function collectionToBaseNodeForLayout({
       x: displayPosition[0],
       y: displayPosition[1],
     },
-    fields: getFieldsFromSchema({ jsonSchema }),
+    fields: getBaseFieldsFromSchema({ jsonSchema }),
   };
 }
 

packages/compass-data-modeling/src/utils/schema.ts

@@ -1,7 +1,21 @@
 import type { MongoDBJSONSchema } from 'mongodb-schema';
 
-export function getNewUnusedFieldName(jsonSchema: MongoDBJSONSchema): string {
-  const existingFieldNames = new Set(Object.keys(jsonSchema.properties || {}));
+export function getNewUnusedFieldName(
+  jsonSchema: MongoDBJSONSchema,
+  parentFieldPath: string[] = []
+): string {
+  let parentJSONSchema: MongoDBJSONSchema | undefined = jsonSchema;
+  for (const currentField of parentFieldPath) {
+    if (!currentField) {
+      throw new Error('Invalid field path to get new field name');
+    }
+    parentJSONSchema = parentJSONSchema?.properties?.[currentField];
+  }
+
+  const existingFieldNames = new Set(
+    Object.keys(parentJSONSchema?.properties || {})
+  );
+
   let i = 1;
   let fieldName = `field-${i}`;