chore(compass-shell): convert to new plugin interface COMPASS-7399 (#…

…5086) Co-authored-by: Sergey Petushkov <[email protected]>
mongodb-js · Nov 10, 2023 · 072d079 · 072d079
1 parent d61268a
commit 072d079
Show file tree

Hide file tree

Showing 12 changed files with 196 additions and 159 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/compass-home/package.json b/packages/compass-home/package.json
@@ -45,6 +45,7 @@
     "@mongodb-js/compass-databases-collections": "^1.19.1",
     "@mongodb-js/compass-find-in-page": "^4.19.1",
     "@mongodb-js/compass-import-export": "^7.19.1",
+    "@mongodb-js/compass-shell": "^3.19.1",
     "compass-preferences-model": "^2.15.6",
     "hadron-app-registry": "^9.0.14",
     "hadron-ipc": "^3.2.4",
@@ -62,6 +63,7 @@
     "@mongodb-js/compass-databases-collections": "^1.19.1",
     "@mongodb-js/compass-find-in-page": "^4.19.1",
     "@mongodb-js/compass-import-export": "^7.19.1",
+    "@mongodb-js/compass-shell": "^3.19.1",
     "compass-preferences-model": "^2.15.6",
     "hadron-app-registry": "^9.0.14",
     "hadron-ipc": "^3.2.4",

diff --git a/packages/compass-home/src/components/home.spec.tsx b/packages/compass-home/src/components/home.spec.tsx
@@ -22,7 +22,26 @@ const getComponent = (name: string) => {
   return TestComponent;
 };
 
-const createDataService = () => ({});
+const createDataService = () => ({
+  getConnectionString() {
+    return { hosts: ['localhost:27020'] };
+  },
+  getConnectionOptions() {
+    return {};
+  },
+  getMongoClientConnectionOptions() {
+    return {};
+  },
+  getLastSeenTopology() {
+    return {
+      type: 'Unknown',
+      servers: [],
+      setName: 'foo',
+    };
+  },
+  on() {},
+  off() {},
+});
 
 describe('Home [Component]', function () {
   before(function () {
@@ -112,6 +131,7 @@ describe('Home [Component]', function () {
         );
         dataServiceDisconnectedSpy = sinon.fake.resolves(true);
         const dataService = {
+          ...createDataService(),
           disconnect: dataServiceDisconnectedSpy,
           addReauthenticationHandler: sinon.stub(),
         };

diff --git a/packages/compass-home/src/components/workspace.tsx b/packages/compass-home/src/components/workspace.tsx
@@ -4,6 +4,7 @@ import { css } from '@mongodb-js/compass-components';
 import WorkspaceContent from './workspace-content';
 import type Namespace from '../types/namespace';
 import { useAppRegistryComponent } from 'hadron-app-registry';
+import { CompassShellPlugin } from '@mongodb-js/compass-shell';
 
 const verticalSplitStyles = css({
   width: '100vw',
@@ -40,7 +41,6 @@ export default function Workspace({
   namespace: Namespace;
 }): React.ReactElement {
   const SidebarComponent = useAppRegistryComponent('Sidebar.Component');
-  const GlobalShellComponent = useAppRegistryComponent('Global.Shell');
 
   return (
     <>
@@ -54,7 +54,7 @@ export default function Workspace({
           </div>
         </div>
         <div className={shellContainerStyles}>
-          {GlobalShellComponent && <GlobalShellComponent />}
+          <CompassShellPlugin />
         </div>
       </div>
     </>

diff --git a/packages/compass-shell/package.json b/packages/compass-shell/package.json
@@ -25,6 +25,7 @@
   ],
   "main": "dist/index.js",
   "compass:main": "src/index.ts",
+  "types": "dist/src/index.d.ts",
   "exports": {
     "browser": "./dist/browser.js",
     "require": "./dist/index.js"
@@ -33,9 +34,11 @@
     ".": "./src/index.ts"
   },
   "scripts": {
+    "bootstrap": "npm run postcompile",
     "prepublishOnly": "npm run compile && compass-scripts check-exports-exist",
     "compile": "npm run webpack -- --mode production",
     "webpack": "webpack-compass",
+    "postcompile": "tsc --emitDeclarationOnly",
     "start": "npm run webpack serve -- --mode development",
     "analyze": "npm run webpack -- --mode production --analyze",
     "typecheck": "tsc --noEmit",
@@ -58,18 +61,20 @@
     "@mongodb-js/compass-components": "^1.19.0",
     "@mongodb-js/compass-logging": "^1.2.6",
     "@mongodb-js/compass-utils": "^0.5.5",
-    "@mongodb-js/mongodb-redux-common": "^2.0.15",
     "@mongosh/node-runtime-worker-thread": "^2.0.2",
-    "compass-preferences-model": "^2.15.6"
+    "compass-preferences-model": "^2.15.6",
+    "hadron-app-registry": "^9.0.14",
+    "mongodb-data-service": "^22.15.1"
   },
   "peerDependencies": {
     "@mongodb-js/compass-user-data": "^0.1.9",
     "@mongodb-js/compass-components": "^1.19.0",
     "@mongodb-js/compass-logging": "^1.2.6",
     "@mongodb-js/compass-utils": "^0.5.5",
-    "@mongodb-js/mongodb-redux-common": "^2.0.15",
     "@mongosh/node-runtime-worker-thread": "^2.0.2",
     "compass-preferences-model": "^2.15.6",
+    "hadron-app-registry": "^9.0.14",
+    "mongodb-data-service": "^22.15.1",
     "react": "^17.0.2"
   },
   "devDependencies": {
@@ -85,9 +90,7 @@
     "electron": "^25.9.3",
     "enzyme": "^3.11.0",
     "eslint": "^7.25.0",
-    "hadron-app-registry": "^9.0.14",
     "mocha": "^10.2.0",
-    "mongodb-data-service": "^22.15.0",
     "nyc": "^15.1.0",
     "prop-types": "^15.7.2",
     "react-dom": "^17.0.2",

diff --git a/packages/compass-shell/src/components/compass-shell/compass-shell.tsx b/packages/compass-shell/src/components/compass-shell/compass-shell.tsx
@@ -304,9 +304,7 @@ export class CompassShell extends Component<
 
 export default connect((state: RootState) => ({
   emitShellPluginOpened: () => {
-    if (state.appRegistry && state.appRegistry.globalAppRegistry) {
-      state.appRegistry.globalAppRegistry.emit('compass:compass-shell:opened');
-    }
+    state.runtime.appRegistry?.emit('compass:compass-shell:opened');
   },
   runtime: state.runtime ? state.runtime.runtime : null,
 }))(withPreferences(CompassShell, ['enableShell'], React));
diff --git a/packages/compass-shell/src/index.ts b/packages/compass-shell/src/index.ts
@@ -1,28 +1,32 @@
-import type AppRegistry from 'hadron-app-registry';
+import type { LoggerAndTelemetry } from '@mongodb-js/compass-logging/provider';
+import { createLoggerAndTelemetryLocator } from '@mongodb-js/compass-logging/provider';
+import { ShellPlugin, onActivated } from './plugin';
+import { registerHadronPlugin } from 'hadron-app-registry';
+import { dataServiceLocator } from 'mongodb-data-service/provider';
+import type { DataService } from 'mongodb-data-service';
 
-import createPlugin from './plugin';
-
-const { store, Plugin } = createPlugin();
-
-/**
- * Activate all the components in the Compass Shell package.
- * @param {Object} appRegistry - The appRegistry to activate this plugin with.
- **/
-function activate(appRegistry: AppRegistry): void {
-  // Register the shell plugin's role in Compass.
-  appRegistry.registerComponent('Global.Shell', Plugin);
-  appRegistry.registerStore('CompassShell.Store', store);
+function activate(): void {
+  // noop
 }
 
-/**
- * Deactivate all the components in the Compass Shell package.
- * @param {Object} appRegistry - The appRegistry to deactivate this plugin with.
- **/
-function deactivate(appRegistry: AppRegistry): void {
-  appRegistry.registerComponent('Global.Shell', Plugin);
-  appRegistry.deregisterStore('CompassShell.Store');
+function deactivate(): void {
+  // noop
 }
 
-export default Plugin;
+export const CompassShellPlugin = registerHadronPlugin<
+  unknown,
+  { logger: () => LoggerAndTelemetry; dataService: () => DataService }
+>(
+  {
+    name: 'CompassShell',
+    component: ShellPlugin,
+    activate: onActivated,
+  },
+  {
+    logger: createLoggerAndTelemetryLocator('COMPASS-SHELL'),
+    dataService: dataServiceLocator,
+  }
+);
+
 export { activate, deactivate };
 export { default as metadata } from '../package.json';
diff --git a/packages/compass-shell/src/modules/index.ts b/packages/compass-shell/src/modules/index.ts
@@ -1,21 +1,14 @@
 import { combineReducers } from 'redux';
-import appRegistry from '@mongodb-js/mongodb-redux-common/app-registry';
-import type { AppRegistry } from 'hadron-app-registry';
 import type { RuntimeAction, RuntimeState } from './runtime';
 import runtime from './runtime';
 
 export interface RootState {
-  appRegistry: {
-    globalAppRegistry: AppRegistry | null;
-    localAppRegistry: AppRegistry | null;
-  };
   runtime: RuntimeState;
 }
 
 export type RootAction = RuntimeAction;
 
 const reducer = combineReducers({
-  appRegistry,
   runtime,
 });
 

diff --git a/packages/compass-shell/src/plugin.spec.jsx → packages/compass-shell/src/plugin.spec.tsx b/packages/compass-shell/src/plugin.spec.jsx → packages/compass-shell/src/plugin.spec.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
+import type { ReactWrapper } from 'enzyme';
 import { mount } from 'enzyme';
-import { EventEmitter } from 'events';
 import { expect } from 'chai';
 
 import { CompassShell } from './components/compass-shell';
-import createPlugin from './plugin';
-import CompassShellStore from './stores';
+import { CompassShellPlugin } from './index';
+import { AppRegistryProvider, globalAppRegistry } from 'hadron-app-registry';
+import { DataServiceProvider } from 'mongodb-data-service/provider';
 
 // Wait until a component is present that is rendered in a limited number
 // of microtask queue iterations. In particular, this does *not* wait for the
@@ -26,35 +27,51 @@ async function waitForAsyncComponent(wrapper, Component, attempts = 10) {
 }
 
 describe('CompassShellPlugin', function () {
-  it('returns a renderable plugin', async function () {
-    const { Plugin } = createPlugin();
+  const fakeDataService = {
+    getMongoClientConnectionOptions() {},
+  } as any;
+  let wrapper: ReactWrapper | null;
 
-    const wrapper = mount(<Plugin />);
+  afterEach(() => {
+    wrapper?.unmount();
+    wrapper = null;
+  });
+  it('returns a renderable plugin', async function () {
+    wrapper = mount(
+      <AppRegistryProvider>
+        {/* global */}
+        <AppRegistryProvider>
+          {/* local */}
+          <DataServiceProvider value={fakeDataService}>
+            <CompassShellPlugin />
+          </DataServiceProvider>
+        </AppRegistryProvider>
+      </AppRegistryProvider>
+    );
 
     const component = await waitForAsyncComponent(wrapper, CompassShell);
 
     expect(component.exists()).to.equal(true);
   });
 
-  it('returns a CompassShellStore store', function () {
-    const { store } = createPlugin();
-    const appRegistry = new EventEmitter();
-    store.onActivated(appRegistry);
-    expect(store).to.be.instanceOf(CompassShellStore);
-  });
-
   it('emits an event on the app registry when it is expanded', async function () {
-    const { store, Plugin } = createPlugin();
-
-    const appRegistry = new EventEmitter();
     let eventOccured = false;
-    appRegistry.on('compass:compass-shell:opened', () => {
+    globalAppRegistry.on('compass:compass-shell:opened', () => {
       eventOccured = true;
     });
 
-    store.onActivated(appRegistry);
+    wrapper = mount(
+      <AppRegistryProvider>
+        {/* global */}
+        <AppRegistryProvider>
+          {/* local */}
+          <DataServiceProvider value={fakeDataService}>
+            <CompassShellPlugin />
+          </DataServiceProvider>
+        </AppRegistryProvider>
+      </AppRegistryProvider>
+    );
 
-    const wrapper = mount(<Plugin />);
     const shellComponentWrapper = await waitForAsyncComponent(
       wrapper,
       CompassShell