From df40eed55e539fac6510aacbf349de42c05a92fa Mon Sep 17 00:00:00 2001 From: Le Roux Bodenstein Date: Thu, 25 Jul 2024 13:20:02 +0100 Subject: [PATCH] feat(sidebar): Add the shell icon on hover to the connections in the sidebar COMPASS-8050 COMPASS-8071 (#6057) * chore: adds shell icon on hover of connected tree item * update tests for the shell icon in the sidebar * connectionName * fix unit tests --------- Co-authored-by: Himanshu Singh --- .../src/connections-navigation-tree.spec.tsx | 63 +++++++---- .../src/connections-navigation-tree.tsx | 101 +++++++++++++++--- .../src/item-actions.ts | 31 +++--- .../src/navigation-item.tsx | 27 ++--- .../src/tree-data.ts | 8 +- .../src/virtual-list/virtual-list.tsx | 30 +++++- .../helpers/commands/open-shell.ts | 3 +- .../helpers/commands/sidebar-connection.ts | 60 +++++++++-- .../tests/connection.test.ts | 9 +- .../tests/instance-sidebar.test.ts | 9 +- .../compass-e2e-tests/tests/read-only.test.ts | 33 ++++-- .../compass-e2e-tests/tests/shell.test.ts | 36 +++++-- .../multiple-connections/sidebar.spec.tsx | 7 +- 13 files changed, 302 insertions(+), 115 deletions(-) diff --git a/packages/compass-connections-navigation/src/connections-navigation-tree.spec.tsx b/packages/compass-connections-navigation/src/connections-navigation-tree.spec.tsx index 706aac11d3e..7362bb4ea33 100644 --- a/packages/compass-connections-navigation/src/connections-navigation-tree.spec.tsx +++ b/packages/compass-connections-navigation/src/connections-navigation-tree.spec.tsx @@ -393,16 +393,13 @@ describe('ConnectionsNavigationTree', function () { const connection = screen.getByTestId('connection_ready'); expect(within(connection).getByTitle('Create database')).to.be.visible; + expect(within(connection).getByTitle('Open MongoDB shell')).to.be.visible; const otherActions = within(connection).getByTitle('Show actions'); expect(otherActions).to.exist; userEvent.click(otherActions); - expect(screen.getByText('Open MongoDB shell')).to.be.visible; - expect( - screen.getByTestId('sidebar-navigation-item-actions-open-shell-action') - ).not.to.have.attribute('disabled'); expect(screen.getByText('View performance metrics')).to.be.visible; expect(screen.getByText('Show connection info')).to.be.visible; expect(screen.getByText('Copy connection string')).to.be.visible; @@ -565,29 +562,19 @@ describe('ConnectionsNavigationTree', function () { const connection = screen.getByTestId('connection_ready'); expect(within(connection).queryByTitle('Create database')).not.to.exist; + if (name !== 'when preferences is readonly') { + expect(within(connection).getByLabelText('Open MongoDB shell')).to.be + .visible; + } else { + expect(within(connection).queryByLabelText('Open MongoDB shell')).not + .to.exist; + } const otherActions = within(connection).getByTitle('Show actions'); expect(otherActions).to.exist; userEvent.click(otherActions); - expect(screen.getByText('Open MongoDB shell')).to.be.visible; - if ( - name !== 'when connection is datalake' && - name !== 'when connection is not writable' - ) { - expect( - screen.getByTestId( - 'sidebar-navigation-item-actions-open-shell-action' - ) - ).to.have.attribute('disabled'); - } else { - expect( - screen.getByTestId( - 'sidebar-navigation-item-actions-open-shell-action' - ) - ).not.to.have.attribute('disabled'); - } expect(screen.getByText('View performance metrics')).to.be.visible; expect(screen.getByText('Show connection info')).to.be.visible; expect(screen.getByText('Copy connection string')).to.be.visible; @@ -632,6 +619,40 @@ describe('ConnectionsNavigationTree', function () { }); }); + describe('shell action', function () { + it('should show shell action in the sidebar on hover of connected item', async function () { + await renderConnectionsNavigationTree(); + userEvent.hover(screen.getByText('turtles')); + expect(screen.getByLabelText('Open MongoDB shell')).to.be.visible; + }); + + context('when preferences is readonly', function () { + it('should not render shell action at all', async function () { + await renderConnectionsNavigationTree( + {}, + { + readOnly: true, + } + ); + userEvent.hover(screen.getByText('turtles')); + expect(() => screen.getByLabelText('Open MongoDB shell')).to.throw; + }); + }); + + context('when shell is disabled', function () { + it('should not render shell action at all', async function () { + await renderConnectionsNavigationTree( + {}, + { + enableShell: false, + } + ); + userEvent.hover(screen.getByText('turtles')); + expect(() => screen.getByLabelText('Open MongoDB shell')).to.throw; + }); + }); + }); + describe('onItemAction', function () { let preferences: PreferencesAccess; beforeEach(async function () { diff --git a/packages/compass-connections-navigation/src/connections-navigation-tree.tsx b/packages/compass-connections-navigation/src/connections-navigation-tree.tsx index 96d37d39629..00d4cc7de5e 100644 --- a/packages/compass-connections-navigation/src/connections-navigation-tree.tsx +++ b/packages/compass-connections-navigation/src/connections-navigation-tree.tsx @@ -11,6 +11,7 @@ import type { SidebarActionableItem, Connection, } from './tree-data'; +import type { ItemAction, ItemSeparator } from '@mongodb-js/compass-components'; import { VisuallyHidden, css, @@ -19,6 +20,7 @@ import { } from '@mongodb-js/compass-components'; import type { WorkspaceTab } from '@mongodb-js/compass-workspaces'; import { usePreference } from 'compass-preferences-model/provider'; +import type { NavigationItemActions } from './item-actions'; import { collectionItemActions, connectedConnectionItemActions, @@ -56,6 +58,7 @@ const ConnectionsNavigationTree: React.FunctionComponent< onItemExpand, onItemAction, }) => { + const preferencesShellEnabled = usePreference('enableShell'); const preferencesReadOnly = usePreference('readOnly'); const isSingleConnection = !usePreference( 'enableNewMultipleConnectionSystem' @@ -72,8 +75,15 @@ const ConnectionsNavigationTree: React.FunctionComponent< isSingleConnection, expandedItems: expanded, preferencesReadOnly, + preferencesShellEnabled, }); - }, [connections, isSingleConnection, expanded, preferencesReadOnly]); + }, [ + connections, + isSingleConnection, + expanded, + preferencesReadOnly, + preferencesShellEnabled, + ]); const onDefaultAction: OnDefaultAction = useCallback( (item, evt) => { @@ -115,38 +125,95 @@ const ConnectionsNavigationTree: React.FunctionComponent< } }, [activeWorkspace, isSingleConnection]); - const getItemActions = useCallback( + const getCollapseAfterForConnectedItem = useCallback( + (actions: NavigationItemActions) => { + const [firstAction, secondAction] = actions; + + const actionCanBeShownInline = ( + action: NavigationItemActions[number] + ): boolean => { + if (typeof (action as ItemSeparator).separator !== 'undefined') { + return false; + } + + return ['create-database', 'open-shell'].includes( + (action as ItemAction).action + ); + }; + + // this is the normal case for a connection that is writable and when we + // also have shell enabled + if ( + actionCanBeShownInline(firstAction) && + actionCanBeShownInline(secondAction) + ) { + return 2; + } + + // this will happen when the either the connection is not writable or the + // preference is readonly, or shell is not enabled in which case we either + // do not show create-database action or open-shell action + if ( + actionCanBeShownInline(firstAction) || + actionCanBeShownInline(secondAction) + ) { + return 1; + } + + return 0; + }, + [] + ); + + const getItemActionsAndConfig = useCallback( (item: SidebarTreeItem) => { switch (item.type) { case 'placeholder': - return []; + return { + actions: [], + }; case 'connection': { if (item.connectionStatus === ConnectionStatus.Connected) { - return connectedConnectionItemActions({ + const actions = connectedConnectionItemActions({ hasWriteActionsDisabled: item.hasWriteActionsDisabled, isShellEnabled: item.isShellEnabled, connectionInfo: item.connectionInfo, isPerformanceTabSupported: item.isPerformanceTabSupported, }); + return { + actions: actions, + config: { + collapseAfter: getCollapseAfterForConnectedItem(actions), + }, + }; } else { - return notConnectedConnectionItemActions({ - connectionInfo: item.connectionInfo, - }); + return { + actions: notConnectedConnectionItemActions({ + connectionInfo: item.connectionInfo, + }), + config: { + collapseAfter: 0, + }, + }; } } case 'database': - return databaseItemActions({ - hasWriteActionsDisabled: item.hasWriteActionsDisabled, - }); + return { + actions: databaseItemActions({ + hasWriteActionsDisabled: item.hasWriteActionsDisabled, + }), + }; default: - return collectionItemActions({ - hasWriteActionsDisabled: item.hasWriteActionsDisabled, - type: item.type, - isRenameCollectionEnabled, - }); + return { + actions: collectionItemActions({ + hasWriteActionsDisabled: item.hasWriteActionsDisabled, + type: item.type, + isRenameCollectionEnabled, + }), + }; } }, - [isRenameCollectionEnabled] + [isRenameCollectionEnabled, getCollapseAfterForConnectedItem] ); const isTestEnv = process.env.NODE_ENV === 'test'; @@ -166,7 +233,7 @@ const ConnectionsNavigationTree: React.FunctionComponent< onDefaultAction={onDefaultAction} onItemAction={onItemAction} onItemExpand={onItemExpand} - getItemActions={getItemActions} + getItemActions={getItemActionsAndConfig} getItemKey={(item) => item.id} renderItem={({ item, diff --git a/packages/compass-connections-navigation/src/item-actions.ts b/packages/compass-connections-navigation/src/item-actions.ts index 9939f8e6e9b..ef419a6ef24 100644 --- a/packages/compass-connections-navigation/src/item-actions.ts +++ b/packages/compass-connections-navigation/src/item-actions.ts @@ -62,19 +62,8 @@ export const connectedConnectionItemActions = ({ connectionInfo, isEditDisabled: true, }).slice(1); // for connected connections we don't show connect action + const actions: NavigationItemActions = [ - { - action: 'create-database', - icon: 'Plus', - label: 'Create database', - }, - { - action: 'open-shell', - icon: 'Shell', - label: 'Open MongoDB shell', - isDisabled: !isShellEnabled, - disabledDescription: 'Not available', - }, { action: 'connection-performance-metrics', icon: 'Gauge', @@ -102,11 +91,25 @@ export const connectedConnectionItemActions = ({ ...connectionManagementActions, ]; + // we show shell icon only when its enabled + if (isShellEnabled) { + actions.unshift({ + action: 'open-shell', + icon: 'Shell', + label: 'Open MongoDB shell', + }); + } + // when connection is readonly we don't want to show create-database action // and hence we splice it out here - if (hasWriteActionsDisabled) { - actions.splice(0, 1); + if (!hasWriteActionsDisabled) { + actions.unshift({ + action: 'create-database', + icon: 'Plus', + label: 'Create database', + }); } + return actions; }; diff --git a/packages/compass-connections-navigation/src/navigation-item.tsx b/packages/compass-connections-navigation/src/navigation-item.tsx index 033d88b1fef..cb4f5899ca5 100644 --- a/packages/compass-connections-navigation/src/navigation-item.tsx +++ b/packages/compass-connections-navigation/src/navigation-item.tsx @@ -96,7 +96,12 @@ type NavigationItemProps = { item: SidebarTreeItem; isActive: boolean; isFocused: boolean; - getItemActions: (item: SidebarTreeItem) => NavigationItemActions; + getItemActions: (item: SidebarTreeItem) => { + actions: NavigationItemActions; + config?: { + collapseAfter: number; + }; + }; onItemAction: (item: SidebarActionableItem, action: Actions) => void; onItemExpand(item: SidebarActionableItem, isExpanded: boolean): void; }; @@ -159,25 +164,13 @@ export function NavigationItem({ const style = useMemo(() => getTreeItemStyles(item), [item]); const actionProps = useMemo(() => { - const collapseAfter = (() => { - if (item.type === 'connection') { - if ( - item.connectionStatus === ConnectionStatus.Connected && - !item.hasWriteActionsDisabled - ) { - return 1; - } - // when connected connection is readonly we don't show the create-database action - // so the whole action menu is collapsed - return 0; - } - })(); + const { actions, config: actionsConfig } = getItemActions(item); return { - actions: getItemActions(item), + actions: actions, onAction: onAction, - ...(typeof collapseAfter === 'number' && { - collapseAfter, + ...(typeof actionsConfig?.collapseAfter === 'number' && { + collapseAfter: actionsConfig?.collapseAfter, }), ...(item.type === 'database' && { collapseToMenuThreshold: 3, diff --git a/packages/compass-connections-navigation/src/tree-data.ts b/packages/compass-connections-navigation/src/tree-data.ts index 9d6b033bd83..a485db6c0d5 100644 --- a/packages/compass-connections-navigation/src/tree-data.ts +++ b/packages/compass-connections-navigation/src/tree-data.ts @@ -159,18 +159,19 @@ const connectedConnectionToItems = ({ connectionsLength, expandedItems = {}, preferencesReadOnly, + preferencesShellEnabled, }: { connection: ConnectedConnection; connectionIndex: number; connectionsLength: number; expandedItems: Record>; preferencesReadOnly: boolean; + preferencesShellEnabled: boolean; }): SidebarTreeItem[] => { const isExpanded = !!expandedItems[connectionInfo.id]; const colorCode = connectionInfo.favorite?.color; const hasWriteActionsDisabled = preferencesReadOnly || isDataLake || !isWritable; - const isShellEnabled = !preferencesReadOnly; const connectionTI: ConnectedConnectionTreeItem = { id: connectionInfo.id, level: 1, @@ -185,7 +186,7 @@ const connectedConnectionToItems = ({ connectionStatus, isPerformanceTabSupported, hasWriteActionsDisabled, - isShellEnabled, + isShellEnabled: preferencesShellEnabled, isGenuineMongoDB, csfleMode, }; @@ -331,11 +332,13 @@ export function getVirtualTreeItems({ isSingleConnection, expandedItems = {}, preferencesReadOnly, + preferencesShellEnabled, }: { connections: (NotConnectedConnection | ConnectedConnection)[]; isSingleConnection: boolean; expandedItems: Record>; preferencesReadOnly: boolean; + preferencesShellEnabled: boolean; }): SidebarTreeItem[] { if (!isSingleConnection) { return connections.flatMap((connection, connectionIndex) => { @@ -346,6 +349,7 @@ export function getVirtualTreeItems({ connectionIndex, connectionsLength: connections.length, preferencesReadOnly, + preferencesShellEnabled, }); } else { return notConnectedConnectionToItems({ diff --git a/packages/compass-connections-navigation/src/virtual-list/virtual-list.tsx b/packages/compass-connections-navigation/src/virtual-list/virtual-list.tsx index 7abfb1a1215..73de36739de 100644 --- a/packages/compass-connections-navigation/src/virtual-list/virtual-list.tsx +++ b/packages/compass-connections-navigation/src/virtual-list/virtual-list.tsx @@ -64,7 +64,15 @@ type RenderItem = (props: { item: SidebarActionableItem, isExpanded: boolean ): void; - getItemActions(this: void, item: SidebarTreeItem): NavigationItemActions; + getItemActions( + this: void, + item: SidebarTreeItem + ): { + actions: NavigationItemActions; + config?: { + collapseAfter: number; + }; + }; }) => React.ReactNode; export type OnDefaultAction = ( item: T, @@ -87,7 +95,15 @@ type VirtualTreeProps = { isExpanded: boolean ): void; onItemAction(this: void, item: SidebarActionableItem, action: Actions): void; - getItemActions(this: void, item: SidebarTreeItem): NavigationItemActions; + getItemActions( + this: void, + item: SidebarTreeItem + ): { + actions: NavigationItemActions; + config?: { + collapseAfter: number; + }; + }; __TEST_OVER_SCAN_COUNT?: number; }; @@ -216,7 +232,15 @@ type VirtualItemData = { item: SidebarActionableItem, isExpanded: boolean ): void; - getItemActions(this: void, item: SidebarTreeItem): NavigationItemActions; + getItemActions( + this: void, + item: SidebarTreeItem + ): { + actions: NavigationItemActions; + config?: { + collapseAfter: number; + }; + }; }; function TreeItem({ index, diff --git a/packages/compass-e2e-tests/helpers/commands/open-shell.ts b/packages/compass-e2e-tests/helpers/commands/open-shell.ts index 9dd5f14a43d..4a777aae059 100644 --- a/packages/compass-e2e-tests/helpers/commands/open-shell.ts +++ b/packages/compass-e2e-tests/helpers/commands/open-shell.ts @@ -10,7 +10,8 @@ export async function openShell( if (TEST_MULTIPLE_CONNECTIONS) { await browser.selectConnectionMenuItem( connectionName, - Selectors.Multiple.OpenShellItem + Selectors.Multiple.OpenShellItem, + false // the item is not contained in the three-dot menu ); // try and make sure the shell tab is active and ready diff --git a/packages/compass-e2e-tests/helpers/commands/sidebar-connection.ts b/packages/compass-e2e-tests/helpers/commands/sidebar-connection.ts index 0a395f712ff..3bec991980a 100644 --- a/packages/compass-e2e-tests/helpers/commands/sidebar-connection.ts +++ b/packages/compass-e2e-tests/helpers/commands/sidebar-connection.ts @@ -60,7 +60,8 @@ export async function selectConnection( export async function selectConnectionMenuItem( browser: CompassBrowser, connectionName: string, - itemSelector: string + itemSelector: string, + openMenu = true ) { const Sidebar = TEST_MULTIPLE_CONNECTIONS ? Selectors.Multiple @@ -77,7 +78,7 @@ export async function selectConnectionMenuItem( return true; } - // It takes some time for the favourites to load + // It takes some time for the connections to load await browser.$(selector).waitForDisplayed(); // workaround for weirdness in the ItemActionControls menu opener icon @@ -92,10 +93,14 @@ export async function selectConnectionMenuItem( return false; }); - await browser.clickVisible( - Selectors.sidebarConnectionMenuButton(connectionName) - ); - await browser.$(Sidebar.ConnectionMenu).waitForDisplayed(); + // if the action lives outside of the three-dot menu, then there's no need to open the menu + if (openMenu) { + await browser.clickVisible( + Selectors.sidebarConnectionMenuButton(connectionName) + ); + await browser.$(Sidebar.ConnectionMenu).waitForDisplayed(); + } + await browser.clickVisible(itemSelector); } @@ -126,3 +131,46 @@ export async function removeConnection( await browser.$(selector).waitForExist({ reverse: true }); } } + +export async function hasConnectionMenuItem( + browser: CompassBrowser, + connectionName: string, + itemSelector: string, + openMenu = true +) { + const selector = Selectors.sidebarConnection(connectionName); + + await browser.waitUntil(async () => { + if ( + await browser + .$(Selectors.sidebarConnectionMenuButton(connectionName)) + .isDisplayed() + ) { + return true; + } + + // It takes some time for the connections to load + await browser.$(selector).waitForDisplayed(); + + // workaround for weirdness in the ItemActionControls menu opener icon + await browser.clickVisible(Selectors.Multiple.ConnectionsTitle); + + // Hover over an arbitrary other element to ensure that the second hover will + // actually be a fresh one. This otherwise breaks if this function is called + // twice in a row. + await browser.hover(`*:not(${selector}, ${selector} *)`); + + await browser.hover(selector); + return false; + }); + + // if the action lives outside of the three-dot menu, then there's no need to open the menu + if (openMenu) { + await browser.clickVisible( + Selectors.sidebarConnectionMenuButton(connectionName) + ); + await browser.$(Selectors.Multiple.ConnectionMenu).waitForDisplayed(); + } + + return await browser.$(itemSelector).isExisting(); +} diff --git a/packages/compass-e2e-tests/tests/connection.test.ts b/packages/compass-e2e-tests/tests/connection.test.ts index 7d2e9758ebd..3633d9421bb 100644 --- a/packages/compass-e2e-tests/tests/connection.test.ts +++ b/packages/compass-e2e-tests/tests/connection.test.ts @@ -210,11 +210,10 @@ async function assertCannotCreateDb( // open the create database modal from the sidebar if (TEST_MULTIPLE_CONNECTIONS) { - await browser.clickVisible( - Selectors.sidebarConnectionActionButton( - connectionName, - Sidebar.CreateDatabaseButton - ) + await browser.selectConnectionMenuItem( + connectionName, + Sidebar.CreateDatabaseButton, + false ); } else { await browser.clickVisible(Sidebar.CreateDatabaseButton); diff --git a/packages/compass-e2e-tests/tests/instance-sidebar.test.ts b/packages/compass-e2e-tests/tests/instance-sidebar.test.ts index 79b0f019d46..1003e3b077f 100644 --- a/packages/compass-e2e-tests/tests/instance-sidebar.test.ts +++ b/packages/compass-e2e-tests/tests/instance-sidebar.test.ts @@ -170,11 +170,10 @@ describe('Instance sidebar', function () { // open the create database modal from the sidebar if (TEST_MULTIPLE_CONNECTIONS) { - await browser.clickVisible( - Selectors.sidebarConnectionActionButton( - DEFAULT_CONNECTION_NAME, - Sidebar.CreateDatabaseButton - ) + await browser.selectConnectionMenuItem( + DEFAULT_CONNECTION_NAME, + Sidebar.CreateDatabaseButton, + false ); } else { await browser.clickVisible(Sidebar.CreateDatabaseButton); diff --git a/packages/compass-e2e-tests/tests/read-only.test.ts b/packages/compass-e2e-tests/tests/read-only.test.ts index 2182dd56c46..4e869b0a1ad 100644 --- a/packages/compass-e2e-tests/tests/read-only.test.ts +++ b/packages/compass-e2e-tests/tests/read-only.test.ts @@ -52,16 +52,19 @@ describe('readOnly: true / Read-Only Edition', function () { ); } - const addDatabaseSelector = TEST_MULTIPLE_CONNECTIONS - ? Selectors.sidebarConnectionActionButton( + if (TEST_MULTIPLE_CONNECTIONS) { + expect( + await browser.hasConnectionMenuItem( DEFAULT_CONNECTION_NAME, - Sidebar.CreateDatabaseButton + Sidebar.CreateDatabaseButton, + false ) - : Sidebar.CreateDatabaseButton; - - expect(await browser.$(addDatabaseSelector).isExisting()).to.be.equal( - false - ); + ).to.be.equal(false); + } else { + expect( + await browser.$(Sidebar.CreateDatabaseButton).isExisting() + ).to.be.equal(false); + } await browser.openSettingsModal(); const settingsModal = await browser.$(Selectors.SettingsModal); @@ -81,7 +84,19 @@ describe('readOnly: true / Read-Only Edition', function () { ); } - expect(await browser.$(addDatabaseSelector).isExisting()).to.be.equal(true); + if (TEST_MULTIPLE_CONNECTIONS) { + expect( + await browser.hasConnectionMenuItem( + DEFAULT_CONNECTION_NAME, + Sidebar.CreateDatabaseButton, + false + ) + ).to.be.equal(true); + } else { + expect( + await browser.$(Sidebar.CreateDatabaseButton).isExisting() + ).to.be.equal(true); + } }); it('shows and hides the plus icon on the siderbar to create a collection', async function () { diff --git a/packages/compass-e2e-tests/tests/shell.test.ts b/packages/compass-e2e-tests/tests/shell.test.ts index c4986670ccb..b9f52492c2e 100644 --- a/packages/compass-e2e-tests/tests/shell.test.ts +++ b/packages/compass-e2e-tests/tests/shell.test.ts @@ -12,6 +12,8 @@ import { } from '../helpers/compass'; import type { Compass } from '../helpers/compass'; import * as Selectors from '../helpers/selectors'; +import chai from 'chai'; +const { expect } = chai; describe('Shell', function () { let compass: Compass; @@ -24,6 +26,7 @@ describe('Shell', function () { telemetry = await startTelemetryServer(); compass = await init(this.test?.fullTitle()); browser = compass.browser; + await browser.setFeature('enableShell', true); }); after(async function () { @@ -56,17 +59,19 @@ describe('Shell', function () { }); it('shows and hides shell based on settings', async function () { - // TODO(COMPASS-8071): Leaving this skipped until we decide what we're going - // to do. hide the buttons & menu items, disable them or keep them enabled - // and open a shell tab that just has an error banner. - if (TEST_MULTIPLE_CONNECTIONS) { - this.skip(); - } - await browser.connectWithConnectionString(); - // Will fail if shell is not on the screen eventually - await browser.$(Selectors.ShellSection).waitForExist(); + if (TEST_MULTIPLE_CONNECTIONS) { + expect( + await browser.hasConnectionMenuItem( + DEFAULT_CONNECTION_NAME, + Selectors.Multiple.OpenShellItem + ) + ).to.be.equal(true); + } else { + // Will fail if shell is not on the screen eventually + await browser.$(Selectors.ShellSection).waitForExist(); + } await browser.openSettingsModal(); const settingsModal = await browser.$(Selectors.SettingsModal); @@ -79,7 +84,16 @@ describe('Shell', function () { // wait for the modal to go away await settingsModal.waitForDisplayed({ reverse: true }); - // Will fail if shell eventually doesn't go away from the screen - await browser.$(Selectors.ShellSection).waitForExist({ reverse: true }); + if (TEST_MULTIPLE_CONNECTIONS) { + expect( + await browser.hasConnectionMenuItem( + DEFAULT_CONNECTION_NAME, + Selectors.Multiple.OpenShellItem + ) + ).to.be.equal(false); + } else { + // Will fail if shell eventually doesn't go away from the screen + await browser.$(Selectors.ShellSection).waitForExist({ reverse: true }); + } }); }); diff --git a/packages/compass-sidebar/src/components/multiple-connections/sidebar.spec.tsx b/packages/compass-sidebar/src/components/multiple-connections/sidebar.spec.tsx index 22149507052..2d316ee5dda 100644 --- a/packages/compass-sidebar/src/components/multiple-connections/sidebar.spec.tsx +++ b/packages/compass-sidebar/src/components/multiple-connections/sidebar.spec.tsx @@ -505,9 +505,10 @@ describe('Multiple Connections Sidebar Component', function () { ); expect(screen.getByLabelText('Create database')).to.be.visible; + expect(screen.getByLabelText('Open MongoDB shell')).to.be.visible; userEvent.click(screen.getByLabelText('Show actions')); - expect(screen.getByText('Open MongoDB shell')).to.be.visible; + expect(screen.getByText('View performance metrics')).to.be.visible; expect(screen.getByText('Show connection info')).to.be.visible; expect(screen.getByText('Disconnect')).to.be.visible; @@ -557,9 +558,7 @@ describe('Multiple Connections Sidebar Component', function () { within(connectionItem).getByTestId('base-navigation-item') ); - userEvent.click(screen.getByLabelText('Show actions')); - - userEvent.click(screen.getByText('Open MongoDB shell')); + userEvent.click(screen.getByLabelText('Open MongoDB shell')); expect(workspaceService.openShellWorkspace).to.have.been.calledWith( savedFavoriteConnection.id,