feat(compass-components): add context menu COMPASS-9386

configs/eslint-config-compass/index.js

@@ -46,7 +46,7 @@ const tsxRules = {
   'react-hooks/exhaustive-deps': [
     'warn',
     {
-      additionalHooks: 'useTrackOnChange',
+      additionalHooks: '(useTrackOnChange|useContextMenuItems)',
     },
   ],
 };

packages/compass-components/src/components/compass-components-provider.tsx

@@ -6,6 +6,7 @@ import { GuideCueProvider } from './guide-cue/guide-cue';
 import { SignalHooksProvider } from './signal-popover';
 import { RequiredURLSearchParamsProvider } from './links/link';
 import { StackedComponentProvider } from '../hooks/use-stacked-component';
+import { ContextMenuProvider } from './context-menu';
 
 type GuideCueProviderProps = React.ComponentProps<typeof GuideCueProvider>;
 
@@ -135,15 +136,17 @@ export const CompassComponentsProvider = ({
           >
             <SignalHooksProvider {...signalHooksProviderProps}>
               <ConfirmationModalArea>
-                <ToastArea>
-                  {typeof children === 'function'
-                    ? children({
-                        darkMode,
-                        portalContainerRef: setPortalContainer,
-                        scrollContainerRef: setScrollContainer,
-                      })
-                    : children}
-                </ToastArea>
+                <ContextMenuProvider>
+                  <ToastArea>
+                    {typeof children === 'function'
+                      ? children({
+                          darkMode,
+                          portalContainerRef: setPortalContainer,
+                          scrollContainerRef: setScrollContainer,
+                        })
+                      : children}
+                  </ToastArea>
+                </ContextMenuProvider>
               </ConfirmationModalArea>
             </SignalHooksProvider>
           </GuideCueProvider>

packages/compass-components/src/components/content-with-fallback.spec.tsx

@@ -58,7 +58,10 @@ describe('ContentWithFallback', function () {
       { container }
     );
 
-    expect(container).to.be.empty;
+    expect(container.children.length).to.equal(1);
+    expect(container.children[0].getAttribute('data-testid')).to.equal(
+      'context-menu'
+    );
   });
 
   it('should render fallback when the timeout passes', async function () {

packages/compass-components/src/components/context-menu.spec.tsx

@@ -0,0 +1,161 @@
+import React from 'react';
+import { render, screen, userEvent } from '@mongodb-js/testing-library-compass';
+import { expect } from 'chai';
+import sinon from 'sinon';
+import { ContextMenuProvider } from '@mongodb-js/compass-context-menu';
+import { useContextMenuItems, ContextMenu } from './context-menu';
+import type { ContextMenuItem } from '@mongodb-js/compass-context-menu';
+
+describe('useContextMenuItems', function () {
+  const menuTestTriggerId = 'test-trigger';
+
+  const TestComponent = ({
+    items,
+    children,
+    'data-testid': dataTestId = menuTestTriggerId,
+  }: {
+    items: ContextMenuItem[];
+    children?: React.ReactNode;
+    'data-testid'?: string;
+  }) => {
+    const ref = useContextMenuItems(() => items, [items]);
+
+    return (
+      <div data-testid={dataTestId} ref={ref}>
+        Test Component
+        {children}
+      </div>
+    );
+  };
+
+  it('errors if the component is double wrapped', function () {
+    const items = [
+      {
+        label: 'Test Item',
+        onAction: () => {},
+      },
+    ];
+
+    expect(() => {
+      render(
+        <ContextMenuProvider menuWrapper={ContextMenu}>
+          <TestComponent items={items} />
+        </ContextMenuProvider>
+      );
+    }).to.throw(
+      'Duplicated ContextMenuProvider found. Please remove the nested provider.'
+    );
+  });
+
+  it('renders without error', function () {
+    const items = [
+      {
+        label: 'Test Item',
+        onAction: () => {},
+      },
+    ];
+
+    render(<TestComponent items={items} />);
+
+    expect(screen.getByTestId(menuTestTriggerId)).to.exist;
+  });
+
+  it('shows context menu with items on right click', function () {
+    const items = [
+      {
+        label: 'Test Item 1',
+        onAction: () => {},
+      },
+      {
+        label: 'Test Item 2',
+        onAction: () => {},
+      },
+    ];
+
+    render(<TestComponent items={items} />);
+
+    const trigger = screen.getByTestId(menuTestTriggerId);
+    userEvent.click(trigger, { button: 2 });
+
+    // The menu items should be rendered
+    expect(screen.getByTestId('menu-group-0-item-0')).to.exist;
+    expect(screen.getByTestId('menu-group-0-item-1')).to.exist;
+  });
+
+  it('triggers the correct action when menu item is clicked', function () {
+    const onAction = sinon.spy();
+    const items = [
+      {
+        label: 'Test Item 1',
+        onAction: () => onAction(1),
+      },
+      {
+        label: 'Test Item 2',
+        onAction: () => onAction(2),
+      },
+    ];
+
+    render(<TestComponent items={items} />);
+
+    const trigger = screen.getByTestId(menuTestTriggerId);
+    userEvent.click(trigger, { button: 2 });
+
+    const menuItem = screen.getByTestId('menu-group-0-item-1');
+    userEvent.click(menuItem);
+
+    expect(onAction).to.have.been.calledOnceWithExactly(2);
+  });
+
+  describe('with nested components', function () {
+    const childTriggerId = 'child-trigger';
+
+    beforeEach(function () {
+      const items = [
+        {
+          label: 'Test Item 1',
+          onAction: () => {},
+        },
+        {
+          label: 'Test Item 2',
+          onAction: () => {},
+        },
+      ];
+
+      const childItems = [
+        {
+          label: 'Child Item 1',
+          onAction: () => {},
+        },
+      ];
+
+      render(
+        <TestComponent items={items}>
+          <TestComponent items={childItems} data-testid={childTriggerId} />
+        </TestComponent>
+      );
+    });
+
+    it('renders menu items with separators', function () {
+      const trigger = screen.getByTestId(childTriggerId);
+      userEvent.click(trigger, { button: 2 });
+
+      // Should find the menu item and the separator
+      expect(screen.getByTestId('menu-group-0').children.length).to.equal(2);
+      expect(
+        screen.getByTestId('menu-group-0').children.item(0)?.textContent
+      ).to.equal('Child Item 1');
+
+      expect(screen.getByTestId('menu-group-0-separator')).to.exist;
+
+      expect(screen.getByTestId('menu-group-1').children.length).to.equal(2);
+      expect(
+        screen.getByTestId('menu-group-1').children.item(0)?.textContent
+      ).to.equal('Test Item 1');
+      expect(
+        screen.getByTestId('menu-group-1').children.item(1)?.textContent
+      ).to.equal('Test Item 2');
+
+      expect(screen.queryByTestId('menu-group-1-separator')).not.to.exist;
+    });
+  });
+});

packages/compass-components/src/components/context-menu.tsx

@@ -0,0 +1,97 @@
+import React, { useEffect, useMemo } from 'react';
+import { Menu, MenuItem, MenuSeparator } from './leafygreen';
+import type { ContextMenuItem } from '@mongodb-js/compass-context-menu';
+import { useContextMenu } from '@mongodb-js/compass-context-menu';
+import { ContextMenuProvider as ContextMenuProviderBase } from '@mongodb-js/compass-context-menu';
+import type {
+  ContextMenuItemGroup,
+  ContextMenuWrapperProps,
+} from '@mongodb-js/compass-context-menu';
+
+export function ContextMenuProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <ContextMenuProviderBase menuWrapper={ContextMenu}>
+      {children}
+    </ContextMenuProviderBase>
+  );
+}
+
+export function ContextMenu({ menu }: ContextMenuWrapperProps) {
+  const position = menu.position;
+  const itemGroups = menu.itemGroups;
+
+  useEffect(() => {
+    if (!menu.isOpen) {
+      menu.close();
+    }
+  }, [menu.isOpen]);
+
+  return (
+    <div
+      data-testid="context-menu"
+      style={{
+        position: 'absolute',
+        pointerEvents: 'all',
+        left: position.x,
+        top: position.y,
+      }}
+    >
+      <Menu
+        renderMode="inline"
+        open={menu.isOpen}
+        setOpen={menu.close}
+        justify="start"
+      >
+        {itemGroups.map(
+          (itemGroup: ContextMenuItemGroup, groupIndex: number) => {
+            return (
+              <div
+                key={`menu-group-${groupIndex}`}
+                data-testid={`menu-group-${groupIndex}`}
+              >
+                {itemGroup.items.map(
+                  (item: ContextMenuItem, itemIndex: number) => {
+                    return (
+                      <MenuItem
+                        key={`menu-group-${groupIndex}-item-${itemIndex}`}
+                        data-text={item.label}
+                        data-testid={`menu-group-${groupIndex}-item-${itemIndex}`}
+                        onClick={(evt: React.MouseEvent) => {
+                          item.onAction?.(evt);
+                          menu.close();
+                        }}
+                      >
+                        {item.label}
+                      </MenuItem>
+                    );
+                  }
+                )}
+                {groupIndex < itemGroups.length - 1 && (
+                  <div
+                    key={`menu-group-${groupIndex}-separator`}
+                    data-testid={`menu-group-${groupIndex}-separator`}
+                  >
+                    <MenuSeparator />
+                  </div>
+                )}
+              </div>
+            );
+          }
+        )}
+      </Menu>
+    </div>
+  );
+}
+
+export function useContextMenuItems(
+  getItems: () => ContextMenuItem[],
+  dependencies: React.DependencyList | undefined
+): React.RefCallback<HTMLElement> {
+  const memoizedItems = useMemo(getItems, dependencies);
+  const contextMenu = useContextMenu();
+  return contextMenu.registerItems(memoizedItems);
+}

packages/compass-components/src/index.ts

@@ -97,6 +97,8 @@ export { ModalHeader } from './components/modals/modal-header';
 export { FormModal } from './components/modals/form-modal';
 export { InfoModal } from './components/modals/info-modal';
 
+export { useContextMenuItems } from './components/context-menu';
+
 export type {
   FileInputBackend,
   ItemAction,

packages/compass-context-menu/src/context-menu-provider.spec.tsx

@@ -1,9 +1,12 @@
 import React from 'react';
-import { render } from '@mongodb-js/testing-library-compass';
+import { testingLibrary } from '@mongodb-js/testing-library-compass';
 import { expect } from 'chai';
 import { ContextMenuProvider } from './context-menu-provider';
 import type { ContextMenuWrapperProps } from './types';
 
+// We need to import from testing-library-compass directly to avoid the extra wrapping.
+const { render } = testingLibrary;
+
 describe('ContextMenuProvider', function () {
   const TestMenu: React.FC<ContextMenuWrapperProps> = () => (
     <div data-testid="test-menu">Test Menu</div>

packages/compass-context-menu/src/use-context-menu.spec.tsx

@@ -1,11 +1,18 @@
 import React from 'react';
-import { render, screen, userEvent } from '@mongodb-js/testing-library-compass';
+import {
+  screen,
+  userEvent,
+  testingLibrary,
+} from '@mongodb-js/testing-library-compass';
 import { expect } from 'chai';
 import sinon from 'sinon';
 import { useContextMenu } from './use-context-menu';
 import { ContextMenuProvider } from './context-menu-provider';
 import type { ContextMenuItem, ContextMenuWrapperProps } from './types';
 
+// We need to import from testing-library-compass directly to avoid the extra wrapping.
+const { render } = testingLibrary;
+
 describe('useContextMenu', function () {
   const TestMenu: React.FC<ContextMenuWrapperProps> = ({ menu }) => (
     <div data-testid="test-menu">