chore(connections): replace connections registry and manager with a s…

…ingle interface COMPASS-8469 COMPASS-8470 (#6525) chore(connections): replace connections registry and manager with a single interface
mongodb-js · Nov 25, 2024 · 94cba8d · 94cba8d
1 parent 32d3da5
commit 94cba8d
Show file tree

Hide file tree

Showing 44 changed files with 284 additions and 731 deletions.
diff --git a/packages/compass-aggregations/src/components/create-view-modal/create-view-modal.tsx b/packages/compass-aggregations/src/components/create-view-modal/create-view-modal.tsx
@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { useEffect } from 'react';
 import { connect } from 'react-redux';
 import {
   Banner,
@@ -11,13 +11,9 @@ import {
 } from '@mongodb-js/compass-components';
 import { createView, changeViewName, close } from '../../modules/create-view';
 import type { CreateViewRootState } from '../../stores/create-view';
-import { withTelemetry } from '@mongodb-js/compass-telemetry/provider';
-import type { TrackFunction } from '@mongodb-js/compass-telemetry';
-import {
-  type ConnectionRepository,
-  withConnectionRepository,
-  type ConnectionInfo,
-} from '@mongodb-js/compass-connections/provider';
+import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
+import type { ConnectionInfo } from '@mongodb-js/compass-connections/provider';
+import { useConnectionsListRef } from '@mongodb-js/compass-connections/provider';
 
 const progressContainerStyles = css({
   display: 'flex',
@@ -32,108 +28,80 @@ type CreateViewModalProps = {
   name?: string;
   changeViewName: (name: string) => void;
   isDuplicating?: boolean;
-  source?: string;
-  pipeline?: unknown[];
   connectionId: ConnectionInfo['id'];
   isRunning?: boolean;
-  error: Error | null;
-  track: TrackFunction;
-  connectionRepository: ConnectionRepository;
+  error: string | null;
 };
 
-class CreateViewModal extends PureComponent<CreateViewModalProps> {
-  static defaultProps = {
-    name: '',
-    source: '',
-    pipeline: [],
-    isRunning: false,
-    isVisible: false,
-    isDuplicating: false,
-  };
+const CreateViewModal: React.FunctionComponent<CreateViewModalProps> = ({
+  createView,
+  isVisible,
+  closeModal,
+  name,
+  changeViewName,
+  isDuplicating,
+  connectionId,
+  isRunning,
+  error,
+}) => {
+  const track = useTelemetry();
+  const { getConnectionById } = useConnectionsListRef();
 
-  componentDidUpdate(prevProps: CreateViewModalProps) {
-    if (prevProps.isVisible !== this.props.isVisible && this.props.isVisible) {
-      const connectionInfo =
-        this.props.connectionRepository.getConnectionInfoById(
-          this.props.connectionId
-        );
-      this.props.track('Screen', { name: 'create_view_modal' }, connectionInfo);
+  useEffect(() => {
+    if (isVisible && connectionId) {
+      track(
+        'Screen',
+        { name: 'create_view_modal' },
+        getConnectionById(connectionId)?.info
+      );
     }
-  }
-
-  onNameChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
-    this.props.changeViewName(evt.currentTarget.value);
-  };
-
-  onFormSubmit = () => {
-    this.props.createView();
-  };
+  }, [isVisible, connectionId, getConnectionById, track]);
 
-  onCancel = () => {
-    this.props.closeModal();
-  };
-
-  /**
-   * Render the save pipeline component.
-   */
-  render() {
-    return (
-      <FormModal
-        title={this.props.isDuplicating ? 'Duplicate View' : 'Create a View'}
-        open={this.props.isVisible}
-        onSubmit={this.onFormSubmit}
-        onCancel={this.onCancel}
-        submitButtonText="Create"
-        data-testid="create-view-modal"
-      >
-        <TextInput
-          data-testid="create-view-name"
-          value={this.props.name || ''}
-          onChange={this.onNameChange}
-          label="Name"
-          name="name"
-        />
-        {this.props.error ? (
-          <Banner variant="danger">{this.props.error.message}</Banner>
-        ) : null}
-        {this.props.isRunning ? (
-          <Body className={progressContainerStyles}>
-            <SpinLoader />
-            <span>Creating view&hellip;</span>
-          </Body>
-        ) : null}
-      </FormModal>
-    );
-  }
-}
+  return (
+    <FormModal
+      title={isDuplicating ? 'Duplicate View' : 'Create a View'}
+      open={isVisible}
+      onSubmit={createView}
+      onCancel={closeModal}
+      submitButtonText="Create"
+      data-testid="create-view-modal"
+    >
+      <TextInput
+        data-testid="create-view-name"
+        value={name || ''}
+        onChange={(evt) => {
+          changeViewName(evt.currentTarget.value);
+        }}
+        label="Name"
+        name="name"
+      />
+      {error ? <Banner variant="danger">{error}</Banner> : null}
+      {isRunning ? (
+        <Body className={progressContainerStyles}>
+          <SpinLoader />
+          <span>Creating view&hellip;</span>
+        </Body>
+      ) : null}
+    </FormModal>
+  );
+};
 
-/**
- * Map the store state to properties to pass to the components.
- */
 const mapStateToProps = (state: CreateViewRootState) => ({
   isRunning: state.isRunning,
   isVisible: state.isVisible,
   isDuplicating: state.isDuplicating,
   name: state.name,
-  error: state.error,
+  error: state.error?.message ?? null,
   source: state.source,
   pipeline: state.pipeline,
   connectionId: state.connectionId,
 });
 
-/**
- * Connect the redux store to the component.
- * (dispatch)
- */
-const MappedCreateViewModal = withTelemetry(
-  withConnectionRepository(
-    connect(mapStateToProps, {
-      createView,
-      changeViewName,
-      closeModal: close,
-    })(CreateViewModal)
-  )
-);
+const MappedCreateViewModal = connect(mapStateToProps, {
+  createView,
+  changeViewName,
+  closeModal: close,
+})(CreateViewModal);
 
 export default MappedCreateViewModal;
 export { CreateViewModal };
diff --git a/packages/compass-aggregations/src/index.ts b/packages/compass-aggregations/src/index.ts
@@ -9,7 +9,7 @@ import CreateViewModal from './components/create-view-modal';
 import {
   connectionInfoRefLocator,
   connectionScopedAppRegistryLocator,
-  connectionsManagerLocator,
+  connectionsLocator,
   dataServiceLocator,
   type DataServiceLocator,
 } from '@mongodb-js/compass-connections/provider';
@@ -27,7 +27,6 @@ import { workspacesServiceLocator } from '@mongodb-js/compass-workspaces/provide
 import { preferencesLocator } from 'compass-preferences-model/provider';
 import { atlasAiServiceLocator } from '@mongodb-js/compass-generative-ai/provider';
 import { pipelineStorageLocator } from '@mongodb-js/my-queries-storage/provider';
-import { connectionRepositoryAccessLocator } from '@mongodb-js/compass-connections/provider';
 import { AggregationsTabTitle } from './plugin-title';
 
 const CompassAggregationsHadronPlugin = registerHadronPlugin(
@@ -71,8 +70,7 @@ export const CreateViewPlugin = registerHadronPlugin(
     activate: activateCreateViewPlugin,
   },
   {
-    connectionsManager: connectionsManagerLocator,
-    connectionRepository: connectionRepositoryAccessLocator,
+    connections: connectionsLocator,
     logger: createLoggerLocator('COMPASS-CREATE-VIEW-UI'),
     track: telemetryLocator,
     workspaces: workspacesServiceLocator,

diff --git a/packages/compass-aggregations/src/modules/create-view/index.ts b/packages/compass-aggregations/src/modules/create-view/index.ts
@@ -202,13 +202,7 @@ export const createView = (): CreateViewThunkAction<Promise<void>> => {
   return async (
     dispatch,
     getState,
-    {
-      globalAppRegistry,
-      connectionsManager,
-      connectionRepository,
-      track,
-      workspaces,
-    }
+    { globalAppRegistry, connections, track, workspaces }
   ) => {
     const {
       name: viewName,
@@ -222,8 +216,7 @@ export const createView = (): CreateViewThunkAction<Promise<void>> => {
     dispatch(clearError());
 
     try {
-      const dataService =
-        connectionsManager.getDataServiceForConnection(connectionId);
+      const dataService = connections.getDataServiceForConnection(connectionId);
 
       dispatch(toggleIsRunning(true));
       await dataService.createView(
@@ -236,7 +229,7 @@ export const createView = (): CreateViewThunkAction<Promise<void>> => {
       track(
         'Aggregation Saved As View',
         { num_stages: viewPipeline.length },
-        connectionRepository.getConnectionInfoById(connectionId)
+        connections.getConnectionById(connectionId)?.info
       );
       globalAppRegistry.emit('view-created', ns, {
         connectionId,

diff --git a/packages/compass-aggregations/src/stores/create-view.ts b/packages/compass-aggregations/src/stores/create-view.ts
@@ -7,17 +7,13 @@ import reducer, { open } from '../modules/create-view';
 import type AppRegistry from 'hadron-app-registry';
 import type { Logger } from '@mongodb-js/compass-logging/provider';
 import type { WorkspacesService } from '@mongodb-js/compass-workspaces/provider';
-import type {
-  ConnectionRepositoryAccess,
-  ConnectionsManager,
-} from '@mongodb-js/compass-connections/provider';
+import type { ConnectionsService } from '@mongodb-js/compass-connections/provider';
 import type { ActivateHelpers } from 'hadron-app-registry';
 import type { TrackFunction } from '@mongodb-js/compass-telemetry';
 
 type CreateViewServices = {
   globalAppRegistry: AppRegistry;
-  connectionsManager: ConnectionsManager;
-  connectionRepository: ConnectionRepositoryAccess;
+  connections: ConnectionsService;
   logger: Logger;
   track: TrackFunction;
   workspaces: WorkspacesService;
@@ -53,8 +49,7 @@ export function activateCreateViewPlugin(
   _: unknown,
   {
     globalAppRegistry,
-    connectionsManager,
-    connectionRepository,
+    connections,
     logger,
     track,
     workspaces,
@@ -63,8 +58,7 @@ export function activateCreateViewPlugin(
 ) {
   const store = configureStore({
     globalAppRegistry,
-    connectionsManager,
-    connectionRepository,
+    connections,
     logger,
     track,
     workspaces,

diff --git a/packages/compass-app-stores/src/plugin.tsx b/packages/compass-app-stores/src/plugin.tsx
@@ -6,10 +6,8 @@ import type { ActivateHelpers } from 'hadron-app-registry';
 import { registerHadronPlugin } from 'hadron-app-registry';
 import { MongoDBInstancesManagerContext } from './provider';
 import { createInstancesStore } from './stores';
-import {
-  connectionsManagerLocator,
-  type ConnectionsManager,
-} from '@mongodb-js/compass-connections/provider';
+import type { ConnectionsService } from '@mongodb-js/compass-connections/provider';
+import { connectionsLocator } from '@mongodb-js/compass-connections/provider';
 import { type MongoDBInstancesManager } from './instances-manager';
 
 interface MongoDBInstancesProviderProps {
@@ -37,19 +35,19 @@ export const CompassInstanceStorePlugin = registerHadronPlugin(
     activate(
       _: unknown,
       {
-        connectionsManager,
+        connections,
         logger,
         globalAppRegistry,
       }: {
-        connectionsManager: ConnectionsManager;
+        connections: ConnectionsService;
         logger: Logger;
         globalAppRegistry: AppRegistry;
       },
       helpers: ActivateHelpers
     ) {
       const store = createInstancesStore(
         {
-          connectionsManager,
+          connections,
           logger,
           globalAppRegistry,
         },
@@ -65,6 +63,6 @@ export const CompassInstanceStorePlugin = registerHadronPlugin(
   },
   {
     logger: createLoggerLocator('COMPASS-INSTANCE-STORE'),
-    connectionsManager: connectionsManagerLocator,
+    connections: connectionsLocator,
   }
 );