From 10b71b8a76c20481b18c7f9bb4f7ec85569fbb71 Mon Sep 17 00:00:00 2001
From: Rhys Howell <rhys.howell@mongodb.com>
Date: Mon, 22 Sep 2025 18:06:57 -0400
Subject: [PATCH 1/2] chore(data-modeling): update drawer icon label to be
 generic

---
 .../drawer/diagram-editor-side-panel.tsx      | 159 +++++++++---------
 1 file changed, 84 insertions(+), 75 deletions(-)

diff --git a/packages/compass-data-modeling/src/components/drawer/diagram-editor-side-panel.tsx b/packages/compass-data-modeling/src/components/drawer/diagram-editor-side-panel.tsx
index a95381b5de3..2c2da4c02c9 100644
--- a/packages/compass-data-modeling/src/components/drawer/diagram-editor-side-panel.tsx
+++ b/packages/compass-data-modeling/src/components/drawer/diagram-editor-side-panel.tsx
@@ -53,84 +53,93 @@ function DiagramEditorSidePanel({
   onDeleteRelationship,
   onDeleteField,
 }: DiagramEditorSidePanelProps) {
-  const { content, label, actions, handleAction } = useMemo(() => {
-    if (selectedItems?.type === 'collection') {
-      return {
-        label: selectedItems.label,
-        content: (
-          <CollectionDrawerContent
-            key={selectedItems.id}
-            namespace={selectedItems.id}
-          ></CollectionDrawerContent>
-        ),
-        actions: [
-          {
-            action: 'delete',
-            label: 'Delete Collection',
-            icon: 'Trash' as const,
+  const { content, drawerIconLabel, label, actions, handleAction } =
+    useMemo(() => {
+      if (selectedItems?.type === 'collection') {
+        return {
+          label: selectedItems.label,
+          drawerIconLabel: 'Collection Configuration',
+          content: (
+            <CollectionDrawerContent
+              key={selectedItems.id}
+              namespace={selectedItems.id}
+            ></CollectionDrawerContent>
+          ),
+          actions: [
+            {
+              action: 'delete',
+              label: 'Delete Collection',
+              icon: 'Trash' as const,
+            },
+          ],
+          handleAction: (actionName: string) => {
+            if (actionName === 'delete') {
+              onDeleteCollection(selectedItems.id);
+            }
           },
-        ],
-        handleAction: (actionName: string) => {
-          if (actionName === 'delete') {
-            onDeleteCollection(selectedItems.id);
-          }
-        },
-      };
-    }
+        };
+      }
 
-    if (selectedItems?.type === 'relationship') {
-      return {
-        label: selectedItems.label,
-        content: (
-          <RelationshipDrawerContent
-            key={selectedItems.id}
-            relationshipId={selectedItems.id}
-          ></RelationshipDrawerContent>
-        ),
-        actions: [
-          { action: 'delete', label: 'Delete', icon: 'Trash' as const },
-        ],
-        handleAction: (actionName: string) => {
-          if (actionName === 'delete') {
-            onDeleteRelationship(selectedItems.id);
-          }
-        },
-      };
-    }
+      if (selectedItems?.type === 'relationship') {
+        return {
+          label: selectedItems.label,
+          drawerIconLabel: 'Relationship Configuration',
+          content: (
+            <RelationshipDrawerContent
+              key={selectedItems.id}
+              relationshipId={selectedItems.id}
+            ></RelationshipDrawerContent>
+          ),
+          actions: [
+            { action: 'delete', label: 'Delete', icon: 'Trash' as const },
+          ],
+          handleAction: (actionName: string) => {
+            if (actionName === 'delete') {
+              onDeleteRelationship(selectedItems.id);
+            }
+          },
+        };
+      }
 
-    if (selectedItems?.type === 'field') {
-      return {
-        label: selectedItems.label,
-        content: (
-          <FieldDrawerContent
-            key={`${selectedItems.namespace}.${JSON.stringify(
-              selectedItems.fieldPath
-            )}`}
-            namespace={selectedItems.namespace}
-            fieldPath={selectedItems.fieldPath}
-          ></FieldDrawerContent>
-        ),
-        actions: [
-          ...(!isIdField(selectedItems.fieldPath)
-            ? [
-                {
-                  action: 'delete',
-                  label: 'Delete Field',
-                  icon: 'Trash' as const,
-                },
-              ]
-            : []),
-        ],
-        handleAction: (actionName: string) => {
-          if (actionName === 'delete') {
-            onDeleteField(selectedItems.namespace, selectedItems.fieldPath);
-          }
-        },
-      };
-    }
+      if (selectedItems?.type === 'field') {
+        return {
+          label: selectedItems.label,
+          drawerIconLabel: 'Field Configuration',
+          content: (
+            <FieldDrawerContent
+              key={`${selectedItems.namespace}.${JSON.stringify(
+                selectedItems.fieldPath
+              )}`}
+              namespace={selectedItems.namespace}
+              fieldPath={selectedItems.fieldPath}
+            ></FieldDrawerContent>
+          ),
+          actions: [
+            ...(!isIdField(selectedItems.fieldPath)
+              ? [
+                  {
+                    action: 'delete',
+                    label: 'Delete Field',
+                    icon: 'Trash' as const,
+                  },
+                ]
+              : []),
+          ],
+          handleAction: (actionName: string) => {
+            if (actionName === 'delete') {
+              onDeleteField(selectedItems.namespace, selectedItems.fieldPath);
+            }
+          },
+        };
+      }
 
-    return { content: null };
-  }, [selectedItems, onDeleteCollection, onDeleteRelationship, onDeleteField]);
+      return { content: null };
+    }, [
+      selectedItems,
+      onDeleteCollection,
+      onDeleteRelationship,
+      onDeleteField,
+    ]);
 
   if (!content) {
     return null;
@@ -160,7 +169,7 @@ function DiagramEditorSidePanel({
           ></ItemActionControls>
         </div>
       }
-      label={label}
+      label={drawerIconLabel}
       glyph="Wrench"
       autoOpen
     >

From 6a8262b41411d9f8a5ab2507427fa4192c383150 Mon Sep 17 00:00:00 2001
From: Rhys Howell <rhys.howell@mongodb.com>
Date: Tue, 23 Sep 2025 11:44:22 -0400
Subject: [PATCH 2/2] fixup: used better label and title naming, drive by
 inline definition update

---
 .../drawer/diagram-editor-side-panel.tsx      | 174 +++++++++---------
 .../src/utils/nodes-and-edges.tsx             |   2 +-
 2 files changed, 85 insertions(+), 91 deletions(-)

diff --git a/packages/compass-data-modeling/src/components/drawer/diagram-editor-side-panel.tsx b/packages/compass-data-modeling/src/components/drawer/diagram-editor-side-panel.tsx
index 2c2da4c02c9..34dc54ccd69 100644
--- a/packages/compass-data-modeling/src/components/drawer/diagram-editor-side-panel.tsx
+++ b/packages/compass-data-modeling/src/components/drawer/diagram-editor-side-panel.tsx
@@ -39,7 +39,7 @@ const drawerTitleTextStyles = css({
 const drawerTitleActionGroupStyles = css({});
 
 type DiagramEditorSidePanelProps = {
-  selectedItems: (SelectedItems & { label: string }) | null;
+  selectedItems: (SelectedItems & { title: string }) | null;
   onDeleteCollection: (ns: string) => void;
   onDeleteRelationship: (rId: string) => void;
   onDeleteField: (ns: string, fieldPath: FieldPath) => void;
@@ -53,93 +53,87 @@ function DiagramEditorSidePanel({
   onDeleteRelationship,
   onDeleteField,
 }: DiagramEditorSidePanelProps) {
-  const { content, drawerIconLabel, label, actions, handleAction } =
-    useMemo(() => {
-      if (selectedItems?.type === 'collection') {
-        return {
-          label: selectedItems.label,
-          drawerIconLabel: 'Collection Configuration',
-          content: (
-            <CollectionDrawerContent
-              key={selectedItems.id}
-              namespace={selectedItems.id}
-            ></CollectionDrawerContent>
-          ),
-          actions: [
-            {
-              action: 'delete',
-              label: 'Delete Collection',
-              icon: 'Trash' as const,
-            },
-          ],
-          handleAction: (actionName: string) => {
-            if (actionName === 'delete') {
-              onDeleteCollection(selectedItems.id);
-            }
+  const { content, label, actions, title, handleAction } = useMemo(() => {
+    if (selectedItems?.type === 'collection') {
+      return {
+        title: selectedItems.title,
+        label: 'Collection Configuration',
+        content: (
+          <CollectionDrawerContent
+            key={selectedItems.id}
+            namespace={selectedItems.id}
+          ></CollectionDrawerContent>
+        ),
+        actions: [
+          {
+            action: 'delete',
+            label: 'Delete Collection',
+            icon: 'Trash' as const,
           },
-        };
-      }
+        ],
+        handleAction: (actionName: string) => {
+          if (actionName === 'delete') {
+            onDeleteCollection(selectedItems.id);
+          }
+        },
+      };
+    }
 
-      if (selectedItems?.type === 'relationship') {
-        return {
-          label: selectedItems.label,
-          drawerIconLabel: 'Relationship Configuration',
-          content: (
-            <RelationshipDrawerContent
-              key={selectedItems.id}
-              relationshipId={selectedItems.id}
-            ></RelationshipDrawerContent>
-          ),
-          actions: [
-            { action: 'delete', label: 'Delete', icon: 'Trash' as const },
-          ],
-          handleAction: (actionName: string) => {
-            if (actionName === 'delete') {
-              onDeleteRelationship(selectedItems.id);
-            }
-          },
-        };
-      }
+    if (selectedItems?.type === 'relationship') {
+      return {
+        title: selectedItems.title,
+        label: 'Relationship Configuration',
+        content: (
+          <RelationshipDrawerContent
+            key={selectedItems.id}
+            relationshipId={selectedItems.id}
+          ></RelationshipDrawerContent>
+        ),
+        actions: [
+          { action: 'delete', label: 'Delete', icon: 'Trash' as const },
+        ],
+        handleAction: (actionName: string) => {
+          if (actionName === 'delete') {
+            onDeleteRelationship(selectedItems.id);
+          }
+        },
+      };
+    }
 
-      if (selectedItems?.type === 'field') {
-        return {
-          label: selectedItems.label,
-          drawerIconLabel: 'Field Configuration',
-          content: (
-            <FieldDrawerContent
-              key={`${selectedItems.namespace}.${JSON.stringify(
-                selectedItems.fieldPath
-              )}`}
-              namespace={selectedItems.namespace}
-              fieldPath={selectedItems.fieldPath}
-            ></FieldDrawerContent>
-          ),
-          actions: [
-            ...(!isIdField(selectedItems.fieldPath)
-              ? [
-                  {
-                    action: 'delete',
-                    label: 'Delete Field',
-                    icon: 'Trash' as const,
-                  },
-                ]
-              : []),
-          ],
-          handleAction: (actionName: string) => {
-            if (actionName === 'delete') {
-              onDeleteField(selectedItems.namespace, selectedItems.fieldPath);
-            }
-          },
-        };
-      }
+    if (selectedItems?.type === 'field') {
+      return {
+        title: selectedItems.title,
+        label: 'Field Configuration',
+        content: (
+          <FieldDrawerContent
+            key={`${selectedItems.namespace}.${JSON.stringify(
+              selectedItems.fieldPath
+            )}`}
+            namespace={selectedItems.namespace}
+            fieldPath={selectedItems.fieldPath}
+          ></FieldDrawerContent>
+        ),
+        actions: [
+          ...(!isIdField(selectedItems.fieldPath)
+            ? [
+                {
+                  action: 'delete',
+                  label: 'Delete Field',
+                  icon: 'Trash' as const,
+                },
+              ]
+            : []),
+        ],
+        handleAction: (actionName: string) => {
+          if (actionName === 'delete') {
+            onDeleteField(selectedItems.namespace, selectedItems.fieldPath);
+          }
+        },
+      };
+    }
 
-      return { content: null };
-    }, [
-      selectedItems,
-      onDeleteCollection,
-      onDeleteRelationship,
-      onDeleteField,
-    ]);
+    return { content: null };
+  }, [selectedItems, onDeleteCollection, onDeleteRelationship, onDeleteField]);
 
   if (!content) {
     return null;
@@ -150,8 +144,8 @@ function DiagramEditorSidePanel({
       id={DATA_MODELING_DRAWER_ID}
       title={
         <div className={drawerTitleStyles}>
-          <span className={drawerTitleTextStyles} title={label}>
-            {label}
+          <span className={drawerTitleTextStyles} title={title}>
+            {title}
           </span>
 
           <ItemActionControls
@@ -169,7 +163,7 @@ function DiagramEditorSidePanel({
           ></ItemActionControls>
         </div>
       }
-      label={drawerIconLabel}
+      label={label}
       glyph="Wrench"
       autoOpen
     >
@@ -206,7 +200,7 @@ export default connect(
       return {
         selectedItems: {
           ...selected,
-          label: getCollection(selected.id),
+          title: getCollection(selected.id),
         },
       };
     }
@@ -227,7 +221,7 @@ export default connect(
       return {
         selectedItems: {
           ...selected,
-          label: getDefaultRelationshipName(relationship.relationship),
+          title: getDefaultRelationshipName(relationship.relationship),
         },
       };
     }
@@ -250,7 +244,7 @@ export default connect(
       return {
         selectedItems: {
           ...selected,
-          label: `${getCollection(
+          title: `${getCollection(
             selected.namespace
           )}.${selected.fieldPath.join('.')}`,
         },
diff --git a/packages/compass-data-modeling/src/utils/nodes-and-edges.tsx b/packages/compass-data-modeling/src/utils/nodes-and-edges.tsx
index fb49b7f4977..17b527a02ff 100644
--- a/packages/compass-data-modeling/src/utils/nodes-and-edges.tsx
+++ b/packages/compass-data-modeling/src/utils/nodes-and-edges.tsx
@@ -59,7 +59,7 @@ function getFieldTypeDisplay(bsonTypes: string[]) {
         </Body>
       }
     >
-      <div>(mixed)</div>
+      <i>(mixed)</i>
     </InlineDefinition>
   );
 }