Skip to content

feat(sidebar): context menu to control specific navigation items COMPASS-9393 #7070

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 19 commits into from
Jul 11, 2025
Merged

feat(sidebar): context menu to control specific navigation items COMPASS-9393 #7070

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
8b627bb
Refactor NavigationBaseItem to use forwardRef
kraenhansen Jul 1, 2025
71b529c
Pass getContextMenuGroups through sidebar navigation tree
kraenhansen Jul 1, 2025
52bb155
Refactor actions, separating out types and utils
kraenhansen Jul 1, 2025
6649f4a
Add splitBySeparator util
kraenhansen Jul 1, 2025
3e98e06
Export ContextMenuItemGroup
kraenhansen Jul 1, 2025
915e207
Implement getContextMenuGroups
kraenhansen Jul 1, 2025
1608175
Merge branch 'main' of github.com:mongodb-js/compass into kh/sidebar-…
gagik Jul 9, 2025
7aa0f79
refactor: combine onItemActions to allow cross-item action calls
gagik Jul 9, 2025
2424a9e
refactor: use our own custom action items
gagik Jul 9, 2025
d71c4cf
rf: combine and cleanup actions and remove type cast
gagik Jul 9, 2025
83c5df8
test: add context menu tests
gagik Jul 10, 2025
0894ce4
fix: add support for mongo shell opening in different items
gagik Jul 10, 2025
da7c6bd
fix: access connectionItem in a nested way
gagik Jul 10, 2025
1e2a63e
fix: adjust to rename and opening
gagik Jul 10, 2025
aaf80d0
fix: specify entrypoint with items
gagik Jul 10, 2025
05b8047
fix: favorite/unfavorite connection
gagik Jul 11, 2025
aaeb53c
Merge branch 'main' of github.com:mongodb-js/compass into kh/sidebar-…
gagik Jul 11, 2025
fae6fbe
fix: tests and check
gagik Jul 11, 2025
c07aaa7
fix: add dependency
gagik Jul 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 47 additions & 32 deletions packages/compass-connections-navigation/src/connections-navigation-tree.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,8 @@ import type {
SidebarActionableItem,
Connection,
} from './tree-data';
import type {
ContextMenuItemGroup,
ItemAction,
ItemSeparator,
} from '@mongodb-js/compass-components';
import type { ItemAction, ItemSeparator } from '@mongodb-js/compass-components';
import type { ContextMenuItemGroup } from '@mongodb-js/compass-context-menu';
import {
VisuallyHidden,
css,
Expand All @@ -28,8 +25,10 @@ import { usePreference } from 'compass-preferences-model/provider';
import type { NavigationItemActions } from './item-actions';
import {
collectionItemActions,
collectionContextMenuActions,
connectedConnectionItemActions,
databaseItemActions,
databaseContextMenuActions,
notConnectedConnectionItemActions,
} from './item-actions';
import { itemActionsToContextMenuGroups } from './context-menus';
Expand Down Expand Up @@ -248,35 +247,51 @@ const ConnectionsNavigationTree: React.FunctionComponent<
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),
];
case 'database': {
const {
isPerformanceTabAvailable,
isPerformanceTabSupported,
isShellEnabled,
hasWriteActionsDisabled,
connectionInfo,
} = item.connectionItem;
return itemActionsToContextMenuGroups(
item,
onItemAction,
databaseContextMenuActions({
hasWriteActionsDisabled,
isShellEnabled,
isPerformanceTabAvailable,
isPerformanceTabSupported,
isAtlas: !!connectionInfo.atlasMetadata,
})
);
}
default: {
const {
isPerformanceTabAvailable,
isPerformanceTabSupported,
isShellEnabled,
hasWriteActionsDisabled,
connectionInfo,
} = item.databaseItem.connectionItem;
return itemActionsToContextMenuGroups(
item,
onItemAction,
collectionContextMenuActions({
hasWriteActionsDisabled,
type: item.type,
isRenameCollectionEnabled,
isShellEnabled,
isPerformanceTabAvailable,
isPerformanceTabSupported,
isAtlas: !!connectionInfo.atlasMetadata,
})
);
}
}
},
[onItemAction]
[onItemAction, isRenameCollectionEnabled]
);

const isTestEnv = process.env.NODE_ENV === 'test';
Expand Down
191 changes: 191 additions & 0 deletions packages/compass-connections-navigation/src/item-actions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -206,6 +206,7 @@ export const collectionItemActions = ({
}

if (type === 'view') {
actions.push({ separator: true });
actions.push(
{
action: 'drop-collection',
Expand All @@ -228,6 +229,7 @@ export const collectionItemActions = ({
}

if (type !== 'timeseries' && isRenameCollectionEnabled) {
actions.push({ separator: true });
actions.push({
action: 'rename-collection',
label: 'Rename collection',
Expand All @@ -243,3 +245,192 @@ export const collectionItemActions = ({

return actions;
};

export const databaseContextMenuActions = ({
Copy link
Contributor

@gagik gagik Jul 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

won't be able to reuse actions in this case since we decided to go a more custom route

hasWriteActionsDisabled,
isShellEnabled,
isPerformanceTabAvailable,
isPerformanceTabSupported,
isAtlas,
}: {
hasWriteActionsDisabled: boolean;
isShellEnabled: boolean;
isPerformanceTabAvailable: boolean;
isPerformanceTabSupported: boolean;
isAtlas: boolean;
}): NavigationItemActions => {
return stripNullActions([
// Database-specific actions
hasWriteActionsDisabled
? null
: {
action: 'create-collection',
icon: 'Plus',
label: 'Create collection',
},
{ separator: true },
hasWriteActionsDisabled
? null
: {
action: 'create-database',
icon: 'Plus',
label: 'Create database',
},
hasWriteActionsDisabled
? null
: {
action: 'drop-database',
icon: 'Trash',
label: 'Drop database',
},
{ separator: true },
isShellEnabled
? {
action: 'open-shell',
icon: 'Shell',
label: 'Open MongoDB shell',
}
: null,
isPerformanceTabAvailable
? {
action: 'connection-performance-metrics',
icon: 'Gauge',
label: 'View performance metrics',
isDisabled: !isPerformanceTabSupported,
disabledDescription: 'Not supported',
}
: null,
isAtlas
? null
: {
action: 'open-connection-info',
icon: 'InfoWithCircle',
label: 'Show connection info',
},
{
action: 'refresh-databases',
label: 'Refresh databases',
icon: 'Refresh',
},
{ separator: true },
{
action: 'connection-disconnect',
icon: 'Disconnect',
label: 'Disconnect',
variant: 'destructive',
},
]);
};

export const collectionContextMenuActions = ({
hasWriteActionsDisabled,
type,
isRenameCollectionEnabled,
isShellEnabled,
isPerformanceTabAvailable,
isPerformanceTabSupported,
isAtlas,
}: {
hasWriteActionsDisabled: boolean;
type: 'collection' | 'view' | 'timeseries';
isRenameCollectionEnabled: boolean;
isShellEnabled: boolean;
isPerformanceTabAvailable: boolean;
isPerformanceTabSupported: boolean;
isAtlas: boolean;
}): NavigationItemActions => {
const actions: NavigationItemActions = [
// Collection-specific actions
{
action: 'open-in-new-tab',
label: 'Open in new tab',
icon: 'OpenNewTab',
},
];

if (!hasWriteActionsDisabled) {
if (type === 'view') {
actions.push({ separator: true });
// For views: show Duplicate view, Modify view, Drop view
actions.push(
{
action: 'duplicate-view',
label: 'Duplicate view',
icon: 'Copy',
},
{
action: 'modify-view',
label: 'Modify view',
icon: 'Edit',
},
{
action: 'drop-collection',
label: 'Drop view',
icon: 'Trash',
}
);
} else {
actions.push({ separator: true });
// For collections: show Rename collection, Drop collection
if (type !== 'timeseries' && isRenameCollectionEnabled) {
actions.push({
action: 'rename-collection',
label: 'Rename collection',
icon: 'Edit',
});
}
actions.push({
action: 'create-collection',
icon: 'Plus',
label: 'Create collection',
});
actions.push({
action: 'drop-collection',
label: 'Drop collection',
icon: 'Trash',
});
}
}

// Add connection-level actions
const connectionActions = stripNullActions([
{ separator: true },
isShellEnabled
? {
action: 'open-shell',
Copy link
Collaborator

@mabaasit mabaasit Jul 9, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Right-clicking on db/collection, we should open shell for them, right? if you open shell from db screen, it automatically switches to that db usinguse dbName. And for collection, it switches and writes a find query.

Copy link
Collaborator

@mabaasit mabaasit Jul 9, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This behaviour is a bit different to what a user would expect

Copy link
Contributor

@gagik gagik Jul 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

great point, my solution is going to be to remove this from collection level and making a note of this as a descoped feature

Copy link
Collaborator

@mabaasit mabaasit Jul 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

feel free to ignore if its more work: for this action, we already have an item and we can do exactly what we do at other places:

  1. For dbItem we can add {initialEvaluate: use ${namespace}} to the options
  2. For collItem we can add initialEvaluate and initialInput

This way we will have same exact behaviour and also have shell in the menu.

Copy link
Contributor

@gagik gagik Jul 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh that seems good!

icon: 'Shell',
label: 'Open MongoDB shell',
}
: null,
isPerformanceTabAvailable
? {
action: 'connection-performance-metrics',
icon: 'Gauge',
label: 'View performance metrics',
isDisabled: !isPerformanceTabSupported,
disabledDescription: 'Not supported',
}
: null,
isAtlas
? null
: {
action: 'open-connection-info',
icon: 'InfoWithCircle',
label: 'Show connection info',
},
{
action: 'refresh-databases',
label: 'Refresh collection',
icon: 'Refresh',
},
{ separator: true },
{
action: 'connection-disconnect',
icon: 'Disconnect',
label: 'Disconnect',
variant: 'destructive',
},
]);

return [...actions, ...connectionActions];
};
Loading