From 2d23ce2b27edc39fe9c3629982f61e205ca95c3f Mon Sep 17 00:00:00 2001 From: Rhys Howell Date: Tue, 17 Jun 2025 16:23:44 -0400 Subject: [PATCH 1/3] chore(workspaces): move workspace tab theming to provider --- .../src/plugin-tab-title.tsx | 3 - .../src/components/workspace-container.tsx | 2 +- .../src/components/workspace-tabs/tab.tsx | 18 +---- .../workspace-tabs/use-tab-theme.tsx | 38 ++++++++++ packages/compass-components/src/index.ts | 2 +- .../hooks/connection-tab-theme-provider.tsx | 65 +++++++++++++++++ .../src/hooks/use-tab-connection-theme.ts | 71 ------------------- packages/compass-connections/src/provider.ts | 2 +- .../src/plugin-tab-title.tsx | 4 -- .../compass-shell/src/plugin-tab-title.tsx | 3 - .../workspace-tab-context-provider.tsx | 11 ++- .../src/collections-plugin-title.tsx | 3 - .../src/databases-plugin-title.tsx | 3 - 13 files changed, 117 insertions(+), 108 deletions(-) create mode 100644 packages/compass-components/src/components/workspace-tabs/use-tab-theme.tsx create mode 100644 packages/compass-connections/src/hooks/connection-tab-theme-provider.tsx delete mode 100644 packages/compass-connections/src/hooks/use-tab-connection-theme.ts diff --git a/packages/compass-collection/src/plugin-tab-title.tsx b/packages/compass-collection/src/plugin-tab-title.tsx index c0e29b8efcd..c09db81ade2 100644 --- a/packages/compass-collection/src/plugin-tab-title.tsx +++ b/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} /> ); diff --git a/packages/compass-components/src/components/workspace-container.tsx b/packages/compass-components/src/components/workspace-container.tsx index 06e16747154..5bd5650927a 100644 --- a/packages/compass-components/src/components/workspace-container.tsx +++ b/packages/compass-components/src/components/workspace-container.tsx @@ -120,7 +120,7 @@ function WorkspaceContainer({ children: | React.ReactNode | (( - scrollTriggerRef: (node?: Element | null | undefined) => void + scrollTriggerRef: (node?: Element | null) => void ) => React.ReactNode); }) { const darkMode = useDarkMode(); diff --git a/packages/compass-components/src/components/workspace-tabs/tab.tsx b/packages/compass-components/src/components/workspace-tabs/tab.tsx index 227eee98332..ac12feafc8b 100644 --- a/packages/compass-components/src/components/workspace-tabs/tab.tsx +++ b/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; }; export type WorkspaceTabCoreProps = { @@ -224,7 +210,6 @@ function Tab({ onClose, tabContentId, iconGlyph, - tabTheme, className: tabClassName, ...props }: TabProps & Omit, 'title'>) { @@ -233,6 +218,7 @@ function Tab({ const { listeners, setNodeRef, transform, transition } = useSortable({ id: tabContentId, }); + const tabTheme = useTabTheme(); const tabProps = mergeProps( defaultActionProps, diff --git a/packages/compass-components/src/components/workspace-tabs/use-tab-theme.tsx b/packages/compass-components/src/components/workspace-tabs/use-tab-theme.tsx new file mode 100644 index 00000000000..f9ce68e1c0f --- /dev/null +++ b/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 | undefined; + +type TabThemeContextValue = TabThemeProviderValue | null; + +const TabThemeContext = React.createContext(null); + +export const TabThemeProvider: React.FunctionComponent<{ + children: React.ReactNode; + theme: Partial | undefined | null; +}> = ({ children, theme }) => { + return ( + + {children} + + ); +}; + +export function useTabTheme(): Partial | undefined | null { + const context = useContext(TabThemeContext); + + return context; +} diff --git a/packages/compass-components/src/index.ts b/packages/compass-components/src/index.ts index 5f208e4fdc0..253ef6c387a 100644 --- a/packages/compass-components/src/index.ts +++ b/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, diff --git a/packages/compass-connections/src/hooks/connection-tab-theme-provider.tsx b/packages/compass-connections/src/hooks/connection-tab-theme-provider.tsx new file mode 100644 index 00000000000..3d6f322dd0f --- /dev/null +++ b/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 {children}; +}; diff --git a/packages/compass-connections/src/hooks/use-tab-connection-theme.ts b/packages/compass-connections/src/hooks/use-tab-connection-theme.ts deleted file mode 100644 index 8a26cf71bfb..00000000000 --- a/packages/compass-connections/src/hooks/use-tab-connection-theme.ts +++ /dev/null @@ -1,71 +0,0 @@ -import { type ConnectionInfo } from '@mongodb-js/connection-info'; -import { useConnectionColor } from '@mongodb-js/connection-form'; -import { useDarkMode, type TabTheme } from '@mongodb-js/compass-components'; -import { palette } from '@mongodb-js/compass-components'; -import { useCallback } from 'react'; -import { useConnectionsColorList } from '../stores/store-context'; - -type ThemeProvider = { - getThemeOf( - this: void, - connectionId: ConnectionInfo['id'] - ): Partial | undefined; -}; - -export function useTabConnectionTheme(): ThemeProvider { - const { connectionColorToHex, connectionColorToHexActive } = - useConnectionColor(); - const connectionColorsList = useConnectionsColorList(); - const darkTheme = useDarkMode(); - - const getThemeOf = useCallback( - (connectionId: ConnectionInfo['id']) => { - 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': darkTheme - ? palette.gray.dark2 - : palette.gray.light2, - '--workspace-tab-color': darkTheme - ? palette.gray.base - : palette.gray.dark1, - '--workspace-tab-selected-background-color': darkTheme - ? palette.black - : palette.white, - '--workspace-tab-selected-top-border-color': activeBgColor, - '--workspace-tab-selected-color': darkTheme - ? palette.white - : palette.gray.dark3, - '&:focus-visible': { - '--workspace-tab-border-color': darkTheme - ? palette.blue.light1 - : palette.blue.base, - '--workspace-tab-selected-color': darkTheme - ? palette.blue.light1 - : palette.blue.base, - }, - }; - }, - [ - palette, - connectionColorsList, - connectionColorToHex, - connectionColorToHexActive, - darkTheme, - ] - ); - - return { - getThemeOf, - }; -} diff --git a/packages/compass-connections/src/provider.ts b/packages/compass-connections/src/provider.ts index e01a522615a..8ea7aa9741c 100644 --- a/packages/compass-connections/src/provider.ts +++ b/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, diff --git a/packages/compass-serverstats/src/plugin-tab-title.tsx b/packages/compass-serverstats/src/plugin-tab-title.tsx index 9c0742b94a9..a47c7c0a7cd 100644 --- a/packages/compass-serverstats/src/plugin-tab-title.tsx +++ b/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 ( ); } diff --git a/packages/compass-shell/src/plugin-tab-title.tsx b/packages/compass-shell/src/plugin-tab-title.tsx index 4d18ddf7194..46833fe80ee 100644 --- a/packages/compass-shell/src/plugin-tab-title.tsx +++ b/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; 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)} /> ); } diff --git a/packages/compass-workspaces/src/components/workspace-tab-context-provider.tsx b/packages/compass-workspaces/src/components/workspace-tab-context-provider.tsx index 587e4822b2b..61406c8388e 100644 --- a/packages/compass-workspaces/src/components/workspace-tab-context-provider.tsx +++ b/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} + + {children} + ); diff --git a/packages/databases-collections/src/collections-plugin-title.tsx b/packages/databases-collections/src/collections-plugin-title.tsx index 4b4bdb6f854..b538dcb9293 100644 --- a/packages/databases-collections/src/collections-plugin-title.tsx +++ b/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} /> ); diff --git a/packages/databases-collections/src/databases-plugin-title.tsx b/packages/databases-collections/src/databases-plugin-title.tsx index 062faa7049c..9c0c7ec5baf 100644 --- a/packages/databases-collections/src/databases-plugin-title.tsx +++ b/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)} /> ); } From 19005a3b20e8934c42b13a62641d077facfad7d5 Mon Sep 17 00:00:00 2001 From: Rhys Howell Date: Tue, 17 Jun 2025 16:24:59 -0400 Subject: [PATCH 2/3] fixup: remove unrelated change --- .../compass-components/src/components/workspace-container.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/compass-components/src/components/workspace-container.tsx b/packages/compass-components/src/components/workspace-container.tsx index 5bd5650927a..06e16747154 100644 --- a/packages/compass-components/src/components/workspace-container.tsx +++ b/packages/compass-components/src/components/workspace-container.tsx @@ -120,7 +120,7 @@ function WorkspaceContainer({ children: | React.ReactNode | (( - scrollTriggerRef: (node?: Element | null) => void + scrollTriggerRef: (node?: Element | null | undefined) => void ) => React.ReactNode); }) { const darkMode = useDarkMode(); From eae2ceb63898f40ae0fd1dba9969e349f3563ca7 Mon Sep 17 00:00:00 2001 From: Rhys Howell Date: Wed, 18 Jun 2025 14:05:36 -0400 Subject: [PATCH 3/3] fixup: unit test --- packages/compass-components/src/index.ts | 5 +- .../connection-tab-theme-provider.spec.tsx | 198 ++++++++++++++++++ .../hooks/use-tab-connection-theme.spec.ts | 111 ---------- 3 files changed, 202 insertions(+), 112 deletions(-) create mode 100644 packages/compass-connections/src/hooks/connection-tab-theme-provider.spec.tsx delete mode 100644 packages/compass-connections/src/hooks/use-tab-connection-theme.spec.ts diff --git a/packages/compass-components/src/index.ts b/packages/compass-components/src/index.ts index 253ef6c387a..56f02757634 100644 --- a/packages/compass-components/src/index.ts +++ b/packages/compass-components/src/index.ts @@ -42,7 +42,10 @@ export { Tab as WorkspaceTab, type WorkspaceTabCoreProps, } from './components/workspace-tabs/tab'; -export { TabThemeProvider } from './components/workspace-tabs/use-tab-theme'; +export { + TabThemeProvider, + useTabTheme, +} from './components/workspace-tabs/use-tab-theme'; import { WorkspaceTabs } from './components/workspace-tabs/workspace-tabs'; import ResizableSidebar, { defaultSidebarWidth, diff --git a/packages/compass-connections/src/hooks/connection-tab-theme-provider.spec.tsx b/packages/compass-connections/src/hooks/connection-tab-theme-provider.spec.tsx new file mode 100644 index 00000000000..8d6c0dae807 --- /dev/null +++ b/packages/compass-connections/src/hooks/connection-tab-theme-provider.spec.tsx @@ -0,0 +1,198 @@ +import React from 'react'; +import { expect } from 'chai'; +import { useTabTheme } from '@mongodb-js/compass-components/src/components/workspace-tabs/use-tab-theme'; +import { render } from '@mongodb-js/testing-library-compass'; +import { ConnectionThemeProvider } from './connection-tab-theme-provider'; + +const CONNECTION_INFO = { + id: '1234', + connectionOptions: { + connectionString: 'mongodb://localhost:27017', + }, + favorite: { + color: 'color3', + name: 'my kingdom for a hook', + }, +}; + +const CONNECTION_INFO_NO_COLOR = { + id: '1234', + connectionOptions: { + connectionString: 'mongodb://localhost:27017', + }, + favorite: { + name: 'look what is done cannot be now amended', + }, +}; + +describe('ConnectionThemeProvider', function () { + describe('when a connection does not exist', function () { + it('should not provide a theme to useTabTheme', function () { + let capturedTheme: ReturnType = undefined; + + const TestComponent = () => { + capturedTheme = useTabTheme(); + return null; + }; + + render( + + + , + { + connections: [CONNECTION_INFO], + } + ); + + expect(capturedTheme).to.equal(undefined); + }); + }); + + describe('when a connection exists with a valid color', function () { + it('should provide the correct theme to useTabTheme', function () { + let capturedTheme: ReturnType = undefined; + + const TestComponent = () => { + capturedTheme = useTabTheme(); + return null; + }; + + render( + + + , + { + connections: [CONNECTION_INFO], + } + ); + + expect(capturedTheme).to.have.property( + '--workspace-tab-background-color', + '#D5EFFF' + ); + expect(capturedTheme).to.have.property( + '--workspace-tab-top-border-color', + '#D5EFFF' + ); + expect(capturedTheme).to.have.property( + '--workspace-tab-selected-top-border-color', + '#C2E5FF' + ); + expect(capturedTheme).to.have.deep.property('&:focus-visible'); + }); + }); + + describe('when a connection exists without a color', function () { + it('should not provide a theme to useTabTheme', function () { + let capturedTheme: ReturnType = undefined; + + const TestComponent = () => { + capturedTheme = useTabTheme(); + return null; + }; + + render( + + + , + { + connections: [CONNECTION_INFO_NO_COLOR], + } + ); + + expect(capturedTheme).to.equal(undefined); + }); + }); + + describe('when a connection exists with an invalid color', function () { + it('should not provide a theme to useTabTheme', function () { + let capturedTheme: ReturnType = undefined; + const INVALID_COLOR_CONNECTION = { + id: '5678', + connectionOptions: { + connectionString: 'mongodb://localhost:27017', + }, + favorite: { + color: 'notavalidcolor', + name: 'invalid color connection', + }, + }; + + const TestComponent = () => { + capturedTheme = useTabTheme(); + return null; + }; + + render( + + + , + { + connections: [INVALID_COLOR_CONNECTION], + } + ); + + expect(capturedTheme).to.equal(undefined); + }); + }); + + describe('when a connection color is updated', function () { + it('should update the theme provided to useTabTheme', async function () { + let capturedTheme: ReturnType = undefined; + const connection = { + id: 'changeable-color', + connectionOptions: { + connectionString: 'mongodb://localhost:27017', + }, + favorite: { + color: 'color3', // Initial color + name: 'changing colors', + }, + }; + + const TestComponent = () => { + capturedTheme = useTabTheme(); + return
Theme consumer
; + }; + + const { rerender, connectionsStore } = render( + + + , + { + connections: [connection], + } + ); + + // Initial theme should have color3 values + expect(capturedTheme).to.not.equal(null); + expect(capturedTheme).to.have.property( + '--workspace-tab-background-color', + '#D5EFFF' + ); + + // Update the connection color + await connectionsStore.actions.saveEditedConnection({ + ...connection, + favorite: { + ...connection.favorite, + color: 'color1', // Change to color1 + }, + }); + + // Re-render to pick up the new color + rerender( + + + + ); + + // Theme should have been updated with color1 values + expect(capturedTheme).to.not.equal(null); + // color1 should have a different background color than color3 + expect(capturedTheme) + .to.have.property('--workspace-tab-background-color') + .that.does.not.equal('#D5EFFF'); + }); + }); +}); diff --git a/packages/compass-connections/src/hooks/use-tab-connection-theme.spec.ts b/packages/compass-connections/src/hooks/use-tab-connection-theme.spec.ts deleted file mode 100644 index d5ea984f035..00000000000 --- a/packages/compass-connections/src/hooks/use-tab-connection-theme.spec.ts +++ /dev/null @@ -1,111 +0,0 @@ -import { expect } from 'chai'; -import { useTabConnectionTheme } from '../provider'; -import { renderHookWithConnections } from '@mongodb-js/testing-library-compass'; - -const CONNECTION_INFO = { - id: '1234', - connectionOptions: { - connectionString: 'mongodb://localhost:27017', - }, - favorite: { - color: 'color3', - name: 'my kingdom for a hook', - }, -}; - -const CONNECTION_INFO_NO_COLOR = { - id: '1234', - connectionOptions: { - connectionString: 'mongodb://localhost:27017', - }, - favorite: { - name: 'look what is done cannot be now amended', - }, -}; - -const CONNECTION_INFO_INVALID_COLOR = { - id: '1234', - connectionOptions: { - connectionString: 'mongodb://localhost:27017', - }, - favorite: { - color: 'notacolorlol', - name: 'what do I fear? myself?', - }, -}; - -describe('useTabConnectionTheme', function () { - describe('when a connection does not exist', function () { - it('should not return a theme', function () { - const { result } = renderHookWithConnections(useTabConnectionTheme); - - expect(result.current.getThemeOf('NON_EXISTING')).to.be.undefined; - }); - }); - - describe('when a connection exists', function () { - it('should return the theme with the connection colors', function () { - const { result } = renderHookWithConnections(useTabConnectionTheme, { - connections: [CONNECTION_INFO], - }); - - expect(result.current.getThemeOf(CONNECTION_INFO.id)).to.deep.equal({ - '&:focus-visible': { - '--workspace-tab-border-color': '#016BF8', - '--workspace-tab-selected-color': '#016BF8', - }, - '--workspace-tab-background-color': '#D5EFFF', - '--workspace-tab-border-color': '#E8EDEB', - '--workspace-tab-color': '#5C6C75', - '--workspace-tab-selected-background-color': '#FFFFFF', - '--workspace-tab-selected-color': '#1C2D38', - '--workspace-tab-selected-top-border-color': '#C2E5FF', - '--workspace-tab-top-border-color': '#D5EFFF', - }); - }); - - it('should not return a theme when there is no color', function () { - const { result } = renderHookWithConnections(useTabConnectionTheme, { - connections: [CONNECTION_INFO_NO_COLOR], - }); - - expect(result.current.getThemeOf(CONNECTION_INFO_NO_COLOR.id)).to.equal( - undefined - ); - }); - - it('should not return a theme when the color is invalid', function () { - const { result } = renderHookWithConnections(useTabConnectionTheme, { - connections: [CONNECTION_INFO_INVALID_COLOR], - }); - - expect( - result.current.getThemeOf(CONNECTION_INFO_INVALID_COLOR.id) - ).to.equal(undefined); - }); - }); - - it('tracks updates of connection color state and returns a new method when they are changed', async function () { - const { result, connectionsStore } = renderHookWithConnections( - useTabConnectionTheme, - { - connections: [CONNECTION_INFO], - } - ); - - const getThemeOf = result.current.getThemeOf; - - await connectionsStore.actions.saveEditedConnection({ - ...CONNECTION_INFO, - favorite: { - ...CONNECTION_INFO.favorite, - color: 'color1', - }, - }); - - expect(result.current.getThemeOf).to.not.eq(getThemeOf); - expect(result.current.getThemeOf(CONNECTION_INFO.id)).to.not.eq( - getThemeOf(CONNECTION_INFO.id) - ); - }); -});