Skip to content

Commit 71b529c

Browse files
committed
Pass getContextMenuGroups through sidebar navigation tree
1 parent 8b627bb commit 71b529c

File tree

3 files changed

+39
-2
lines changed

3 files changed

+39
-2
lines changed

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

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,11 @@ import type {
1111
SidebarActionableItem,
1212
Connection,
1313
} from './tree-data';
14-
import type { ItemAction, ItemSeparator } from '@mongodb-js/compass-components';
14+
import type {
15+
ContextMenuItem,
16+
ItemAction,
17+
ItemSeparator,
18+
} from '@mongodb-js/compass-components';
1519
import {
1620
VisuallyHidden,
1721
css,
@@ -218,6 +222,13 @@ const ConnectionsNavigationTree: React.FunctionComponent<
218222
]
219223
);
220224

225+
const getContextMenuGroups = useCallback(
226+
(item: SidebarTreeItem): ContextMenuItem[][] => {
227+
return [[{ label: item.id, onAction() {} }]];
228+
},
229+
[]
230+
);
231+
221232
const isTestEnv = process.env.NODE_ENV === 'test';
222233

223234
return (
@@ -242,13 +253,15 @@ const ConnectionsNavigationTree: React.FunctionComponent<
242253
onItemExpand={onItemExpand}
243254
getItemActions={getItemActionsAndConfig}
244255
getItemKey={(item) => item.id}
256+
getContextMenuGroups={getContextMenuGroups}
245257
renderItem={({
246258
item,
247259
isActive,
248260
isFocused,
249261
onItemAction,
250262
onItemExpand,
251263
getItemActions,
264+
getContextMenuGroups,
252265
}) => {
253266
return (
254267
<NavigationItem
@@ -258,6 +271,7 @@ const ConnectionsNavigationTree: React.FunctionComponent<
258271
getItemActions={getItemActions}
259272
onItemExpand={onItemExpand}
260273
onItemAction={onItemAction}
274+
getContextMenuGroups={getContextMenuGroups}
261275
/>
262276
);
263277
}}

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

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,10 @@ import {
44
css,
55
palette,
66
ItemActionControls,
7-
type ItemAction,
87
useDarkMode,
8+
useContextMenuGroups,
9+
type ItemAction,
10+
type ContextMenuItem,
911
} from '@mongodb-js/compass-components';
1012
import { PlaceholderItem } from './placeholder';
1113
import StyledNavigationItem from './styled-navigation-item';
@@ -101,6 +103,7 @@ type NavigationItemProps = {
101103
};
102104
onItemAction: (item: SidebarActionableItem, action: Actions) => void;
103105
onItemExpand(item: SidebarActionableItem, isExpanded: boolean): void;
106+
getContextMenuGroups(item: SidebarTreeItem): ContextMenuItem[][];
104107
};
105108

106109
export function NavigationItem({
@@ -110,6 +113,7 @@ export function NavigationItem({
110113
onItemAction,
111114
onItemExpand,
112115
getItemActions,
116+
getContextMenuGroups,
113117
}: NavigationItemProps) {
114118
const isDarkMode = useDarkMode();
115119
const onAction = useCallback(
@@ -138,6 +142,12 @@ export function NavigationItem({
138142
};
139143
}, [getItemActions, item, onAction]);
140144

145+
const contextMenuTriggerRef: React.RefCallback<HTMLDivElement> =
146+
useContextMenuGroups(
147+
() => getContextMenuGroups(item),
148+
[item, getContextMenuGroups]
149+
);
150+
141151
const itemDataProps = useMemo(() => {
142152
if (item.type === 'placeholder') {
143153
return {};
@@ -212,6 +222,7 @@ export function NavigationItem({
212222
<PlaceholderItem level={item.level} />
213223
) : (
214224
<NavigationBaseItem
225+
ref={contextMenuTriggerRef}
215226
item={item}
216227
isActive={isActive}
217228
isFocused={isFocused}

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414
mergeProps,
1515
useFocusRing,
1616
useId,
17+
type ContextMenuItem,
1718
} from '@mongodb-js/compass-components';
1819
import { type SidebarActionableItem, type SidebarTreeItem } from '../tree-data';
1920
import { type Actions } from '../constants';
@@ -73,6 +74,10 @@ type RenderItem<T> = (props: {
7374
collapseAfter: number;
7475
};
7576
};
77+
getContextMenuGroups: (
78+
this: void,
79+
item: SidebarTreeItem
80+
) => ContextMenuItem[][];
7681
}) => React.ReactNode;
7782
export type OnDefaultAction<T> = (
7883
item: T,
@@ -104,6 +109,7 @@ type VirtualTreeProps<T extends VirtualItem> = {
104109
collapseAfter: number;
105110
};
106111
};
112+
getContextMenuGroups(this: void, item: SidebarTreeItem): ContextMenuItem[][];
107113

108114
__TEST_OVER_SCAN_COUNT?: number;
109115
};
@@ -133,6 +139,7 @@ export function VirtualTree<T extends VirtualItem>({
133139
onItemExpand,
134140
onItemAction,
135141
getItemActions,
142+
getContextMenuGroups,
136143
__TEST_OVER_SCAN_COUNT,
137144
}: VirtualTreeProps<T>) {
138145
const listRef = useRef<List | null>(null);
@@ -172,6 +179,7 @@ export function VirtualTree<T extends VirtualItem>({
172179
onItemAction,
173180
onItemExpand,
174181
getItemActions,
182+
getContextMenuGroups,
175183
};
176184
}, [
177185
items,
@@ -183,6 +191,7 @@ export function VirtualTree<T extends VirtualItem>({
183191
onItemAction,
184192
getItemActions,
185193
onItemExpand,
194+
getContextMenuGroups,
186195
]);
187196

188197
const getItemKey = useCallback(
@@ -241,6 +250,7 @@ type VirtualItemData<T extends VirtualItem> = {
241250
collapseAfter: number;
242251
};
243252
};
253+
getContextMenuGroups(this: void, item: SidebarTreeItem): ContextMenuItem[][];
244254
};
245255
function TreeItem<T extends VirtualItem>({
246256
index,
@@ -263,6 +273,7 @@ function TreeItem<T extends VirtualItem>({
263273
onItemAction: data.onItemAction,
264274
onItemExpand: data.onItemExpand,
265275
getItemActions: data.getItemActions,
276+
getContextMenuGroups: data.getContextMenuGroups,
266277
});
267278
}, [
268279
renderItem,
@@ -274,6 +285,7 @@ function TreeItem<T extends VirtualItem>({
274285
data.onItemAction,
275286
data.getItemActions,
276287
data.onItemExpand,
288+
data.getContextMenuGroups,
277289
]);
278290

279291
const actionProps = useDefaultAction(

0 commit comments

Comments
 (0)