Pass getContextMenuGroups through sidebar navigation tree

Author: kraenhansen

packages/compass-connections-navigation/src/connections-navigation-tree.tsx

@@ -11,7 +11,11 @@ import type {
   SidebarActionableItem,
   Connection,
 } from './tree-data';
-import type { ItemAction, ItemSeparator } from '@mongodb-js/compass-components';
+import type {
+  ContextMenuItem,
+  ItemAction,
+  ItemSeparator,
+} from '@mongodb-js/compass-components';
 import {
   VisuallyHidden,
   css,
@@ -218,6 +222,13 @@ const ConnectionsNavigationTree: React.FunctionComponent<
     ]
   );
 
+  const getContextMenuGroups = useCallback(
+    (item: SidebarTreeItem): ContextMenuItem[][] => {
+      return [[{ label: item.id, onAction() {} }]];
+    },
+    []
+  );
+
   const isTestEnv = process.env.NODE_ENV === 'test';
 
   return (
@@ -242,13 +253,15 @@ const ConnectionsNavigationTree: React.FunctionComponent<
             onItemExpand={onItemExpand}
             getItemActions={getItemActionsAndConfig}
             getItemKey={(item) => item.id}
+            getContextMenuGroups={getContextMenuGroups}
             renderItem={({
               item,
               isActive,
               isFocused,
               onItemAction,
               onItemExpand,
               getItemActions,
+              getContextMenuGroups,
             }) => {
               return (
                 <NavigationItem
@@ -258,6 +271,7 @@ const ConnectionsNavigationTree: React.FunctionComponent<
                   getItemActions={getItemActions}
                   onItemExpand={onItemExpand}
                   onItemAction={onItemAction}
+                  getContextMenuGroups={getContextMenuGroups}
                 />
               );
             }}

packages/compass-connections-navigation/src/navigation-item.tsx

@@ -4,8 +4,10 @@ import {
   css,
   palette,
   ItemActionControls,
-  type ItemAction,
   useDarkMode,
+  useContextMenuGroups,
+  type ItemAction,
+  type ContextMenuItem,
 } from '@mongodb-js/compass-components';
 import { PlaceholderItem } from './placeholder';
 import StyledNavigationItem from './styled-navigation-item';
@@ -101,6 +103,7 @@ type NavigationItemProps = {
   };
   onItemAction: (item: SidebarActionableItem, action: Actions) => void;
   onItemExpand(item: SidebarActionableItem, isExpanded: boolean): void;
+  getContextMenuGroups(item: SidebarTreeItem): ContextMenuItem[][];
 };
 
 export function NavigationItem({
@@ -110,6 +113,7 @@ export function NavigationItem({
   onItemAction,
   onItemExpand,
   getItemActions,
+  getContextMenuGroups,
 }: NavigationItemProps) {
   const isDarkMode = useDarkMode();
   const onAction = useCallback(
@@ -138,6 +142,12 @@ export function NavigationItem({
     };
   }, [getItemActions, item, onAction]);
 
+  const contextMenuTriggerRef: React.RefCallback<HTMLDivElement> =
+    useContextMenuGroups(
+      () => getContextMenuGroups(item),
+      [item, getContextMenuGroups]
+    );
+
   const itemDataProps = useMemo(() => {
     if (item.type === 'placeholder') {
       return {};
@@ -212,6 +222,7 @@ export function NavigationItem({
         <PlaceholderItem level={item.level} />
       ) : (
         <NavigationBaseItem
+          ref={contextMenuTriggerRef}
           item={item}
           isActive={isActive}
           isFocused={isFocused}

packages/compass-connections-navigation/src/virtual-list/virtual-list.tsx

@@ -14,6 +14,7 @@ import {
   mergeProps,
   useFocusRing,
   useId,
+  type ContextMenuItem,
 } from '@mongodb-js/compass-components';
 import { type SidebarActionableItem, type SidebarTreeItem } from '../tree-data';
 import { type Actions } from '../constants';
@@ -73,6 +74,10 @@ type RenderItem<T> = (props: {
       collapseAfter: number;
     };
   };
+  getContextMenuGroups: (
+    this: void,
+    item: SidebarTreeItem
+  ) => ContextMenuItem[][];
 }) => React.ReactNode;
 export type OnDefaultAction<T> = (
   item: T,
@@ -104,6 +109,7 @@ type VirtualTreeProps<T extends VirtualItem> = {
       collapseAfter: number;
     };
   };
+  getContextMenuGroups(this: void, item: SidebarTreeItem): ContextMenuItem[][];
 
   __TEST_OVER_SCAN_COUNT?: number;
 };
@@ -133,6 +139,7 @@ export function VirtualTree<T extends VirtualItem>({
   onItemExpand,
   onItemAction,
   getItemActions,
+  getContextMenuGroups,
   __TEST_OVER_SCAN_COUNT,
 }: VirtualTreeProps<T>) {
   const listRef = useRef<List | null>(null);
@@ -172,6 +179,7 @@ export function VirtualTree<T extends VirtualItem>({
       onItemAction,
       onItemExpand,
       getItemActions,
+      getContextMenuGroups,
     };
   }, [
     items,
@@ -183,6 +191,7 @@ export function VirtualTree<T extends VirtualItem>({
     onItemAction,
     getItemActions,
     onItemExpand,
+    getContextMenuGroups,
   ]);
 
   const getItemKey = useCallback(
@@ -241,6 +250,7 @@ type VirtualItemData<T extends VirtualItem> = {
       collapseAfter: number;
     };
   };
+  getContextMenuGroups(this: void, item: SidebarTreeItem): ContextMenuItem[][];
 };
 function TreeItem<T extends VirtualItem>({
   index,
@@ -263,6 +273,7 @@ function TreeItem<T extends VirtualItem>({
       onItemAction: data.onItemAction,
       onItemExpand: data.onItemExpand,
       getItemActions: data.getItemActions,
+      getContextMenuGroups: data.getContextMenuGroups,
     });
   }, [
     renderItem,
@@ -274,6 +285,7 @@ function TreeItem<T extends VirtualItem>({
     data.onItemAction,
     data.getItemActions,
     data.onItemExpand,
+    data.getContextMenuGroups,
   ]);
 
   const actionProps = useDefaultAction(