chore: remove singleConnectionConnectionInfo from 'My Queries' plugin…

… and Workspace and instead rely on getting the activeConnection from useActiveConnections
mongodb-js · May 13, 2024 · ea5519e · ea5519e
1 parent 3deac6b
commit ea5519e
Show file tree

Hide file tree

Showing 9 changed files with 44 additions and 98 deletions.
diff --git a/packages/compass-saved-aggregations-queries/src/components/aggregations-queries-list.tsx b/packages/compass-saved-aggregations-queries/src/components/aggregations-queries-list.tsx
@@ -21,6 +21,10 @@ import { editItem } from '../stores/edit-item';
 import { confirmDeleteItem } from '../stores/delete-item';
 import { copyToClipboard } from '../stores/copy-to-clipboard';
 import { useTrackOnChange } from '@mongodb-js/compass-logging/provider';
+import {
+  type ConnectionInfo,
+  useActiveConnections,
+} from '@mongodb-js/compass-connections/provider';
 
 const sortBy: { name: keyof Item; label: string }[] = [
   {
@@ -73,7 +77,7 @@ export type AggregationsQueriesListProps = {
   loading: boolean;
   items: Item[];
   onMount(): void;
-  onOpenItem(id: string): void;
+  onOpenItem(id: string, activeConnections: ConnectionInfo[]): void;
   onEditItem(id: string): void;
   onDeleteItem(id: string): void;
   onCopyToClipboard(id: string): void;
@@ -92,6 +96,8 @@ export const AggregationsQueriesList = ({
     void onMount();
   }, [onMount]);
 
+  const activeConnections = useActiveConnections();
+
   const {
     controls: filterControls,
     conditions: filters,
@@ -155,7 +161,7 @@ export const AggregationsQueriesList = ({
     (id: string, actionName: Action) => {
       switch (actionName) {
         case 'open':
-          onOpenItem(id);
+          onOpenItem(id, activeConnections);
           return;
         case 'rename':
           onEditItem(id);
@@ -168,7 +174,7 @@ export const AggregationsQueriesList = ({
           return;
       }
     },
-    [onOpenItem, onEditItem, onDeleteItem, onCopyToClipboard]
+    [activeConnections, onOpenItem, onEditItem, onDeleteItem, onCopyToClipboard]
   );
 
   const renderItem: React.ComponentProps<typeof VirtualGrid>['renderItem'] =

diff --git a/packages/compass-saved-aggregations-queries/src/index.ts b/packages/compass-saved-aggregations-queries/src/index.ts
@@ -1,8 +1,5 @@
 import { registerHadronPlugin } from 'hadron-app-registry';
-import {
-  connectionInfoAccessLocator,
-  connectionsManagerLocator,
-} from '@mongodb-js/compass-connections/provider';
+import { connectionsManagerLocator } from '@mongodb-js/compass-connections/provider';
 import { mongoDBInstancesManagerLocator } from '@mongodb-js/compass-app-stores/provider';
 import { createLoggerAndTelemetryLocator } from '@mongodb-js/compass-logging/provider';
 import { activatePlugin } from './stores';
@@ -23,7 +20,6 @@ const serviceLocators = {
   workspaces: workspacesServiceLocator,
   pipelineStorage: pipelineStorageLocator,
   favoriteQueryStorageAccess: favoriteQueryStorageAccessLocator,
-  connectionInfoAccess: connectionInfoAccessLocator,
 };
 
 export const MyQueriesPlugin = registerHadronPlugin<

diff --git a/packages/compass-saved-aggregations-queries/src/stores/index.ts b/packages/compass-saved-aggregations-queries/src/stores/index.ts
@@ -6,10 +6,7 @@ import type { ThunkAction } from 'redux-thunk';
 import itemsReducer from './aggregations-queries-items';
 import openItemReducer from './open-item';
 import editItemReducer from './edit-item';
-import {
-  type ConnectionInfoAccess,
-  type ConnectionsManager,
-} from '@mongodb-js/compass-connections/provider';
+import { type ConnectionsManager } from '@mongodb-js/compass-connections/provider';
 import type { MongoDBInstancesManager } from '@mongodb-js/compass-app-stores/provider';
 import type { LoggerAndTelemetry } from '@mongodb-js/compass-logging/provider';
 import type { workspacesServiceLocator } from '@mongodb-js/compass-workspaces/provider';
@@ -29,7 +26,6 @@ type MyQueriesServices = {
   pipelineStorage?: PipelineStorage;
   workspaces: ReturnType<typeof workspacesServiceLocator>;
   favoriteQueryStorageAccess?: FavoriteQueryStorageAccess;
-  connectionInfoAccess: ConnectionInfoAccess;
 };
 
 export function configureStore({
@@ -41,7 +37,6 @@ export function configureStore({
   workspaces,
   pipelineStorage,
   favoriteQueryStorageAccess,
-  connectionInfoAccess,
 }: MyQueriesServices) {
   return createStore(
     combineReducers({
@@ -59,7 +54,6 @@ export function configureStore({
         pipelineStorage,
         queryStorage: favoriteQueryStorageAccess?.getStorage(),
         workspaces,
-        connectionInfoAccess,
       })
     )
   );

diff --git a/packages/compass-saved-aggregations-queries/src/stores/open-item.ts b/packages/compass-saved-aggregations-queries/src/stores/open-item.ts
@@ -1,7 +1,10 @@
 import type { ActionCreator, AnyAction, Reducer } from 'redux';
 import type { SavedQueryAggregationThunkAction } from '.';
 import type { Item } from './aggregations-queries-items';
-import type { DataService } from '@mongodb-js/compass-connections/provider';
+import type {
+  ConnectionInfo,
+  DataService,
+} from '@mongodb-js/compass-connections/provider';
 import type { MongoDBInstance } from '@mongodb-js/compass-app-stores/provider';
 
 function isAction<A extends AnyAction>(
@@ -385,8 +388,11 @@ const openItem =
   };
 
 export const openSavedItem =
-  (id: string): SavedQueryAggregationThunkAction<Promise<void>> =>
-  async (dispatch, getState, { preferencesAccess, connectionInfoAccess }) => {
+  (
+    id: string,
+    activeConnections: ConnectionInfo[]
+  ): SavedQueryAggregationThunkAction<Promise<void>> =>
+  async (dispatch, getState, { preferencesAccess }) => {
     const {
       savedItems: { items },
     } = getState();
@@ -402,10 +408,11 @@ export const openSavedItem =
       preferencesAccess.getPreferences().enableNewMultipleConnectionSystem;
 
     if (!multiConnectionsEnabled) {
-      const { id: singleConnectionId } =
-        connectionInfoAccess.getCurrentConnectionInfo();
+      // In single connections mode, we only expect one connections to be here
+      // in the list of active connections.
+      const [activeConnection] = activeConnections;
       const { error, dataService, instance } = dispatch(
-        getDataServiceAndInstanceForConnection(singleConnectionId)
+        getDataServiceAndInstanceForConnection(activeConnection.id)
       );
       if (error) {
         return;
@@ -418,11 +425,11 @@ export const openSavedItem =
       });
 
       if (!coll) {
-        dispatch(openModal(item, singleConnectionId));
+        dispatch(openModal(item, activeConnection.id));
         return;
       }
 
-      dispatch(openItem(item, singleConnectionId, database, collection));
+      dispatch(openItem(item, activeConnection.id, database, collection));
     } else {
       // TODO: COMPASS-7904
     }

diff --git a/packages/compass-sidebar/src/plugin.tsx b/packages/compass-sidebar/src/plugin.tsx
@@ -5,28 +5,27 @@ import {
   css,
   defaultSidebarWidth,
 } from '@mongodb-js/compass-components';
-import type { ConnectionInfo } from '@mongodb-js/connection-info';
 import { useActiveWorkspace } from '@mongodb-js/compass-workspaces/provider';
 import Sidebar from './components/legacy/sidebar';
 import { usePreference } from 'compass-preferences-model/provider';
 import MultipleConnectionSidebar from './components/multiple-connections/sidebar';
-import { ConnectionInfoProvider } from '@mongodb-js/compass-connections/provider';
+import {
+  ConnectionInfoProvider,
+  useActiveConnections,
+} from '@mongodb-js/compass-connections/provider';
 
 const errorBoundaryStyles = css({
   width: defaultSidebarWidth,
 });
 
 export interface SidebarPluginProps {
   showConnectionInfo?: boolean;
-  singleConnectionConnectionInfo?: ConnectionInfo;
 }
 
 const SidebarPlugin: React.FunctionComponent<SidebarPluginProps> = ({
   showConnectionInfo,
-  // TODO(COMPASS-7397): the need for passing this directly to sidebar should go
-  // away with refactoring compass-connection to a plugin
-  singleConnectionConnectionInfo,
 }) => {
+  const [activeConnection] = useActiveConnections();
   const isMultiConnectionEnabled = usePreference(
     'enableNewMultipleConnectionSystem'
   );
@@ -39,9 +38,7 @@ const SidebarPlugin: React.FunctionComponent<SidebarPluginProps> = ({
     sidebar = <MultipleConnectionSidebar activeWorkspace={activeWorkspace} />;
   } else {
     sidebar = (
-      <ConnectionInfoProvider
-        connectionInfoId={singleConnectionConnectionInfo?.id}
-      >
+      <ConnectionInfoProvider connectionInfoId={activeConnection?.id}>
         {(connectionInfo) => {
           return (
             <Sidebar

diff --git a/packages/compass-workspaces/src/components/index.tsx b/packages/compass-workspaces/src/components/index.tsx
@@ -10,15 +10,8 @@ import {
 import Workspaces from './workspaces';
 import { connect } from '../stores/context';
 import { WorkspacesServiceProvider } from '../provider';
-import type { ConnectionInfo } from '@mongodb-js/compass-connections/provider';
 
 type WorkspacesWithSidebarProps = {
-  /**
-   * ConnectionInfo of the connection that Compass is connected to while in
-   * single connection mode. This is a temporary addition until we change My
-   * Queries plugin to be not dependent on DataService and MongoDBInstance.
-   */
-  singleConnectionConnectionInfo?: ConnectionInfo;
   /**
    * Current active workspace tab
    */
@@ -94,7 +87,6 @@ const sidebarStyles = css({
 const WorkspacesWithSidebar: React.FunctionComponent<
   WorkspacesWithSidebarProps
 > = ({
-  singleConnectionConnectionInfo,
   activeTab,
   activeTabCollectionInfo,
   openOnEmptyWorkspace,
@@ -120,10 +112,7 @@ const WorkspacesWithSidebar: React.FunctionComponent<
           {renderSidebar && React.createElement(renderSidebar)}
         </div>
         <div className={workspacesStyles}>
-          <Workspaces
-            singleConnectionConnectionInfo={singleConnectionConnectionInfo}
-            openOnEmptyWorkspace={openOnEmptyWorkspace}
-          ></Workspaces>
+          <Workspaces openOnEmptyWorkspace={openOnEmptyWorkspace}></Workspaces>
         </div>
       </div>
       {renderModals && React.createElement(renderModals)}

diff --git a/packages/compass-workspaces/src/components/workspaces.tsx b/packages/compass-workspaces/src/components/workspaces.tsx
@@ -32,7 +32,6 @@ import { connect } from '../stores/context';
 import { WorkspaceTabStateProvider } from './workspace-tab-state-provider';
 import { NamespaceProvider } from '@mongodb-js/compass-app-stores/provider';
 import {
-  type ConnectionInfo,
   ConnectionInfoProvider,
   useTabConnectionTheme,
 } from '@mongodb-js/compass-connections/provider';
@@ -74,7 +73,6 @@ type CompassWorkspacesProps = {
   activeTab?: WorkspaceTab | null;
   collectionInfo: Record<string, CollectionTabInfo>;
   openOnEmptyWorkspace?: OpenWorkspaceOptions | null;
-  singleConnectionConnectionInfo?: ConnectionInfo;
 
   onSelectTab(at: number): void;
   onSelectNextTab(): void;
@@ -101,7 +99,6 @@ const CompassWorkspaces: React.FunctionComponent<CompassWorkspacesProps> = ({
   onCreateTab,
   onCloseTab,
   onNamespaceNotFound,
-  singleConnectionConnectionInfo,
 }) => {
   const { log, mongoLogId } = useLoggerAndTelemetry('COMPASS-WORKSPACES');
   const { getWorkspacePluginByName } = useWorkspacePlugins();
@@ -183,23 +180,12 @@ const CompassWorkspaces: React.FunctionComponent<CompassWorkspacesProps> = ({
 
   const activeWorkspaceElement = useMemo(() => {
     switch (activeTab?.type) {
-      case 'Welcome': {
+      case 'Welcome':
+      case 'My Queries': {
         const Component = getWorkspacePluginByName(activeTab.type);
         return <Component></Component>;
       }
 
-      // TODO: Remove the ConnectionInfoProvider when we make My Queries
-      // workspace work independently of a DataService
-      case 'My Queries': {
-        const Component = getWorkspacePluginByName(activeTab.type);
-        return (
-          <ConnectionInfoProvider
-            connectionInfoId={singleConnectionConnectionInfo?.id}
-          >
-            <Component></Component>
-          </ConnectionInfoProvider>
-        );
-      }
       case 'Performance':
       case 'Databases': {
         const Component = getWorkspacePluginByName(activeTab.type);
@@ -244,12 +230,7 @@ const CompassWorkspaces: React.FunctionComponent<CompassWorkspacesProps> = ({
       default:
         return null;
     }
-  }, [
-    singleConnectionConnectionInfo,
-    activeTab,
-    getWorkspacePluginByName,
-    onNamespaceNotFound,
-  ]);
+  }, [activeTab, getWorkspacePluginByName, onNamespaceNotFound]);
 
   const onCreateNewTab = useCallback(() => {
     onCreateTab(openOnEmptyWorkspace);

diff --git a/packages/compass/src/app/components/home.tsx b/packages/compass/src/app/components/home.tsx
@@ -345,31 +345,13 @@ function Home({
               <FieldStorePlugin>
                 {multiConnectionsEnabled && (
                   <AppRegistryProvider scopeName="Multiple Connections">
-                    <Workspace
-                      // Workspace receives the singleConnectionConnectionInfo
-                      // to wrap the "My Queries" workspace with a
-                      // ConnectionInfoProvider. This makes sure that "My
-                      // Queries" can continue to work when FF for
-                      // multi-connection is not enabled.
-                      singleConnectionConnectionInfo={
-                        connectionInfo ?? undefined
-                      }
-                      onActiveWorkspaceTabChange={onWorkspaceChange}
-                    />
+                    <Workspace onActiveWorkspaceTabChange={onWorkspaceChange} />
                   </AppRegistryProvider>
                 )}
                 {!multiConnectionsEnabled &&
                   (isConnected ? (
                     <AppRegistryProvider scopeName="Single Connection">
                       <Workspace
-                        // Workspace receives the singleConnectionConnectionInfo
-                        // to wrap the "My Queries" workspace with a
-                        // ConnectionInfoProvider. This makes sure that "My
-                        // Queries" can continue to work when FF for
-                        // multi-connection is not enabled.
-                        singleConnectionConnectionInfo={
-                          connectionInfo ?? undefined
-                        }
                         onActiveWorkspaceTabChange={onWorkspaceChange}
                       />
                     </AppRegistryProvider>

diff --git a/packages/compass/src/app/components/workspace.tsx b/packages/compass/src/app/components/workspace.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { css } from '@mongodb-js/compass-components';
-import type { ConnectionInfo } from '@mongodb-js/connection-storage/renderer';
 import { CompassShellPlugin } from '@mongodb-js/compass-shell';
 import {
   WorkspaceTab as CollectionWorkspace,
@@ -36,7 +35,10 @@ import {
 import { ImportPlugin, ExportPlugin } from '@mongodb-js/compass-import-export';
 import ExplainPlanCollectionTabModal from '@mongodb-js/compass-explain-plan';
 import ExportToLanguageCollectionTabModal from '@mongodb-js/compass-export-to-language';
-import { ConnectionInfoProvider } from '@mongodb-js/compass-connections/provider';
+import {
+  ConnectionInfoProvider,
+  useActiveConnections,
+} from '@mongodb-js/compass-connections/provider';
 import { usePreference } from 'compass-preferences-model/provider';
 
 const verticalSplitStyles = css({
@@ -53,14 +55,13 @@ const shellContainerStyles = css({
 });
 
 export default function Workspace({
-  singleConnectionConnectionInfo,
   onActiveWorkspaceTabChange,
 }: {
-  singleConnectionConnectionInfo?: ConnectionInfo;
   onActiveWorkspaceTabChange: React.ComponentProps<
     typeof WorkspacesPlugin
   >['onActiveWorkspaceTabChange'];
 }): React.ReactElement {
+  const [activeConnection] = useActiveConnections();
   const multiConnectionsEnabled = usePreference(
     'enableNewMultipleConnectionSystem'
   );
@@ -96,13 +97,8 @@ export default function Workspace({
             initialWorkspaceTabs={[
               { type: multiConnectionsEnabled ? 'Welcome' : 'My Queries' },
             ]}
-            singleConnectionConnectionInfo={singleConnectionConnectionInfo}
             onActiveWorkspaceTabChange={onActiveWorkspaceTabChange}
-            renderSidebar={() => (
-              <CompassSidebarPlugin
-                singleConnectionConnectionInfo={singleConnectionConnectionInfo}
-              />
-            )}
+            renderSidebar={() => <CompassSidebarPlugin />}
             renderModals={() => (
               <>
                 <ImportPlugin></ImportPlugin>
@@ -117,9 +113,7 @@ export default function Workspace({
         </CollectionTabsProvider>
       </WorkspacesProvider>
       <div className={shellContainerStyles}>
-        <ConnectionInfoProvider
-          connectionInfoId={singleConnectionConnectionInfo?.id}
-        >
+        <ConnectionInfoProvider connectionInfoId={activeConnection?.id}>
           <CompassShellPlugin />
         </ConnectionInfoProvider>
       </div>