From 3bdc7eb8026a677366e0734dc77d033e49b1dafa Mon Sep 17 00:00:00 2001 From: Daniel Echlin Date: Mon, 13 Jan 2025 19:47:04 -0500 Subject: [PATCH 1/5] rename connections to context using a provider for is atlas connections --- .../connections-navigation.tsx | 16 +++++++++++++--- .../components/multiple-connections/sidebar.tsx | 2 +- packages/compass-web/src/connection-storage.tsx | 5 ++++- packages/connection-storage/src/provider.ts | 2 ++ 4 files changed, 20 insertions(+), 5 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 dac88d84deb..8f32bba46ae 100644 --- a/packages/compass-sidebar/src/components/multiple-connections/connections-navigation.tsx +++ b/packages/compass-sidebar/src/components/multiple-connections/connections-navigation.tsx @@ -1,6 +1,10 @@ import toNS from 'mongodb-ns'; -import React, { useCallback, useEffect, useMemo } from 'react'; +import React, { useCallback, useContext, useEffect, useMemo } from 'react'; import { connect } from 'react-redux'; +import { + connectionStorageLocator, + IsAtlasConnectionStorageContext, +} from '@mongodb-js/connection-storage/provider'; import { ChevronCollapse, type ItemAction, @@ -477,6 +481,8 @@ const ConnectionsNavigation: React.FC = ({ } }, [activeWorkspace, onDatabaseToggle, onConnectionToggle]); + const isAtlasConnectionStorage = useContext(IsAtlasConnectionStorageContext); + return (
= ({ data-testid="connections-header" > - Connections + {isAtlasConnectionStorage ? 'Clusters' : 'Connections'} {connections.length !== 0 && ( ({connections.length}) @@ -503,7 +509,11 @@ const ConnectionsNavigation: React.FC = ({ {connections.length > 0 && ( <> diff --git a/packages/compass-sidebar/src/components/multiple-connections/sidebar.tsx b/packages/compass-sidebar/src/components/multiple-connections/sidebar.tsx index efa48a777eb..7c1d9259fb3 100644 --- a/packages/compass-sidebar/src/components/multiple-connections/sidebar.tsx +++ b/packages/compass-sidebar/src/components/multiple-connections/sidebar.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useState } from 'react'; +import React, { useCallback, useContext, useState } from 'react'; import { type MapStateToProps, connect } from 'react-redux'; import { ConnectionStatus, diff --git a/packages/compass-web/src/connection-storage.tsx b/packages/compass-web/src/connection-storage.tsx index 027f9d9b88e..293dda9959c 100644 --- a/packages/compass-web/src/connection-storage.tsx +++ b/packages/compass-web/src/connection-storage.tsx @@ -1,4 +1,5 @@ import React, { useContext, useRef } from 'react'; +import { IsAtlasConnectionStorageContext } from '@mongodb-js/connection-storage/provider'; import type { ConnectionStorage, ConnectionInfo, @@ -374,7 +375,9 @@ export const AtlasCloudConnectionStorageProvider = createServiceProvider( - {children} + + {children} + ); } diff --git a/packages/connection-storage/src/provider.ts b/packages/connection-storage/src/provider.ts index e13ca061ffa..c87003ab893 100644 --- a/packages/connection-storage/src/provider.ts +++ b/packages/connection-storage/src/provider.ts @@ -15,6 +15,8 @@ export const ConnectionStorageContext = createContext( null ); +export const IsAtlasConnectionStorageContext = createContext(false); + export const ConnectionStorageProvider = ConnectionStorageContext.Provider; // TODO(COMPASS-7397): storage context should not be leaking out of the service From a5d5cce564bebd47d164c2bcc3775c510a523cca Mon Sep 17 00:00:00 2001 From: Daniel Echlin Date: Wed, 15 Jan 2025 07:15:55 -0500 Subject: [PATCH 2/5] move the context to sidebar --- .../connections-navigation.tsx | 20 +++++++++++++------ .../multiple-connections/sidebar.tsx | 2 +- packages/compass-sidebar/src/index.ts | 2 ++ .../compass-web/src/connection-storage.tsx | 5 +---- packages/compass-web/src/entrypoint.tsx | 17 ++++++++++------ packages/connection-storage/src/provider.ts | 2 -- 6 files changed, 29 insertions(+), 19 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 8f32bba46ae..6203a9a984f 100644 --- a/packages/compass-sidebar/src/components/multiple-connections/connections-navigation.tsx +++ b/packages/compass-sidebar/src/components/multiple-connections/connections-navigation.tsx @@ -1,10 +1,12 @@ import toNS from 'mongodb-ns'; -import React, { useCallback, useContext, useEffect, useMemo } from 'react'; +import React, { + createContext, + useCallback, + useContext, + useEffect, + useMemo, +} from 'react'; import { connect } from 'react-redux'; -import { - connectionStorageLocator, - IsAtlasConnectionStorageContext, -} from '@mongodb-js/connection-storage/provider'; import { ChevronCollapse, type ItemAction, @@ -95,6 +97,12 @@ const noDeploymentStyles = css({ gap: spacing[200], }); +/** + * Indicates only Atlas cluster connections are supported, and the user cannot navigate + * to other types of connections from this UI. + */ +export const AtlasClusterConnectionsOnly = createContext(false); + function findCollection(ns: string, databases: Database[]) { const { database, collection } = toNS(ns); @@ -481,7 +489,7 @@ const ConnectionsNavigation: React.FC = ({ } }, [activeWorkspace, onDatabaseToggle, onConnectionToggle]); - const isAtlasConnectionStorage = useContext(IsAtlasConnectionStorageContext); + const isAtlasConnectionStorage = useContext(AtlasClusterConnectionsOnly); return (
diff --git a/packages/compass-sidebar/src/components/multiple-connections/sidebar.tsx b/packages/compass-sidebar/src/components/multiple-connections/sidebar.tsx index 7c1d9259fb3..efa48a777eb 100644 --- a/packages/compass-sidebar/src/components/multiple-connections/sidebar.tsx +++ b/packages/compass-sidebar/src/components/multiple-connections/sidebar.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useContext, useState } from 'react'; +import React, { useCallback, useState } from 'react'; import { type MapStateToProps, connect } from 'react-redux'; import { ConnectionStatus, diff --git a/packages/compass-sidebar/src/index.ts b/packages/compass-sidebar/src/index.ts index f6db8837655..2347c6efb83 100644 --- a/packages/compass-sidebar/src/index.ts +++ b/packages/compass-sidebar/src/index.ts @@ -1,5 +1,6 @@ import type { ActivateHelpers } from 'hadron-app-registry'; import { registerHadronPlugin, type AppRegistry } from 'hadron-app-registry'; +import { createContext } from 'react'; import SidebarPlugin from './plugin'; import { createSidebarStore } from './stores'; import { @@ -11,6 +12,7 @@ import type { ConnectionsService } from '@mongodb-js/compass-connections/provide import { connectionsLocator } from '@mongodb-js/compass-connections/provider'; import type { Logger } from '@mongodb-js/compass-logging/provider'; import { createLoggerLocator } from '@mongodb-js/compass-logging/provider'; +export { AtlasClusterConnectionsOnly } from './components/multiple-connections/connections-navigation'; export const CompassSidebarPlugin = registerHadronPlugin( { diff --git a/packages/compass-web/src/connection-storage.tsx b/packages/compass-web/src/connection-storage.tsx index 293dda9959c..027f9d9b88e 100644 --- a/packages/compass-web/src/connection-storage.tsx +++ b/packages/compass-web/src/connection-storage.tsx @@ -1,5 +1,4 @@ import React, { useContext, useRef } from 'react'; -import { IsAtlasConnectionStorageContext } from '@mongodb-js/connection-storage/provider'; import type { ConnectionStorage, ConnectionInfo, @@ -375,9 +374,7 @@ export const AtlasCloudConnectionStorageProvider = createServiceProvider( - - {children} - + {children} ); } diff --git a/packages/compass-web/src/entrypoint.tsx b/packages/compass-web/src/entrypoint.tsx index 482038fba6c..bff38fe6843 100644 --- a/packages/compass-web/src/entrypoint.tsx +++ b/packages/compass-web/src/entrypoint.tsx @@ -19,7 +19,10 @@ import { WorkspaceTab as CollectionWorkspace, CollectionTabsProvider, } from '@mongodb-js/compass-collection'; -import { CompassSidebarPlugin } from '@mongodb-js/compass-sidebar'; +import { + CompassSidebarPlugin, + AtlasClusterConnectionsOnly, +} from '@mongodb-js/compass-sidebar'; import CompassQueryBarPlugin from '@mongodb-js/compass-query-bar'; import { CompassDocumentsPlugin } from '@mongodb-js/compass-crud'; import { @@ -61,11 +64,13 @@ import { useCompassWebPreferences } from './preferences'; const WithAtlasProviders: React.FC = ({ children }) => { return ( - - - {children} - - + + + + {children} + + + ); }; diff --git a/packages/connection-storage/src/provider.ts b/packages/connection-storage/src/provider.ts index c87003ab893..e13ca061ffa 100644 --- a/packages/connection-storage/src/provider.ts +++ b/packages/connection-storage/src/provider.ts @@ -15,8 +15,6 @@ export const ConnectionStorageContext = createContext( null ); -export const IsAtlasConnectionStorageContext = createContext(false); - export const ConnectionStorageProvider = ConnectionStorageContext.Provider; // TODO(COMPASS-7397): storage context should not be leaking out of the service From 13d5e787a5859be2fe5ccc2aada13b395ca9e741 Mon Sep 17 00:00:00 2001 From: Daniel Echlin Date: Wed, 15 Jan 2025 07:55:01 -0500 Subject: [PATCH 3/5] add unit test --- .../multiple-connections/sidebar.spec.tsx | 86 ++++++++++++++----- 1 file changed, 65 insertions(+), 21 deletions(-) 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 fa37ac4ec5f..6d00bed601a 100644 --- a/packages/compass-sidebar/src/components/multiple-connections/sidebar.spec.tsx +++ b/packages/compass-sidebar/src/components/multiple-connections/sidebar.spec.tsx @@ -17,7 +17,7 @@ import type { WorkspacesService } from '@mongodb-js/compass-workspaces/provider' import { WorkspacesServiceProvider } from '@mongodb-js/compass-workspaces/provider'; import { TestMongoDBInstanceManager } from '@mongodb-js/compass-app-stores/provider'; import { ConnectionImportExportProvider } from '@mongodb-js/compass-connection-import-export'; -import { CompassSidebarPlugin } from '../../index'; +import { AtlasClusterConnectionsOnly, CompassSidebarPlugin } from '../../index'; import type { ConnectionInfo } from '@mongodb-js/compass-connections/provider'; import type AppRegistry from '../../../../hadron-app-registry/dist'; @@ -91,14 +91,16 @@ describe('Multiple Connections Sidebar Component', function () { function doRender( activeWorkspace: WorkspaceTab | null = null, - connections: ConnectionInfo[] = [savedFavoriteConnection] + connections: ConnectionInfo[] = [savedFavoriteConnection], + atlasClusterConnectionsOnly: boolean | undefined = undefined ) { workspace = sinon.spy({ openMyQueriesWorkspace: () => undefined, openShellWorkspace: () => undefined, openPerformanceWorkspace: () => undefined, }) as any; - const result = renderWithConnections( + + let component = ( - , - { - preferences: { enableMultipleConnectionSystem: true }, - connections, - connectFn() { - return { - currentOp() { - return {}; - }, - top() { - return {}; - }, - getConnectionOptions() { - return {}; - }, - } as any; - }, - } + ); + + if (atlasClusterConnectionsOnly !== undefined) { + component = ( + + {component} + + ); + } + + const result = renderWithConnections(component, { + preferences: { enableMultipleConnectionSystem: true }, + connections, + connectFn() { + return { + currentOp() { + return {}; + }, + top() { + return {}; + }, + getConnectionOptions() { + return {}; + }, + } as any; + }, + }); track = result.track; appRegistry = sinon.spy(result.globalAppRegistry); connectionsStoreActions = sinon.spy(result.connectionsStore.actions); @@ -188,6 +201,37 @@ describe('Multiple Connections Sidebar Component', function () { }); }); + describe("'Connections ' header", function () { + context('by default', () => { + it("shows 'Connections' in header and search bar", () => { + doRender(undefined, [savedFavoriteConnection, savedRecentConnection]); + expect(screen.getByTestId('connections-header').textContent).to.equal( + 'Connections(2)' + ); + expect( + screen.getByTestId('sidebar-filter-input') + .placeholder + ).to.equal('Search connections'); + }); + }); + context('when is atlas clusters only', () => { + it("shows 'Clusters' in header and search bar", () => { + doRender( + undefined, + [savedFavoriteConnection, savedRecentConnection], + true + ); + expect(screen.getByTestId('connections-header').textContent).to.equal( + 'Clusters(2)' + ); + expect( + screen.getByTestId('sidebar-filter-input') + .placeholder + ).to.equal('Search clusters'); + }); + }); + }); + describe('connections list', function () { context('when there are no connections', function () { it('should display an empty state with a CTA to add new connection', function () { From a5d489f53729388311d0067b2df2a738da83524a Mon Sep 17 00:00:00 2001 From: Daniel Echlin Date: Wed, 15 Jan 2025 08:15:29 -0500 Subject: [PATCH 4/5] only export the provider not the whole context --- .../src/components/multiple-connections/sidebar.spec.tsx | 9 ++++++--- packages/compass-sidebar/src/index.ts | 5 ++++- packages/compass-web/src/entrypoint.tsx | 6 +++--- 3 files changed, 13 insertions(+), 7 deletions(-) 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 6d00bed601a..e0f388a0e2e 100644 --- a/packages/compass-sidebar/src/components/multiple-connections/sidebar.spec.tsx +++ b/packages/compass-sidebar/src/components/multiple-connections/sidebar.spec.tsx @@ -17,7 +17,10 @@ import type { WorkspacesService } from '@mongodb-js/compass-workspaces/provider' import { WorkspacesServiceProvider } from '@mongodb-js/compass-workspaces/provider'; import { TestMongoDBInstanceManager } from '@mongodb-js/compass-app-stores/provider'; import { ConnectionImportExportProvider } from '@mongodb-js/compass-connection-import-export'; -import { AtlasClusterConnectionsOnly, CompassSidebarPlugin } from '../../index'; +import { + AtlasClusterConnectionsOnlyProvider, + CompassSidebarPlugin, +} from '../../index'; import type { ConnectionInfo } from '@mongodb-js/compass-connections/provider'; import type AppRegistry from '../../../../hadron-app-registry/dist'; @@ -119,11 +122,11 @@ describe('Multiple Connections Sidebar Component', function () { if (atlasClusterConnectionsOnly !== undefined) { component = ( - {component} - + ); } diff --git a/packages/compass-sidebar/src/index.ts b/packages/compass-sidebar/src/index.ts index 2347c6efb83..38192cd4596 100644 --- a/packages/compass-sidebar/src/index.ts +++ b/packages/compass-sidebar/src/index.ts @@ -12,7 +12,7 @@ import type { ConnectionsService } from '@mongodb-js/compass-connections/provide import { connectionsLocator } from '@mongodb-js/compass-connections/provider'; import type { Logger } from '@mongodb-js/compass-logging/provider'; import { createLoggerLocator } from '@mongodb-js/compass-logging/provider'; -export { AtlasClusterConnectionsOnly } from './components/multiple-connections/connections-navigation'; +import { AtlasClusterConnectionsOnly } from './components/multiple-connections/connections-navigation'; export const CompassSidebarPlugin = registerHadronPlugin( { @@ -54,3 +54,6 @@ export const CompassSidebarPlugin = registerHadronPlugin( logger: createLoggerLocator('COMPASS-SIDEBAR-UI'), } ); + +export const AtlasClusterConnectionsOnlyProvider = + AtlasClusterConnectionsOnly.Provider; diff --git a/packages/compass-web/src/entrypoint.tsx b/packages/compass-web/src/entrypoint.tsx index bff38fe6843..5ef4dab512b 100644 --- a/packages/compass-web/src/entrypoint.tsx +++ b/packages/compass-web/src/entrypoint.tsx @@ -21,7 +21,7 @@ import { } from '@mongodb-js/compass-collection'; import { CompassSidebarPlugin, - AtlasClusterConnectionsOnly, + AtlasClusterConnectionsOnlyProvider, } from '@mongodb-js/compass-sidebar'; import CompassQueryBarPlugin from '@mongodb-js/compass-query-bar'; import { CompassDocumentsPlugin } from '@mongodb-js/compass-crud'; @@ -64,13 +64,13 @@ import { useCompassWebPreferences } from './preferences'; const WithAtlasProviders: React.FC = ({ children }) => { return ( - + {children} - + ); }; From 6f163dc93217e5673d5441ad44387f2390dcc74d Mon Sep 17 00:00:00 2001 From: Daniel Echlin Date: Wed, 15 Jan 2025 10:07:45 -0500 Subject: [PATCH 5/5] remove import --- packages/compass-sidebar/src/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/compass-sidebar/src/index.ts b/packages/compass-sidebar/src/index.ts index 38192cd4596..dfa27cb08ab 100644 --- a/packages/compass-sidebar/src/index.ts +++ b/packages/compass-sidebar/src/index.ts @@ -1,6 +1,5 @@ import type { ActivateHelpers } from 'hadron-app-registry'; import { registerHadronPlugin, type AppRegistry } from 'hadron-app-registry'; -import { createContext } from 'react'; import SidebarPlugin from './plugin'; import { createSidebarStore } from './stores'; import {