fix: use a shared hook and minimize test duplication

Author: gagik

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

@@ -0,0 +1,107 @@
+import React from 'react';
+import { render, screen, userEvent } from '@mongodb-js/testing-library-compass';
+import { expect } from 'chai';
+import sinon from 'sinon';
+import HadronDocument from 'hadron-document';
+import { DocumentJsonViewItem } from './document-json-view-item';
+
+describe('DocumentJsonViewItem', function () {
+  let doc: HadronDocument;
+  let copyToClipboardStub: sinon.SinonStub;
+  let openInsertDocumentDialogStub: sinon.SinonStub;
+
+  beforeEach(function () {
+    doc = new HadronDocument({
+      _id: 1,
+      name: 'test',
+      url: 'https://mongodb.com',
+      nested: { field: 'value' },
+    });
+
+    copyToClipboardStub = sinon.stub();
+    openInsertDocumentDialogStub = sinon.stub();
+  });
+
+  afterEach(function () {
+    sinon.restore();
+  });
+
+  it('renders the JSON editor component', function () {
+    render(
+      <DocumentJsonViewItem
+        doc={doc}
+        docRef={null}
+        docIndex={0}
+        namespace="test.test"
+        isEditable={true}
+        copyToClipboard={copyToClipboardStub}
+        openInsertDocumentDialog={openInsertDocumentDialogStub}
+      />
+    );
+
+    // Should render without error
+    expect(document.querySelector('[data-testid="editable-json"]')).to.exist;
+  });
+
+  it('renders context menu when right-clicked', function () {
+    const { container } = render(
+      <DocumentJsonViewItem
+        doc={doc}
+        docRef={null}
+        docIndex={0}
+        namespace="test.test"
+        isEditable={true}
+        copyToClipboard={copyToClipboardStub}
+        openInsertDocumentDialog={openInsertDocumentDialogStub}
+      />
+    );
+
+    const element = container.firstChild as HTMLElement;
+
+    // Right-click to open context menu
+    userEvent.click(element, { button: 2 });
+
+    // Should show context menu with expected items
+    expect(screen.getByText('Copy document')).to.exist;
+    expect(screen.getByText('Clone document...')).to.exist;
+    expect(screen.getByText('Delete document')).to.exist;
+  });
+
+  it('renders scroll trigger when docIndex is 0', function () {
+    const scrollTriggerRef = React.createRef<HTMLDivElement>();
+
+    render(
+      <DocumentJsonViewItem
+        doc={doc}
+        docRef={null}
+        docIndex={0}
+        namespace="test.test"
+        isEditable={true}
+        scrollTriggerRef={scrollTriggerRef}
+        copyToClipboard={copyToClipboardStub}
+        openInsertDocumentDialog={openInsertDocumentDialogStub}
+      />
+    );
+
+    expect(scrollTriggerRef.current).to.exist;
+  });
+
+  it('does not render scroll trigger when docIndex is not 0', function () {
+    const scrollTriggerRef = React.createRef<HTMLDivElement>();
+
+    render(
+      <DocumentJsonViewItem
+        doc={doc}
+        docRef={null}
+        docIndex={1}
+        namespace="test.test"
+        isEditable={true}
+        scrollTriggerRef={scrollTriggerRef}
+        copyToClipboard={copyToClipboardStub}
+        openInsertDocumentDialog={openInsertDocumentDialogStub}
+      />
+    );
+
+    expect(scrollTriggerRef.current).to.be.null;
+  });
+});

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type HadronDocument from 'hadron-document';
-import { css, KeylineCard, spacing } from '@mongodb-js/compass-components';
+import { css, KeylineCard } from '@mongodb-js/compass-components';
 
 import JSONEditor, { type JSONEditorProps } from './json-editor';
 import { useContextMenuItems } from '@mongodb-js/compass-components';
@@ -43,23 +43,50 @@ const DocumentJsonViewItem: React.FC<DocumentJsonViewItemProps> = ({
 }) => {
   const ref = useContextMenuItems([
     {
-      label: 'Update document',
+      label: doc.expanded ? 'Collapse all fields' : 'Expand all fields',
       onAction: () => {
-        updateDocument?.(doc);
+        if (doc.expanded) {
+          doc.collapse();
+        } else {
+          doc.expand();
+        }
       },
     },
+    ...(isEditable && !doc.editing
+      ? [
+          {
+            label: 'Edit document',
+            onAction: () => {
+              doc.startEditing();
+            },
+          },
+        ]
+      : []),
     {
       label: 'Copy document',
       onAction: () => {
         copyToClipboard?.(doc);
       },
     },
-    {
-      label: 'Delete document',
-      onAction: () => {
-        removeDocument?.(doc);
-      },
-    },
+    ...(isEditable
+      ? [
+          {
+            label: 'Clone document...',
+            onAction: () => {
+              const clonedDoc = doc.generateObject({
+                excludeInternalFields: true,
+              });
+              openInsertDocumentDialog?.(clonedDoc, true);
+            },
+          },
+          {
+            label: 'Delete document',
+            onAction: () => {
+              doc.markForDeletion();
+            },
+          },
+        ]
+      : []),
   ]);
 
   return (