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

* Add connect action to connections in sidebar

* Disable pointer cursor and connect on click for disconnected connections

* Add "button" representation for the connect button

* Update e2e tests

* Invert sidebar test

Author: kraenhansen

packages/compass-components/src/components/item-action-controls.tsx

@@ -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 };
@@ -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 (

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,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}
     >

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,
               },
             };
           }

packages/compass-connections-navigation/src/item-actions.ts

@@ -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;
@@ -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)[] = [
@@ -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,
 }: {

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}

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);
 }

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 = (

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 () {