fix(crud): clone the bulk delete preview docs from the ones in the list COMPASS-7521 (#5232)

* Clone the bulk delete preview docs from the ones in the list

* account for the fact that previews have been cloned

Author: lerouxb

packages/compass-crud/src/stores/crud-store.spec.ts

@@ -1021,8 +1021,14 @@ describe('store', function () {
 
       store.openBulkDeleteDialog();
 
+      const previews = store.state.bulkDelete.previews;
+
+      // because we make a copy of the previews what comes out will not be the
+      // same as what goes in so just check the previews separately
+      expect(previews[0].doc.a).to.deep.equal(new Int32(1));
+
       expect(store.state.bulkDelete).to.deep.equal({
-        previews: [hadronDoc],
+        previews,
         status: 'open',
         affected: 1,
       });
@@ -1036,8 +1042,13 @@ describe('store', function () {
       store.openBulkDeleteDialog();
       store.closeBulkDeleteDialog();
 
+      const previews = store.state.bulkDelete.previews;
+
+      // same comment as above
+      expect(previews[0].doc.a).to.deep.equal(new Int32(1));
+
       expect(store.state.bulkDelete).to.deep.equal({
-        previews: [hadronDoc],
+        previews,
         status: 'closed',
         affected: 1,
       });

packages/compass-crud/src/stores/crud-store.ts

@@ -1859,9 +1859,18 @@ class CrudStoreImpl
 
     const PREVIEW_DOCS = 5;
 
+    const previews = (this.state.docs?.slice(0, PREVIEW_DOCS) || []).map(
+      (doc) => {
+        // The idea is just to break the link with the docs in the list so that
+        // expanding/collapsing docs in the modal doesn't modify the ones in the
+        // list.
+        return Document.FromEJSON(doc.toEJSON());
+      }
+    );
+
     this.setState({
       bulkDelete: {
-        previews: this.state.docs?.slice(0, PREVIEW_DOCS) || [],
+        previews,
         status: 'open',
         affected: this.state.count ?? undefined,
       },