fixup: improve header interface, update workspace context provider typing

Anemy · Anemy · commit 7eb2cb9bfd50 · 2025-06-11T13:37:09.000-04:00
diff --git a/packages/compass-collection/src/index.ts b/packages/compass-collection/src/index.ts
@@ -12,7 +12,7 @@ import type { WorkspacePlugin } from '@mongodb-js/compass-workspaces';
 import { workspacesServiceLocator } from '@mongodb-js/compass-workspaces/provider';
 import {
   CollectionWorkspaceTitle,
-  CollectionPluginTitle,
+  CollectionPluginTitleComponent,
 } from './plugin-tab-title';
 
 export const WorkspaceTab: WorkspacePlugin<typeof CollectionWorkspaceTitle> = {
@@ -32,7 +32,7 @@ export const WorkspaceTab: WorkspacePlugin<typeof CollectionWorkspaceTitle> = {
     }
   ),
   content: CollectionTab,
-  header: CollectionPluginTitle,
+  header: CollectionPluginTitleComponent,
 };
 
 export type { CollectionTabPluginMetadata } from './modules/collection-tab';
diff --git a/packages/compass-collection/src/plugin-tab-title.tsx b/packages/compass-collection/src/plugin-tab-title.tsx
@@ -99,13 +99,14 @@ const ConnectedPluginTitle = connect((state: CollectionState) => ({
 }))(_PluginTitle);
 
 export const CollectionWorkspaceTitle = 'Collection' as const;
-export function CollectionPluginTitle(workspaceProps: WorkspaceProps) {
-  return (tabProps: WorkspaceTabCoreProps) => {
-    return (
-      <ConnectedPluginTitle
-        tabProps={tabProps}
-        workspaceProps={workspaceProps}
-      />
-    );
-  };
+export function CollectionPluginTitleComponent({
+  tabProps,
+  workspaceProps,
+}: {
+  tabProps: WorkspaceTabCoreProps;
+  workspaceProps: WorkspaceProps;
+}) {
+  return (
+    <ConnectedPluginTitle tabProps={tabProps} workspaceProps={workspaceProps} />
+  );
 }
diff --git a/packages/compass-data-modeling/src/index.ts b/packages/compass-data-modeling/src/index.ts
@@ -9,7 +9,7 @@ import DataModelingComponent from './components/data-modeling';
 import { mongoDBInstancesManagerLocator } from '@mongodb-js/compass-app-stores/provider';
 import { dataModelStorageServiceLocator } from './provider';
 import { activateDataModelingStore } from './store';
-import { PluginTabTitle, WorkspaceName } from './plugin-tab-title';
+import { PluginTabTitleComponent, WorkspaceName } from './plugin-tab-title';
 
 export const WorkspaceTab: WorkspacePlugin<typeof WorkspaceName> = {
   name: WorkspaceName,
@@ -31,5 +31,5 @@ export const WorkspaceTab: WorkspacePlugin<typeof WorkspaceName> = {
     }
   ),
   content: DataModelingComponent,
-  header: PluginTabTitle,
+  header: PluginTabTitleComponent,
 };
diff --git a/packages/compass-data-modeling/src/plugin-tab-title.tsx b/packages/compass-data-modeling/src/plugin-tab-title.tsx
@@ -42,8 +42,14 @@ const ConnectedTabTitle = connect((state: DataModelingState) => {
   };
 })(_TabTitle);
 
-export function PluginTabTitle(workspaceProps: WorkspaceProps) {
-  return (tabProps: WorkspaceTabCoreProps) => (
+export function PluginTabTitleComponent({
+  tabProps,
+  workspaceProps,
+}: {
+  tabProps: WorkspaceTabCoreProps;
+  workspaceProps: WorkspaceProps;
+}) {
+  return (
     <ConnectedTabTitle tabProps={tabProps} workspaceProps={workspaceProps} />
   );
 }
diff --git a/packages/compass-saved-aggregations-queries/src/index.ts b/packages/compass-saved-aggregations-queries/src/index.ts
@@ -13,7 +13,7 @@ import {
 } from '@mongodb-js/my-queries-storage/provider';
 import { preferencesLocator } from 'compass-preferences-model/provider';
 import { connectionsLocator } from '@mongodb-js/compass-connections/provider';
-import { PluginTabTitle, WorkspaceName } from './plugin-tab-title';
+import { PluginTabTitleComponent, WorkspaceName } from './plugin-tab-title';
 
 export const WorkspaceTab: WorkspacePlugin<typeof WorkspaceName> = {
   name: WorkspaceName,
@@ -37,5 +37,5 @@ export const WorkspaceTab: WorkspacePlugin<typeof WorkspaceName> = {
     }
   ),
   content: AggregationsQueriesList,
-  header: PluginTabTitle,
+  header: PluginTabTitleComponent,
 };
diff --git a/packages/compass-saved-aggregations-queries/src/plugin-tab-title.tsx b/packages/compass-saved-aggregations-queries/src/plugin-tab-title.tsx
@@ -6,8 +6,14 @@ import {
 
 export const WorkspaceName = 'My Queries' as const;
 
-export function PluginTabTitle(workspaceProps: { id: string }) {
-  return (tabProps: WorkspaceTabCoreProps) => (
+export function PluginTabTitleComponent({
+  tabProps,
+  workspaceProps,
+}: {
+  tabProps: WorkspaceTabCoreProps;
+  workspaceProps: { id: string };
+}) {
+  return (
     <WorkspaceTab
       {...tabProps}
       id={workspaceProps.id}
diff --git a/packages/compass-serverstats/src/index.ts b/packages/compass-serverstats/src/index.ts
@@ -11,7 +11,10 @@ import CurrentOpStore from './stores/current-op-store';
 import ServerStatsStore from './stores/server-stats-graphs-store';
 import TopStore from './stores/top-store';
 import type { WorkspacePlugin } from '@mongodb-js/compass-workspaces';
-import { WorkspaceName, ServerStatsPluginTitle } from './plugin-tab-title';
+import {
+  WorkspaceName,
+  ServerStatsPluginTitleComponent,
+} from './plugin-tab-title';
 
 type PerformancePluginInitialProps = {};
 
@@ -47,7 +50,7 @@ const WorkspaceTab: WorkspacePlugin<typeof WorkspaceName> = {
     }
   ),
   content: PerformanceComponent,
-  header: ServerStatsPluginTitle,
+  header: ServerStatsPluginTitleComponent,
 };
 
 export { WorkspaceTab };
diff --git a/packages/compass-serverstats/src/plugin-tab-title.tsx b/packages/compass-serverstats/src/plugin-tab-title.tsx
@@ -10,28 +10,32 @@ import {
 
 export const WorkspaceName = 'Performance' as const;
 
-export function ServerStatsPluginTitle(workspaceProps: {
-  id: string;
-  connectionId: string;
+export function ServerStatsPluginTitleComponent({
+  tabProps,
+  workspaceProps,
+}: {
+  tabProps: WorkspaceTabCoreProps;
+  workspaceProps: {
+    id: string;
+    connectionId: string;
+  };
 }) {
-  return (tabProps: WorkspaceTabCoreProps) => {
-    const { getConnectionById } = useConnectionsListRef();
-    const connectionName =
-      getConnectionById(workspaceProps.connectionId)?.title || '';
+  const { getConnectionById } = useConnectionsListRef();
+  const connectionName =
+    getConnectionById(workspaceProps.connectionId)?.title || '';
 
-    const { getThemeOf } = useTabConnectionTheme();
+  const { getThemeOf } = useTabConnectionTheme();
 
-    return (
-      <WorkspaceTab
-        {...tabProps}
-        id={workspaceProps.id}
-        type={WorkspaceName}
-        connectionName={connectionName}
-        title={`Performance: ${connectionName}`}
-        tooltip={[['Performance', connectionName || '']]}
-        iconGlyph="Gauge"
-        tabTheme={getThemeOf(workspaceProps.connectionId)}
-      />
-    );
-  };
+  return (
+    <WorkspaceTab
+      {...tabProps}
+      id={workspaceProps.id}
+      type={WorkspaceName}
+      connectionName={connectionName}
+      title={`Performance: ${connectionName}`}
+      tooltip={[['Performance', connectionName || '']]}
+      iconGlyph="Gauge"
+      tabTheme={getThemeOf(workspaceProps.connectionId)}
+    />
+  );
 }
diff --git a/packages/compass-shell/src/index.ts b/packages/compass-shell/src/index.ts
@@ -11,7 +11,7 @@ import {
   connectionInfoRefLocator,
   type DataServiceLocator,
 } from '@mongodb-js/compass-connections/provider';
-import { WorkspaceName, ShellPluginTitle } from './plugin-tab-title';
+import { WorkspaceName, ShellPluginTitleComponent } from './plugin-tab-title';
 
 export const WorkspaceTab: WorkspacePlugin<typeof WorkspaceName> = {
   name: WorkspaceName,
@@ -32,5 +32,5 @@ export const WorkspaceTab: WorkspacePlugin<typeof WorkspaceName> = {
     }
   ),
   content: ShellPlugin,
-  header: ShellPluginTitle,
+  header: ShellPluginTitleComponent,
 };
diff --git a/packages/compass-shell/src/plugin-tab-title.tsx b/packages/compass-shell/src/plugin-tab-title.tsx
@@ -10,27 +10,31 @@ import {
 
 export const WorkspaceName = 'Shell' as const;
 
-export function ShellPluginTitle(workspaceProps: {
-  id: string;
-  connectionId: string;
+export function ShellPluginTitleComponent({
+  tabProps,
+  workspaceProps,
+}: {
+  tabProps: WorkspaceTabCoreProps;
+  workspaceProps: {
+    id: string;
+    connectionId: string;
+  };
 }) {
-  return (tabProps: WorkspaceTabCoreProps) => {
-    const { getThemeOf } = useTabConnectionTheme();
-    const { getConnectionById } = useConnectionsListRef();
+  const { getThemeOf } = useTabConnectionTheme();
+  const { getConnectionById } = useConnectionsListRef();
 
-    const connectionName =
-      getConnectionById(workspaceProps.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)}
-      />
-    );
-  };
+  const connectionName =
+    getConnectionById(workspaceProps.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)}
+    />
+  );
 }
diff --git a/packages/compass-welcome/src/index.ts b/packages/compass-welcome/src/index.ts
@@ -6,7 +6,7 @@ import type { WorkspacePlugin } from '@mongodb-js/compass-workspaces';
 import { WelcomeModal, DesktopWelcomeTab, WebWelcomeTab } from './components';
 import { activatePlugin } from './stores';
 import { telemetryLocator } from '@mongodb-js/compass-telemetry/provider';
-import { PluginTabTitle, WorkspaceName } from './plugin-tab-title';
+import { PluginTabTitleComponent, WorkspaceName } from './plugin-tab-title';
 
 const serviceLocators = {
   logger: createLoggerLocator('COMPASS-MY-QUERIES-UI'),
@@ -27,7 +27,7 @@ export const DesktopWorkspaceTab: WorkspacePlugin<typeof WorkspaceName> = {
     serviceLocators
   ),
   content: DesktopWelcomeTab,
-  header: PluginTabTitle,
+  header: PluginTabTitleComponent,
 };
 
 export const WebWorkspaceTab: WorkspacePlugin<typeof WorkspaceName> = {
@@ -43,7 +43,7 @@ export const WebWorkspaceTab: WorkspacePlugin<typeof WorkspaceName> = {
     serviceLocators
   ),
   content: WebWelcomeTab,
-  header: PluginTabTitle,
+  header: PluginTabTitleComponent,
 };
 
 export { WelcomeModal };
diff --git a/packages/compass-welcome/src/plugin-tab-title.tsx b/packages/compass-welcome/src/plugin-tab-title.tsx
@@ -6,8 +6,14 @@ import {
 
 export const WorkspaceName = 'Welcome' as const;
 
-export function PluginTabTitle(workspaceProps: { id: string }) {
-  return (tabProps: WorkspaceTabCoreProps) => (
+export function PluginTabTitleComponent({
+  tabProps,
+  workspaceProps,
+}: {
+  tabProps: WorkspaceTabCoreProps;
+  workspaceProps: { id: string };
+}) {
+  return (
     <WorkspaceTab
       {...tabProps}
       id={workspaceProps.id}
diff --git a/packages/compass-workspaces/src/components/index.tsx b/packages/compass-workspaces/src/components/index.tsx
@@ -110,7 +110,6 @@ const WorkspacesWithSidebar: React.FunctionComponent<
       >
         <div className={sidebarStyles}>{renderSidebar?.()}</div>
         <div className={workspacesStyles}>
-          {/* TODO: Workspace providers here? */}
           <Workspaces openOnEmptyWorkspace={openOnEmptyWorkspace}></Workspaces>
         </div>
       </div>
diff --git a/packages/compass-workspaces/src/components/workspace-tab-context-provider.tsx b/packages/compass-workspaces/src/components/workspace-tab-context-provider.tsx
@@ -79,15 +79,26 @@ const TabCloseHandler: React.FunctionComponent = ({ children }) => {
   );
 };
 
-const WorkspaceTabContextProvider: React.FunctionComponent<{
+type WorkspaceTabContextProviderProps = {
   tab: WorkspaceTab;
-  sectionType: 'tab-content' | 'tab-title';
-  onNamespaceNotFound?: (
-    tab: Extract<WorkspaceTab, { namespace: string }>,
-    fallbackNamespace: string | null
-  ) => void;
   children: React.JSX.Element;
-}> = ({ tab, onNamespaceNotFound, sectionType: type, children }) => {
+} & (
+  | {
+      sectionType: 'tab-content';
+      onNamespaceNotFound: (
+        tab: Extract<WorkspaceTab, { namespace: string }>,
+        fallbackNamespace: string | null
+      ) => void;
+    }
+  | {
+      sectionType: 'tab-title';
+      onNamespaceNotFound?: undefined;
+    }
+);
+
+const WorkspaceTabContextProvider: React.FunctionComponent<
+  WorkspaceTabContextProviderProps
+> = ({ tab, onNamespaceNotFound, sectionType: type, children }) => {
   const initialProps = getInitialPropsForWorkspace(tab);
 
   if (initialProps) {
diff --git a/packages/compass-workspaces/src/components/workspaces.tsx b/packages/compass-workspaces/src/components/workspaces.tsx
@@ -123,7 +123,7 @@ const CompassWorkspaces: React.FunctionComponent<CompassWorkspacesProps> = ({
       }
       const {
         content: WorkspaceTabContent,
-        header: headerFn,
+        header: WorkspaceTabTitle,
         provider,
       } = plugin;
 
@@ -153,14 +153,9 @@ const CompassWorkspaces: React.FunctionComponent<CompassWorkspacesProps> = ({
         }
       }
 
-      const PluginTabComponent = headerFn({
-        ...(isNonExistent !== undefined ? { isNonExistent } : {}),
-        ...tab,
-      });
-
       return {
         id: tab.id,
-        renderTab: (workspaceTabProps: WorkspaceTabCoreProps) => (
+        renderTab: (workspaceTabCoreProps: WorkspaceTabCoreProps) => (
           <ErrorBoundary
             displayName={tab.type}
             onError={(error, errorInfo) => {
@@ -172,13 +167,15 @@ const CompassWorkspaces: React.FunctionComponent<CompassWorkspacesProps> = ({
               );
             }}
           >
-            <WorkspaceTabContextProvider
-              tab={tab}
-              sectionType="tab-title"
-              onNamespaceNotFound={onNamespaceNotFound}
-            >
+            <WorkspaceTabContextProvider tab={tab} sectionType="tab-title">
               <Provider>
-                <PluginTabComponent {...workspaceTabProps} />
+                <WorkspaceTabTitle
+                  workspaceProps={{
+                    ...(isNonExistent !== undefined ? { isNonExistent } : {}),
+                    ...tab,
+                  }}
+                  tabProps={workspaceTabCoreProps}
+                />
               </Provider>
             </WorkspaceTabContextProvider>
           </ErrorBoundary>
diff --git a/packages/compass-workspaces/src/types.ts b/packages/compass-workspaces/src/types.ts
@@ -110,9 +110,9 @@ export type WorkspacePlugin<T extends AnyWorkspace['type']> = {
   content:
     | React.ComponentClass<WorkspacePluginProps<T>>
     | ((props: WorkspacePluginProps<T>) => React.ReactElement | null);
-  header: (
-    workspaceProps: any
-    // TODO: Typing. We want a type like this V
-    // workspaceProps: WorkspacePluginProps<T>
-  ) => (tabProps: WorkspaceTabCoreProps) => ReturnType<typeof Tab>;
+  header: (props: {
+    tabProps: WorkspaceTabCoreProps;
+    workspaceProps: any;
+    // workspaceProps: WorkspacePluginProps<T> // TODO: Typing
+  }) => ReturnType<typeof Tab>;
 };
diff --git a/packages/databases-collections/src/collections-plugin-title.tsx b/packages/databases-collections/src/collections-plugin-title.tsx
diff --git a/packages/databases-collections/src/databases-plugin-title.tsx b/packages/databases-collections/src/databases-plugin-title.tsx
diff --git a/packages/databases-collections/src/index.ts b/packages/databases-collections/src/index.ts
