diff --git a/packages/compass-components/src/components/item-action-controls.tsx b/packages/compass-components/src/components/item-action-controls.tsx index 5297b7a6211..1f2d58d223f 100644 --- a/packages/compass-components/src/components/item-action-controls.tsx +++ b/packages/compass-components/src/components/item-action-controls.tsx @@ -29,6 +29,8 @@ export type ItemAction = { disabledDescription?: string; tooltip?: string; actionButtonClassName?: string; + /** How to show the item when not collapsed into the menu */ + expandedPresentation?: 'icon' | 'button'; }; export type ItemSeparator = { separator: true }; @@ -343,26 +345,42 @@ export function ItemActionGroup({ tooltip, tooltipProps, actionButtonClassName, + expandedPresentation = 'icon', } = menuItem; - const button = ( - (dataTestId, action)} - onClick={onClick} - className={cx( - actionGroupButtonStyle, - iconClassName, - actionButtonClassName - )} - style={iconStyle} - disabled={isDisabled} - /> - ); + const button = + expandedPresentation === 'icon' ? ( + (dataTestId, action)} + onClick={onClick} + className={cx( + actionGroupButtonStyle, + iconClassName, + actionButtonClassName + )} + style={iconStyle} + disabled={isDisabled} + /> + ) : ( + + ); if (tooltip) { return ( diff --git a/packages/compass-connections-navigation/src/base-navigation-item.tsx b/packages/compass-connections-navigation/src/base-navigation-item.tsx index 6434b8b0c0a..f4dfa113de4 100644 --- a/packages/compass-connections-navigation/src/base-navigation-item.tsx +++ b/packages/compass-connections-navigation/src/base-navigation-item.tsx @@ -17,6 +17,7 @@ type NavigationBaseItemProps = { isExpandDisabled: boolean; isExpanded: boolean; isFocused: boolean; + hasDefaultAction: boolean; icon: React.ReactNode; style: React.CSSProperties; @@ -37,7 +38,6 @@ const menuStyles = css({ }); const itemContainerStyles = css({ - cursor: 'pointer', color: 'var(--item-color)', backgroundColor: 'var(--item-bg-color)', '&[data-is-active="true"] .item-wrapper': { @@ -53,6 +53,10 @@ const itemContainerStyles = css({ }, }); +const itemContainerWithActionStyles = css({ + cursor: 'pointer', +}); + const itemWrapperStyles = css({ display: 'flex', height: ROW_HEIGHT, @@ -93,6 +97,7 @@ export const NavigationBaseItem: React.FC = ({ isExpandDisabled, isExpanded, isFocused, + hasDefaultAction, onExpand, children, }) => { @@ -100,7 +105,9 @@ export const NavigationBaseItem: React.FC = ({ return (
diff --git a/packages/compass-connections-navigation/src/connections-navigation-tree.tsx b/packages/compass-connections-navigation/src/connections-navigation-tree.tsx index d5a68cd560a..14e6bbec8b5 100644 --- a/packages/compass-connections-navigation/src/connections-navigation-tree.tsx +++ b/packages/compass-connections-navigation/src/connections-navigation-tree.tsx @@ -87,8 +87,6 @@ const ConnectionsNavigationTree: React.FunctionComponent< if (item.type === 'connection') { if (item.connectionStatus === 'connected') { onItemAction(item, 'select-connection'); - } else { - onItemAction(item, 'connection-connect'); } } else if (item.type === 'database') { onItemAction(item, 'select-database'); @@ -187,7 +185,7 @@ const ConnectionsNavigationTree: React.FunctionComponent< connectionInfo: item.connectionInfo, }), config: { - collapseAfter: 0, + collapseAfter: 1, }, }; } diff --git a/packages/compass-connections-navigation/src/item-actions.ts b/packages/compass-connections-navigation/src/item-actions.ts index 7930ed44e8c..c412c25279c 100644 --- a/packages/compass-connections-navigation/src/item-actions.ts +++ b/packages/compass-connections-navigation/src/item-actions.ts @@ -5,7 +5,7 @@ import { type ItemSeparator } from '@mongodb-js/compass-components'; export type NavigationItemActions = (ItemAction | ItemSeparator)[]; -export const notConnectedConnectionItemActions = ({ +export const commonConnectionItemActions = ({ connectionInfo, }: { connectionInfo: ConnectionInfo; @@ -81,7 +81,7 @@ export const connectedConnectionItemActions = ({ isShellEnabled: boolean; }): NavigationItemActions => { const isAtlas = !!connectionInfo.atlasMetadata; - const connectionManagementActions = notConnectedConnectionItemActions({ + const connectionManagementActions = commonConnectionItemActions({ connectionInfo, }); const actions: (ItemAction | ItemSeparator | null)[] = [ @@ -135,6 +135,23 @@ export const connectedConnectionItemActions = ({ }); }; +export const notConnectedConnectionItemActions = ({ + connectionInfo, +}: { + connectionInfo: ConnectionInfo; +}): NavigationItemActions => { + const commonActions = commonConnectionItemActions({ connectionInfo }); + return [ + { + action: 'connection-connect', + label: 'Connect', + icon: 'Connect', + expandedPresentation: 'button', + }, + ...commonActions, + ]; +}; + export const databaseItemActions = ({ hasWriteActionsDisabled, }: { diff --git a/packages/compass-connections-navigation/src/navigation-item.tsx b/packages/compass-connections-navigation/src/navigation-item.tsx index e655bbe04f9..a5b3d530070 100644 --- a/packages/compass-connections-navigation/src/navigation-item.tsx +++ b/packages/compass-connections-navigation/src/navigation-item.tsx @@ -251,6 +251,9 @@ export function NavigationItem({ isActive={isActive} isFocused={isFocused} isExpanded={!!item.isExpanded} + hasDefaultAction={ + item.type !== 'connection' || item.connectionStatus === 'connected' + } icon={itemIcon} name={item.name} style={style} diff --git a/packages/compass-e2e-tests/helpers/commands/connect.ts b/packages/compass-e2e-tests/helpers/commands/connect.ts index 97356a91de5..0dada57a24f 100644 --- a/packages/compass-e2e-tests/helpers/commands/connect.ts +++ b/packages/compass-e2e-tests/helpers/commands/connect.ts @@ -185,6 +185,7 @@ export async function connectByName( connectionName: string, options: ConnectionResultOptions = {} ) { + await browser.hover(Selectors.sidebarConnection(connectionName)); await browser.clickVisible(Selectors.sidebarConnectionButton(connectionName)); await browser.waitForConnectionResult(connectionName, options); } diff --git a/packages/compass-e2e-tests/helpers/selectors.ts b/packages/compass-e2e-tests/helpers/selectors.ts index e137f94b4e3..235df5d5f1f 100644 --- a/packages/compass-e2e-tests/helpers/selectors.ts +++ b/packages/compass-e2e-tests/helpers/selectors.ts @@ -281,6 +281,7 @@ export const Single = { // Multiple Connections sidebar export const Multiple = { ConnectionsTitle: '[data-testid="connections-header"]', + ConnectButton: '[data-action="connection-connect"]', SidebarNewConnectionButton: '[data-action="add-new-connection"]', ConnectionMenu: '[data-testid="sidebar-navigation-item-actions"]', CreateDatabaseButton: @@ -402,7 +403,7 @@ export const sidebarConnection = (connectionName: string): string => { }; export const sidebarConnectionButton = (connectionName: string): string => { - return `${sidebarConnection(connectionName)} > div > button`; + return `${sidebarConnection(connectionName)} ${Multiple.ConnectButton}`; }; export const sidebarConnectionActionButton = ( 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 109d9398dfc..d883192a959 100644 --- a/packages/compass-sidebar/src/components/multiple-connections/sidebar.spec.tsx +++ b/packages/compass-sidebar/src/components/multiple-connections/sidebar.spec.tsx @@ -460,18 +460,15 @@ describe('Multiple Connections Sidebar Component', function () { expect(connectionsStoreActions.disconnect).to.have.been.called; }); - it('should connect when the user tries to expand an inactive connection', async function () { + it('should not connect when the user tries to expand an inactive connection', function () { const connectionItem = screen.getByTestId(savedRecentConnection.id); userEvent.click( within(connectionItem).getByLabelText('Caret Right Icon') ); - - await waitFor(() => { - expect(connectionsStoreActions.connect).to.be.calledWith( - savedRecentConnection - ); - }); + expect(connectionsStoreActions.connect).to.not.be.calledWith( + savedRecentConnection + ); }); it('should open edit connection modal when clicked on edit connection action', function () {