WIP

Author: kraenhansen

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

@@ -6,9 +6,14 @@ import React, {
   createContext,
   useContext,
 } from 'react';
+
 import type { ContextMenuContextType, ContextMenuState } from './types';
-import type { EnhancedMouseEvent } from './context-menu-content';
-import { getContextMenuContent } from './context-menu-content';
+import {
+  getContextMenuContent,
+  type EnhancedMouseEvent,
+} from './context-menu-content';
+
+import { usePreference } from 'compass-preferences-model/provider';
 
 export const ContextMenuContext = createContext<ContextMenuContextType | null>(
   null
@@ -45,9 +50,11 @@ export function ContextMenuProvider({
     [close]
   );
 
+  const enabled = usePreference('enableContextMenus');
+
   useEffect(() => {
     // Don't set up event listeners if we have a parent context
-    if (parentContext) return;
+    if (parentContext || !enabled) return;
 
     function handleContextMenu(event: MouseEvent) {
       event.preventDefault();
@@ -76,7 +83,7 @@ export function ContextMenuProvider({
       document.removeEventListener('contextmenu', handleContextMenu);
       window.removeEventListener('resize', handleClosingEvent);
     };
-  }, [handleClosingEvent, parentContext]);
+  }, [enabled, handleClosingEvent, parentContext]);
 
   const value = useMemo(
     () => ({

packages/compass-preferences-model/src/feature-flags.ts

@@ -26,6 +26,7 @@ export type FeatureFlags = {
   enableDataModeling: boolean;
   enableIndexesGuidanceExp: boolean;
   showIndexesGuidanceVariant: boolean;
+  enableContextMenus: boolean;
 };
 
 export const featureFlags: Required<{
@@ -140,4 +141,11 @@ export const featureFlags: Required<{
         'Used to check if user is in the Indexes Guidance Experiment Variant',
     },
   },
+
+  enableContextMenus: {
+    stage: 'development',
+    description: {
+      short: 'Enable context (right-click) menus',
+    },
+  },
 };

packages/compass-welcome/src/components/desktop-welcome-tab.tsx

@@ -14,6 +14,7 @@ import {
   cx,
   useDarkMode,
   Icon,
+  useContextMenuItems,
 } from '@mongodb-js/compass-components';
 import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
 import { useConnectionActions } from '@mongodb-js/compass-connections/provider';
@@ -69,8 +70,14 @@ function AtlasHelpSection(): React.ReactElement {
   const track = useTelemetry();
   const darkMode = useDarkMode();
 
+  const menuRef = useContextMenuItems(
+    () => [{ label: 'Click me', onAction() {} }],
+    []
+  );
+
   return (
     <div
+      ref={menuRef}
       className={cx(
         sectionContainerStyles,
         atlasContainerStyles,