chore(compass-database): convert to new plugin interface COMPASS-7401 (…

…#5138)
mongodb-js · Nov 21, 2023 · ce1ef9f · ce1ef9f
1 parent 768d09d
commit ce1ef9f
Show file tree

Hide file tree

Showing 10 changed files with 108 additions and 72 deletions.
diff --git a/packages/compass-database/package.json b/packages/compass-database/package.json
@@ -58,6 +58,7 @@
   "peerDependencies": {
     "@mongodb-js/compass-components": "^1.19.0",
     "@mongodb-js/compass-logging": "^1.2.6",
+    "hadron-app-registry": "^9.0.14",
     "react": "^17.0.2"
   },
   "devDependencies": {
@@ -74,14 +75,14 @@
     "chai": "^4.1.2",
     "depcheck": "^1.4.1",
     "eslint": "^7.25.0",
-    "hadron-app-registry": "^9.0.14",
     "mocha": "^10.2.0",
     "nyc": "^15.1.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
   "dependencies": {
     "@mongodb-js/compass-components": "^1.19.0",
-    "@mongodb-js/compass-logging": "^1.2.6"
+    "@mongodb-js/compass-logging": "^1.2.6",
+    "hadron-app-registry": "^9.0.14"
   }
 }
diff --git a/packages/compass-database/src/components/database-tabs-provider.tsx b/packages/compass-database/src/components/database-tabs-provider.tsx
@@ -0,0 +1,29 @@
+import React, { useContext, useMemo, useRef } from 'react';
+
+export type DatabaseTab = {
+  name: string;
+  component: React.ComponentType;
+};
+
+const DatabaseTabsContext = React.createContext<DatabaseTab[]>([]);
+
+export const DatabaseTabsProvider: React.FunctionComponent<{
+  tabs: DatabaseTab[];
+}> = ({ tabs, children }) => {
+  const tabsRef = useRef(tabs);
+  return (
+    <DatabaseTabsContext.Provider value={tabsRef.current}>
+      {children}
+    </DatabaseTabsContext.Provider>
+  );
+};
+
+export function useDatabaseTabs(
+  filterFn: (tab: DatabaseTab) => boolean = () => true
+): DatabaseTab[] {
+  const tabs = useContext(DatabaseTabsContext);
+  const filteredTabs = useMemo(() => {
+    return tabs.filter(filterFn);
+  }, [tabs, filterFn]);
+  return filteredTabs;
+}
diff --git a/packages/compass-database/src/components/database.spec.tsx b/packages/compass-database/src/components/database.spec.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { expect } from 'chai';
-import AppRegistry from 'hadron-app-registry';
 
 import { Database } from './database';
+import { DatabaseTabsProvider } from './database-tabs-provider';
 
 class Collections extends React.Component {
   render() {
@@ -19,18 +19,11 @@ const ROLE = {
 describe('Database [Component]', function () {
   let globalBefore: any;
   beforeEach(function () {
-    const registry = new AppRegistry();
-
-    globalBefore = (global as any).hadronApp;
-    (global as any).hadronApp = {
-      appRegistry: registry,
-    };
-
-    ((global as any).hadronApp.appRegistry as AppRegistry).registerRole(
-      'Database.Tab',
-      ROLE
+    render(
+      <DatabaseTabsProvider tabs={[ROLE]}>
+        <Database />
+      </DatabaseTabsProvider>
     );
-    render(<Database />);
   });
 
   afterEach(function () {

diff --git a/packages/compass-database/src/components/database.tsx b/packages/compass-database/src/components/database.tsx
@@ -1,9 +1,7 @@
-import React, { useState, useRef, useCallback } from 'react';
+import React, { useState, useCallback, useMemo } from 'react';
 import { ErrorBoundary, TabNavBar, css } from '@mongodb-js/compass-components';
-import { createLoggerAndTelemetry } from '@mongodb-js/compass-logging';
-import type AppRegistry from 'hadron-app-registry';
-
-const { log, mongoLogId } = createLoggerAndTelemetry('COMPASS-DATABASES');
+import { useLoggerAndTelemetry } from '@mongodb-js/compass-logging/provider';
+import { useDatabaseTabs } from './database-tabs-provider';
 
 const databaseStyles = css({
   display: 'flex',
@@ -12,7 +10,8 @@ const databaseStyles = css({
   height: '100%',
 });
 
-function Database() {
+export function Database() {
+  const { log, mongoLogId } = useLoggerAndTelemetry('COMPASS-DATABASES');
   const [activeTab, setActiveTab] = useState(0);
 
   const onTabClicked = useCallback(
@@ -25,43 +24,40 @@ function Database() {
     [activeTab]
   );
 
-  const roles = useRef(
-    ((global as any).hadronApp?.appRegistry as AppRegistry).getRole(
-      'Database.Tab'
-    ) || []
-  );
-  const tabs = useRef(roles.current.map((role) => role.name));
-  const views = useRef(
-    roles.current.map((role, i) => (
-      <ErrorBoundary
-        displayName={role.name}
-        key={i}
-        onError={(error, errorInfo) => {
-          log.error(
-            mongoLogId(1001000109),
-            'Database Workspace',
-            'Rendering database tab failed',
-            { name: role.name, error: error.message, errorInfo }
-          );
-        }}
-      >
-        <role.component />
-      </ErrorBoundary>
-    ))
+  const tabs = useDatabaseTabs();
+
+  const tabNames = useMemo(() => tabs.map((tab) => tab.name), [tabs]);
+  const views = useMemo(
+    () =>
+      tabs.map((tab, i) => (
+        <ErrorBoundary
+          displayName={tab.name}
+          key={i}
+          onError={(error, errorInfo) => {
+            log.error(
+              mongoLogId(1001000109),
+              'Database Workspace',
+              'Rendering database tab failed',
+              { name: tab.name, error: error.message, errorInfo }
+            );
+          }}
+        >
+          <tab.component />
+        </ErrorBoundary>
+      )),
+    [tabs, log, mongoLogId]
   );
 
   return (
     <div className={databaseStyles}>
       <TabNavBar
         data-testid="database-tabs"
         aria-label="Database Tabs"
-        tabs={tabs.current}
-        views={views.current}
+        tabs={tabNames}
+        views={views}
         activeTabIndex={activeTab}
         onTabClicked={onTabClicked}
       />
     </div>
   );
 }
-
-export { Database };
diff --git a/packages/compass-database/src/index.ts b/packages/compass-database/src/index.ts
@@ -1,22 +1,24 @@
-import type AppRegistry from 'hadron-app-registry';
-import DatabasePlugin from './plugin';
+import type { LoggerAndTelemetry } from '@mongodb-js/compass-logging/provider';
+import { registerHadronPlugin } from 'hadron-app-registry';
+import { DatabasePlugin, onActivated } from './plugin';
 
-/**
- * Activate all the components in the Database package.
- * @param {Object} appRegistry - The Hadron appRegisrty to activate this plugin with.
- **/
-function activate(appRegistry: AppRegistry): void {
-  appRegistry.registerComponent('Database.Workspace', DatabasePlugin);
+function activate(): void {
+  // noop
 }
 
-/**
- * Deactivate all the components in the Database package.
- * @param {Object} appRegistry - The Hadron appRegisrty to deactivate this plugin with.
- **/
-function deactivate(appRegistry: AppRegistry): void {
-  appRegistry.deregisterComponent('Database.Workspace');
+function deactivate(): void {
+  // noop
 }
 
-export default DatabasePlugin;
+export const CompassDatabasePlugin = registerHadronPlugin<
+  object,
+  { logger: () => LoggerAndTelemetry }
+>({
+  name: 'CompassDatabase',
+  component: DatabasePlugin as React.FunctionComponent,
+  activate: onActivated,
+});
+
+export { DatabaseTabsProvider } from './components/database-tabs-provider';
 export { activate, deactivate };
 export { default as metadata } from '../package.json';
diff --git a/packages/compass-database/src/plugin.tsx b/packages/compass-database/src/plugin.tsx
@@ -1,8 +1,17 @@
 import React from 'react';
 import { Database } from './components/database';
 
-function Plugin() {
+export function DatabasePlugin() {
   return <Database />;
 }
 
-export default Plugin;
+export function onActivated() {
+  return {
+    store: {
+      state: {},
+    },
+    deactivate() {
+      /* nothing to do */
+    },
+  };
+}
diff --git a/packages/compass-home/package.json b/packages/compass-home/package.json
@@ -39,6 +39,7 @@
     "@mongodb-js/compass-app-stores": "^7.6.1",
     "@mongodb-js/compass-components": "^1.19.0",
     "@mongodb-js/compass-connections": "^1.20.1",
+    "@mongodb-js/compass-database": "^3.19.1",
     "@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",
@@ -61,6 +62,7 @@
     "@mongodb-js/compass-app-stores": "^7.6.1",
     "@mongodb-js/compass-components": "^1.19.0",
     "@mongodb-js/compass-connections": "^1.20.1",
+    "@mongodb-js/compass-database": "^3.19.1",
     "@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",

diff --git a/packages/compass-home/src/components/home.spec.tsx b/packages/compass-home/src/components/home.spec.tsx
@@ -57,7 +57,7 @@ describe('Home [Component]', function () {
   const testAppRegistry = globalAppRegistry;
 
   beforeEach(function () {
-    ['Collection.Workspace', 'Database.Workspace'].forEach((name) =>
+    ['Collection.Workspace'].forEach((name) =>
       testAppRegistry.registerComponent(name, getComponent(name))
     );
 

diff --git a/packages/compass-home/src/components/workspace-content.spec.tsx b/packages/compass-home/src/components/workspace-content.spec.tsx
@@ -36,7 +36,7 @@ function renderWorkspaceContent(
 
 describe('WorkspaceContent [Component]', function () {
   before(function () {
-    ['Collection.Workspace', 'Database.Workspace'].map((name) =>
+    ['Collection.Workspace'].map((name) =>
       globalAppRegistry.registerComponent(name, getComponent(name))
     );
     globalAppRegistry.onActivated();
@@ -50,7 +50,6 @@ describe('WorkspaceContent [Component]', function () {
     });
 
     it('renders content correctly', function () {
-      expect(screen.queryByTestId('test-Database.Workspace')).to.not.exist;
       expect(screen.queryByTestId('test-Collection.Workspace')).to.not.exist;
     });
   });
@@ -61,7 +60,6 @@ describe('WorkspaceContent [Component]', function () {
     });
 
     it('renders content correctly', function () {
-      expect(screen.getByTestId('test-Database.Workspace')).to.be.visible;
       expect(screen.queryByTestId('test-Collection.Workspace')).to.not.exist;
     });
   });
@@ -74,7 +72,6 @@ describe('WorkspaceContent [Component]', function () {
     });
 
     it('renders content correctly', function () {
-      expect(screen.queryByTestId('test-Database.Workspace')).to.not.exist;
       expect(screen.getByTestId('test-Collection.Workspace')).to.be.visible;
     });
   });

diff --git a/packages/compass-home/src/components/workspace-content.tsx b/packages/compass-home/src/components/workspace-content.tsx
@@ -7,6 +7,10 @@ import {
 import InstanceWorkspacePlugin, {
   InstanceTabsProvider,
 } from '@mongodb-js/compass-instance';
+import {
+  CompassDatabasePlugin,
+  DatabaseTabsProvider,
+} from '@mongodb-js/compass-database';
 import CompassSavedAggregationsQueriesPlugin from '@mongodb-js/compass-saved-aggregations-queries';
 import { InstanceTab as DatabasesPlugin } from '@mongodb-js/compass-databases-collections';
 import type Namespace from '../types/namespace';
@@ -17,18 +21,21 @@ const WorkspaceContent: React.FunctionComponent<{ namespace: Namespace }> = ({
   namespace,
 }) => {
   const instanceTabs = useAppRegistryRole('Instance.Tab');
+  const databaseTabs = useAppRegistryRole('Database.Tab');
 
   const Collection =
     useAppRegistryComponent('Collection.Workspace') ?? EmptyComponent;
-  const Database =
-    useAppRegistryComponent('Database.Workspace') ?? EmptyComponent;
 
   if (namespace.collection) {
     return <Collection></Collection>;
   }
 
   if (namespace.database) {
-    return <Database></Database>;
+    return (
+      <DatabaseTabsProvider tabs={databaseTabs ?? []}>
+        <CompassDatabasePlugin />
+      </DatabaseTabsProvider>
+    );
   }
 
   return (