fix: correct Compass Context Menu wrapper usage (#7042)

Author: gagik

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import { render } from '@mongodb-js/testing-library-compass';
+import { expect } from 'chai';
+import { ContextMenuProvider } from './context-menu-provider';
+import type { ContextMenuWrapperProps } from './types';
+
+describe('ContextMenuProvider', function () {
+  const TestMenu: React.FC<ContextMenuWrapperProps> = () => (
+    <div data-testid="test-menu">Test Menu</div>
+  );
+
+  const TestComponent = () => (
+    <div data-testid="test-content">Test Content</div>
+  );
+
+  describe('when nested', function () {
+    it('throws an error when providers are nested', function () {
+      expect(() => {
+        render(
+          <ContextMenuProvider menuWrapper={TestMenu}>
+            <div>
+              <ContextMenuProvider menuWrapper={TestMenu}>
+                <TestComponent />
+              </ContextMenuProvider>
+            </div>
+          </ContextMenuProvider>
+        );
+      }).to.throw(
+        'Duplicated ContextMenuProvider found. Please remove the nested provider.'
+      );
+    });
+  });
+
+  describe('when not nested', function () {
+    it('renders without error', function () {
+      render(
+        <ContextMenuProvider menuWrapper={TestMenu}>
+          <TestComponent />
+        </ContextMenuProvider>
+      );
+
+      expect(document.querySelector('[data-testid="test-content"]')).to.exist;
+    });
+  });
+});

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

@@ -4,6 +4,7 @@ import React, {
   useState,
   useMemo,
   createContext,
+  useContext,
 } from 'react';
 import type { ContextMenuContextType, ContextMenuState } from './types';
 import type { EnhancedMouseEvent } from './context-menu-content';
@@ -22,6 +23,16 @@ export function ContextMenuProvider({
     menu: ContextMenuState & { close: () => void };
   }>;
 }) {
+  // Check if there's already a parent context menu provider
+  const parentContext = useContext(ContextMenuContext);
+
+  // Prevent accidental nested providers
+  if (parentContext) {
+    throw new Error(
+      'Duplicated ContextMenuProvider found. Please remove the nested provider.'
+    );
+  }
+
   const [menu, setMenu] = useState<ContextMenuState>({
     isOpen: false,
     itemGroups: [],

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

@@ -136,7 +136,7 @@ describe('useContextMenu', function () {
 
     it('renders without error', function () {
       render(
-        <ContextMenuProvider wrapper={TestMenu}>
+        <ContextMenuProvider menuWrapper={TestMenu}>
           <TestComponent />
         </ContextMenuProvider>
       );
@@ -148,7 +148,7 @@ describe('useContextMenu', function () {
       const onRegister = sinon.spy();
 
       render(
-        <ContextMenuProvider wrapper={TestMenu}>
+        <ContextMenuProvider menuWrapper={TestMenu}>
           <TestComponent onRegister={onRegister} />
         </ContextMenuProvider>
       );
@@ -159,7 +159,7 @@ describe('useContextMenu', function () {
 
     it('shows context menu on right click', function () {
       render(
-        <ContextMenuProvider wrapper={TestMenu}>
+        <ContextMenuProvider menuWrapper={TestMenu}>
           <TestComponent />
         </ContextMenuProvider>
       );
@@ -174,7 +174,7 @@ describe('useContextMenu', function () {
     describe('with nested context menus', function () {
       it('shows only parent items when right clicking parent area', function () {
         render(
-          <ContextMenuProvider wrapper={TestMenu}>
+          <ContextMenuProvider menuWrapper={TestMenu}>
             <ParentComponent />
           </ContextMenuProvider>
         );
@@ -193,7 +193,7 @@ describe('useContextMenu', function () {
 
       it('shows both parent and child items when right clicking child area', function () {
         render(
-          <ContextMenuProvider wrapper={TestMenu}>
+          <ContextMenuProvider menuWrapper={TestMenu}>
             <ParentComponent>
               <ChildComponent />
             </ParentComponent>
@@ -215,7 +215,7 @@ describe('useContextMenu', function () {
         const childOnAction = sinon.spy();
 
         render(
-          <ContextMenuProvider wrapper={TestMenu}>
+          <ContextMenuProvider menuWrapper={TestMenu}>
             <ParentComponent onAction={parentOnAction}>
               <ChildComponent onAction={childOnAction} />
             </ParentComponent>
@@ -238,7 +238,7 @@ describe('useContextMenu', function () {
         const childOnAction = sinon.spy();
 
         render(
-          <ContextMenuProvider wrapper={TestMenu}>
+          <ContextMenuProvider menuWrapper={TestMenu}>
             <ParentComponent onAction={parentOnAction}>
               <ChildComponent onAction={childOnAction} />
             </ParentComponent>