fixup: update types, move provider in workspace-tab-context-provider

Author: Anemy

packages/compass-collection/src/plugin-tab-title.tsx

@@ -2,49 +2,42 @@ import React from 'react';
 import { connect } from 'react-redux';
 import toNS from 'mongodb-ns';
 import {
+  useConnectionInfo,
   useConnectionsListRef,
   useTabConnectionTheme,
 } from '@mongodb-js/compass-connections/provider';
 import {
   WorkspaceTab,
   type WorkspaceTabCoreProps,
 } from '@mongodb-js/compass-components';
-import type { CollectionSubtab } from '@mongodb-js/compass-workspaces';
+import type { WorkspacePluginProps } from '@mongodb-js/compass-workspaces';
 
 import { type CollectionState } from './modules/collection-tab';
 
-type WorkspaceProps = {
-  id: string;
-  connectionId: string;
-  namespace: string;
-  subTab: CollectionSubtab;
-  initialQuery?: unknown;
-  initialPipeline?: unknown[];
-  initialPipelineText?: string;
-  initialAggregation?: unknown;
-  editViewName?: string;
-  isNonExistent: boolean;
-};
+export const CollectionWorkspaceTitle = 'Collection' as const;
 
-function _PluginTitle({
-  isTimeSeries,
-  isReadonly,
-  sourceName,
-  tabProps,
-  workspaceProps,
-}: {
+type PluginTitleProps = {
   isTimeSeries?: boolean;
   isReadonly?: boolean;
   sourceName?: string | null;
-  tabProps: WorkspaceTabCoreProps;
-  workspaceProps: WorkspaceProps;
-}) {
+} & WorkspaceTabCoreProps &
+  WorkspacePluginProps<typeof CollectionWorkspaceTitle>;
+
+function _PluginTitle({
+  editViewName,
+  isNonExistent,
+  isReadonly,
+  isTimeSeries,
+  sourceName,
+  namespace,
+  ...tabProps
+}: PluginTitleProps) {
   const { getThemeOf } = useTabConnectionTheme();
   const { getConnectionById } = useConnectionsListRef();
+  const { id: connectionId } = useConnectionInfo();
 
-  const { database, collection, ns } = toNS(workspaceProps.namespace);
-  const connectionName =
-    getConnectionById(workspaceProps.connectionId)?.title || '';
+  const { database, collection, ns } = toNS(namespace);
+  const connectionName = getConnectionById(connectionId)?.title || '';
   const collectionType = isTimeSeries
     ? 'timeseries'
     : isReadonly
@@ -58,8 +51,8 @@ function _PluginTitle({
   if (sourceName) {
     tooltip.push(['View', collection]);
     tooltip.push(['Derived from', toNS(sourceName).collection]);
-  } else if (workspaceProps.editViewName) {
-    tooltip.push(['View', toNS(workspaceProps.editViewName).collection]);
+  } else if (editViewName) {
+    tooltip.push(['View', toNS(editViewName).collection]);
     tooltip.push(['Derived from', collection]);
   } else {
     tooltip.push(['Collection', collection]);
@@ -68,7 +61,6 @@ function _PluginTitle({
   return (
     <WorkspaceTab
       {...tabProps}
-      id={workspaceProps.id}
       connectionName={connectionName}
       type={CollectionWorkspaceTitle}
       title={collection}
@@ -78,32 +70,21 @@ function _PluginTitle({
           ? 'Visibility'
           : collectionType === 'timeseries'
           ? 'TimeSeries'
-          : workspaceProps.isNonExistent
+          : isNonExistent
           ? 'EmptyFolder'
           : 'Folder'
       }
       data-namespace={ns}
-      tabTheme={getThemeOf(workspaceProps.connectionId)}
-      isNonExistent={workspaceProps.isNonExistent}
+      tabTheme={getThemeOf(connectionId)}
+      isNonExistent={isNonExistent}
     />
   );
 }
 
-const ConnectedPluginTitle = connect((state: CollectionState) => ({
-  isTimeSeries: state.metadata?.isTimeSeries,
-  isReadonly: state.metadata?.isReadonly,
-  sourceName: state.metadata?.sourceName,
-}))(_PluginTitle);
-
-export const CollectionWorkspaceTitle = 'Collection' as const;
-export function CollectionPluginTitleComponent({
-  tabProps,
-  workspaceProps,
-}: {
-  tabProps: WorkspaceTabCoreProps;
-  workspaceProps: WorkspaceProps;
-}) {
-  return (
-    <ConnectedPluginTitle tabProps={tabProps} workspaceProps={workspaceProps} />
-  );
-}
+export const CollectionPluginTitleComponent = connect(
+  (state: CollectionState) => ({
+    isTimeSeries: state.metadata?.isTimeSeries,
+    isReadonly: state.metadata?.isReadonly,
+    sourceName: state.metadata?.sourceName,
+  })
+)(_PluginTitle);

packages/compass-data-modeling/src/plugin-tab-title.tsx

@@ -6,50 +6,32 @@ import {
   type WorkspaceTabCoreProps,
 } from '@mongodb-js/compass-components';
 import type { DataModelingState } from './store/reducer';
+import type { WorkspacePluginProps } from '@mongodb-js/compass-workspaces';
 
 export const WorkspaceName = 'Data Modeling' as const;
 
-type WorkspaceProps = {
-  id: string;
-};
-
-function _TabTitle({
-  tabProps,
-  tabTitle,
-  workspaceProps,
-}: {
-  tabProps: WorkspaceTabCoreProps;
+type WorkspaceProps = WorkspacePluginProps<typeof WorkspaceName>;
+type PluginTabTitleProps = {
   tabTitle: string;
-  workspaceProps: WorkspaceProps;
-}) {
+} & WorkspaceTabCoreProps &
+  WorkspaceProps;
+
+function _TabTitle({ tabTitle, ...props }: PluginTabTitleProps) {
   return (
     <WorkspaceTab
-      {...tabProps}
-      id={workspaceProps.id}
+      {...props}
       type={WorkspaceName}
       title={tabTitle}
       iconGlyph="Diagram"
     />
   );
 }
 
-const ConnectedTabTitle = connect((state: DataModelingState) => {
+export const PluginTabTitleComponent = connect((state: DataModelingState) => {
   return {
     tabTitle:
       state.step === 'NO_DIAGRAM_SELECTED'
         ? WorkspaceName
         : state.diagram?.name ?? WorkspaceName,
   };
 })(_TabTitle);
-
-export function PluginTabTitleComponent({
-  tabProps,
-  workspaceProps,
-}: {
-  tabProps: WorkspaceTabCoreProps;
-  workspaceProps: WorkspaceProps;
-}) {
-  return (
-    <ConnectedTabTitle tabProps={tabProps} workspaceProps={workspaceProps} />
-  );
-}

packages/compass-saved-aggregations-queries/src/plugin-tab-title.tsx

@@ -3,20 +3,17 @@ import {
   WorkspaceTab,
   type WorkspaceTabCoreProps,
 } from '@mongodb-js/compass-components';
+import type { WorkspacePluginProps } from '@mongodb-js/compass-workspaces';
 
 export const WorkspaceName = 'My Queries' as const;
 
-export function PluginTabTitleComponent({
-  tabProps,
-  workspaceProps,
-}: {
-  tabProps: WorkspaceTabCoreProps;
-  workspaceProps: { id: string };
-}) {
+type PluginTabTitleProps = WorkspaceTabCoreProps &
+  WorkspacePluginProps<typeof WorkspaceName>;
+
+export function PluginTabTitleComponent(props: PluginTabTitleProps) {
   return (
     <WorkspaceTab
-      {...tabProps}
-      id={workspaceProps.id}
+      {...props}
       type={WorkspaceName}
       title={WorkspaceName}
       iconGlyph="CurlyBraces"

packages/compass-serverstats/src/plugin-tab-title.tsx

@@ -1,41 +1,38 @@
 import React from 'react';
 import {
-  useTabConnectionTheme,
+  useConnectionInfo,
   useConnectionsListRef,
+  useTabConnectionTheme,
 } from '@mongodb-js/compass-connections/provider';
 import {
   WorkspaceTab,
   type WorkspaceTabCoreProps,
 } from '@mongodb-js/compass-components';
+import type { WorkspacePluginProps } from '@mongodb-js/compass-workspaces';
 
 export const WorkspaceName = 'Performance' as const;
 
-export function ServerStatsPluginTitleComponent({
-  tabProps,
-  workspaceProps,
-}: {
-  tabProps: WorkspaceTabCoreProps;
-  workspaceProps: {
-    id: string;
-    connectionId: string;
-  };
-}) {
+type PluginTitleComponentProps = WorkspaceTabCoreProps &
+  WorkspacePluginProps<typeof WorkspaceName>;
+
+export function ServerStatsPluginTitleComponent(
+  props: PluginTitleComponentProps
+) {
   const { getConnectionById } = useConnectionsListRef();
-  const connectionName =
-    getConnectionById(workspaceProps.connectionId)?.title || '';
+  const { id: connectionId } = useConnectionInfo();
+  const connectionName = getConnectionById(connectionId)?.title || '';
 
   const { getThemeOf } = useTabConnectionTheme();
 
   return (
     <WorkspaceTab
-      {...tabProps}
-      id={workspaceProps.id}
+      {...props}
       type={WorkspaceName}
       connectionName={connectionName}
       title={`Performance: ${connectionName}`}
       tooltip={[['Performance', connectionName || '']]}
       iconGlyph="Gauge"
-      tabTheme={getThemeOf(workspaceProps.connectionId)}
+      tabTheme={getThemeOf(connectionId)}
     />
   );
 }

packages/compass-shell/src/plugin-tab-title.tsx

@@ -1,40 +1,35 @@
 import React from 'react';
 import {
+  useConnectionInfo,
   useConnectionsListRef,
   useTabConnectionTheme,
 } from '@mongodb-js/compass-connections/provider';
 import {
   WorkspaceTab,
   type WorkspaceTabCoreProps,
 } from '@mongodb-js/compass-components';
+import type { WorkspacePluginProps } from '@mongodb-js/compass-workspaces';
 
 export const WorkspaceName = 'Shell' as const;
 
-export function ShellPluginTitleComponent({
-  tabProps,
-  workspaceProps,
-}: {
-  tabProps: WorkspaceTabCoreProps;
-  workspaceProps: {
-    id: string;
-    connectionId: string;
-  };
-}) {
+type PluginTitleProps = WorkspaceTabCoreProps &
+  WorkspacePluginProps<typeof WorkspaceName>;
+
+export function ShellPluginTitleComponent(tabProps: PluginTitleProps) {
   const { getThemeOf } = useTabConnectionTheme();
   const { getConnectionById } = useConnectionsListRef();
+  const { id: connectionId } = useConnectionInfo();
 
-  const connectionName =
-    getConnectionById(workspaceProps.connectionId)?.title || '';
+  const connectionName = getConnectionById(connectionId)?.title || '';
   return (
     <WorkspaceTab
       {...tabProps}
-      id={workspaceProps.id}
       connectionName={connectionName}
       type={WorkspaceName}
       title={connectionName ? `mongosh: ${connectionName}` : 'MongoDB Shell'}
       tooltip={connectionName ? [['mongosh', connectionName]] : []}
       iconGlyph="Shell"
-      tabTheme={getThemeOf(workspaceProps.connectionId)}
+      tabTheme={getThemeOf(connectionId)}
     />
   );
 }

packages/compass-welcome/src/plugin-tab-title.tsx

@@ -3,20 +3,17 @@ import {
   WorkspaceTab,
   type WorkspaceTabCoreProps,
 } from '@mongodb-js/compass-components';
+import type { WorkspacePluginProps } from '@mongodb-js/compass-workspaces';
 
 export const WorkspaceName = 'Welcome' as const;
 
-export function PluginTabTitleComponent({
-  tabProps,
-  workspaceProps,
-}: {
-  tabProps: WorkspaceTabCoreProps;
-  workspaceProps: { id: string };
-}) {
+type PluginTitleComponentProps = WorkspaceTabCoreProps &
+  WorkspacePluginProps<typeof WorkspaceName>;
+
+export function PluginTabTitleComponent(props: PluginTitleComponentProps) {
   return (
     <WorkspaceTab
-      {...tabProps}
-      id={workspaceProps.id}
+      {...props}
       type={WorkspaceName}
       title={WorkspaceName}
       iconGlyph="Logo"

packages/compass-workspaces/src/components/workspace-tab-context-provider.tsx

@@ -10,6 +10,7 @@ import {
   WorkspaceTabStateProvider,
 } from './workspace-tab-state-provider';
 import { AppRegistryProvider } from 'hadron-app-registry';
+import { useWorkspacePlugins } from './workspaces-provider';
 
 function getInitialPropsForWorkspace(tab: WorkspaceTab) {
   switch (tab.type) {
@@ -100,6 +101,9 @@ const WorkspaceTabContextProvider: React.FunctionComponent<
   WorkspaceTabContextProviderProps
 > = ({ tab, onNamespaceNotFound, sectionType: type, children }) => {
   const initialProps = getInitialPropsForWorkspace(tab);
+  const { getWorkspacePluginByName } = useWorkspacePlugins();
+
+  const { provider: WorkspaceProvider } = getWorkspacePluginByName(tab.type);
 
   if (initialProps) {
     children = React.cloneElement(children, initialProps);
@@ -138,7 +142,7 @@ const WorkspaceTabContextProvider: React.FunctionComponent<
         localAppRegistry={getLocalAppRegistryForTab(tab.id)}
         deactivateOnUnmount={false}
       >
-        {children}
+        <WorkspaceProvider>{children}</WorkspaceProvider>
       </AppRegistryProvider>
     </WorkspaceTabStateProvider>
   );

packages/compass-workspaces/src/components/workspaces-provider.tsx

@@ -34,6 +34,15 @@ export const useWorkspacePlugins = () => {
     getWorkspacePlugins: (): AnyWorkspacePlugin[] => {
       return workspaces;
     },
+    getWorkspacePluginByName: <T extends AnyWorkspace['type']>(name: T) => {
+      const plugin = workspaces.find((ws) => ws.name === name);
+      if (!plugin) {
+        throw new Error(
+          `Component for workspace "${name}" is missing in context. Did you forget to set up WorkspacesProvider?`
+        );
+      }
+      return plugin as unknown as WorkspacePlugin<T>;
+    },
   });
   return workspacePlugins.current;
 };