fix(compass-web): Rename connections list to clusters list in compass-web COMPASS-8698 (#6611)

* rename connections to context using a provider for is atlas connections

* move the context to sidebar

* add unit test

* only export the provider not the whole context

* remove import

Author: djechlin-mongodb

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<boolean>(false);
+
 function findCollection(ns: string, databases: Database[]) {
   const { database, collection } = toNS(ns);
 
@@ -477,14 +489,16 @@ const ConnectionsNavigation: React.FC<ConnectionsNavigationProps> = ({
     }
   }, [activeWorkspace, onDatabaseToggle, onConnectionToggle]);
 
+  const isAtlasConnectionStorage = useContext(AtlasClusterConnectionsOnly);
+
   return (
     <div className={connectionsContainerStyles}>
       <div
         className={connectionListHeaderStyles}
         data-testid="connections-header"
       >
         <Subtitle className={connectionListHeaderTitleStyles}>
-          Connections
+          {isAtlasConnectionStorage ? 'Clusters' : 'Connections'}
           {connections.length !== 0 && (
             <span className={connectionCountStyles}>
               ({connections.length})
@@ -503,7 +517,11 @@ const ConnectionsNavigation: React.FC<ConnectionsNavigationProps> = ({
       {connections.length > 0 && (
         <>
           <NavigationItemsFilter
-            placeholder="Search connections"
+            placeholder={
+              isAtlasConnectionStorage
+                ? 'Search clusters'
+                : 'Search connections'
+            }
             filter={filter}
             onFilterChange={onFilterChange}
           />

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 = (
       <ConnectionImportExportProvider>
         <WorkspacesProvider
           value={[
@@ -112,25 +117,36 @@ describe('Multiple Connections Sidebar Component', function () {
             ></MultipleConnectionSidebar>
           </WorkspacesServiceProvider>
         </WorkspacesProvider>
-      </ConnectionImportExportProvider>,
-      {
-        preferences: { enableMultipleConnectionSystem: true },
-        connections,
-        connectFn() {
-          return {
-            currentOp() {
-              return {};
-            },
-            top() {
-              return {};
-            },
-            getConnectionOptions() {
-              return {};
-            },
-          } as any;
-        },
-      }
+      </ConnectionImportExportProvider>
     );
+
+    if (atlasClusterConnectionsOnly !== undefined) {
+      component = (
+        <AtlasClusterConnectionsOnlyProvider
+          value={atlasClusterConnectionsOnly}
+        >
+          {component}
+        </AtlasClusterConnectionsOnlyProvider>
+      );
+    }
+
+    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<HTMLInputElement>('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<HTMLInputElement>('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 () {

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;

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 (
     <AtlasCloudAuthServiceProvider>
-      <AtlasServiceProvider>
-        <AtlasAiServiceProvider apiURLPreset="cloud">
-          {children}
-        </AtlasAiServiceProvider>
-      </AtlasServiceProvider>
+      <AtlasClusterConnectionsOnlyProvider value={true}>
+        <AtlasServiceProvider>
+          <AtlasAiServiceProvider apiURLPreset="cloud">
+            {children}
+          </AtlasAiServiceProvider>
+        </AtlasServiceProvider>
+      </AtlasClusterConnectionsOnlyProvider>
     </AtlasCloudAuthServiceProvider>
   );
 };