fix: rename to stop editing and properly handle editing finished

Author: gagik

packages/compass-components/src/components/document-list/document-edit-actions-footer.tsx

@@ -166,6 +166,10 @@ function useHadronDocumentStatus(
       updateStatus('DeleteError', err, errorDetails);
     };
 
+    const onEditingFinished = () => {
+      updateStatus('Initial');
+    };
+
     doc.on(ElementEvents.Added, onUpdate);
     doc.on(ElementEvents.Edited, onUpdate);
     doc.on(ElementEvents.Removed, onUpdate);
@@ -179,6 +183,7 @@ function useHadronDocumentStatus(
     doc.on(DocumentEvents.RemoveStarted, onRemoveStart);
     doc.on(DocumentEvents.RemoveSuccess, onRemoveSuccess);
     doc.on(DocumentEvents.RemoveError, onRemoveError);
+    doc.on(DocumentEvents.EditingFinished, onEditingFinished);
 
     return () => {
       doc.on(ElementEvents.Added, onUpdate);
@@ -194,6 +199,7 @@ function useHadronDocumentStatus(
       doc.off(DocumentEvents.RemoveStarted, onRemoveStart);
       doc.off(DocumentEvents.RemoveSuccess, onRemoveSuccess);
       doc.off(DocumentEvents.RemoveError, onRemoveError);
+      doc.off(DocumentEvents.EditingFinished, onEditingFinished);
     };
   }, [doc, updateStatus]);
 

packages/compass-crud/src/components/use-document-item-context-menu.spec.tsx

@@ -103,7 +103,7 @@ describe('useDocumentItemContextMenu', function () {
       userEvent.click(screen.getByTestId('test-container'), { button: 2 });
 
       // Should show "Stop editing" when editing
-      expect(screen.getByText('Stop editing')).to.exist;
+      expect(screen.getByText('Cancel editing')).to.exist;
       expect(screen.queryByText('Edit document')).to.not.exist;
       // But show other operations
       expect(screen.getByText('Expand all fields')).to.exist;
@@ -182,7 +182,7 @@ describe('useDocumentItemContextMenu', function () {
 
       // Should show "Edit document" when not editing
       expect(screen.getByText('Edit document')).to.exist;
-      expect(screen.queryByText('Stop editing')).to.not.exist;
+      expect(screen.queryByText('Cancel editing')).to.not.exist;
 
       // Click edit
       userEvent.click(screen.getByText('Edit document'), undefined, {
@@ -207,11 +207,11 @@ describe('useDocumentItemContextMenu', function () {
       userEvent.click(screen.getByTestId('test-container'), { button: 2 });
 
       // Should show "Stop editing" when editing
-      expect(screen.getByText('Stop editing')).to.exist;
+      expect(screen.getByText('Cancel editing')).to.exist;
       expect(screen.queryByText('Edit document')).to.not.exist;
 
       // Click stop editing
-      userEvent.click(screen.getByText('Stop editing'), undefined, {
+      userEvent.click(screen.getByText('Cancel editing'), undefined, {
         skipPointerEventsCheck: true,
       });
 

packages/compass-crud/src/components/use-document-item-context-menu.tsx

@@ -1,5 +1,5 @@
 import type HadronDocument from 'hadron-document';
-import { useContextMenuItems } from '@mongodb-js/compass-components';
+import { useContextMenuGroups } from '@mongodb-js/compass-components';
 
 import type { DocumentProps } from './document';
 
@@ -15,57 +15,61 @@ export function useDocumentItemContextMenu({
   openInsertDocumentDialog,
 }: UseDocumentItemContextMenuProps) {
   const { expanded: isExpanded, editing: isEditing } = doc;
-  return useContextMenuItems(
+  return useContextMenuGroups(
     () => [
-      {
-        label: isExpanded ? 'Collapse all fields' : 'Expand all fields',
-        onAction: () => {
-          if (isExpanded) {
-            doc.collapse();
-          } else {
-            doc.expand();
-          }
-        },
-      },
-      ...(isEditable
-        ? [
-            {
-              label: isEditing ? 'Stop editing' : 'Edit document',
-              onAction: () => {
-                if (isEditing) {
-                  doc.finishEditing();
-                } else {
-                  doc.startEditing();
-                }
+      [
+        ...(isEditable
+          ? [
+              {
+                label: isEditing ? 'Cancel editing' : 'Edit document',
+                onAction: () => {
+                  if (isEditing) {
+                    doc.finishEditing();
+                  } else {
+                    doc.startEditing();
+                  }
+                },
               },
-            },
-          ]
-        : []),
-      {
-        label: 'Copy document',
-        onAction: () => {
-          copyToClipboard?.(doc);
+            ]
+          : []),
+      ],
+      [
+        {
+          label: isExpanded ? 'Collapse all fields' : 'Expand all fields',
+          onAction: () => {
+            if (isExpanded) {
+              doc.collapse();
+            } else {
+              doc.expand();
+            }
+          },
+        },
+        {
+          label: 'Copy document',
+          onAction: () => {
+            copyToClipboard?.(doc);
+          },
         },
-      },
-      ...(isEditable
-        ? [
-            {
-              label: 'Clone document...',
-              onAction: () => {
-                const clonedDoc = doc.generateObject({
-                  excludeInternalFields: true,
-                });
-                void openInsertDocumentDialog?.(clonedDoc, true);
+        ...(isEditable
+          ? [
+              {
+                label: 'Clone document...',
+                onAction: () => {
+                  const clonedDoc = doc.generateObject({
+                    excludeInternalFields: true,
+                  });
+                  void openInsertDocumentDialog?.(clonedDoc, true);
+                },
               },
-            },
-            {
-              label: 'Delete document',
-              onAction: () => {
-                doc.markForDeletion();
+              {
+                label: 'Delete document',
+                onAction: () => {
+                  doc.markForDeletion();
+                },
               },
-            },
-          ]
-        : []),
+            ]
+          : []),
+      ],
     ],
     [
       doc,