feat: add "Stop editing" to the right click menu and fix check

Author: gagik

packages/compass-crud/src/components/document-json-view-item.tsx

@@ -4,7 +4,7 @@ import { css, KeylineCard } from '@mongodb-js/compass-components';
 
 import JSONEditor, { type JSONEditorProps } from './json-editor';
 import { useDocumentItemContextMenu } from './use-document-item-context-menu';
-import { mergeRefs } from '@react-aria/utils';
+import { useMergeRefs } from '@mongodb-js/compass-components';
 
 const keylineCardStyles = css({
   overflow: 'hidden',
@@ -49,11 +49,10 @@ const DocumentJsonViewItem: React.FC<DocumentJsonViewItemProps> = ({
     openInsertDocumentDialog,
   });
 
+  const mergedRef = useMergeRefs([docRef, contextMenuRef]);
+
   return (
-    <KeylineCard
-      className={keylineCardStyles}
-      ref={mergeRefs(docRef, contextMenuRef)}
-    >
+    <KeylineCard className={keylineCardStyles} ref={mergedRef}>
       {scrollTriggerRef && docIndex === 0 && <div ref={scrollTriggerRef} />}
       <JSONEditor
         doc={doc}

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

@@ -30,6 +30,7 @@ describe('useDocumentItemContextMenu', function () {
   let collapseStub: sinon.SinonStub;
   let expandStub: sinon.SinonStub;
   let startEditingStub: sinon.SinonStub;
+  let finishEditingStub: sinon.SinonStub;
   let markForDeletionStub: sinon.SinonStub;
   let generateObjectStub: sinon.SinonStub;
 
@@ -47,6 +48,7 @@ describe('useDocumentItemContextMenu', function () {
     collapseStub = sinon.stub(doc, 'collapse');
     expandStub = sinon.stub(doc, 'expand');
     startEditingStub = sinon.stub(doc, 'startEditing');
+    finishEditingStub = sinon.stub(doc, 'finishEditing');
     markForDeletionStub = sinon.stub(doc, 'markForDeletion');
     generateObjectStub = sinon.stub(doc, 'generateObject').returns({
       _id: 1,
@@ -84,7 +86,7 @@ describe('useDocumentItemContextMenu', function () {
       expect(screen.getByText('Delete document')).to.exist;
     });
 
-    it('hides edit document when document is editing', function () {
+    it('shows "Stop editing" when document is editing', function () {
       doc.expanded = false;
       doc.editing = true;
 
@@ -100,7 +102,8 @@ describe('useDocumentItemContextMenu', function () {
       // Right-click to open context menu
       userEvent.click(screen.getByTestId('test-container'), { button: 2 });
 
-      // Should hide edit document when editing
+      // Should show "Stop editing" when editing
+      expect(screen.getByText('Stop editing')).to.exist;
       expect(screen.queryByText('Edit document')).to.not.exist;
       // But show other operations
       expect(screen.getByText('Expand all fields')).to.exist;
@@ -162,8 +165,9 @@ describe('useDocumentItemContextMenu', function () {
     });
   });
 
-  describe('functionality', function () {
-    beforeEach(function () {
+  describe('edit document functionality', function () {
+    it('starts editing when "Edit document" is clicked', function () {
+      doc.editing = false;
       render(
         <TestComponent
           doc={doc}
@@ -172,32 +176,71 @@ describe('useDocumentItemContextMenu', function () {
           openInsertDocumentDialog={openInsertDocumentDialogStub}
         />
       );
-    });
-
-    it('toggles expand/collapse correctly', function () {
-      doc.expanded = false;
 
       // Right-click to open context menu
       userEvent.click(screen.getByTestId('test-container'), { button: 2 });
 
-      // Click expand
-      userEvent.click(screen.getByText('Expand all fields'));
+      // Should show "Edit document" when not editing
+      expect(screen.getByText('Edit document')).to.exist;
+      expect(screen.queryByText('Stop editing')).to.not.exist;
 
-      expect(expandStub).to.have.been.calledOnce;
+      // Click edit
+      userEvent.click(screen.getByText('Edit document'), undefined, {
+        skipPointerEventsCheck: true,
+      });
+
+      expect(startEditingStub).to.have.been.calledOnce;
     });
 
-    it('starts editing when edit is clicked', function () {
-      doc.editing = false;
+    it('stops editing when "Stop editing" is clicked', function () {
+      doc.editing = true;
+      render(
+        <TestComponent
+          doc={doc}
+          isEditable={true}
+          copyToClipboard={copyToClipboardStub}
+          openInsertDocumentDialog={openInsertDocumentDialogStub}
+        />
+      );
 
       // Right-click to open context menu
       userEvent.click(screen.getByTestId('test-container'), { button: 2 });
 
-      // Click edit
-      userEvent.click(screen.getByText('Edit document'), undefined, {
+      // Should show "Stop editing" when editing
+      expect(screen.getByText('Stop editing')).to.exist;
+      expect(screen.queryByText('Edit document')).to.not.exist;
+
+      // Click stop editing
+      userEvent.click(screen.getByText('Stop editing'), undefined, {
         skipPointerEventsCheck: true,
       });
 
-      expect(startEditingStub).to.have.been.calledOnce;
+      expect(finishEditingStub).to.have.been.calledOnce;
+    });
+  });
+
+  describe('functionality', function () {
+    beforeEach(function () {
+      render(
+        <TestComponent
+          doc={doc}
+          isEditable={true}
+          copyToClipboard={copyToClipboardStub}
+          openInsertDocumentDialog={openInsertDocumentDialogStub}
+        />
+      );
+    });
+
+    it('toggles expand/collapse correctly', function () {
+      doc.expanded = false;
+
+      // Right-click to open context menu
+      userEvent.click(screen.getByTestId('test-container'), { button: 2 });
+
+      // Click expand
+      userEvent.click(screen.getByText('Expand all fields'));
+
+      expect(expandStub).to.have.been.calledOnce;
     });
 
     it('calls copyToClipboard when copy is clicked', function () {

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

@@ -27,12 +27,16 @@ export function useDocumentItemContextMenu({
           }
         },
       },
-      ...(isEditable && !isEditing
+      ...(isEditable
         ? [
             {
-              label: 'Edit document',
+              label: isEditing ? 'Stop editing' : 'Edit document',
               onAction: () => {
-                doc.startEditing();
+                if (isEditing) {
+                  doc.finishEditing();
+                } else {
+                  doc.startEditing();
+                }
               },
             },
           ]