chore(workspaces): move workspace tab theming to provider

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

@@ -4,7 +4,6 @@ import toNS from 'mongodb-ns';
 import {
   useConnectionInfo,
   useConnectionsListRef,
-  useTabConnectionTheme,
 } from '@mongodb-js/compass-connections/provider';
 import {
   WorkspaceTab,
@@ -32,7 +31,6 @@ function _PluginTitle({
   namespace,
   ...tabProps
 }: PluginTitleProps) {
-  const { getThemeOf } = useTabConnectionTheme();
   const { getConnectionById } = useConnectionsListRef();
   const { id: connectionId } = useConnectionInfo();
 
@@ -75,7 +73,6 @@ function _PluginTitle({
           : 'Folder'
       }
       data-namespace={ns}
-      tabTheme={getThemeOf(connectionId)}
       isNonExistent={isNonExistent}
     />
   );

packages/compass-components/src/components/workspace-tabs/tab.tsx

@@ -13,6 +13,7 @@ import { useDefaultAction } from '../../hooks/use-default-action';
 import { LogoIcon } from '../icons/logo-icon';
 import { Tooltip } from '../leafygreen';
 import { ServerIcon } from '../icons/server-icon';
+import { useTabTheme } from './use-tab-theme';
 
 function focusedChild(className: string) {
   return `&:hover ${className}, &:focus-visible ${className}, &:focus-within:not(:focus) ${className}`;
@@ -86,20 +87,6 @@ const tabStyles = css({
   },
 });
 
-export type TabTheme = {
-  '--workspace-tab-background-color': string;
-  '--workspace-tab-selected-background-color': string;
-  '--workspace-tab-top-border-color': string;
-  '--workspace-tab-selected-top-border-color': string;
-  '--workspace-tab-border-color': string;
-  '--workspace-tab-color': string;
-  '--workspace-tab-selected-color': string;
-  '&:focus-visible': {
-    '--workspace-tab-selected-color': string;
-    '--workspace-tab-border-color': string;
-  };
-};
-
 const tabLightThemeStyles = css({
   '--workspace-tab-background-color': palette.gray.light3,
   '--workspace-tab-selected-background-color': palette.white,
@@ -199,7 +186,6 @@ export type WorkspaceTabPluginProps = {
   isNonExistent?: boolean;
   iconGlyph: GlyphName | 'Logo' | 'Server';
   tooltip?: [string, string][];
-  tabTheme?: Partial<TabTheme>;
 };
 
 export type WorkspaceTabCoreProps = {
@@ -224,7 +210,6 @@ function Tab({
   onClose,
   tabContentId,
   iconGlyph,
-  tabTheme,
   className: tabClassName,
   ...props
 }: TabProps & Omit<React.HTMLProps<HTMLDivElement>, 'title'>) {
@@ -233,6 +218,7 @@ function Tab({
   const { listeners, setNodeRef, transform, transition } = useSortable({
     id: tabContentId,
   });
+  const tabTheme = useTabTheme();
 
   const tabProps = mergeProps<HTMLDivElement>(
     defaultActionProps,

packages/compass-components/src/components/workspace-tabs/use-tab-theme.tsx

@@ -0,0 +1,38 @@
+import React, { useContext } from 'react';
+
+export type TabTheme = {
+  '--workspace-tab-background-color': string;
+  '--workspace-tab-selected-background-color': string;
+  '--workspace-tab-top-border-color': string;
+  '--workspace-tab-selected-top-border-color': string;
+  '--workspace-tab-border-color': string;
+  '--workspace-tab-color': string;
+  '--workspace-tab-selected-color': string;
+  '&:focus-visible': {
+    '--workspace-tab-selected-color': string;
+    '--workspace-tab-border-color': string;
+  };
+};
+
+type TabThemeProviderValue = Partial<TabTheme> | undefined;
+
+type TabThemeContextValue = TabThemeProviderValue | null;
+
+const TabThemeContext = React.createContext<TabThemeContextValue>(null);
+
+export const TabThemeProvider: React.FunctionComponent<{
+  children: React.ReactNode;
+  theme: Partial<TabTheme> | undefined | null;
+}> = ({ children, theme }) => {
+  return (
+    <TabThemeContext.Provider value={theme}>
+      {children}
+    </TabThemeContext.Provider>
+  );
+};
+
+export function useTabTheme(): Partial<TabTheme> | undefined | null {
+  const context = useContext(TabThemeContext);
+
+  return context;
+}

packages/compass-components/src/index.ts

@@ -40,9 +40,9 @@ import { Accordion } from './components/accordion';
 import { CollapsibleFieldSet } from './components/collapsible-field-set';
 export {
   Tab as WorkspaceTab,
-  type TabTheme,
   type WorkspaceTabCoreProps,
 } from './components/workspace-tabs/tab';
+export { TabThemeProvider } from './components/workspace-tabs/use-tab-theme';
 import { WorkspaceTabs } from './components/workspace-tabs/workspace-tabs';
 import ResizableSidebar, {
   defaultSidebarWidth,

packages/compass-connections/src/hooks/connection-tab-theme-provider.tsx

@@ -0,0 +1,65 @@
+import React, { useMemo } from 'react';
+import { type ConnectionInfo } from '@mongodb-js/connection-info';
+import { useConnectionColor } from '@mongodb-js/connection-form';
+import {
+  palette,
+  useDarkMode,
+  TabThemeProvider,
+} from '@mongodb-js/compass-components';
+import { useConnectionsColorList } from '../stores/store-context';
+
+export const ConnectionThemeProvider: React.FunctionComponent<{
+  children: React.ReactNode;
+  connectionId?: ConnectionInfo['id'];
+}> = ({ children, connectionId }) => {
+  const { connectionColorToHex, connectionColorToHexActive } =
+    useConnectionColor();
+  const connectionColorsList = useConnectionsColorList();
+  const darkMode = useDarkMode();
+
+  const theme = useMemo(() => {
+    const color = connectionColorsList.find((connection) => {
+      return connection.id === connectionId;
+    })?.color;
+    const bgColor = connectionColorToHex(color);
+    const activeBgColor = connectionColorToHexActive(color);
+
+    if (!color || !bgColor || !activeBgColor) {
+      return;
+    }
+
+    return {
+      '--workspace-tab-background-color': bgColor,
+      '--workspace-tab-top-border-color': bgColor,
+      '--workspace-tab-border-color': darkMode
+        ? palette.gray.dark2
+        : palette.gray.light2,
+      '--workspace-tab-color': darkMode
+        ? palette.gray.base
+        : palette.gray.dark1,
+      '--workspace-tab-selected-background-color': darkMode
+        ? palette.black
+        : palette.white,
+      '--workspace-tab-selected-top-border-color': activeBgColor,
+      '--workspace-tab-selected-color': darkMode
+        ? palette.white
+        : palette.gray.dark3,
+      '&:focus-visible': {
+        '--workspace-tab-border-color': darkMode
+          ? palette.blue.light1
+          : palette.blue.base,
+        '--workspace-tab-selected-color': darkMode
+          ? palette.blue.light1
+          : palette.blue.base,
+      },
+    };
+  }, [
+    connectionId,
+    connectionColorsList,
+    connectionColorToHex,
+    connectionColorToHexActive,
+    darkMode,
+  ]);
+
+  return <TabThemeProvider theme={theme}>{children}</TabThemeProvider>;
+};

packages/compass-connections/src/provider.ts

@@ -51,7 +51,7 @@ export {
   connectionInfoRefLocator,
 } from './connection-info-provider';
 
-export { useTabConnectionTheme } from './hooks/use-tab-connection-theme';
+export { ConnectionThemeProvider } from './hooks/connection-tab-theme-provider';
 
 export {
   useConnectionActions,

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

@@ -2,7 +2,6 @@ import React from 'react';
 import {
   useConnectionInfo,
   useConnectionsListRef,
-  useTabConnectionTheme,
 } from '@mongodb-js/compass-connections/provider';
 import {
   WorkspaceTab,
@@ -22,8 +21,6 @@ export function ServerStatsPluginTitleComponent(
   const { id: connectionId } = useConnectionInfo();
   const connectionName = getConnectionById(connectionId)?.title || '';
 
-  const { getThemeOf } = useTabConnectionTheme();
-
   return (
     <WorkspaceTab
       {...props}
@@ -32,7 +29,6 @@ export function ServerStatsPluginTitleComponent(
       title={`Performance: ${connectionName}`}
       tooltip={[['Performance', connectionName || '']]}
       iconGlyph="Gauge"
-      tabTheme={getThemeOf(connectionId)}
     />
   );
 }

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

@@ -2,7 +2,6 @@ import React from 'react';
 import {
   useConnectionInfo,
   useConnectionsListRef,
-  useTabConnectionTheme,
 } from '@mongodb-js/compass-connections/provider';
 import {
   WorkspaceTab,
@@ -16,7 +15,6 @@ type PluginTitleProps = WorkspaceTabCoreProps &
   WorkspacePluginProps<typeof WorkspaceName>;
 
 export function ShellPluginTitleComponent(tabProps: PluginTitleProps) {
-  const { getThemeOf } = useTabConnectionTheme();
   const { getConnectionById } = useConnectionsListRef();
   const { id: connectionId } = useConnectionInfo();
 
@@ -29,7 +27,6 @@ export function ShellPluginTitleComponent(tabProps: PluginTitleProps) {
       title={connectionName ? `mongosh: ${connectionName}` : 'MongoDB Shell'}
       tooltip={connectionName ? [['mongosh', connectionName]] : []}
       iconGlyph="Shell"
-      tabTheme={getThemeOf(connectionId)}
     />
   );
 }

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

@@ -2,7 +2,10 @@ import React, { useCallback, useEffect, useRef } from 'react';
 import { getLocalAppRegistryForTab } from '../stores/workspaces';
 import type { WorkspaceTab } from '../types';
 import { NamespaceProvider } from '@mongodb-js/compass-app-stores/provider';
-import { ConnectionInfoProvider } from '@mongodb-js/compass-connections/provider';
+import {
+  ConnectionInfoProvider,
+  ConnectionThemeProvider,
+} from '@mongodb-js/compass-connections/provider';
 import { rafraf } from '@mongodb-js/compass-components';
 import { useOnTabReplace } from './workspace-close-handler';
 import {
@@ -149,7 +152,11 @@ const WorkspaceTabContextProvider: React.FunctionComponent<
         localAppRegistry={getLocalAppRegistryForTab(tab.id)}
         deactivateOnUnmount={false}
       >
-        {children}
+        <ConnectionThemeProvider
+          connectionId={'connectionId' in tab ? tab.connectionId : undefined}
+        >
+          {children}
+        </ConnectionThemeProvider>
       </AppRegistryProvider>
     </WorkspaceTabStateProvider>
   );

packages/databases-collections/src/collections-plugin-title.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import {
   useConnectionInfo,
   useConnectionsListRef,
-  useTabConnectionTheme,
 } from '@mongodb-js/compass-connections/provider';
 import {
   WorkspaceTab,
@@ -18,7 +17,6 @@ type PluginTitleProps = WorkspaceTabCoreProps &
 export function CollectionsPluginTitleComponent(props: PluginTitleProps) {
   const { id: connectionId } = useConnectionInfo();
   const { getConnectionById } = useConnectionsListRef();
-  const { getThemeOf } = useTabConnectionTheme();
 
   const connectionName = getConnectionById(connectionId)?.title || '';
   const database = props.namespace;
@@ -35,7 +33,6 @@ export function CollectionsPluginTitleComponent(props: PluginTitleProps) {
       ]}
       iconGlyph={props.isNonExistent ? 'EmptyDatabase' : 'Database'}
       data-namespace={props.namespace}
-      tabTheme={getThemeOf(connectionId)}
       isNonExistent={props.isNonExistent}
     />
   );

packages/databases-collections/src/databases-plugin-title.tsx

@@ -6,7 +6,6 @@ import {
 import {
   useConnectionInfo,
   useConnectionsListRef,
-  useTabConnectionTheme,
 } from '@mongodb-js/compass-connections/provider';
 import type { WorkspacePluginProps } from '@mongodb-js/compass-workspaces';
 
@@ -18,7 +17,6 @@ type PluginTitleProps = WorkspaceTabCoreProps &
 export function DatabasesPluginTitleComponent(props: PluginTitleProps) {
   const { id: connectionId } = useConnectionInfo();
   const { getConnectionById } = useConnectionsListRef();
-  const { getThemeOf } = useTabConnectionTheme();
 
   const connectionName = getConnectionById(connectionId)?.title || '';
   return (
@@ -29,7 +27,6 @@ export function DatabasesPluginTitleComponent(props: PluginTitleProps) {
       title={connectionName}
       tooltip={[['Connection', connectionName || '']]}
       iconGlyph="Server"
-      tabTheme={getThemeOf(connectionId)}
     />
   );
 }