diff --git a/packages/compass-connections-navigation/src/base-navigation-item.tsx b/packages/compass-connections-navigation/src/base-navigation-item.tsx index eaf751082ce..1e287cefbee 100644 --- a/packages/compass-connections-navigation/src/base-navigation-item.tsx +++ b/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 = ({ style, icon, dataAttributes, - canExpand, + isExpandVisible, + isExpandDisabled, isExpanded, isFocused, onExpand, @@ -106,9 +108,10 @@ export const NavigationBaseItem: React.FC = ({ {...dataAttributes} >
- {canExpand && ( + {isExpandVisible && ( { + if (isExpandDisabled) return; evt.stopPropagation(); onExpand(!isExpanded); }} diff --git a/packages/compass-connections-navigation/src/navigation-item.tsx b/packages/compass-connections-navigation/src/navigation-item.tsx index ab0d7f69583..033d88b1fef 100644 --- a/packages/compass-connections-navigation/src/navigation-item.tsx +++ b/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); }} 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 04eb4f19759..67c8fbedaeb 100644 --- a/packages/compass-sidebar/src/components/multiple-connections/sidebar.spec.tsx +++ b/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