chore(compass-sidebar): convert to new plugin interface COMPASS-7443

packages/compass-app-stores/src/provider.tsx → packages/compass-app-stores/src/provider.ts

@@ -3,7 +3,7 @@ import { createContext, useContext } from 'react';
 
 export const InstanceContext = createContext<MongoDBInstance | null>(null);
 
-export const useMongoDBInstance = (): MongoDBInstance => {
+export const mongoDBInstanceLocator = (): MongoDBInstance => {
   const instance = useContext(InstanceContext);
   if (!instance) {
     throw new Error('No MongoDBInstance available in this context');

packages/compass-home/package.json

@@ -47,6 +47,7 @@
     "@mongodb-js/compass-find-in-page": "^4.19.1",
     "@mongodb-js/compass-import-export": "^7.19.1",
     "@mongodb-js/compass-shell": "^3.19.1",
+    "@mongodb-js/compass-sidebar": "^5.19.1",
     "compass-preferences-model": "^2.15.6",
     "hadron-app-registry": "^9.0.14",
     "hadron-ipc": "^3.2.4",
@@ -66,6 +67,7 @@
     "@mongodb-js/compass-find-in-page": "^4.19.1",
     "@mongodb-js/compass-import-export": "^7.19.1",
     "@mongodb-js/compass-shell": "^3.19.1",
+    "@mongodb-js/compass-sidebar": "^5.19.1",
     "compass-preferences-model": "^2.15.6",
     "hadron-app-registry": "^9.0.14",
     "hadron-ipc": "^3.2.4",

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

@@ -35,7 +35,7 @@ const createDataService = () => ({
   getLastSeenTopology() {
     return {
       type: 'Unknown',
-      servers: [],
+      servers: ['localhost:27020'],
       setName: 'foo',
     };
   },
@@ -58,8 +58,6 @@ describe('Home [Component]', function () {
       'Collection.Workspace',
       'Database.Workspace',
       'Instance.Workspace',
-      'Sidebar.Component',
-      'Global.Shell',
     ].forEach((name) =>
       testAppRegistry.registerComponent(name, getComponent(name))
     );

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

@@ -211,8 +211,10 @@ function Home({
     });
   }
 
+  const [connectionInfo, setConnectionInfo] = useState<ConnectionInfo | null>();
   const onConnected = useCallback(
     (connectionInfo: ConnectionInfo, dataService: DataService) => {
+      setConnectionInfo(connectionInfo);
       appRegistry.emit(
         'data-service-connected',
         null, // No error connecting.
@@ -360,7 +362,10 @@ function Home({
               <ExportPlugin></ExportPlugin>
               <CreateViewPlugin></CreateViewPlugin>
               <DropNamespacePlugin></DropNamespacePlugin>
-              <Workspace namespace={namespace} />
+              <Workspace
+                namespace={namespace}
+                connectionInfo={connectionInfo}
+              />
             </CompassInstanceStorePlugin>
           </DataServiceProvider>
         </AppRegistryProvider>

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

@@ -3,7 +3,8 @@ 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 type { ConnectionInfo } from '@mongodb-js/connection-storage/renderer';
+import { CompassSidebarPlugin } from '@mongodb-js/compass-sidebar';
 import { CompassShellPlugin } from '@mongodb-js/compass-shell';
 
 const verticalSplitStyles = css({
@@ -37,17 +38,17 @@ const shellContainerStyles = css({
 
 export default function Workspace({
   namespace,
+  connectionInfo,
 }: {
   namespace: Namespace;
+  connectionInfo: ConnectionInfo | null | undefined;
 }): React.ReactElement {
-  const SidebarComponent = useAppRegistryComponent('Sidebar.Component');
-
   return (
     <>
       <div data-testid="home-view" className={verticalSplitStyles}>
         <div className={horizontalSplitStyles}>
           <div className={sidebarStyles}>
-            {SidebarComponent && <SidebarComponent />}
+            <CompassSidebarPlugin connectionInfo={connectionInfo} />
           </div>
           <div className={homePageContentStyles}>
             <WorkspaceContent namespace={namespace} />

packages/compass-sidebar/package.json

@@ -57,6 +57,7 @@
     "reformat": "npm run prettier -- --write . && npm run eslint . --fix"
   },
   "peerDependencies": {
+    "@mongodb-js/compass-app-stores": "^7.6.1",
     "@mongodb-js/compass-components": "^1.19.0",
     "@mongodb-js/compass-databases-navigation": "^1.19.1",
     "@mongodb-js/compass-logging": "^1.2.6",
@@ -65,10 +66,13 @@
     "@mongodb-js/connection-storage": "^0.6.6",
     "@mongodb-js/mongodb-redux-common": "^2.0.15",
     "compass-preferences-model": "^2.15.6",
+    "hadron-app-registry": "^9.0.14",
+    "mongodb-data-service": "^22.15.1",
     "mongodb-instance-model": "^12.15.1",
     "react": "^17.0.2"
   },
   "dependencies": {
+    "@mongodb-js/compass-app-stores": "^7.6.1",
     "@mongodb-js/compass-components": "^1.19.0",
     "@mongodb-js/compass-databases-navigation": "^1.19.1",
     "@mongodb-js/compass-logging": "^1.2.6",
@@ -77,6 +81,8 @@
     "@mongodb-js/connection-storage": "^0.6.6",
     "@mongodb-js/mongodb-redux-common": "^2.0.15",
     "compass-preferences-model": "^2.15.6",
+    "hadron-app-registry": "^9.0.14",
+    "mongodb-data-service": "^22.15.1",
     "mongodb-instance-model": "^12.15.1"
   },
   "devDependencies": {
@@ -97,7 +103,6 @@
     "debug": "^4.2.0",
     "depcheck": "^1.4.1",
     "eslint": "^7.25.0",
-    "hadron-app-registry": "^9.0.14",
     "lodash": "^4.17.21",
     "mocha": "^10.2.0",
     "mongodb-ns": "^2.4.0",

packages/compass-sidebar/src/components/navigation-items.spec.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { expect } from 'chai';
-import { render, screen } from '@testing-library/react';
+import { render, screen, cleanup } from '@testing-library/react';
 import { Provider } from 'react-redux';
+import { createStore, applyMiddleware } from 'redux';
+import thunk from 'redux-thunk';
+import reducer from '../modules';
 
 import { NavigationItems } from './navigation-items';
-import store from '../stores/store';
 
 function renderNavigationItems(
   props?: Partial<React.ComponentProps<typeof NavigationItems>>
 ) {
+  const store = createStore(reducer, applyMiddleware(thunk));
   return render(
     <Provider store={store}>
       <NavigationItems
@@ -32,6 +35,8 @@ const createDatabaseText = 'Create database';
 const refreshCTAText = 'Refresh databases';
 
 describe('NavigationItems [Component]', function () {
+  afterEach(cleanup);
+
   describe('when rendered', function () {
     it('renders the create database button', function () {
       renderNavigationItems();

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

@@ -21,6 +21,7 @@ import CSFLEConnectionModal from './csfle-connection-modal';
 import CSFLEMarker from './csfle-marker';
 import NonGenuineMarker from './non-genuine-marker';
 
+import { setConnectionIsCSFLEEnabled } from '../modules/data-service';
 import { updateAndSaveConnectionInfo } from '../modules/connection-info';
 import { toggleIsGenuineMongoDBVisible } from '../modules/is-genuine-mongodb-visible';
 import { setIsExpanded } from '../modules/is-expanded';
@@ -43,6 +44,7 @@ export function Sidebar({
   isGenuineMongoDBVisible,
   toggleIsGenuineMongoDBVisible,
   setIsExpanded,
+  setConnectionIsCSFLEEnabled,
   isGenuine,
   csfleMode,
 }: {
@@ -53,6 +55,7 @@ export function Sidebar({
   isGenuineMongoDBVisible: boolean;
   toggleIsGenuineMongoDBVisible: (isVisible: boolean) => void;
   setIsExpanded: (isExpanded: boolean) => void;
+  setConnectionIsCSFLEEnabled: (enabled: boolean) => void;
   isGenuine?: boolean;
   csfleMode?: 'enabled' | 'disabled' | 'unavailable';
 }) {
@@ -140,13 +143,6 @@ export function Sidebar({
     setIsCSFLEModalVisible(!isCSFLEModalVisible);
   }, [setIsCSFLEModalVisible, isCSFLEModalVisible]);
 
-  const setConnectionIsCSFLEEnabled = useCallback(
-    (enabled: boolean) => {
-      globalAppRegistryEmit('sidebar-toggle-csfle-enabled', enabled);
-    },
-    [globalAppRegistryEmit]
-  );
-
   return (
     <ResizableSidebar
       collapsable={true}
@@ -219,6 +215,7 @@ const MappedSidebar = connect(mapStateToProps, {
   updateAndSaveConnectionInfo,
   toggleIsGenuineMongoDBVisible,
   setIsExpanded,
+  setConnectionIsCSFLEEnabled,
 })(Sidebar);
 
 export default MappedSidebar;