rename connections to context using a provider for is atlas connections

Author: djechlin-mongodb

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,14 +481,16 @@ const ConnectionsNavigation: React.FC<ConnectionsNavigationProps> = ({
     }
   }, [activeWorkspace, onDatabaseToggle, onConnectionToggle]);
 
+  const isAtlasConnectionStorage = useContext(IsAtlasConnectionStorageContext);
+
   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 +509,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.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,

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(
       <ConnectionStorageProvider
         value={sandboxConnectionStorage ?? storage.current}
       >
-        {children}
+        <IsAtlasConnectionStorageContext.Provider value={true}>
+          {children}
+        </IsAtlasConnectionStorageContext.Provider>
       </ConnectionStorageProvider>
     );
   }

packages/connection-storage/src/provider.ts

@@ -15,6 +15,8 @@ export const ConnectionStorageContext = createContext<ConnectionStorage | null>(
   null
 );
 
+export const IsAtlasConnectionStorageContext = createContext<boolean>(false);
+
 export const ConnectionStorageProvider = ConnectionStorageContext.Provider;
 
 // TODO(COMPASS-7397): storage context should not be leaking out of the service