Skip to content

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

Open
mzabuawala wants to merge 1 commit intopgadmin-org:masterfrom
mzabuawala:feat-query-tool-2431
Open

Feat: Added a option to colorize panel/tab header based on server color #2431#9799
mzabuawala wants to merge 1 commit intopgadmin-org:masterfrom
mzabuawala:feat-query-tool-2431

Conversation

@mzabuawala
Copy link
Copy Markdown
Contributor

@mzabuawala mzabuawala commented Mar 29, 2026

Summary by CodeRabbit

  • New Features
    • Added a new browser preference to display server color indicators. When enabled, a colored circle appears in panel tabs (Query Tool, ERD Tool, PSQL, Schema Diff, SQL Editor) reflecting the server's configured background color, helping users quickly identify which server each panel is connected to.

@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Mar 29, 2026

Walkthrough

This PR introduces a new browser preference to control the visibility of server color indicators in tool panel tabs. Implementation changes across tool modules (Query Editor, Debugger, ERD, PSQL, Schema Diff) extract color values from server icons and propagate them through the layout system for conditional rendering.

Changes

Cohort / File(s) Summary
Browser Preference Registration
web/pgadmin/browser/register_browser_preferences.py
Added new boolean preference display.show_server_color_indicator (default False) to control visibility of colored server indicator in panel tabs.
Layout System
web/pgadmin/static/js/helpers/Layout/index.jsx
Enhanced LayoutDocker.getPanel to accept bgcolor and fgcolor parameters; updated TabTitle to read show_server_color_indicator preference and conditionally render a circular color indicator when enabled and tab is not visible.
Tool Modules
web/pgadmin/tools/debugger/static/js/DebuggerModule.js, web/pgadmin/tools/erd/static/js/ERDModule.js, web/pgadmin/tools/psql/static/js/PsqlModule.js, web/pgadmin/tools/schema_diff/static/js/SchemaDiffModule.js, web/pgadmin/tools/sqleditor/static/js/SQLEditorModule.js
Each module now extracts bgcolor and fgcolor from server icon string (by splitting on spaces and taking positions 1 and 2) and passes these values to pgAdmin.Browser.Events.trigger alongside existing panel metadata.

Sequence Diagram

sequenceDiagram
    actor User
    participant Tool as Tool Module<br/>(SQLEditor/Debugger/etc)
    participant Layout as Layout System<br/>(LayoutDocker)
    participant TabTitle as TabTitle<br/>Component
    participant Pref as Preference<br/>System

    User->>Tool: Trigger tool panel
    Tool->>Tool: Extract bgcolor/fgcolor<br/>from server.icon
    Tool->>Layout: trigger('pgadmin:tool:show')<br/>with bgcolor/fgcolor
    Layout->>Layout: getPanel()<br/>store colors in internal
    Layout->>TabTitle: Pass internal colors<br/>to TabTitle props
    TabTitle->>Pref: usePreferences()<br/>read show_server_color_indicator
    Pref-->>TabTitle: preference value
    alt show_server_color_indicator enabled<br/>& bgcolor present & tab hidden
        TabTitle->>TabTitle: Render circular<br/>color indicator
    else
        TabTitle->>TabTitle: Skip indicator
    end
    TabTitle-->>User: Display tab with<br/>optional color indicator
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Suggested reviewers

  • yogeshmahajan-1903
🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately describes the main change: adding an option to colorize panel/tab headers based on server color, which aligns with the preference registration and UI implementation across multiple tool modules.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@mzabuawala mzabuawala force-pushed the feat-query-tool-2431 branch from 4dc48d6 to 7e3e6df Compare March 29, 2026 05:07
@mzabuawala mzabuawala force-pushed the feat-query-tool-2431 branch from 7e3e6df to 102aa02 Compare March 29, 2026 05:07
Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (2)
web/pgadmin/tools/debugger/static/js/DebuggerModule.js (1)

382-389: Refactor duplicated color parsing into a local helper.

The same server.icon split/extract logic appears in both debugger launch paths; a shared helper in this module would reduce maintenance overhead.

Also applies to: 540-547

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@web/pgadmin/tools/debugger/static/js/DebuggerModule.js` around lines 382 -
389, Extract the duplicated server.icon parsing into a small local helper (e.g.,
parseServerIcon(icon)) that accepts newTreeInfo.server.icon, splits it, and
returns {bgcolor, fgcolor} (null when not present); replace the inline logic
that sets bgcolor/fgcolor in both debugger launch paths (the snippet using
newTreeInfo?.server?.icon around where bgcolor and fgcolor are assigned and the
similar block at lines 540-547) to call this helper instead, leaving callers to
destructure or assign the returned values.
web/pgadmin/tools/sqleditor/static/js/SQLEditorModule.js (1)

226-233: Consider centralizing server-color parsing into a shared helper.

icon.split(' ')[1/2] is now repeated across multiple tool modules; extracting a shared utility would reduce drift and simplify future changes.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@web/pgadmin/tools/sqleditor/static/js/SQLEditorModule.js` around lines 226 -
233, The repeated parsing of server icon colors
(selectedNodeInfo.server.icon.split(' ')[1/2]) should be extracted into a shared
helper to avoid duplication: create a utility function (e.g.,
parseServerIconColors(icon) -> {bgcolor, fgcolor}) in a common utilities module
and export it, replace the inline code in SQLEditorModule.js (where
bgcolor/fgcolor are set from selectedNodeInfo.server.icon) with a call to
parseServerIconColors(selectedNodeInfo?.server?.icon) and update other tool
modules to import and use the same helper so all modules derive bgcolor and
fgcolor consistently.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@web/pgadmin/browser/register_browser_preferences.py`:
- Line 106: The preference declaration gettext("Show server color indicator in
panel tabs?"), 'boolean', False exceeds the 79-character line length; fix by
wrapping the tuple across multiple lines or breaking the long string into
concatenated parts so the gettext(...) call or the tuple elements fit within the
79-char limit (e.g., place each tuple element on its own line inside the
surrounding list/tuple using parentheses) while keeping the symbol gettext("Show
server color indicator in panel tabs?"), 'boolean', False intact.

---

Nitpick comments:
In `@web/pgadmin/tools/debugger/static/js/DebuggerModule.js`:
- Around line 382-389: Extract the duplicated server.icon parsing into a small
local helper (e.g., parseServerIcon(icon)) that accepts newTreeInfo.server.icon,
splits it, and returns {bgcolor, fgcolor} (null when not present); replace the
inline logic that sets bgcolor/fgcolor in both debugger launch paths (the
snippet using newTreeInfo?.server?.icon around where bgcolor and fgcolor are
assigned and the similar block at lines 540-547) to call this helper instead,
leaving callers to destructure or assign the returned values.

In `@web/pgadmin/tools/sqleditor/static/js/SQLEditorModule.js`:
- Around line 226-233: The repeated parsing of server icon colors
(selectedNodeInfo.server.icon.split(' ')[1/2]) should be extracted into a shared
helper to avoid duplication: create a utility function (e.g.,
parseServerIconColors(icon) -> {bgcolor, fgcolor}) in a common utilities module
and export it, replace the inline code in SQLEditorModule.js (where
bgcolor/fgcolor are set from selectedNodeInfo.server.icon) with a call to
parseServerIconColors(selectedNodeInfo?.server?.icon) and update other tool
modules to import and use the same helper so all modules derive bgcolor and
fgcolor consistently.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 16c6121d-db9d-447c-9fe6-f6ae8f1935bd

📥 Commits

Reviewing files that changed from the base of the PR and between aa3dc38 and 102aa02.

📒 Files selected for processing (7)
  • web/pgadmin/browser/register_browser_preferences.py
  • web/pgadmin/static/js/helpers/Layout/index.jsx
  • web/pgadmin/tools/debugger/static/js/DebuggerModule.js
  • web/pgadmin/tools/erd/static/js/ERDModule.js
  • web/pgadmin/tools/psql/static/js/PsqlModule.js
  • web/pgadmin/tools/schema_diff/static/js/SchemaDiffModule.js
  • web/pgadmin/tools/sqleditor/static/js/SQLEditorModule.js


self.preference.register(
'display', 'show_server_color_indicator',
gettext("Show server color indicator in panel tabs?"), 'boolean', False,
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Fix pycodestyle E501 on Line 106.

The new preference line exceeds the 79-char limit and is currently failing CI.

✂️ Suggested style-only fix
-        gettext("Show server color indicator in panel tabs?"), 'boolean', False,
+        gettext("Show server color indicator in panel tabs?"),
+        'boolean', False,
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
gettext("Show server color indicator in panel tabs?"), 'boolean', False,
gettext("Show server color indicator in panel tabs?"),
'boolean', False,
🧰 Tools
🪛 GitHub Actions: Check Python style

[error] 106-106: pycodestyle reported E501: line too long (80 > 79 characters).

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@web/pgadmin/browser/register_browser_preferences.py` at line 106, The
preference declaration gettext("Show server color indicator in panel tabs?"),
'boolean', False exceeds the 79-character line length; fix by wrapping the tuple
across multiple lines or breaking the long string into concatenated parts so the
gettext(...) call or the tuple elements fit within the 79-char limit (e.g.,
place each tuple element on its own line inside the surrounding list/tuple using
parentheses) while keeping the symbol gettext("Show server color indicator in
panel tabs?"), 'boolean', False intact.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant