Implement getContextMenuGroups

Author: kraenhansen

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

@@ -12,7 +12,7 @@ import type {
   Connection,
 } from './tree-data';
 import type {
-  ContextMenuItem,
+  ContextMenuItemGroup,
   ItemAction,
   ItemSeparator,
 } from '@mongodb-js/compass-components';
@@ -32,6 +32,7 @@ import {
   databaseItemActions,
   notConnectedConnectionItemActions,
 } from './item-actions';
+import { itemActionsToContextMenuGroups } from './context-menus';
 
 const ConnectionsNavigationContainerStyles = css({
   display: 'flex',
@@ -223,10 +224,58 @@ const ConnectionsNavigationTree: React.FunctionComponent<
   );
 
   const getContextMenuGroups = useCallback(
-    (item: SidebarTreeItem): ContextMenuItem[][] => {
-      return [[{ label: item.id, onAction() {} }]];
+    function getContextMenuGroups(
+      item: SidebarTreeItem
+    ): ContextMenuItemGroup[] {
+      switch (item.type) {
+        case 'placeholder':
+          return [];
+        case 'connection':
+          return itemActionsToContextMenuGroups(
+            item,
+            onItemAction,
+            item.connectionStatus === 'connected'
+              ? connectedConnectionItemActions({
+                  hasWriteActionsDisabled: item.hasWriteActionsDisabled,
+                  isShellEnabled: item.isShellEnabled,
+                  connectionInfo: item.connectionInfo,
+                  isPerformanceTabAvailable: item.isPerformanceTabAvailable,
+                  isPerformanceTabSupported: item.isPerformanceTabSupported,
+                })
+              : notConnectedConnectionItemActions({
+                  connectionInfo: item.connectionInfo,
+                  connectionStatus: item.connectionStatus,
+                })
+          );
+        case 'database':
+          return [
+            ...itemActionsToContextMenuGroups(
+              item,
+              onItemAction,
+              databaseItemActions({
+                hasWriteActionsDisabled: item.hasWriteActionsDisabled,
+              })
+            ),
+            // Include menu items on the connection level
+            ...getContextMenuGroups(item.connectionItem),
+          ];
+        default:
+          return [
+            ...itemActionsToContextMenuGroups(
+              item,
+              onItemAction,
+              collectionItemActions({
+                hasWriteActionsDisabled: item.hasWriteActionsDisabled,
+                type: item.type,
+                isRenameCollectionEnabled,
+              })
+            ),
+            // Include menu items on the database (and connection) level
+            ...getContextMenuGroups(item.databaseItem),
+          ];
+      }
     },
-    []
+    [onItemAction]
   );
 
   const isTestEnv = process.env.NODE_ENV === 'test';

packages/compass-connections-navigation/src/context-menus.ts

@@ -0,0 +1,23 @@
+import {
+  splitBySeparator,
+  type ContextMenuItemGroup,
+} from '@mongodb-js/compass-components';
+
+import type { NavigationItemActions } from './item-actions';
+import type { Actions } from './constants';
+import type { SidebarActionableItem } from './tree-data';
+
+export function itemActionsToContextMenuGroups(
+  item: SidebarActionableItem,
+  onItemAction: (item: SidebarActionableItem, action: Actions) => void,
+  itemActions: NavigationItemActions
+): ContextMenuItemGroup[] {
+  return splitBySeparator<Actions>(itemActions).map((actions) =>
+    actions.map(({ label, action }) => ({
+      label,
+      onAction() {
+        onItemAction(item, action as Actions);
+      },
+    }))
+  );
+}

packages/compass-connections-navigation/src/tree-data.ts

@@ -100,6 +100,7 @@ export type DatabaseTreeItem = VirtualTreeItem & {
   colorCode?: string;
   isExpanded: boolean;
   connectionId: string;
+  connectionItem: ConnectedConnectionTreeItem;
   dbName: string;
   hasWriteActionsDisabled: boolean;
   isNonExistent: boolean;
@@ -111,6 +112,7 @@ export type CollectionTreeItem = VirtualTreeItem & {
   type: 'collection' | 'view' | 'timeseries';
   colorCode?: string;
   connectionId: string;
+  databaseItem: DatabaseTreeItem;
   namespace: string;
   hasWriteActionsDisabled: boolean;
   isNonExistent: boolean;
@@ -240,6 +242,7 @@ const connectedConnectionToItems = ({
     databases.flatMap((database, databaseIndex) => {
       return databaseToItems({
         connectionId: connectionInfo.id,
+        connectionItem: connectionTI,
         database,
         expandedItems: expandedItems[connectionInfo.id] || {},
         level: 2,
@@ -262,6 +265,7 @@ const databaseToItems = ({
     isNonExistent,
   },
   connectionId,
+  connectionItem,
   expandedItems = {},
   level,
   colorCode,
@@ -271,6 +275,7 @@ const databaseToItems = ({
 }: {
   database: Database;
   connectionId: string;
+  connectionItem: ConnectedConnectionTreeItem;
   expandedItems?: Record<string, boolean>;
   level: number;
   colorCode?: string;
@@ -289,6 +294,7 @@ const databaseToItems = ({
     isExpanded,
     colorCode,
     connectionId,
+    connectionItem,
     dbName: id,
     isExpandable: true,
     hasWriteActionsDisabled,
@@ -330,6 +336,7 @@ const databaseToItems = ({
         posInSet: collectionIndex + 1,
         colorCode,
         connectionId,
+        databaseItem: databaseTI,
         namespace: id,
         hasWriteActionsDisabled,
         isExpandable: false,