Skip to content

chore(connections-navigation): add connect button to connections in sidebar COMPASS-8381 #6449

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 5 commits into from
Nov 12, 2024
Merged

chore(connections-navigation): add connect button to connections in sidebar COMPASS-8381 #6449

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8b2738d
Add connect action to connections in sidebar
kraenhansen Nov 6, 2024
d54702b
Disable pointer cursor and connect on click for disconnected connections
kraenhansen Nov 6, 2024
022ed4a
Add "button" representation for the connect button
kraenhansen Nov 6, 2024
7579e5c
Update e2e tests
kraenhansen Nov 6, 2024
5ac6377
Invert sidebar test
kraenhansen Nov 7, 2024
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
56 changes: 37 additions & 19 deletions packages/compass-components/src/components/item-action-controls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@ export type ItemAction<Action extends string> = {
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 };
Expand Down Expand Up @@ -343,26 +345,42 @@ export function ItemActionGroup<Action extends string>({
tooltip,
tooltipProps,
actionButtonClassName,
expandedPresentation = 'icon',
} = menuItem;
const button = (
<ItemActionButton
key={action}
glyph={icon}
label={label}
title={!tooltip ? label : undefined}
size={iconSize}
data-action={action}
data-testid={actionTestId<Action>(dataTestId, action)}
onClick={onClick}
className={cx(
actionGroupButtonStyle,
iconClassName,
actionButtonClassName
)}
style={iconStyle}
disabled={isDisabled}
/>
);
const button =
expandedPresentation === 'icon' ? (
<ItemActionButton
key={action}
glyph={icon}
label={label}
title={!tooltip ? label : undefined}
size={iconSize}
data-action={action}
data-testid={actionTestId<Action>(dataTestId, action)}
onClick={onClick}
className={cx(
actionGroupButtonStyle,
iconClassName,
actionButtonClassName
)}
style={iconStyle}
disabled={isDisabled}
/>
) : (
<Button
key={action}
title={!tooltip ? label : undefined}
size={iconSize}
data-action={action}
data-testid={actionTestId<Action>(dataTestId, action)}
onClick={onClick}
className={actionButtonClassName}
style={iconStyle}
disabled={isDisabled}
>
{label}
</Button>
);

if (tooltip) {
return (
Expand Down
11 changes: 9 additions & 2 deletions packages/compass-connections-navigation/src/base-navigation-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ type NavigationBaseItemProps = {
isExpandDisabled: boolean;
isExpanded: boolean;
isFocused: boolean;
hasDefaultAction: boolean;
icon: React.ReactNode;
style: React.CSSProperties;

Expand All @@ -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': {
Expand All @@ -53,6 +53,10 @@ const itemContainerStyles = css({
},
});

const itemContainerWithActionStyles = css({
cursor: 'pointer',
});

const itemWrapperStyles = css({
display: 'flex',
height: ROW_HEIGHT,
Expand Down Expand Up @@ -93,14 +97,17 @@ export const NavigationBaseItem: React.FC<NavigationBaseItemProps> = ({
isExpandDisabled,
isExpanded,
isFocused,
hasDefaultAction,
onExpand,
children,
}) => {
const [hoverProps, isHovered] = useHoverState();
return (
<div
data-testid="base-navigation-item"
className={itemContainerStyles}
className={cx(itemContainerStyles, {
[itemContainerWithActionStyles]: hasDefaultAction,
})}
{...hoverProps}
{...dataAttributes}
>
Expand Down
4 changes: 1 addition & 3 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 @@ -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');
Expand Down Expand Up @@ -187,7 +185,7 @@ const ConnectionsNavigationTree: React.FunctionComponent<
connectionInfo: item.connectionInfo,
}),
config: {
collapseAfter: 0,
collapseAfter: 1,
},
};
}
Expand Down
21 changes: 19 additions & 2 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 @@ -5,7 +5,7 @@ import { type ItemSeparator } from '@mongodb-js/compass-components';

export type NavigationItemActions = (ItemAction<Actions> | ItemSeparator)[];

export const notConnectedConnectionItemActions = ({
export const commonConnectionItemActions = ({
connectionInfo,
}: {
connectionInfo: ConnectionInfo;
Expand Down Expand Up @@ -81,7 +81,7 @@ export const connectedConnectionItemActions = ({
isShellEnabled: boolean;
}): NavigationItemActions => {
const isAtlas = !!connectionInfo.atlasMetadata;
const connectionManagementActions = notConnectedConnectionItemActions({
const connectionManagementActions = commonConnectionItemActions({
connectionInfo,
});
const actions: (ItemAction<Actions> | ItemSeparator | null)[] = [
Expand Down Expand Up @@ -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,
}: {
Expand Down
3 changes: 3 additions & 0 deletions packages/compass-connections-navigation/src/navigation-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -251,6 +251,9 @@ export function NavigationItem({
isActive={isActive}
isFocused={isFocused}
isExpanded={!!item.isExpanded}
hasDefaultAction={
item.type !== 'connection' || item.connectionStatus === 'connected'
Copy link
Contributor Author

@kraenhansen kraenhansen Nov 8, 2024

Choose a reason for hiding this comment

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

Ideally this would be co-located with or derived from the implementation in onDefaultAction in connections-navigation-tree.tsx, but that is not trivial because of the virtualization.

}
icon={itemIcon}
name={item.name}
style={style}
Expand Down
1 change: 1 addition & 0 deletions packages/compass-e2e-tests/helpers/commands/connect.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down
3 changes: 2 additions & 1 deletion packages/compass-e2e-tests/helpers/selectors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down Expand Up @@ -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 = (
Expand Down
11 changes: 4 additions & 7 deletions packages/compass-sidebar/src/components/multiple-connections/sidebar.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 () {
Expand Down
Loading