Feat: Added a option to colorize panel/tab header based on server color #2431

mzabuawala · mzabuawala · commit 3cfa44bcfdb3 · 2026-03-31T23:19:40.000+05:30
diff --git a/web/pgadmin/browser/register_browser_preferences.py b/web/pgadmin/browser/register_browser_preferences.py
@@ -101,6 +101,17 @@ def register_browser_preferences(self):
         )
     )
 
+    self.preference.register(
+        'display', 'show_server_color_indicator',
+        gettext("Show server color indicator in panel tabs?"), 'boolean', False,
+        category_label=PREF_LABEL_DISPLAY,
+        help_str=gettext(
+            'If enabled, a colored circle indicator will be shown in panel '
+            'tabs (Query Tool, ERD Tool, etc.) matching the server\'s custom '
+            'background color.'
+        )
+    )
+
     self.table_row_count_threshold = self.preference.register(
         'properties', 'table_row_count_threshold',
         gettext("Count rows if estimated less than"), 'integer', 2000,
diff --git a/web/pgadmin/browser/static/js/node.js b/web/pgadmin/browser/static/js/node.js
@@ -708,9 +708,8 @@ define('pgadmin.browser.node', [
 
         // Go further only if node type is a Server
         if (index !== -1) {
-          // First element will be icon and second will be colour code
-          let bgcolor = serverData.icon.split(' ')[1] || null,
-            fgcolor = serverData.icon.split(' ')[2] || '';
+          // Extract bgcolor and fgcolor from server icon
+          const { bgcolor, fgcolor } = commonUtils.getServerColors(serverData.icon);
 
           if (bgcolor) {
             let dynamic_class = 'pga_server_' + serverData._id + '_bgcolor';
diff --git a/web/pgadmin/static/js/helpers/Layout/index.jsx b/web/pgadmin/static/js/helpers/Layout/index.jsx
@@ -28,14 +28,21 @@ import UtilityView from '../../UtilityView';
 import ToolView, { getToolTabParams } from '../../ToolView';
 import { ApplicationStateProvider, useApplicationState } from '../../../../settings/static/ApplicationStateProvider';
 import { BROWSER_PANELS, WORKSPACES } from '../../../../browser/static/js/constants';
+import { getServerColors } from '../../utils';
+import pgWindow from 'sources/window';
 
 export function TabTitle({id, closable, defaultInternal}) {
   const layoutDocker = React.useContext(LayoutDockerContext);
   const internal = layoutDocker?.find(id)?.internal ?? defaultInternal;
+  const showServerColorIndicator = usePreferences(
+    (state) => state.getPreferencesForModule('browser')?.show_server_color_indicator ?? false
+  );
   const [attrs, setAttrs] = useState({
     icon: internal.icon,
     title: internal.title,
     tooltip: internal.tooltip ?? internal.title,
+    bgcolor: internal.bgcolor,
+    fgcolor: internal.fgcolor,
   });
   const onContextMenu = useCallback((e)=>{
     const g = layoutDocker.find(id)?.group??'';
@@ -53,17 +60,62 @@ export function TabTitle({id, closable, defaultInternal}) {
           icon: internal.icon,
           title: internal.title,
           tooltip: internal.tooltip ?? internal.title,
+          bgcolor: internal.bgcolor,
+          fgcolor: internal.fgcolor,
         });
         layoutDocker.saveLayout();
       }
     });
 
-    return ()=>deregister?.();
+    // Listen for server property updates to refresh colors
+    // When a server's bgcolor/fgcolor is changed, this event is triggered
+    // and we update the tab colors accordingly
+    const serverUpdatedHandler = (_item, newNodeData) => {
+      if (newNodeData._type === 'server') {
+        const panelData = layoutDocker?.find(id);
+        if (panelData?.internal) {
+          const serverId = panelData.internal.server_id;
+          if (serverId && serverId === newNodeData._id) {
+            const { bgcolor, fgcolor } = getServerColors(newNodeData.icon);
+            // Update internal data and attrs
+            panelData.internal.bgcolor = bgcolor;
+            panelData.internal.fgcolor = fgcolor;
+            setAttrs(prev => ({
+              ...prev,
+              bgcolor: bgcolor,
+              fgcolor: fgcolor,
+            }));
+          }
+        }
+      }
+    };
+
+    pgWindow.pgAdmin?.Browser?.Events?.on('pgadmin:browser:node:updated', serverUpdatedHandler);
+
+    return ()=>{
+      deregister?.();
+      pgWindow.pgAdmin?.Browser?.Events?.off('pgadmin:browser:node:updated', serverUpdatedHandler);
+    };
   }, []);
 
   return (
     <Box display="flex" alignItems="center" title={attrs.tooltip} onContextMenu={onContextMenu} width="100%">
       {attrs.icon && <span className={`dock-tab-icon ${attrs.icon}`}></span>}
+      {showServerColorIndicator && attrs.bgcolor && !layoutDocker.isTabVisible(id) && (
+        <Box
+          component="span"
+          sx={{
+            width: '12px',
+            height: '12px',
+            borderRadius: '50%',
+            backgroundColor: attrs.bgcolor,
+            marginLeft: '2px',
+            marginRight: '4px',
+            flexShrink: 0,
+            border: '1px solid rgba(0, 0, 0, 0.1)',
+          }}
+        />
+      )}
       <span style={{textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap'}} data-visible={layoutDocker.isTabVisible(id)}>{attrs.title}</span>
       {closable && <PgIconButton title={gettext('Close')} icon={<CloseIcon style={{height: '0.7em'}} />} size="xs" noBorder onClick={()=>{
         layoutDocker.close(id);
@@ -368,14 +420,16 @@ export class LayoutDocker {
     this.saveLayout();
   }
 
-  static getPanel({icon, title, closable, tooltip, renamable, manualClose, ...attrs}) {
+  static getPanel({icon, title, closable, tooltip, renamable, manualClose, bgcolor, fgcolor, ...attrs}) {
     const internal = {
       icon: icon,
       title: title,
       tooltip: tooltip,
       closable: _.isUndefined(closable) ? manualClose : closable,
       renamable: renamable,
       manualClose: manualClose,
+      bgcolor: bgcolor,
+      fgcolor: fgcolor,
     };
     return {
       cached: true,
diff --git a/web/pgadmin/static/js/utils.js b/web/pgadmin/static/js/utils.js
@@ -233,6 +233,27 @@ export function getRandomInt(min, max) {
   return min + (intArray[0] % range);
 }
 
+/*
+ * Extracts the background and foreground colors from a server icon string.
+ *
+ * This is a workaround for a historical design decision where the backend encodes
+ * structured data (icon CSS class, bgcolor, fgcolor) into a single space-separated
+ * string via `server_icon_and_background()`.
+ * The format is: "icon-class bgcolor fgcolor"
+ * Ref: web/pgadmin/browser/server_groups/servers/__init__.py:server_icon_and_background()
+ */
+export function getServerColors(serverIcon) {
+  if (!serverIcon) {
+    return { bgcolor: null, fgcolor: null };
+  }
+
+  const parts = serverIcon.split(' ');
+  return {
+    bgcolor: parts[1] || null,
+    fgcolor: parts[2] || null,
+  };
+}
+
 export function titleize(i_str) {
   if(i_str === '' || i_str === null) return i_str;
   return i_str.split(' ')
diff --git a/web/pgadmin/tools/debugger/static/js/DebuggerModule.js b/web/pgadmin/tools/debugger/static/js/DebuggerModule.js
@@ -11,7 +11,7 @@ import _ from 'lodash';
 import ReactDOM from 'react-dom/client';
 
 import gettext from 'sources/gettext';
-import { sprintf } from 'sources/utils';
+import { sprintf, getServerColors } from 'sources/utils';
 import url_for from 'sources/url_for';
 import pgWindow from 'sources/window';
 import Kerberos from 'pgadmin.authenticate.kerberos';
@@ -378,13 +378,17 @@ export default class DebuggerModule {
             let open_new_tab = browser_preferences.new_browser_tab_open;
             const db_label = self.checkDbNameChange(data, dbNode, newTreeInfo);
             let label = getAppropriateLabel(newTreeInfo);
+
+            // Extract bgcolor and fgcolor from server icon
+            const { bgcolor, fgcolor } = getServerColors(newTreeInfo?.server?.icon);
+
             pgAdmin.Browser.Events.trigger(
               'pgadmin:tool:show',
               `${BROWSER_PANELS.DEBUGGER_TOOL}_${trans_id}`,
               url,
               null,
               {title: getDebuggerTitle(browser_preferences, label, newTreeInfo.schema.label, db_label, null, self.pgBrowser),
-                icon: 'fa fa-bug', manualClose: false, renamable: true},
+                icon: 'fa fa-bug', manualClose: false, renamable: true, bgcolor: bgcolor, fgcolor: fgcolor, server_id: newTreeInfo?.server?._id},
               Boolean(open_new_tab?.includes('debugger'))
             );
           })
@@ -527,13 +531,16 @@ export default class DebuggerModule {
 
         let label = getAppropriateLabel(treeInfo);
 
+        // Extract bgcolor and fgcolor from server icon
+        const { bgcolor, fgcolor } = getServerColors(treeInfo?.server?.icon);
+
         pgAdmin.Browser.Events.trigger(
           'pgadmin:tool:show',
           `${BROWSER_PANELS.DEBUGGER_TOOL}_${res.data.data.debuggerTransId}`,
           url,
           null,
           {title: getDebuggerTitle(browser_preferences, label, db_label, db_label, null, self.pgBrowser),
-            icon: 'fa fa-bug', manualClose: false, renamable: true},
+            icon: 'fa fa-bug', manualClose: false, renamable: true, bgcolor: bgcolor, fgcolor: fgcolor, server_id: treeInfo?.server?._id},
           Boolean(open_new_tab?.includes('debugger'))
         );
       })
diff --git a/web/pgadmin/tools/erd/static/js/ERDModule.js b/web/pgadmin/tools/erd/static/js/ERDModule.js
@@ -8,7 +8,7 @@
 //////////////////////////////////////////////////////////////
 import pgWindow from 'sources/window';
 import {getPanelTitle} from 'tools/sqleditor/static/js/sqleditor_title';
-import {getRandomInt} from 'sources/utils';
+import {getRandomInt, getServerColors} from 'sources/utils';
 import url_for from 'sources/url_for';
 import gettext from 'sources/gettext';
 import ReactDOM from 'react-dom/client';
@@ -142,12 +142,15 @@ export default class ERDModule {
     const panelUrl = this.getPanelUrl(transId, parentData, gen);
     const open_new_tab = usePreferences.getState().getPreferencesForModule('browser').new_browser_tab_open;
 
+    // Extract bgcolor and fgcolor from server icon
+    const { bgcolor, fgcolor } = getServerColors(parentData?.server?.icon);
+
     pgAdmin.Browser.Events.trigger(
       'pgadmin:tool:show',
       `${BROWSER_PANELS.ERD_TOOL}_${transId}`,
       panelUrl,
       {sql_id: toolDataId, connectionTitle: _.escape(panelTitle), db_name:parentData.database.label, server_name: parentData.server.label, user: parentData.server.user.name, server_type: parentData.server.server_type},
-      {title: 'Untitled', icon: 'fa fa-sitemap'},
+      {title: 'Untitled', icon: 'fa fa-sitemap', bgcolor: bgcolor, fgcolor: fgcolor, server_id: parentData?.server?._id},
       Boolean(open_new_tab?.includes('erd_tool'))
     );
 
diff --git a/web/pgadmin/tools/psql/static/js/PsqlModule.js b/web/pgadmin/tools/psql/static/js/PsqlModule.js
@@ -7,7 +7,7 @@
 //
 //////////////////////////////////////////////////////////////
 
-import { getRandomInt, hasBinariesConfiguration } from 'sources/utils';
+import { getRandomInt, hasBinariesConfiguration, getServerColors } from 'sources/utils';
 import { retrieveAncestorOfTypeServer } from 'sources/tree/tree_utils';
 import { generateTitle } from 'tools/sqleditor/static/js/sqleditor_title';
 import { AllPermissionTypes, BROWSER_PANELS, WORKSPACES } from '../../../../browser/static/js/constants';
@@ -173,12 +173,15 @@ export default class Psql {
 
     const open_new_tab = usePreferences.getState().getPreferencesForModule('browser').new_browser_tab_open;
 
+    // Extract bgcolor and fgcolor from server icon
+    const { bgcolor, fgcolor } = getServerColors(parentData?.server?.icon);
+
     pgAdmin.Browser.Events.trigger(
       'pgadmin:tool:show',
       `${BROWSER_PANELS.PSQL_TOOL}_${transId}`,
       panelUrl,
       {title: panelTitle, db: db_label, server_name: parentData.server.label, 'user': parentData.server.user.name },
-      {title: panelTitle, icon: 'pg-font-icon icon-terminal', manualClose: false, renamable: true},
+      {title: panelTitle, icon: 'pg-font-icon icon-terminal', manualClose: false, renamable: true, bgcolor: bgcolor, fgcolor: fgcolor, server_id: parentData?.server?._id},
       Boolean(open_new_tab?.includes('psql_tool'))
     );
 
diff --git a/web/pgadmin/tools/schema_diff/static/js/SchemaDiffModule.js b/web/pgadmin/tools/schema_diff/static/js/SchemaDiffModule.js
@@ -75,12 +75,23 @@ export default class SchemaDiff {
     let browserPreferences = usePreferences.getState().getPreferencesForModule('browser');
     let openInNewTab = browserPreferences.new_browser_tab_open;
 
+    // Extract bgcolor and fgcolor from server icon
+    let bgcolor = null;
+    let fgcolor = null;
+    let serverId = null;
+    const selectedItem = pgAdmin.Browser.tree?.selected();
+    if (selectedItem) {
+      const selectedNodeInfo = pgAdmin.Browser.tree?.getTreeNodeHierarchy(selectedItem);
+      ({ bgcolor, fgcolor } = commonUtils.getServerColors(selectedNodeInfo?.server?.icon));
+      serverId = selectedNodeInfo?.server?._id;
+    }
+
     pgAdmin.Browser.Events.trigger(
       'pgadmin:tool:show',
       `${BROWSER_PANELS.SCHEMA_DIFF_TOOL}_${trans_id}`,
       baseUrl,
       {...params},
-      {title: panelTitle, icon: 'pg-font-icon icon-compare', manualClose: false, renamable: true},
+      {title: panelTitle, icon: 'pg-font-icon icon-compare', manualClose: false, renamable: true, bgcolor: bgcolor, fgcolor: fgcolor, server_id: serverId},
       Boolean(openInNewTab?.includes('schema_diff'))
     );
     return true;
diff --git a/web/pgadmin/tools/sqleditor/static/js/SQLEditorModule.js b/web/pgadmin/tools/sqleditor/static/js/SQLEditorModule.js
@@ -28,6 +28,7 @@ import usePreferences, { listenPreferenceBroadcast } from '../../../../preferenc
 import { PgAdminProvider } from '../../../../static/js/PgAdminProvider';
 import { ApplicationStateProvider } from '../../../../settings/static/ApplicationStateProvider';
 import ToolErrorView from '../../../../static/js/ToolErrorView';
+import { getServerColors } from '../../../../static/js/utils';
 
 export default class SQLEditor {
   static instance;
@@ -223,12 +224,15 @@ export default class SQLEditor {
     const [icon, tooltip] = panelTitleFunc.getQueryToolIcon(panel_title, is_query_tool);
     let selectedNodeInfo = pgAdmin.Browser.tree?.selected() ? pgAdmin.Browser.tree?.getTreeNodeHierarchy(pgAdmin.Browser.tree.selected()) : null;
 
+    // Extract bgcolor and fgcolor from server icon
+    const { bgcolor, fgcolor } = getServerColors(selectedNodeInfo?.server?.icon);
+
     pgAdmin.Browser.Events.trigger(
       'pgadmin:tool:show',
       `${BROWSER_PANELS.QUERY_TOOL}_${trans_id}`,
       panel_url,
       {...params, title: panel_title, selectedNodeInfo: JSON.stringify(selectedNodeInfo)},
-      {title: panel_title, icon: icon, tooltip: tooltip, renamable: true},
+      {title: panel_title, icon: icon, tooltip: tooltip, renamable: true, bgcolor: bgcolor, fgcolor: fgcolor, server_id: selectedNodeInfo?.server?._id},
       Boolean(open_new_tab?.includes('qt'))
     );
     return true;
