From ea5519ea4d07b15948c2bd6513fd3057a680b0ee Mon Sep 17 00:00:00 2001 From: Himanshu Singh Date: Mon, 13 May 2024 20:10:54 +0200 Subject: [PATCH] chore: remove singleConnectionConnectionInfo from 'My Queries' plugin and Workspace and instead rely on getting the activeConnection from useActiveConnections --- .../components/aggregations-queries-list.tsx | 12 ++++++--- .../src/index.ts | 6 +---- .../src/stores/index.ts | 8 +----- .../src/stores/open-item.ts | 23 +++++++++++------ packages/compass-sidebar/src/plugin.tsx | 15 +++++------ .../src/components/index.tsx | 13 +--------- .../src/components/workspaces.tsx | 25 +++---------------- packages/compass/src/app/components/home.tsx | 20 +-------------- .../compass/src/app/components/workspace.tsx | 20 ++++++--------- 9 files changed, 44 insertions(+), 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 index 89ee10e1630..d4a27a2de15 100644 --- 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['renderItem'] = diff --git a/packages/compass-saved-aggregations-queries/src/index.ts b/packages/compass-saved-aggregations-queries/src/index.ts index 73850d0b559..f9293d2d635 100644 --- 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 index a49638d0ced..7a54d6b570a 100644 --- 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; 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 index 1eeb18215c4..0186bae4612 100644 --- 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( @@ -385,8 +388,11 @@ const openItem = }; export const openSavedItem = - (id: string): SavedQueryAggregationThunkAction> => - async (dispatch, getState, { preferencesAccess, connectionInfoAccess }) => { + ( + id: string, + activeConnections: ConnectionInfo[] + ): SavedQueryAggregationThunkAction> => + 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 index 9e2473bee0e..83d215f2520 100644 --- a/packages/compass-sidebar/src/plugin.tsx +++ b/packages/compass-sidebar/src/plugin.tsx @@ -5,12 +5,14 @@ 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, @@ -18,15 +20,12 @@ const errorBoundaryStyles = css({ export interface SidebarPluginProps { showConnectionInfo?: boolean; - singleConnectionConnectionInfo?: ConnectionInfo; } const SidebarPlugin: React.FunctionComponent = ({ 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 = ({ sidebar = ; } else { sidebar = ( - + {(connectionInfo) => { return ( = ({ - singleConnectionConnectionInfo, activeTab, activeTabCollectionInfo, openOnEmptyWorkspace, @@ -120,10 +112,7 @@ const WorkspacesWithSidebar: React.FunctionComponent< {renderSidebar && React.createElement(renderSidebar)}
- +
{renderModals && React.createElement(renderModals)} diff --git a/packages/compass-workspaces/src/components/workspaces.tsx b/packages/compass-workspaces/src/components/workspaces.tsx index 212629eac93..d4f617e5f0d 100644 --- 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; openOnEmptyWorkspace?: OpenWorkspaceOptions | null; - singleConnectionConnectionInfo?: ConnectionInfo; onSelectTab(at: number): void; onSelectNextTab(): void; @@ -101,7 +99,6 @@ const CompassWorkspaces: React.FunctionComponent = ({ onCreateTab, onCloseTab, onNamespaceNotFound, - singleConnectionConnectionInfo, }) => { const { log, mongoLogId } = useLoggerAndTelemetry('COMPASS-WORKSPACES'); const { getWorkspacePluginByName } = useWorkspacePlugins(); @@ -183,23 +180,12 @@ const CompassWorkspaces: React.FunctionComponent = ({ const activeWorkspaceElement = useMemo(() => { switch (activeTab?.type) { - case 'Welcome': { + case 'Welcome': + case 'My Queries': { const Component = getWorkspacePluginByName(activeTab.type); return ; } - // TODO: Remove the ConnectionInfoProvider when we make My Queries - // workspace work independently of a DataService - case 'My Queries': { - const Component = getWorkspacePluginByName(activeTab.type); - return ( - - - - ); - } case 'Performance': case 'Databases': { const Component = getWorkspacePluginByName(activeTab.type); @@ -244,12 +230,7 @@ const CompassWorkspaces: React.FunctionComponent = ({ 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 index c242039e697..3e4100c0044 100644 --- a/packages/compass/src/app/components/home.tsx +++ b/packages/compass/src/app/components/home.tsx @@ -345,31 +345,13 @@ function Home({ {multiConnectionsEnabled && ( - + )} {!multiConnectionsEnabled && (isConnected ? ( diff --git a/packages/compass/src/app/components/workspace.tsx b/packages/compass/src/app/components/workspace.tsx index 3bad0e62671..16d80c6a404 100644 --- 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={() => ( - - )} + renderSidebar={() => } renderModals={() => ( <> @@ -117,9 +113,7 @@ export default function Workspace({
- +