Merge branch 'main' into COMPASS-9667

Author: DarshanaVenkatesh

THIRD-PARTY-NOTICES.md

@@ -1,5 +1,5 @@
 The following third-party software is used by and included in **Mongodb Compass**.
-This document was automatically generated on Mon Aug 11 2025.
+This document was automatically generated on Tue Aug 12 2025.
 
 ## List of dependencies
 

docs/tracking-plan.md

@@ -6,7 +6,7 @@
 > the tracking plan for the specific Compass version you can use the following
 > URL: `https://github.com/mongodb-js/compass/blob/<compass version>/docs/tracking-plan.md`
 
-Generated on Mon, Aug 11, 2025
+Generated on Tue, Aug 12, 2025
 
 ## Table of Contents
 

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useLayoutEffect, useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import { connect } from 'react-redux';
 import toNS from 'mongodb-ns';
 import type { Relationship } from '../../services/data-model-storage';
@@ -93,8 +93,8 @@ export function getIsCollectionNameValid(
 
   const isDuplicate = namespacesWithoutCurrent.some(
     (ns) =>
-      ns === `${toNS(namespace).database}.${collectionName}` ||
-      ns === `${toNS(namespace).database}.${collectionName.trim()}`
+      ns.trim() ===
+      `${toNS(namespace).database}.${collectionName.trim()}`.trim()
   );
 
   return {
@@ -116,8 +116,21 @@ const CollectionDrawerContent: React.FunctionComponent<
   onNoteChange,
   onRenameCollection,
 }) => {
-  const [collectionName, setCollectionName] = useState(
-    () => toNS(namespace).collection
+  const { value: collectionName, ...nameInputProps } = useChangeOnBlur(
+    toNS(namespace).collection,
+    (collectionName) => {
+      const trimmedName = collectionName.trim();
+      if (trimmedName === toNS(namespace).collection) {
+        return;
+      }
+      if (!isCollectionNameValid) {
+        return;
+      }
+      onRenameCollection(
+        namespace,
+        `${toNS(namespace).database}.${trimmedName}`
+      );
+    }
   );
 
   const {
@@ -128,23 +141,6 @@ const CollectionDrawerContent: React.FunctionComponent<
     [collectionName, namespaces, namespace]
   );
 
-  useLayoutEffect(() => {
-    setCollectionName(toNS(namespace).collection);
-  }, [namespace]);
-
-  const onBlurCollectionName = useCallback(() => {
-    const trimmedName = collectionName.trim();
-    if (trimmedName === toNS(namespace).collection) {
-      return;
-    }
-
-    if (!isCollectionNameValid) {
-      return;
-    }
-
-    onRenameCollection(namespace, `${toNS(namespace).database}.${trimmedName}`);
-  }, [collectionName, namespace, onRenameCollection, isCollectionNameValid]);
-
   const noteInputProps = useChangeOnBlur(note, (newNote) => {
     onNoteChange(namespace, newNote);
   });
@@ -155,14 +151,12 @@ const CollectionDrawerContent: React.FunctionComponent<
         <DMFormFieldContainer>
           <TextInput
             label="Name"
+            data-testid="data-model-collection-drawer-name-input"
             sizeVariant="small"
             value={collectionName}
+            {...nameInputProps}
             state={isCollectionNameValid ? undefined : 'error'}
             errorMessage={collectionNameEditErrorMessage}
-            onChange={(e) => {
-              setCollectionName(e.target.value);
-            }}
-            onBlur={onBlurCollectionName}
           />
         </DMFormFieldContainer>
       </DMDrawerSection>

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

@@ -272,6 +272,30 @@ describe('DiagramEditorSidePanel', function () {
     });
   });
 
+  it('should delete a collection', async function () {
+    const result = renderDrawer();
+    result.plugin.store.dispatch(selectCollection('flights.countries'));
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('Name')).to.have.value('countries');
+    });
+
+    userEvent.click(screen.getByLabelText(/delete collection/i));
+
+    await waitFor(() => {
+      expect(screen.queryByText('countries')).not.to.exist;
+    });
+    expect(screen.queryByLabelText('Name')).to.not.exist;
+
+    const modifiedCollection = selectCurrentModelFromState(
+      result.plugin.store.getState()
+    ).collections.find((coll) => {
+      return coll.ns === 'flights.countries';
+    });
+
+    expect(modifiedCollection).to.be.undefined;
+  });
+
   it('should open and edit a collection name', async function () {
     const result = renderDrawer();
     result.plugin.store.dispatch(selectCollection('flights.countries'));

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

@@ -9,6 +9,7 @@ import {
 import CollectionDrawerContent from './collection-drawer-content';
 import RelationshipDrawerContent from './relationship-drawer-content';
 import {
+  deleteCollection,
   deleteRelationship,
   selectCurrentModelFromState,
 } from '../../store/diagram';
@@ -36,11 +37,13 @@ type DiagramEditorSidePanelProps = {
     type: 'relationship' | 'collection';
     label: string;
   } | null;
+  onDeleteCollection: (ns: string) => void;
   onDeleteRelationship: (rId: string) => void;
 };
 
 function DiagramEditorSidePanel({
   selectedItems,
+  onDeleteCollection,
   onDeleteRelationship,
 }: DiagramEditorSidePanelProps) {
   const { content, label, actions, handleAction } = useMemo(() => {
@@ -53,8 +56,18 @@ function DiagramEditorSidePanel({
             namespace={selectedItems.id}
           ></CollectionDrawerContent>
         ),
-        actions: [],
-        handleAction: () => {},
+        actions: [
+          {
+            action: 'delete',
+            label: 'Delete Collection',
+            icon: 'Trash' as const,
+          },
+        ],
+        handleAction: (actionName: string) => {
+          if (actionName === 'delete') {
+            onDeleteCollection(selectedItems.id);
+          }
+        },
       };
     }
 
@@ -79,7 +92,7 @@ function DiagramEditorSidePanel({
     }
 
     return { content: null };
-  }, [selectedItems, onDeleteRelationship]);
+  }, [selectedItems, onDeleteCollection, onDeleteRelationship]);
 
   if (!content) {
     return null;
@@ -97,6 +110,7 @@ function DiagramEditorSidePanel({
           <ItemActionControls
             actions={actions}
             iconSize="small"
+            data-testid="data-modeling-drawer-actions"
             onAction={handleAction}
             className={drawerTitleActionGroupStyles}
             // Because the close button here is out of our control, we have do
@@ -127,7 +141,21 @@ export default connect(
       };
     }
 
+    const model = selectCurrentModelFromState(state);
+
     if (selected.type === 'collection') {
+      const doesCollectionExist = model.collections.find((collection) => {
+        return collection.ns === selected.id;
+      });
+
+      if (!doesCollectionExist) {
+        // TODO(COMPASS-9680): When the selected collection doesn't exist then we
+        // don't show any selection. We can get into this state with undo/redo.
+        return {
+          selectedItems: null,
+        };
+      }
+
       return {
         selectedItems: {
           ...selected,
@@ -137,15 +165,16 @@ export default connect(
     }
 
     if (selected.type === 'relationship') {
-      const model = selectCurrentModelFromState(state);
       const relationship = model.relationships.find((relationship) => {
         return relationship.id === selected.id;
       });
 
       if (!relationship) {
-        throw new Error(
-          'Can not find corresponding relationship when rendering DiagramEditorSidePanel'
-        );
+        // TODO(COMPASS-9680): When the selected relationship doesn't exist we don't
+        // show any selection. We can get into this state with undo/redo.
+        return {
+          selectedItems: null,
+        };
       }
 
       return {
@@ -157,6 +186,7 @@ export default connect(
     }
   },
   {
+    onDeleteCollection: deleteCollection,
     onDeleteRelationship: deleteRelationship,
   }
 )(DiagramEditorSidePanel);

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

@@ -66,6 +66,10 @@ const EditSchemaVariants = z.discriminatedUnion('type', [
     ns: z.string(),
     newPosition: z.tuple([z.number(), z.number()]),
   }),
+  z.object({
+    type: z.literal('RemoveCollection'),
+    ns: z.string(),
+  }),
   z.object({
     type: z.literal('RenameCollection'),
     fromNS: z.string(),

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

@@ -269,15 +269,6 @@ const updateSelectedItemsFromAppliedEdit = (
   }
 
   switch (edit.type) {
-    case 'RemoveRelationship': {
-      if (
-        currentSelection?.type === 'relationship' &&
-        currentSelection.id === edit.relationshipId
-      ) {
-        return null;
-      }
-      break;
-    }
     case 'RenameCollection': {
       if (
         currentSelection?.type === 'collection' &&
@@ -534,6 +525,12 @@ export function deleteRelationship(
   };
 }
 
+export function deleteCollection(
+  ns: string
+): DataModelingThunkAction<boolean, ApplyEditAction | ApplyEditFailedAction> {
+  return applyEdit({ type: 'RemoveCollection', ns });
+}
+
 export function updateCollectionNote(
   ns: string,
   note: string
@@ -591,6 +588,20 @@ function _applyEdit(edit: Edit, model?: StaticModel): StaticModel {
         }),
       };
     }
+    case 'RemoveCollection': {
+      return {
+        ...model,
+        // Remove any relationships involving the collection being removed.
+        relationships: model.relationships.filter((r) => {
+          return !(
+            r.relationship[0].ns === edit.ns || r.relationship[1].ns === edit.ns
+          );
+        }),
+        collections: model.collections.filter(
+          (collection) => collection.ns !== edit.ns
+        ),
+      };
+    }
     case 'RenameCollection': {
       return {
         ...model,

packages/compass-e2e-tests/helpers/selectors.ts

@@ -1479,7 +1479,9 @@ export const DataModelsListItemActions = (diagramName: string) =>
   `${DataModelsListItem(diagramName)} [aria-label="Show actions"]`;
 export const DataModelsListItemDeleteButton = `[data-action="delete"]`;
 export const DataModelAddRelationshipBtn = 'aria/Add relationship';
-export const DataModelNameInput = '//label[text()="Name"]';
+export const DataModelNameInputLabel = '//label[text()="Name"]';
+export const DataModelNameInput =
+  'input[data-testid="data-model-collection-drawer-name-input"]';
 export const DataModelRelationshipLocalCollectionSelect =
   '//label[text()="Local collection"]';
 export const DataModelRelationshipLocalFieldSelect =
@@ -1498,6 +1500,8 @@ export const DataModelCollectionRelationshipItem = (relationshipId: string) =>
   `li[data-relationship-id="${relationshipId}"]`;
 export const DataModelCollectionRelationshipItemEdit = `[aria-label="Edit relationship"]`;
 export const DataModelCollectionRelationshipItemDelete = `[aria-label="Delete relationship"]`;
+export const DataModelCollectionSidebarItemDelete = `[aria-label="Delete collection"]`;
+export const DataModelCollectionSidebarItemDeleteButton = `[data-action="delete"]`;
 
 // Side drawer
 export const SideDrawer = `[data-testid="${getDrawerIds().root}"]`;