fix: expanding an inactive connection triggers connect COMPASS-8060 (#5997)

Author: paula-stacho

packages/compass-connections-navigation/src/base-navigation-item.tsx

@@ -13,7 +13,8 @@ import { type NavigationItemActions } from './item-actions';
 type NavigationBaseItemProps = {
   name: string;
   isActive: boolean;
-  canExpand: boolean;
+  isExpandVisible: boolean;
+  isExpandDisabled: boolean;
   isExpanded: boolean;
   isFocused: boolean;
   icon: React.ReactNode;
@@ -91,7 +92,8 @@ export const NavigationBaseItem: React.FC<NavigationBaseItemProps> = ({
   style,
   icon,
   dataAttributes,
-  canExpand,
+  isExpandVisible,
+  isExpandDisabled,
   isExpanded,
   isFocused,
   onExpand,
@@ -106,9 +108,10 @@ export const NavigationBaseItem: React.FC<NavigationBaseItemProps> = ({
       {...dataAttributes}
     >
       <div className={cx('item-wrapper', itemWrapperStyles)} style={style}>
-        {canExpand && (
+        {isExpandVisible && (
           <ExpandButton
             onClick={(evt) => {
+              if (isExpandDisabled) return;
               evt.stopPropagation();
               onExpand(!isExpanded);
             }}

packages/compass-connections-navigation/src/navigation-item.tsx

@@ -261,7 +261,11 @@ export function NavigationItem({
           name={item.name}
           style={style}
           dataAttributes={itemDataProps}
-          canExpand={item.isExpandable}
+          isExpandVisible={item.isExpandable}
+          isExpandDisabled={
+            item.type === 'connection' &&
+            item.connectionStatus === 'disconnected'
+          }
           onExpand={(isExpanded: boolean) => {
             onItemExpand(item, isExpanded);
           }}

packages/compass-sidebar/src/components/multiple-connections/sidebar.spec.tsx

@@ -619,6 +619,18 @@ describe('Multiple Connections Sidebar Component', function () {
             expect(disconnectSpy).to.be.calledWith(savedFavoriteConnection.id);
           });
 
+          it('should connect when the user tries to expand an inactive connection', async function () {
+            const connectSpy = sinon.spy(connectionsManager, 'connect');
+            await renderWithConnections();
+            const connectionItem = screen.getByTestId(savedRecentConnection.id);
+
+            userEvent.click(
+              within(connectionItem).getByLabelText('Caret Right Icon')
+            );
+
+            expect(connectSpy).to.be.calledWith(savedRecentConnection);
+          });
+
           it('should open edit connection modal when clicked on edit connection action', function () {
             // note that we only click on non-connected item because for
             // connected item we cannot edit connection