chore(context-menu): context menu feature flag (#7074)

Add and propagate a feature flag

Author: kraenhansen

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

@@ -34,6 +34,11 @@ type CompassComponentsProviderProps = {
    * zIndex for the stacked elements (modal, toast, popover)
    */
   stackedElementsZIndex?: number;
+
+  /**
+   * Set to disable context menus in the application.
+   */
+  disableContextMenus?: boolean;
 } & {
   onNextGuideGue?: GuideCueProviderProps['onNext'];
   onNextGuideCueGroup?: GuideCueProviderProps['onNextGroup'];
@@ -100,6 +105,7 @@ export const CompassComponentsProvider = ({
   utmMedium,
   stackedElementsZIndex,
   popoverPortalContainer: _popoverPortalContainer,
+  disableContextMenus,
   ...signalHooksProviderProps
 }: CompassComponentsProviderProps) => {
   const darkMode = useDarkMode(_darkMode);
@@ -136,7 +142,7 @@ export const CompassComponentsProvider = ({
           >
             <SignalHooksProvider {...signalHooksProviderProps}>
               <ConfirmationModalArea>
-                <ContextMenuProvider>
+                <ContextMenuProvider disabled={disableContextMenus}>
                   <ToastArea>
                     {typeof children === 'function'
                       ? children({

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

@@ -13,11 +13,13 @@ export type { ContextMenuItem } from '@mongodb-js/compass-context-menu';
 
 export function ContextMenuProvider({
   children,
+  disabled,
 }: {
   children: React.ReactNode;
+  disabled?: boolean;
 }) {
   return (
-    <ContextMenuProviderBase menuWrapper={ContextMenu}>
+    <ContextMenuProviderBase disabled={disabled} menuWrapper={ContextMenu}>
       {children}
     </ContextMenuProviderBase>
   );

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

@@ -6,18 +6,23 @@ 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';
 
 export const ContextMenuContext = createContext<ContextMenuContextType | null>(
   null
 );
 
 export function ContextMenuProvider({
+  disabled = false,
   children,
   menuWrapper,
 }: {
+  disabled?: boolean;
   children: React.ReactNode;
   menuWrapper: React.ComponentType<{
     menu: ContextMenuState & { close: () => void };
@@ -47,7 +52,7 @@ export function ContextMenuProvider({
 
   useEffect(() => {
     // Don't set up event listeners if we have a parent context
-    if (parentContext) return;
+    if (parentContext || disabled) return;
 
     function handleContextMenu(event: MouseEvent) {
       event.preventDefault();
@@ -76,7 +81,7 @@ export function ContextMenuProvider({
       document.removeEventListener('contextmenu', handleContextMenu);
       window.removeEventListener('resize', handleClosingEvent);
     };
-  }, [handleClosingEvent, parentContext]);
+  }, [disabled, 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/src/app/components/home.tsx

@@ -33,6 +33,7 @@ import type { WorkspaceTab } from '@mongodb-js/compass-workspaces';
 import { ConnectionStorageProvider } from '@mongodb-js/connection-storage/provider';
 import { ConnectionImportExportProvider } from '@mongodb-js/compass-connection-import-export';
 import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
+import { usePreference } from 'compass-preferences-model/provider';
 
 resetGlobalCSS();
 
@@ -169,6 +170,7 @@ export default function ThemedHome(
   props: HomeWithConnectionsProps
 ): ReturnType<typeof HomeWithConnections> {
   const track = useTelemetry();
+  const disableContextMenus = !usePreference('enableContextMenus');
   return (
     <CompassComponentsProvider
       onNextGuideGue={(cue) => {
@@ -204,6 +206,7 @@ export default function ThemedHome(
       onSignalClose={(id) => {
         track('Signal Closed', { id });
       }}
+      disableContextMenus={disableContextMenus}
     >
       {({ darkMode, portalContainerRef }) => {
         return (