Fixed background colour issue in the browser tree. Fixes #6890

docs/en_US/release_notes_6_1.rst

@@ -32,6 +32,7 @@ Bug fixes
 | `Issue #6876 <https://redmine.postgresql.org/issues/6876>`_ -  Ensure that the Dashboard should get updated after connecting to the server.
 | `Issue #6881 <https://redmine.postgresql.org/issues/6881>`_ -  Fixed an issue where the browser tree doesn't show all contents on changing resolution.
 | `Issue #6882 <https://redmine.postgresql.org/issues/6882>`_ -  Ensure that columns should be displayed in the order of creation instead of alphabetical order in the browser tree.
+| `Issue #6890 <https://redmine.postgresql.org/issues/6890>`_ -  Fixed background colour issue in the browser tree.
 | `Issue #6891 <https://redmine.postgresql.org/issues/6891>`_ -  Added support for composite foreign keys in the ERD tool.
 | `Issue #6900 <https://redmine.postgresql.org/issues/6900>`_ -  Fixed an issue where exclusion constraint cannot be created from table dialog if the access method name is changed once.
 | `Issue #6905 <https://redmine.postgresql.org/issues/6905>`_ -  Fixed an issue where the users are unable to load the databases behind an HTTP reverse proxy.

web/package.json

@@ -136,7 +136,7 @@
     "path-fx": "^2.0.0",
     "pathfinding": "^0.4.18",
     "paths-js": "^0.4.9",
-    "pgadmin4-tree": "git+https://github.com/EnterpriseDB/pgadmin4-treeview/#ccf3327caaaeaf06e5e683b07330ba2555d79867",
+    "pgadmin4-tree": "git+https://github.com/EnterpriseDB/pgadmin4-treeview/#9e1e5efd6152a08ee1cf087816627d943e3c880e",
     "postcss": "^8.2.15",
     "raf": "^3.4.1",
     "react": "^17.0.1",

web/pgadmin/browser/static/js/node.js

@@ -954,27 +954,30 @@ define('pgadmin.browser.node', [
       change_server_background: function(item, data) {
         if (!item || !data)
           return;
+        const treeH = pgBrowser.tree.getTreeNodeHierarchy(item);
+        const serverData = treeH['server'];
+        if (!serverData) {
+          return;
+        }
+        const index = item.path.indexOf(serverData.id);
 
         // Go further only if node type is a Server
-        if (data._type && data._type == 'server') {
-          var element = $(item).find('span.aciTreeItem').first() || null,
-            // First element will be icon and second will be colour code
-            bgcolor = data.icon.split(' ')[1] || null,
-            fgcolor = data.icon.split(' ')[2] || '';
+        if (index !== -1) {
+          // First element will be icon and second will be colour code
+          var bgcolor = serverData.icon.split(' ')[1] || null,
+            fgcolor = serverData.icon.split(' ')[2] || '';
 
           if (bgcolor) {
-            // li tag for the current branch
-            var first_level_element = (element && element.parents()[3]) || null,
-              dynamic_class = 'pga_server_' + data._id + '_bgcolor',
+            var dynamic_class = 'pga_server_' + serverData._id + '_bgcolor',
               style_tag;
 
             // Prepare dynamic style tag
             style_tag = '<style id=' + dynamic_class + ' type=\'text/css\'> \n';
-            style_tag += '.' + dynamic_class + ' .aciTreeItem {';
+            style_tag += '.' + dynamic_class + ' .file-label {';
             style_tag += ' border-radius: 3px; margin-bottom: 2px;';
-            style_tag += ' background: ' + bgcolor + '} \n';
+            style_tag += ' background: ' + bgcolor + ' !important;} \n';
             if (fgcolor) {
-              style_tag += '.' + dynamic_class + ' .aciTreeText {';
+              style_tag += '.' + dynamic_class + ' span.file-name {';
               style_tag += ' color: ' + fgcolor + ' !important;} \n';
             }
             style_tag += '</style>';
@@ -982,9 +985,8 @@ define('pgadmin.browser.node', [
             // Prepare dynamic style tag using template
             $('#' + dynamic_class).remove();
             $(style_tag).appendTo('head');
-
-            if (first_level_element)
-              $(first_level_element).addClass(dynamic_class);
+            // Add dynamic class to the tree node.
+            pgBrowser.tree.addCssClass(item, dynamic_class);
           }
         }
       },

web/pgadmin/static/js/tree/tree.js

@@ -229,6 +229,10 @@ export class Tree {
     return this.tree.getDOMFromItem(item);
   }
 
+  addCssClass(item, cssClass) {
+    this.tree.addCssClass(item, cssClass);
+  }
+
   path(item) {
     if (item) return item.path;
   }

web/pgadmin/static/scss/_pgadmin4-tree.overrides.scss

@@ -125,7 +125,6 @@
     white-space:normal;
     cursor:pointer !important;
     margin-left: 2px;
-    width: 100%;
     &:hover, &.pseudo-active {
       color: $tree-fg-hover !important;
     }

web/yarn.lock

@@ -7582,9 +7582,9 @@ performance-now@^2.1.0:
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
   integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
 
-"pgadmin4-tree@git+https://github.com/EnterpriseDB/pgadmin4-treeview/#ccf3327caaaeaf06e5e683b07330ba2555d79867":
+"pgadmin4-tree@git+https://github.com/EnterpriseDB/pgadmin4-treeview/#9e1e5efd6152a08ee1cf087816627d943e3c880e":
   version "1.0.0"
-  resolved "git+https://github.com/EnterpriseDB/pgadmin4-treeview/#ccf3327caaaeaf06e5e683b07330ba2555d79867"
+  resolved "git+https://github.com/EnterpriseDB/pgadmin4-treeview/#9e1e5efd6152a08ee1cf087816627d943e3c880e"
   dependencies:
     "@types/classnames" "^2.2.6"
     "@types/react" "^16.7.18"