chore(connections): make sure that getThemeOf method gets updated when colors change (#6162)

Author: gribnoysup

packages/compass-connections/src/hooks/use-tab-connection-theme.spec.ts

@@ -89,4 +89,29 @@ describe('useTabConnectionTheme', function () {
       ).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,
+      {
+        preferences: { enableMultipleConnectionSystem: true },
+        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)
+    );
+  });
 });

packages/compass-connections/src/hooks/use-tab-connection-theme.ts

@@ -1,10 +1,10 @@
 import { type ConnectionInfo } from '@mongodb-js/connection-info';
 import { useConnectionColor } from '@mongodb-js/connection-form';
-import { useConnectionRepository } from './use-connection-repository';
 import { useDarkMode, type TabTheme } from '@mongodb-js/compass-components';
 import { palette } from '@mongodb-js/compass-components';
 import { useCallback } from 'react';
 import { usePreference } from 'compass-preferences-model/provider';
+import { useConnectionsColorList } from '../stores/store-context';
 
 type ThemeProvider = {
   getThemeOf(
@@ -16,20 +16,17 @@ type ThemeProvider = {
 export function useTabConnectionTheme(): ThemeProvider {
   const { connectionColorToHex, connectionColorToHexActive } =
     useConnectionColor();
-  const { getConnectionInfoById } = useConnectionRepository();
+  const connectionColorsList = useConnectionsColorList();
   const darkTheme = useDarkMode();
   const isMultipleConnectionsEnabled = usePreference(
     'enableMultipleConnectionSystem'
   );
 
-  // TODO: this method is not reactive and works only by accident, refactor the
-  // hook to explicitly track changes to color in connections, otherwise the
-  // value of the theme might be stale when we remove `useConnectionRepository`
-  // hook completely
   const getThemeOf = useCallback(
     (connectionId: ConnectionInfo['id']) => {
-      const connectionInfo = getConnectionInfoById(connectionId);
-      const color = connectionInfo?.favorite?.color;
+      const color = connectionColorsList.find((connection) => {
+        return connection.id === connectionId;
+      })?.color;
       const bgColor = connectionColorToHex(color);
       const activeBgColor = connectionColorToHexActive(color);
 
@@ -70,7 +67,7 @@ export function useTabConnectionTheme(): ThemeProvider {
     },
     [
       palette,
-      getConnectionInfoById,
+      connectionColorsList,
       connectionColorToHex,
       connectionColorToHexActive,
       darkTheme,

packages/compass-connections/src/stores/store-context.tsx

@@ -335,3 +335,17 @@ export function useConnectionsState() {
     noopCheck: 'never',
   });
 }
+
+export function useConnectionsColorList(): {
+  id: ConnectionId;
+  color: string | undefined;
+}[] {
+  return useSelector((state) => {
+    return Object.values(state.connections.byId).map((connection) => {
+      return {
+        id: connection.info.id,
+        color: connection.info.favorite?.color,
+      };
+    });
+  }, isEqual);
+}