Merge branch 'COMPASS-9523-move-export-state-to-redux' of https://github.com/mongodb-js/compass into COMPASS-9523-move-export-state-to-redux

Author: mabaasit

package-lock.json

@@ -11,12 +11,13 @@ import { actionTestId } from './utils';
 import { ActionGlyph } from './action-glyph';
 import { isSeparatorMenuAction, type MenuAction } from './item-action-menu';
 
-const hiddenOnNarrowStyles = css({
-  [`@container ${WorkspaceContainer.toolbarContainerQueryName} (width < 900px)`]:
-    {
-      display: 'none',
-    },
-});
+const getHiddenOnNarrowStyles = (narrowBreakpoint: string) =>
+  css({
+    [`@container ${WorkspaceContainer.toolbarContainerQueryName} (width < ${narrowBreakpoint})`]:
+      {
+        display: 'none',
+      },
+  });
 
 export type DropdownMenuButtonProps<Action extends string> = {
   actions: MenuAction<Action>[];
@@ -29,6 +30,7 @@ export type DropdownMenuButtonProps<Action extends string> = {
   buttonText: string;
   buttonProps: ButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>;
   hideOnNarrow?: boolean;
+  narrowBreakpoint?: string;
 };
 
 export function DropdownMenuButton<Action extends string>({
@@ -42,6 +44,7 @@ export function DropdownMenuButton<Action extends string>({
   iconSize = ItemActionButtonSize.Default,
   'data-testid': dataTestId,
   hideOnNarrow = true,
+  narrowBreakpoint = '900px',
 }: DropdownMenuButtonProps<Action>) {
   // This ref is used by the Menu component to calculate the height and position
   // of the menu.
@@ -97,7 +100,13 @@ export function DropdownMenuButton<Action extends string>({
             {...buttonProps}
           >
             {buttonText && (
-              <span className={hideOnNarrow ? hiddenOnNarrowStyles : undefined}>
+              <span
+                className={
+                  hideOnNarrow
+                    ? getHiddenOnNarrowStyles(narrowBreakpoint)
+                    : undefined
+                }
+              >
                 {buttonText}
               </span>
             )}

packages/compass-components/src/components/actions/dropdown-menu-button.tsx

@@ -0,0 +1,121 @@
+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 { HadronElement } from './element';
+import type { Element } from 'hadron-document';
+
+describe('HadronElement', function () {
+  describe('context menu', function () {
+    let doc: HadronDocument;
+    let element: Element;
+    let windowOpenStub: sinon.SinonStub;
+    let clipboardWriteTextStub: sinon.SinonStub;
+
+    beforeEach(function () {
+      doc = new HadronDocument({ field: 'value' });
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      element = doc.elements.at(0)!;
+      windowOpenStub = sinon.stub(window, 'open');
+      clipboardWriteTextStub = sinon.stub(navigator.clipboard, 'writeText');
+    });
+
+    afterEach(function () {
+      windowOpenStub.restore();
+      clipboardWriteTextStub.restore();
+    });
+
+    it('copies field and value when "Copy field & value" is clicked', function () {
+      render(
+        <HadronElement
+          value={element}
+          editable={true}
+          editingEnabled={true}
+          lineNumberSize={1}
+          onAddElement={() => {}}
+        />
+      );
+
+      // Open context menu and click the copy option
+      const elementNode = screen.getByTestId('hadron-document-element');
+      userEvent.click(elementNode, { button: 2 });
+      userEvent.click(screen.getByText('Copy field & value'), undefined, {
+        skipPointerEventsCheck: true,
+      });
+
+      expect(clipboardWriteTextStub).to.have.been.calledWith('field: "value"');
+    });
+
+    it('shows "Open URL in browser" for URL string values', function () {
+      const urlDoc = new HadronDocument({ link: 'https://mongodb.com' });
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      const urlElement = urlDoc.elements.at(0)!;
+
+      render(
+        <HadronElement
+          value={urlElement}
+          editable={true}
+          editingEnabled={true}
+          lineNumberSize={1}
+          onAddElement={() => {}}
+        />
+      );
+
+      // Open context menu
+      const elementNode = screen.getByTestId('hadron-document-element');
+      userEvent.click(elementNode, { button: 2 });
+
+      // Check if the menu item exists
+      expect(screen.getByText('Open URL in browser')).to.exist;
+    });
+
+    it('opens URL in new tab when "Open URL in browser" is clicked', function () {
+      const urlDoc = new HadronDocument({ link: 'https://mongodb.com' });
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      const urlElement = urlDoc.elements.at(0)!;
+
+      render(
+        <HadronElement
+          value={urlElement}
+          editable={true}
+          editingEnabled={true}
+          lineNumberSize={1}
+          onAddElement={() => {}}
+        />
+      );
+
+      // Open context menu and click the open URL option
+      const elementNode = screen.getByTestId('hadron-document-element');
+      userEvent.click(elementNode, { button: 2 });
+      userEvent.click(screen.getByText('Open URL in browser'), undefined, {
+        skipPointerEventsCheck: true,
+      });
+
+      expect(windowOpenStub).to.have.been.calledWith(
+        'https://mongodb.com',
+        '_blank',
+        'noopener'
+      );
+    });
+
+    it('does not show "Open URL in browser" for non-URL string values', function () {
+      render(
+        <HadronElement
+          value={element}
+          editable={true}
+          editingEnabled={true}
+          lineNumberSize={1}
+          onAddElement={() => {}}
+        />
+      );
+
+      // Open context menu
+      const elementNode = screen.getByTestId('hadron-document-element');
+      userEvent.click(elementNode, { button: 2 });
+
+      // Check that the menu item doesn't exist
+      expect(screen.queryByText('Open URL in browser')).to.not.exist;
+    });
+  });
+});