chore(compass-crud): convert to new plugin interface COMPASS-7404 (#5166)

Author: addaleax

package-lock.json

@@ -64,6 +64,7 @@
     "@dnd-kit/core": "^6.0.7",
     "@dnd-kit/sortable": "^7.0.2",
     "@dnd-kit/utilities": "^3.2.1",
+    "@mongodb-js/compass-collection": "^4.19.1",
     "@mongodb-js/eslint-config-compass": "^1.0.11",
     "@mongodb-js/mocha-config-compass": "^1.3.2",
     "@mongodb-js/prettier-config-compass": "^1.0.1",

packages/compass-aggregations/package.json

@@ -5,7 +5,10 @@ import { Aggregations } from './components/aggregations';
 import { activateCreateViewPlugin } from './stores/create-view';
 import StageEditor from './components/stage-editor';
 import CreateViewModal from './components/create-view-modal';
-import { dataServiceLocator } from 'mongodb-data-service/provider';
+import {
+  dataServiceLocator,
+  type DataServiceLocator,
+} from 'mongodb-data-service/provider';
 import { createLoggerAndTelemetryLocator } from '@mongodb-js/compass-logging/provider';
 import type {
   DataService,
@@ -32,7 +35,7 @@ export const CompassAggregationsHadronPlugin = registerHadronPlugin<
     activate: activateAggregationsPlugin,
   },
   {
-    dataService: dataServiceLocator as typeof dataServiceLocator<
+    dataService: dataServiceLocator as DataServiceLocator<
       RequiredDataServiceProps,
       OptionalDataServiceProps
     >,
@@ -51,7 +54,7 @@ export const CreateViewPlugin = registerHadronPlugin(
     activate: activateCreateViewPlugin,
   },
   {
-    dataService: dataServiceLocator as typeof dataServiceLocator<'createView'>,
+    dataService: dataServiceLocator as DataServiceLocator<'createView'>,
     logger: createLoggerAndTelemetryLocator('COMPASS-CREATE-VIEW-UI'),
   }
 );

packages/compass-aggregations/src/index.ts

@@ -56,18 +56,22 @@
     "reformat": "npm run eslint . -- --fix && npm run prettier -- --write ."
   },
   "peerDependencies": {
+    "@mongodb-js/compass-app-stores": "^7.6.1",
     "@mongodb-js/compass-components": "^1.19.0",
     "@mongodb-js/compass-editor": "^0.18.0",
     "@mongodb-js/compass-logging": "^1.2.6",
     "@mongodb-js/my-queries-storage": "^0.2.1",
     "@mongodb-js/explain-plan-helper": "^1.1.4",
     "bson": "^6.2.0",
     "compass-preferences-model": "^2.15.6",
+    "hadron-app-registry": "^9.0.14",
     "hadron-document": "^8.4.3",
     "hadron-type-checker": "^7.1.0",
+    "mongodb-data-service": "^22.15.1",
     "react": "^17.0.2"
   },
   "devDependencies": {
+    "@mongodb-js/compass-collection": "^4.19.1",
     "@mongodb-js/compass-test-server": "^0.1.6",
     "@mongodb-js/eslint-config-compass": "^1.0.11",
     "@mongodb-js/mocha-config-compass": "^1.3.2",
@@ -88,10 +92,8 @@
     "enzyme": "^3.11.0",
     "eslint": "^7.25.0",
     "hadron-app": "^5.15.1",
-    "hadron-app-registry": "^9.0.14",
     "lodash": "^4.17.21",
     "mocha": "^10.2.0",
-    "mongodb-data-service": "^22.15.1",
     "mongodb-instance-model": "^12.15.1",
     "mongodb-query-parser": "^4.0.0",
     "mongodb-ns": "^2.4.0",
@@ -105,14 +107,17 @@
     "sinon": "^8.1.1"
   },
   "dependencies": {
+    "@mongodb-js/compass-app-stores": "^7.6.1",
     "@mongodb-js/compass-components": "^1.19.0",
     "@mongodb-js/compass-editor": "^0.18.0",
     "@mongodb-js/compass-logging": "^1.2.6",
     "@mongodb-js/explain-plan-helper": "^1.1.4",
     "@mongodb-js/my-queries-storage": "^0.2.1",
     "bson": "^6.2.0",
     "compass-preferences-model": "^2.15.6",
+    "hadron-app-registry": "^9.0.14",
     "hadron-document": "^8.4.3",
-    "hadron-type-checker": "^7.1.0"
+    "hadron-type-checker": "^7.1.0",
+    "mongodb-data-service": "^22.15.1"
   }
 }

packages/compass-crud/package.json

@@ -98,7 +98,7 @@ export type CrudToolbarProps = {
   isExportable: boolean;
   isWritable: boolean;
   loadingCount: boolean;
-  localAppRegistry: AppRegistry;
+  localAppRegistry: Pick<AppRegistry, 'getRole' | 'getStore'>;
   onApplyClicked: () => void;
   onResetClicked: () => void;
   onUpdateButtonClicked: () => void;

packages/compass-crud/src/components/crud-toolbar.tsx

@@ -1,62 +1,58 @@
-import type AppRegistry from 'hadron-app-registry';
-
 import type { DocumentProps } from './components/document';
 import Document from './components/document';
 import type { DocumentListProps } from './components/document-list';
 import DocumentList from './components/document-list';
 import InsertDocumentDialog from './components/insert-document-dialog';
 import { ConnectedDocumentList } from './components/connected-document-list';
-import configureActions from './actions';
-import configureStore from './stores/crud-store';
+import { activateDocumentsPlugin } from './stores/crud-store';
+import {
+  dataServiceLocator,
+  type DataServiceLocator,
+} from 'mongodb-data-service/provider';
+import type {
+  DataService,
+  OptionalDataServiceProps,
+  RequiredDataServiceProps,
+} from './utils/data-service';
+import type { CollectionTabPluginMetadata } from '@mongodb-js/compass-collection';
+import type { MongoDBInstance } from '@mongodb-js/compass-app-stores/provider';
+import { mongoDBInstanceLocator } from '@mongodb-js/compass-app-stores/provider';
+import { registerHadronPlugin } from 'hadron-app-registry';
 
-const COLLECTION_TAB_ROLE = {
-  component: ConnectedDocumentList,
-  name: 'Documents',
-  hasQueryHistory: true,
-  order: 1,
-  configureStore: configureStore,
-  storeName: 'CRUD.Store',
-  configureActions: configureActions,
-  actionName: 'CRUD.Actions',
+const activate = () => {
+  // noop
 };
 
-const DOCUMENT_ROLE = {
-  component: Document,
-  name: 'STANDARD',
-  order: 1,
+const deactivate = () => {
+  // noop
 };
 
-/**
- * Activate all the components in the CRUD package.
- *
- * @param {AppRegistry} appRegistry - The app registry.
- */
-const activate = (appRegistry: AppRegistry): void => {
-  appRegistry.registerRole('Collection.Tab', COLLECTION_TAB_ROLE);
-  appRegistry.registerRole('CRUD.Document', DOCUMENT_ROLE);
-};
+export const CompassDocumentsHadronPlugin = registerHadronPlugin<
+  CollectionTabPluginMetadata,
+  { dataService: () => DataService; instance: () => MongoDBInstance }
+>(
+  {
+    name: 'CompassDocuments',
+    component: ConnectedDocumentList as any, // as any because of reflux store
+    activate: activateDocumentsPlugin,
+  },
+  {
+    dataService: dataServiceLocator as DataServiceLocator<
+      RequiredDataServiceProps,
+      OptionalDataServiceProps
+    >,
+    instance: mongoDBInstanceLocator,
+  }
+);
 
-/**
- * Deactivate all the components in the CRUD package.
- *
- * @param {AppRegistry} appRegistry - The app registry.
- */
-const deactivate = (appRegistry: AppRegistry): void => {
-  appRegistry.deregisterRole('Collection.Tab', COLLECTION_TAB_ROLE);
-  appRegistry.deregisterRole('CRUD.Document', DOCUMENT_ROLE);
+export const CompassDocumentsPlugin = {
+  name: 'Documents',
+  component: CompassDocumentsHadronPlugin,
 };
 
 export default DocumentList;
 export type { DocumentListProps, DocumentProps };
-export {
-  activate,
-  deactivate,
-  DocumentList,
-  Document,
-  InsertDocumentDialog,
-  configureStore,
-  configureActions,
-};
+export { activate, deactivate, DocumentList, Document, InsertDocumentDialog };
 export type { DocumentListViewProps } from './components/document-list-view';
 export { default as DocumentListView } from './components/document-list-view';
 export type { DocumentJsonViewProps } from './components/document-json-view';