From 75cd2613afce596f151e2d665624ecbcddaceb0b Mon Sep 17 00:00:00 2001 From: Paula Stachova Date: Thu, 4 Jul 2024 10:44:45 +0200 Subject: [PATCH 1/3] fix: expanding an inactive connection triggers connect COMPASS-8060 --- .../multiple-connections/connections-navigation.tsx | 10 ++++++++-- .../components/multiple-connections/sidebar.spec.tsx | 12 ++++++++++++ 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/packages/compass-sidebar/src/components/multiple-connections/connections-navigation.tsx b/packages/compass-sidebar/src/components/multiple-connections/connections-navigation.tsx index f599bf4a9a1..75699329972 100644 --- a/packages/compass-sidebar/src/components/multiple-connections/connections-navigation.tsx +++ b/packages/compass-sidebar/src/components/multiple-connections/connections-navigation.tsx @@ -403,12 +403,18 @@ const ConnectionsNavigation: React.FC = ({ const onItemExpand = useCallback( (item: SidebarItem, isExpanded: boolean) => { if (item.type === 'connection') { - onConnectionToggle(item.connectionInfo.id, isExpanded); + if (item.connectionStatus === 'disconnected') { + // user is trying to expand an inactive connection -> we connect + // after it's connected, it'll be expanded by default + onConnectionItemAction(item, 'connection-connect'); + } else { + onConnectionToggle(item.connectionInfo.id, isExpanded); + } } else if (item.type === 'database') { onDatabaseToggle(item.connectionId, item.dbName, isExpanded); } }, - [onConnectionToggle, onDatabaseToggle] + [onConnectionToggle, onDatabaseToggle, onConnectionItemAction] ); const onConnectionListTitleAction = useCallback( 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 From eb9e882be0dc0f62519025d063148f24ddae9f60 Mon Sep 17 00:00:00 2001 From: Paula Stachova Date: Thu, 4 Jul 2024 11:13:59 +0200 Subject: [PATCH 2/3] update comment --- .../components/multiple-connections/connections-navigation.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/compass-sidebar/src/components/multiple-connections/connections-navigation.tsx b/packages/compass-sidebar/src/components/multiple-connections/connections-navigation.tsx index 75699329972..de2dd797c46 100644 --- a/packages/compass-sidebar/src/components/multiple-connections/connections-navigation.tsx +++ b/packages/compass-sidebar/src/components/multiple-connections/connections-navigation.tsx @@ -404,8 +404,7 @@ const ConnectionsNavigation: React.FC = ({ (item: SidebarItem, isExpanded: boolean) => { if (item.type === 'connection') { if (item.connectionStatus === 'disconnected') { - // user is trying to expand an inactive connection -> we connect - // after it's connected, it'll be expanded by default + // we expand an inactive connection by connecting onConnectionItemAction(item, 'connection-connect'); } else { onConnectionToggle(item.connectionInfo.id, isExpanded); From 752f768041d096a21ee92bf34dbe5c978462c2ba Mon Sep 17 00:00:00 2001 From: Paula Stachova Date: Thu, 4 Jul 2024 14:50:30 +0200 Subject: [PATCH 3/3] disabled --- .../src/base-navigation-item.tsx | 9 ++++++--- .../src/navigation-item.tsx | 6 +++++- .../multiple-connections/connections-navigation.tsx | 9 ++------- 3 files changed, 13 insertions(+), 11 deletions(-) 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/connections-navigation.tsx b/packages/compass-sidebar/src/components/multiple-connections/connections-navigation.tsx index de2dd797c46..f599bf4a9a1 100644 --- a/packages/compass-sidebar/src/components/multiple-connections/connections-navigation.tsx +++ b/packages/compass-sidebar/src/components/multiple-connections/connections-navigation.tsx @@ -403,17 +403,12 @@ const ConnectionsNavigation: React.FC = ({ const onItemExpand = useCallback( (item: SidebarItem, isExpanded: boolean) => { if (item.type === 'connection') { - if (item.connectionStatus === 'disconnected') { - // we expand an inactive connection by connecting - onConnectionItemAction(item, 'connection-connect'); - } else { - onConnectionToggle(item.connectionInfo.id, isExpanded); - } + onConnectionToggle(item.connectionInfo.id, isExpanded); } else if (item.type === 'database') { onDatabaseToggle(item.connectionId, item.dbName, isExpanded); } }, - [onConnectionToggle, onDatabaseToggle, onConnectionItemAction] + [onConnectionToggle, onDatabaseToggle] ); const onConnectionListTitleAction = useCallback(