chore(data-service, home): create a service provider / locator for data service COMPASS-7410 (#5085)

* chore(data-service, compass-home): add provider for data service; set up provider in home

* chore(import-export, home): setup connected app registry scope; refactor export store to use service injection

* chore(collection): remove unused dev dependency

* chore(import-export): refactor import store to use service injection

Author: gribnoysup

package-lock.json

@@ -89,7 +89,6 @@
     "depcheck": "^1.4.1",
     "eslint": "^7.25.0",
     "mocha": "^10.2.0",
-    "mongodb": "^6.0.0",
     "mongodb-collection-model": "^5.15.1",
     "mongodb-data-service": "^22.15.1",
     "mongodb-instance-model": "^12.15.1",

packages/compass-collection/package.json

@@ -47,7 +47,8 @@
     "@mongodb-js/compass-import-export": "^7.19.1",
     "compass-preferences-model": "^2.15.6",
     "hadron-app-registry": "^9.0.14",
-    "hadron-ipc": "^3.2.4"
+    "hadron-ipc": "^3.2.4",
+    "mongodb-data-service": "^22.15.1"
   },
   "peerDependencies": {
     "@mongodb-js/atlas-service": "^0.10.1",
@@ -64,6 +65,7 @@
     "compass-preferences-model": "^2.15.6",
     "hadron-app-registry": "^9.0.14",
     "hadron-ipc": "^3.2.4",
+    "mongodb-data-service": "^22.15.1",
     "react": "^17.0.2"
   },
   "devDependencies": {
@@ -82,7 +84,6 @@
     "eventemitter3": "^4.0.0",
     "mocha": "^10.2.0",
     "mongodb-collection-model": "^5.15.1",
-    "mongodb-data-service": "^22.15.1",
     "mongodb-ns": "^2.4.0",
     "nyc": "^15.1.0",
     "prettier": "^2.7.1",

packages/compass-home/package.json

@@ -2,7 +2,7 @@ import React from 'react';
 import { once } from 'events';
 import { cleanup, render, screen, waitFor } from '@testing-library/react';
 import { expect } from 'chai';
-import AppRegistry, { AppRegistryProvider } from 'hadron-app-registry';
+import { AppRegistryProvider, globalAppRegistry } from 'hadron-app-registry';
 import { ipcRenderer } from 'hadron-ipc';
 import sinon from 'sinon';
 import Home from '.';
@@ -32,9 +32,9 @@ describe('Home [Component]', function () {
     }
   });
 
-  let testAppRegistry: AppRegistry;
+  const testAppRegistry = globalAppRegistry;
+
   beforeEach(function () {
-    testAppRegistry = new AppRegistry();
     [
       'Collection.Workspace',
       'Database.Workspace',
@@ -55,7 +55,10 @@ describe('Home [Component]', function () {
     testAppRegistry.onActivated();
   });
 
-  afterEach(cleanup);
+  afterEach(function () {
+    testAppRegistry.deactivate();
+    cleanup();
+  });
 
   describe('is not connected', function () {
     beforeEach(function () {

packages/compass-home/src/components/home.spec.tsx

@@ -33,7 +33,7 @@ import React, {
 } from 'react';
 import preferences from 'compass-preferences-model';
 import { createLoggerAndTelemetry } from '@mongodb-js/compass-logging';
-import { useLocalAppRegistry } from 'hadron-app-registry';
+import { AppRegistryProvider, useLocalAppRegistry } from 'hadron-app-registry';
 import updateTitle from '../modules/update-title';
 import Workspace from './workspace';
 import { SignalHooksProvider } from '@mongodb-js/compass-components';
@@ -49,6 +49,7 @@ import {
   DropCollectionPlugin,
 } from '@mongodb-js/compass-databases-collections';
 import { ImportPlugin, ExportPlugin } from '@mongodb-js/compass-import-export';
+import { DataServiceProvider } from 'mongodb-data-service/provider';
 
 const { track } = createLoggerAndTelemetry('COMPASS-HOME-UI');
 
@@ -326,6 +327,12 @@ function Home({
     };
   }, [appRegistry, onDataServiceDisconnected]);
 
+  if (isConnected && !connectedDataService.current) {
+    throw new Error(
+      'Application is connected, but DataService is not available'
+    );
+  }
+
   return (
     <SignalHooksProvider
       onSignalMount={(id) => {
@@ -344,7 +351,16 @@ function Home({
         track('Signal Closed', { id });
       }}
     >
-      {isConnected && <Workspace namespace={namespace} />}
+      {isConnected && connectedDataService.current && (
+        // AppRegistry scope for a connected application
+        <AppRegistryProvider>
+          <DataServiceProvider value={connectedDataService.current}>
+            <ImportPlugin></ImportPlugin>
+            <ExportPlugin></ExportPlugin>
+            <Workspace namespace={namespace} />
+          </DataServiceProvider>
+        </AppRegistryProvider>
+      )}
       {/* Hide <Connections> but keep it in scope if connected so that the connection
           import/export functionality can still be used through the application menu */}
       <div
@@ -371,8 +387,6 @@ function Home({
       <DropDatabasePlugin></DropDatabasePlugin>
       <CreateCollectionPlugin></CreateCollectionPlugin>
       <DropCollectionPlugin></DropCollectionPlugin>
-      <ImportPlugin></ImportPlugin>
-      <ExportPlugin></ExportPlugin>
       <AtlasSignIn></AtlasSignIn>
     </SignalHooksProvider>
   );

packages/compass-home/src/components/home.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { cleanup, render, screen } from '@testing-library/react';
 import { expect } from 'chai';
-import AppRegistry, { AppRegistryProvider } from 'hadron-app-registry';
+import { globalAppRegistry, AppRegistryProvider } from 'hadron-app-registry';
 import WorkspaceContent from './workspace-content';
 
 const getComponent = (name: string) => {
@@ -20,28 +20,18 @@ const getComponent = (name: string) => {
 };
 
 describe('WorkspaceContent [Component]', function () {
-  let testAppRegistry: AppRegistry;
-  beforeEach(function () {
-    testAppRegistry = new AppRegistry();
-
+  before(function () {
     ['Collection.Workspace', 'Database.Workspace', 'Instance.Workspace'].map(
-      (name) => testAppRegistry.registerComponent(name, getComponent(name))
+      (name) => globalAppRegistry.registerComponent(name, getComponent(name))
     );
-    testAppRegistry.onActivated();
+    globalAppRegistry.onActivated();
   });
 
-  afterEach(function () {
-    testAppRegistry = null;
-    cleanup();
-  });
+  afterEach(cleanup);
 
   describe('namespace is unset', function () {
     beforeEach(function () {
-      render(
-        <AppRegistryProvider localAppRegistry={testAppRegistry}>
-          <WorkspaceContent namespace={{ database: '', collection: '' }} />
-        </AppRegistryProvider>
-      );
+      render(<WorkspaceContent namespace={{ database: '', collection: '' }} />);
     });
 
     it('renders content correctly', function () {
@@ -54,7 +44,7 @@ describe('WorkspaceContent [Component]', function () {
   describe('namespace has a db', function () {
     beforeEach(function () {
       render(
-        <AppRegistryProvider localAppRegistry={testAppRegistry}>
+        <AppRegistryProvider>
           <WorkspaceContent namespace={{ database: 'db', collection: '' }} />
         </AppRegistryProvider>
       );
@@ -70,7 +60,7 @@ describe('WorkspaceContent [Component]', function () {
   describe('namespace has db and collection', function () {
     beforeEach(function () {
       render(
-        <AppRegistryProvider localAppRegistry={testAppRegistry}>
+        <AppRegistryProvider>
           <WorkspaceContent namespace={{ database: 'db', collection: 'col' }} />
         </AppRegistryProvider>
       );

packages/compass-home/src/components/workspace-content.spec.tsx

@@ -65,6 +65,7 @@
     "electron": "^25.9.3",
     "hadron-app-registry": "^9.0.14",
     "hadron-document": "^8.4.3",
+    "mongodb-data-service": "^22.15.1",
     "react": "^17.0.2"
   },
   "dependencies": {
@@ -76,7 +77,8 @@
     "compass-preferences-model": "^2.15.6",
     "electron": "^25.9.3",
     "hadron-app-registry": "^9.0.14",
-    "hadron-document": "^8.4.3"
+    "hadron-document": "^8.4.3",
+    "mongodb-data-service": "^22.15.1"
   },
   "devDependencies": {
     "@electron/remote": "^2.0.12",
@@ -106,7 +108,6 @@
     "lodash": "^4.17.21",
     "mocha": "^10.2.0",
     "mongodb": "^6.0.0",
-    "mongodb-data-service": "^22.15.1",
     "mongodb-ns": "^2.4.0",
     "mongodb-query-parser": "^3.1.3",
     "mongodb-schema": "^12.1.0",

packages/compass-import-export/package.json

@@ -12,7 +12,10 @@ function renderModal(exportState: any = {}) {
   // component in a state that can actually be achieved when actions are emitted
   // on the store. Refactor this to either test unconnected component, or to
   // not mutate state directly for tests
-  const store = configureStore();
+  const store = configureStore({
+    dataService: {},
+    globalAppRegistry: {},
+  } as any);
   const state = store.getState();
   state.export = {
     ...state.export,

packages/compass-import-export/src/components/export-modal.spec.tsx

@@ -168,12 +168,16 @@ function ImportModal({
   if (isOpen && !fileName && errors.length === 0) {
     // Show the file input when we don't have a file to import yet.
     return (
-      <ImportFileInput
-        autoOpen
-        onCancel={handleClose}
-        fileName={fileName}
-        selectImportFileName={selectImportFileName}
-      />
+      // Don't actually show it on the screen, just render it to trigger
+      // autoOpen
+      <div style={{ display: 'none' }}>
+        <ImportFileInput
+          autoOpen
+          onCancel={handleClose}
+          fileName={fileName}
+          selectImportFileName={selectImportFileName}
+        />
+      </div>
     );
   }
 
@@ -266,7 +270,7 @@ function ImportModal({
  * Map the state of the store to component properties.
  */
 const mapStateToProps = (state: RootImportState) => ({
-  ns: state.ns,
+  ns: state.import.namespace,
   isOpen: state.import.isOpen,
   errors: state.import.errors,
   fileType: state.import.fileType,

packages/compass-import-export/src/components/import-modal.tsx

@@ -259,7 +259,7 @@ export async function exportCSVFromAggregation({
   ...exportOptions
 }: Omit<ExportCSVOptions, 'input' | 'columns'> & {
   ns: string;
-  dataService: DataService;
+  dataService: Pick<DataService, 'aggregateCursor'>;
   aggregation: ExportAggregation;
 }) {
   debug('exportCSVFromAggregation()', { ns: toNS(ns), aggregation });
@@ -319,7 +319,7 @@ export async function exportCSVFromQuery({
   ...exportOptions
 }: Omit<ExportCSVOptions, 'input' | 'columns'> & {
   ns: string;
-  dataService: DataService;
+  dataService: Pick<DataService, 'findCursor'>;
   query?: ExportQuery;
 }) {
   debug('exportCSVFromQuery()', { ns: toNS(ns), query });