diff --git a/packages/compass-components/src/components/compass-components-provider.tsx b/packages/compass-components/src/components/compass-components-provider.tsx index 7a2fdf20117..88912779b56 100644 --- a/packages/compass-components/src/components/compass-components-provider.tsx +++ b/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 = ({ > - + {typeof children === 'function' ? children({ diff --git a/packages/compass-components/src/components/context-menu.tsx b/packages/compass-components/src/components/context-menu.tsx index 8941cbab1da..592a347ad6d 100644 --- a/packages/compass-components/src/components/context-menu.tsx +++ b/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 ( - + {children} ); diff --git a/packages/compass-context-menu/src/context-menu-provider.tsx b/packages/compass-context-menu/src/context-menu-provider.tsx index d88280d976f..802ffa2f2f8 100644 --- a/packages/compass-context-menu/src/context-menu-provider.tsx +++ b/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( 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( () => ({ diff --git a/packages/compass-preferences-model/src/feature-flags.ts b/packages/compass-preferences-model/src/feature-flags.ts index ab427c1fff9..a11dc9a78ed 100644 --- a/packages/compass-preferences-model/src/feature-flags.ts +++ b/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', + }, + }, }; diff --git a/packages/compass/src/app/components/home.tsx b/packages/compass/src/app/components/home.tsx index 19e11af8519..6d4c3796d2d 100644 --- a/packages/compass/src/app/components/home.tsx +++ b/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 { const track = useTelemetry(); + const disableContextMenus = !usePreference('enableContextMenus'); return ( { @@ -204,6 +206,7 @@ export default function ThemedHome( onSignalClose={(id) => { track('Signal Closed', { id }); }} + disableContextMenus={disableContextMenus} > {({ darkMode, portalContainerRef }) => { return (