chore(compass-schema-validation): convert to TS and new-style plugin COMPASS-7476 (#5154)

Author: addaleax

package-lock.json

@@ -0,0 +1,24 @@
+import React, { useContext, useRef } from 'react';
+import type { CollectionTabPluginMetadata } from '../modules/collection-tab';
+
+export interface CollectionTabPlugin {
+  name: string;
+  component: React.ComponentType<CollectionTabPluginMetadata>;
+}
+
+const CollectionTabsContext = React.createContext<CollectionTabPlugin[]>([]);
+
+export const CollectionTabsProvider: React.FunctionComponent<{
+  tabs: CollectionTabPlugin[];
+}> = ({ tabs, children }) => {
+  const tabsRef = useRef(tabs);
+  return (
+    <CollectionTabsContext.Provider value={tabsRef.current}>
+      {children}
+    </CollectionTabsContext.Provider>
+  );
+};
+
+export function useCollectionTabPlugins(): CollectionTabPlugin[] {
+  return useContext(CollectionTabsContext);
+}

packages/compass-collection/src/components/collection-tab-provider.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
-import type { Store } from 'redux';
 import { connect, Provider } from 'react-redux';
+import type { CollectionTabPluginMetadata } from '../modules/collection-tab';
 import {
   returnToView,
   selectDatabase,
@@ -9,10 +9,13 @@ import {
   selectTab,
   renderScopedModals,
   renderTabs,
+  createCollectionStoreMetadata,
 } from '../modules/collection-tab';
 import { css, ErrorBoundary, TabNavBar } from '@mongodb-js/compass-components';
 import CollectionHeader from './collection-header';
 import { createLoggerAndTelemetry } from '@mongodb-js/compass-logging';
+import type { configureStore } from '../stores/collection-tab';
+import { useCollectionTabPlugins } from './collection-tab-provider';
 
 const { log, mongoLogId, track } = createLoggerAndTelemetry(
   'COMPASS-COLLECTION-TAB-UI'
@@ -58,11 +61,26 @@ const collectionModalContainerStyles = css({
 
 const CollectionTab: React.FunctionComponent<{
   currentTab: string;
+  collectionTabPluginMetadata: CollectionTabPluginMetadata;
   renderScopedModals(): React.ReactElement[];
   renderTabs(): { name: string; component: React.ReactElement }[];
   onTabClick(name: string): void;
-}> = ({ currentTab, renderScopedModals, renderTabs, onTabClick }) => {
-  const tabs = renderTabs();
+}> = ({
+  currentTab,
+  collectionTabPluginMetadata,
+  renderScopedModals,
+  renderTabs,
+  onTabClick,
+}) => {
+  const pluginTabs = useCollectionTabPlugins();
+  const legacyTabs = renderTabs();
+  const tabs = [
+    ...legacyTabs,
+    ...pluginTabs.map(({ name, component: Component }) => ({
+      name,
+      component: <Component {...collectionTabPluginMetadata} />,
+    })),
+  ];
   const activeTabIndex = tabs.findIndex((tab) => tab.name === currentTab);
 
   useEffect(() => {
@@ -121,6 +139,7 @@ const ConnectedCollectionTab = connect(
   (state: CollectionState) => {
     return {
       currentTab: state.currentTab,
+      collectionTabPluginMetadata: createCollectionStoreMetadata(state),
     };
   },
   {
@@ -130,9 +149,9 @@ const ConnectedCollectionTab = connect(
   }
 )(CollectionTab);
 
-const CollectionTabPlugin: React.FunctionComponent<{ store: Store }> = ({
-  store,
-}) => {
+const CollectionTabPlugin: React.FunctionComponent<{
+  store: ReturnType<typeof configureStore>;
+}> = ({ store }) => {
   return (
     <Provider store={store}>
       <ConnectedCollectionTab></ConnectedCollectionTab>

packages/compass-collection/src/components/collection-tab.tsx

@@ -33,3 +33,5 @@ function deactivate(appRegistry: AppRegistry): void {
 export default CollectionTabsPlugin;
 export { activate, deactivate };
 export { default as metadata } from '../package.json';
+export type { CollectionTabPluginMetadata } from './modules/collection-tab';
+export { CollectionTabsProvider } from './components/collection-tab-provider';

packages/compass-collection/src/index.ts

@@ -137,7 +137,6 @@ export const selectTab = (
     localAppRegistry.emit('subtab-changed', tabName);
   };
 };
-
 export const selectDatabase = (): CollectionThunkAction<void> => {
   return (dispatch, getState, { globalAppRegistry }) => {
     const { metadata } = getState();
@@ -164,6 +163,20 @@ export const returnToView = (): CollectionThunkAction<void> => {
   };
 };
 
+export function createCollectionStoreMetadata(state: CollectionState) {
+  return {
+    ...state.metadata,
+    query: state.initialQuery,
+    aggregation: state.initialAggregation,
+    pipelineText: state.initialPipelineText,
+    editViewName: state.editViewName,
+  };
+}
+
+export type CollectionTabPluginMetadata = ReturnType<
+  typeof createCollectionStoreMetadata
+>;
+
 const setupRole = (
   roleName: string
 ): CollectionThunkAction<{ name: string; component: React.ReactElement }[]> => {
@@ -187,7 +200,7 @@ const setupRole = (
       } = role;
 
       const collectionStoreMetadata = {
-        ...getState().metadata,
+        ...createCollectionStoreMetadata(getState()),
         localAppRegistry,
         globalAppRegistry,
         dataProvider: {
@@ -196,10 +209,6 @@ const setupRole = (
           error: null,
           dataProvider: dataService,
         },
-        query: getState().initialQuery,
-        aggregation: getState().initialAggregation,
-        pipelineText: getState().initialPipelineText,
-        editViewName: getState().editViewName,
       };
 
       let actions;

packages/compass-collection/src/modules/collection-tab.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { AnyAction, Reducer } from 'redux';
 import type { ThunkAction } from 'redux-thunk';
-import AppRegistry from 'hadron-app-registry';
+import AppRegistry, { AppRegistryProvider } from 'hadron-app-registry';
 import { ObjectId } from 'bson';
 import type { CollectionMetadata } from 'mongodb-collection-model';
 import type { DataService } from 'mongodb-data-service';
@@ -213,8 +213,12 @@ const createNewTab = (
       localAppRegistry,
       ...collectionMetadata,
     });
-    const component = React.createElement(collectionTabRole.component, {
-      store,
+    const component = React.createElement(AppRegistryProvider, {
+      localAppRegistry: localAppRegistry,
+      deactivateOnUnmount: false,
+      children: React.createElement(collectionTabRole.component, {
+        store,
+      }),
     });
     const tab: CollectionTab = {
       id: new ObjectId().toHexString(),

packages/compass-collection/src/modules/tabs.ts

@@ -37,6 +37,7 @@
     "@mongodb-js/atlas-service": "^0.10.1",
     "@mongodb-js/compass-aggregations": "^9.20.0",
     "@mongodb-js/compass-app-stores": "^7.6.1",
+    "@mongodb-js/compass-collection": "^4.19.1",
     "@mongodb-js/compass-components": "^1.19.0",
     "@mongodb-js/compass-connections": "^1.20.1",
     "@mongodb-js/compass-database": "^3.19.1",
@@ -46,6 +47,7 @@
     "@mongodb-js/compass-instance": "^4.19.1",
     "@mongodb-js/compass-logging": "^1.2.6",
     "@mongodb-js/compass-saved-aggregations-queries": "^1.20.1",
+    "@mongodb-js/compass-schema-validation": "^6.20.0",
     "@mongodb-js/compass-serverstats": "^16.19.1",
     "@mongodb-js/compass-settings": "^0.21.1",
     "@mongodb-js/compass-shell": "^3.19.1",
@@ -61,6 +63,7 @@
     "@mongodb-js/atlas-service": "^0.10.1",
     "@mongodb-js/compass-aggregations": "^9.20.0",
     "@mongodb-js/compass-app-stores": "^7.6.1",
+    "@mongodb-js/compass-collection": "^4.19.1",
     "@mongodb-js/compass-components": "^1.19.0",
     "@mongodb-js/compass-connections": "^1.20.1",
     "@mongodb-js/compass-database": "^3.19.1",
@@ -70,6 +73,7 @@
     "@mongodb-js/compass-instance": "^4.19.1",
     "@mongodb-js/compass-logging": "^1.2.6",
     "@mongodb-js/compass-saved-aggregations-queries": "^1.20.1",
+    "@mongodb-js/compass-schema-validation": "^6.20.0",
     "@mongodb-js/compass-serverstats": "^16.19.1",
     "@mongodb-js/compass-settings": "^0.21.1",
     "@mongodb-js/compass-shell": "^3.19.1",

packages/compass-home/package.json

@@ -11,10 +11,12 @@ import {
   CompassDatabasePlugin,
   DatabaseTabsProvider,
 } from '@mongodb-js/compass-database';
+import { CompassSchemaValidationPlugin } from '@mongodb-js/compass-schema-validation';
 import CompassSavedAggregationsQueriesPlugin from '@mongodb-js/compass-saved-aggregations-queries';
 import { InstanceTab as DatabasesTabPlugin } from '@mongodb-js/compass-databases-collections';
 import { InstanceTab as PerformanceTabPlugin } from '@mongodb-js/compass-serverstats';
 import type Namespace from '../types/namespace';
+import { CollectionTabsProvider } from '@mongodb-js/compass-collection';
 
 const EmptyComponent: React.FunctionComponent = () => null;
 
@@ -27,7 +29,11 @@ const WorkspaceContent: React.FunctionComponent<{ namespace: Namespace }> = ({
     useAppRegistryComponent('Collection.Workspace') ?? EmptyComponent;
 
   if (namespace.collection) {
-    return <Collection></Collection>;
+    return (
+      <CollectionTabsProvider tabs={[CompassSchemaValidationPlugin]}>
+        <Collection />
+      </CollectionTabsProvider>
+    );
   }
 
   if (namespace.database) {