fixup: update tests, improve typing

Anemy · Anemy · commit 657307bcbf38 · 2025-06-12T19:13:56.000-04:00
diff --git a/packages/compass-collection/src/plugin-tab-title.tsx b/packages/compass-collection/src/plugin-tab-title.tsx
@@ -43,7 +43,6 @@ function _PluginTitle({
   const { getConnectionById } = useConnectionsListRef();
 
   const { database, collection, ns } = toNS(workspaceProps.namespace);
-  const namespaceId = `${workspaceProps.connectionId}.${ns}`;
   const connectionName =
     getConnectionById(workspaceProps.connectionId)?.title || '';
   const collectionType = isTimeSeries
diff --git a/packages/compass-components/src/components/workspace-tabs/workspace-tabs.tsx b/packages/compass-components/src/components/workspace-tabs/workspace-tabs.tsx
@@ -27,7 +27,7 @@ import { useDarkMode } from '../../hooks/use-theme';
 import { FocusState, useFocusState } from '../../hooks/use-focus-hover';
 import { Icon, IconButton } from '../leafygreen';
 import { mergeProps } from '../../utils/merge-props';
-import { Tab } from './tab';
+import type { Tab } from './tab';
 import type { WorkspaceTabCoreProps } from './tab';
 import { useHotkeys } from '../../hooks/use-hotkeys';
 
@@ -299,19 +299,13 @@ const SortableItem = ({
 
   const isDragging = useMemo(() => tabId === activeId, [tabId, activeId]);
 
-  const tab = useMemo(
-    () =>
-      renderTab({
-        isSelected,
-        isDragging,
-        tabContentId: tabId,
-        onSelect: onTabSelected,
-        onClose: onTabClosed,
-      }),
-    [renderTab]
-  );
-
-  return tab;
+  return renderTab({
+    isSelected,
+    isDragging,
+    tabContentId: tabId,
+    onSelect: onTabSelected,
+    onClose: onTabClosed,
+  });
 };
 
 function WorkspaceTabs({
diff --git a/packages/compass-data-modeling/src/index.spec.tsx b/packages/compass-data-modeling/src/index.spec.tsx
@@ -1,12 +1,18 @@
 import React from 'react';
 import { expect } from 'chai';
 import { render } from '@mongodb-js/testing-library-compass';
-import CompassPlugin from './index';
+import { WorkspaceTab } from './index';
 
 describe('Compass Plugin', function () {
-  const Plugin = CompassPlugin.withMockServices({});
+  const Plugin = WorkspaceTab.provider.withMockServices({});
 
   it('renders a Plugin', function () {
-    expect(() => render(<Plugin></Plugin>)).to.not.throw();
+    expect(() =>
+      render(
+        <Plugin>
+          <WorkspaceTab.content />
+        </Plugin>
+      )
+    ).to.not.throw();
   });
 });
diff --git a/packages/compass-saved-aggregations-queries/src/index.spec.tsx b/packages/compass-saved-aggregations-queries/src/index.spec.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import Sinon from 'sinon';
 import { expect } from 'chai';
 import { queries, pipelines } from '../test/fixtures';
-import { MyQueriesPlugin } from '.';
+import { WorkspaceTab } from '.';
 import type {
   PipelineStorage,
   FavoriteQueryStorage,
@@ -81,7 +81,7 @@ describe('AggregationsAndQueriesAndUpdatemanyList', function () {
   let connectionsStore: RenderWithConnectionsResult['connectionsStore'];
 
   const renderPlugin = () => {
-    const PluginWithMocks = MyQueriesPlugin.withMockServices({
+    const PluginWithMocks = WorkspaceTab.provider.withMockServices({
       instancesManager,
       favoriteQueryStorageAccess: {
         getStorage() {
@@ -91,9 +91,17 @@ describe('AggregationsAndQueriesAndUpdatemanyList', function () {
       pipelineStorage: pipelineStorage,
       workspaces,
     });
-    const result = renderWithConnections(<PluginWithMocks></PluginWithMocks>, {
-      connections: [connectionOne.connectionInfo, connectionTwo.connectionInfo],
-    });
+    const result = renderWithConnections(
+      <PluginWithMocks>
+        <WorkspaceTab.content />
+      </PluginWithMocks>,
+      {
+        connections: [
+          connectionOne.connectionInfo,
+          connectionTwo.connectionInfo,
+        ],
+      }
+    );
     connectionsStore = result.connectionsStore;
   };
 
diff --git a/packages/compass-saved-aggregations-queries/src/stores/index.ts b/packages/compass-saved-aggregations-queries/src/stores/index.ts
@@ -79,7 +79,9 @@ export type SavedQueryAggregationThunkAction<
   A extends Action = AnyAction
 > = ThunkAction<R, RootState, SavedQueryAggregationExtraArgs, A>;
 
-type SavedQueryAggregationPluginProps = {};
+type SavedQueryAggregationPluginProps = {
+  children?: React.ReactNode;
+};
 
 export function activatePlugin(
   _initialProps: SavedQueryAggregationPluginProps,
diff --git a/packages/compass-serverstats/src/index.ts b/packages/compass-serverstats/src/index.ts
@@ -16,7 +16,7 @@ import {
   ServerStatsPluginTitleComponent,
 } from './plugin-tab-title';
 
-type PerformancePluginInitialProps = {};
+type PerformancePluginInitialProps = Record<string, never>;
 
 const WorkspaceTab: WorkspacePlugin<typeof WorkspaceName> = {
   name: WorkspaceName,
diff --git a/packages/compass-shell/src/plugin.spec.tsx b/packages/compass-shell/src/plugin.spec.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
 import { expect } from 'chai';
 import { EventEmitter } from 'events';
-import { CompassShellPlugin } from './index';
+import { WorkspaceTab } from './index';
 import {
   renderWithActiveConnection,
   screen,
   waitFor,
 } from '@mongodb-js/testing-library-compass';
 import { RuntimeMap } from './stores/store';
 
-describe('CompassShellPlugin', function () {
+describe('CompassShellPlugin WorkspaceTab', function () {
   it('returns a renderable plugin', async function () {
     RuntimeMap.set('test', {
       eventEmitter: new EventEmitter(),
@@ -19,7 +19,12 @@ describe('CompassShellPlugin', function () {
       },
     } as any);
 
-    await renderWithActiveConnection(<CompassShellPlugin runtimeId="test" />);
+    const ShellContentComponent = WorkspaceTab.content;
+    await renderWithActiveConnection(
+      <WorkspaceTab.provider runtimeId="test">
+        <ShellContentComponent />
+      </WorkspaceTab.provider>
+    );
 
     await waitFor(() => {
       expect(screen.getByTestId('shell-section')).to.exist;
diff --git a/packages/compass-sidebar/src/components/multiple-connections/sidebar.spec.tsx b/packages/compass-sidebar/src/components/multiple-connections/sidebar.spec.tsx
@@ -106,8 +106,18 @@ describe('Multiple Connections Sidebar Component', function () {
       <ConnectionImportExportProvider>
         <WorkspacesProvider
           value={[
-            { name: 'My Queries', component: () => null },
-            { name: 'Performance', component: () => null },
+            {
+              name: 'My Queries',
+              content: () => null,
+              header: () => null as any,
+              provider: (() => null) as any,
+            },
+            {
+              name: 'Performance',
+              content: () => null,
+              header: () => null as any,
+              provider: (() => null) as any,
+            },
           ]}
         >
           <WorkspacesServiceProvider value={workspace as any}>
diff --git a/packages/compass-workspaces/src/components/workspace-tab-context-provider.tsx b/packages/compass-workspaces/src/components/workspace-tab-context-provider.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef } from 'react';
 import { getLocalAppRegistryForTab } from '../stores/workspaces';
-import { WorkspaceTab } from '../types';
+import type { WorkspaceTab } from '../types';
 import { NamespaceProvider } from '@mongodb-js/compass-app-stores/provider';
 import { ConnectionInfoProvider } from '@mongodb-js/compass-connections/provider';
 import { rafraf } from '@mongodb-js/compass-components';
diff --git a/packages/compass-workspaces/src/components/workspaces-provider.tsx b/packages/compass-workspaces/src/components/workspaces-provider.tsx
@@ -1,6 +1,6 @@
 import React, { useContext, useRef } from 'react';
 import type { AnyWorkspace } from '../';
-import { WorkspacePlugin } from '../types';
+import type { WorkspacePlugin } from '../types';
 
 export type AnyWorkspacePlugin =
   | WorkspacePlugin<'Welcome'>
diff --git a/packages/compass-workspaces/src/components/workspaces.tsx b/packages/compass-workspaces/src/components/workspaces.tsx
@@ -4,7 +4,6 @@ import {
   MongoDBLogoMark,
   WorkspaceTabs,
   css,
-  palette,
   spacing,
   useDarkMode,
   type WorkspaceTabCoreProps,
@@ -34,7 +33,7 @@ import {
   useTabConnectionTheme,
 } from '@mongodb-js/compass-connections/provider';
 import { WorkspaceTabContextProvider } from './workspace-tab-context-provider';
-import { WorkspaceTab } from '../types';
+import type { WorkspaceTab } from '../types';
 
 const emptyWorkspaceStyles = css({
   margin: '0 auto',
@@ -129,11 +128,6 @@ const CompassWorkspaces: React.FunctionComponent<CompassWorkspacesProps> = ({
 
       const Provider = provider as any;
 
-      let connectionName: string | undefined;
-      if ('connectionId' in tab) {
-        connectionName = getConnectionById(tab.connectionId)?.title;
-      }
-
       let isNonExistent: boolean | undefined;
       if ('isNonExistent' in tab && tab.isNonExistent) {
         if (tab.type === 'Collections') {
@@ -209,7 +203,7 @@ const CompassWorkspaces: React.FunctionComponent<CompassWorkspacesProps> = ({
     });
   }, [getWorkspacePlugins, tabs, getThemeOf, getConnectionById]);
 
-  const workspaceTabContent = workspaceTabs[activeTabIndex].content;
+  const workspaceTabContent = workspaceTabs[activeTabIndex]?.content ?? null;
 
   return (
     <div
diff --git a/packages/compass-workspaces/src/index.spec.tsx b/packages/compass-workspaces/src/index.spec.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { expect } from 'chai';
 import WorkspacesPlugin, { WorkspacesProvider } from './index';
 import Sinon from 'sinon';
-import type { AnyWorkspaceComponent } from './components/workspaces-provider';
+import type { AnyWorkspacePlugin } from './components/workspaces-provider';
 import { useOpenWorkspace } from './provider';
 import {
   renderWithConnections,
@@ -12,14 +12,35 @@ import {
   userEvent,
 } from '@mongodb-js/testing-library-compass';
 import { TestMongoDBInstanceManager } from '@mongodb-js/compass-app-stores/provider';
+import { WorkspaceTab } from '@mongodb-js/compass-components';
 
 function mockWorkspace(name: string) {
   return {
     name,
-    component: function Component() {
+    provider: function Component({
+      children,
+      props,
+    }: {
+      children?: React.ReactNode;
+      props?: any;
+    }) {
+      return <div {...props}>{children}</div>;
+    },
+    content: function Component() {
       return <>{name}</>;
     },
-  } as unknown as AnyWorkspaceComponent;
+    header: function Component(props: any) {
+      return (
+        <WorkspaceTab
+          {...props.tabProps}
+          name={`${props.workspaceProps.namespace ?? name}`}
+          title={`${props.workspaceProps.namespace ?? name}`}
+          iconGlyph="Home"
+          type={name}
+        />
+      );
+    },
+  } as unknown as AnyWorkspacePlugin;
 }
 
 const TEST_CONNECTION_INFO = {
@@ -71,10 +92,33 @@ describe('WorkspacesPlugin', function () {
         connectFn() {
           return {
             listDatabases() {
-              return Promise.resolve([]);
+              return Promise.resolve([
+                // Mock the databases and collections so we don't trigger the onNamespaceNotFound
+                // fallback handler which redirects collections to the databases view.
+                {
+                  _id: 'db',
+                  name: 'db',
+                  is_non_existent: false,
+                  collection_count: 0,
+                  document_count: 0,
+                  index_count: 0,
+                  storage_size: 0,
+                  data_size: 0,
+                  index_size: 0,
+                },
+              ]);
             },
             listCollections() {
-              return Promise.resolve([]);
+              return Promise.resolve(
+                Array.from({
+                  length: 3,
+                }).map((_, index) => ({
+                  _id: `db.coll${index}`,
+                  name: `coll${index}`,
+                  database: 'db',
+                  type: 'collection',
+                })) as any
+              );
             },
           };
         },
@@ -90,16 +134,12 @@ describe('WorkspacesPlugin', function () {
     cleanup();
   });
 
-  const connectionName = TEST_CONNECTION_INFO.favorite.name;
   const tabs = [
     ['My Queries', () => openFns.openMyQueriesWorkspace()],
-    [connectionName, () => openFns.openDatabasesWorkspace('1')], // Databases
-    [
-      `Performance: ${connectionName}`,
-      () => openFns.openPerformanceWorkspace('1'),
-    ],
+    ['Databases', () => openFns.openDatabasesWorkspace('1')],
+    ['Performance', () => openFns.openPerformanceWorkspace('1')],
     ['db', () => openFns.openCollectionsWorkspace('1', 'db')],
-    ['coll', () => openFns.openCollectionWorkspace('1', 'db.coll')],
+    ['db.coll0', () => openFns.openCollectionWorkspace('1', 'db.coll0')],
   ] as const;
 
   for (const suite of tabs) {
@@ -118,23 +158,25 @@ describe('WorkspacesPlugin', function () {
 
     expect(onTabChangeSpy).to.have.been.calledWith(null);
 
+    openFns.openCollectionWorkspace('1', 'db.coll0', { newTab: true });
     openFns.openCollectionWorkspace('1', 'db.coll1', { newTab: true });
     openFns.openCollectionWorkspace('1', 'db.coll2', { newTab: true });
-    openFns.openCollectionWorkspace('1', 'db.coll3', { newTab: true });
 
-    expect(screen.getByRole('tab', { name: 'coll3' })).to.have.attribute(
-      'aria-selected',
-      'true'
-    );
+    await waitFor(() => {
+      expect(screen.getByRole('tab', { name: 'db.coll2' })).to.have.attribute(
+        'aria-selected',
+        'true'
+      );
+    });
 
-    userEvent.click(screen.getByRole('tab', { name: 'coll1' }));
+    userEvent.click(screen.getByRole('tab', { name: 'db.coll0' }));
 
     await waitFor(() => {
-      expect(screen.getByRole('tab', { name: /coll3/i })).to.have.attribute(
+      expect(screen.getByRole('tab', { name: 'db.coll2' })).to.have.attribute(
         'aria-selected',
         'false'
       );
-      expect(screen.getByRole('tab', { name: /coll1/i })).to.have.attribute(
+      expect(screen.getByRole('tab', { name: 'db.coll0' })).to.have.attribute(
         'aria-selected',
         'true'
       );
diff --git a/packages/databases-collections/src/collections-plugin.spec.tsx b/packages/databases-collections/src/collections-plugin.spec.tsx
@@ -9,7 +9,7 @@ import {
   userEvent,
 } from '@mongodb-js/testing-library-compass';
 import { expect } from 'chai';
-import { CollectionsPlugin } from './collections-plugin';
+import { CollectionsWorkspaceTab } from './';
 import Sinon from 'sinon';
 import {
   type PreferencesAccess,
@@ -61,13 +61,17 @@ describe('Collections [Plugin]', function () {
 
   describe('with loaded collections', function () {
     beforeEach(async function () {
-      const Plugin = CollectionsPlugin.withMockServices({
+      const Plugin = CollectionsWorkspaceTab.provider.withMockServices({
         instance: mongodbInstance,
         database: mongodbInstance.databases.get('foo'),
         dataService,
       });
 
-      const { globalAppRegistry } = render(<Plugin namespace="foo"></Plugin>);
+      const { globalAppRegistry } = render(
+        <Plugin namespace="foo">
+          <CollectionsWorkspaceTab.content namespace="foo" />
+        </Plugin>
+      );
       appRegistry = Sinon.spy(globalAppRegistry);
 
       await waitFor(() => {
diff --git a/packages/databases-collections/src/databases-plugin.spec.tsx b/packages/databases-collections/src/databases-plugin.spec.tsx
diff --git a/packages/databases-collections/src/stores/databases-store.ts b/packages/databases-collections/src/stores/databases-store.ts
