fix(compass-data-modeling): visualise nested fields COMPASS-9488

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

@@ -38,6 +38,7 @@ import { UUID } from 'bson';
 import DiagramEditorToolbar from './diagram-editor-toolbar';
 import ExportDiagramModal from './export-diagram-modal';
 import { useLogger } from '@mongodb-js/compass-logging/provider';
+import type { MongoDBJSONSchema } from 'mongodb-schema';
 
 const loadingContainerStyles = css({
   width: '100%',
@@ -114,6 +115,39 @@ const editorContainerPlaceholderButtonStyles = css({
   paddingTop: spacing[200],
 });
 
+const getFieldsFromSchema = (
+  jsonSchema: MongoDBJSONSchema,
+  depth = 0
+): NodeProps['fields'] => {
+  let fields = [] as NodeProps['fields'];
+  if (jsonSchema.anyOf) {
+    for (const variant of jsonSchema.anyOf) {
+      fields = [...fields, ...getFieldsFromSchema(variant, depth + 1)];
+    }
+  }
+  if (!jsonSchema.properties) return [];
+  for (const [name, field] of Object.entries(jsonSchema.properties)) {
+    const type =
+      field.bsonType === undefined
+        ? 'Unknown'
+        : typeof field.bsonType === 'string'
+        ? field.bsonType
+        : // TODO: Show possible types of the field
+          field.bsonType[0];
+    fields.push({
+      name,
+      type,
+      depth: depth,
+      glyphs: type === 'objectId' ? ['key'] : [],
+    });
+    if (field.properties) {
+      fields = [...fields, ...getFieldsFromSchema(field, depth + 1)];
+    }
+  }
+
+  return fields;
+};
+
 const DiagramEditor: React.FunctionComponent<{
   diagramLabel: string;
   step: DataModelingState['step'];
@@ -246,22 +280,7 @@ const DiagramEditor: React.FunctionComponent<{
           y: coll.displayPosition[1],
         },
         title: coll.ns,
-        fields: Object.entries(coll.jsonSchema.properties ?? {}).map(
-          ([name, field]) => {
-            const type =
-              field.bsonType === undefined
-                ? 'Unknown'
-                : typeof field.bsonType === 'string'
-                ? field.bsonType
-                : // TODO: Show possible types of the field
-                  field.bsonType[0];
-            return {
-              name,
-              type,
-              glyphs: type === 'objectId' ? ['key'] : [],
-            };
-          }
-        ),
+        fields: getFieldsFromSchema(coll.jsonSchema),
       })
     );
   }, [model?.collections]);