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..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,5 +1,11 @@ import toNS from 'mongodb-ns'; -import React, { useCallback, useEffect, useMemo } from 'react'; +import React, { + createContext, + useCallback, + useContext, + useEffect, + useMemo, +} from 'react'; import { connect } from 'react-redux'; import { ChevronCollapse, @@ -91,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); @@ -477,6 +489,8 @@ const ConnectionsNavigation: React.FC = ({ } }, [activeWorkspace, onDatabaseToggle, onConnectionToggle]); + const isAtlasConnectionStorage = useContext(AtlasClusterConnectionsOnly); + return (
= ({ data-testid="connections-header" > - Connections + {isAtlasConnectionStorage ? 'Clusters' : 'Connections'} {connections.length !== 0 && ( ({connections.length}) @@ -503,7 +517,11 @@ const ConnectionsNavigation: React.FC = ({ {connections.length > 0 && ( <> 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..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 { 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'; @@ -91,14 +94,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 +204,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 () { diff --git a/packages/compass-sidebar/src/index.ts b/packages/compass-sidebar/src/index.ts index f6db8837655..dfa27cb08ab 100644 --- a/packages/compass-sidebar/src/index.ts +++ b/packages/compass-sidebar/src/index.ts @@ -11,6 +11,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'; +import { AtlasClusterConnectionsOnly } from './components/multiple-connections/connections-navigation'; export const CompassSidebarPlugin = registerHadronPlugin( { @@ -52,3 +53,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 482038fba6c..5ef4dab512b 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, + AtlasClusterConnectionsOnlyProvider, +} 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} + + + ); };