Fix issue with server groups not getting reordered on label update:

- set RECREATE operation for server group updates
- call remove -> create => and update tree methods on the updated server group node to force resort on server group siblings

Author: KijongHan

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

@@ -783,8 +783,20 @@ define('pgadmin.browser', [
           ) {
             let _parent = this.t.parent(this.i) || null;
 
+            // if the node is a server group
+            if (_item_parent.path === '/browser') {
+              let that = this;
+              // first remove the node from the tree
+              this.t.remove(this.i).then(() => {
+                // then add in the updated node with updated item data
+                this.t.tree.create(_parent, that.new).then((new_item) => {
+                  // then we need to call update so that item.metadata is populated
+                  this.t.update(new_item, that.new);
+                });
+              });
+            }
             // If there is no parent then just update the node
-            if(this.t.isRootNode(_parent) ||
+            else if(this.t.isRootNode(_parent) ||
              (_parent && _parent.length == 0 && ctx.op == 'UPDATE')) {
               //Update node if browser has single child node.
               if(this.t.children().length === 1) {
@@ -1189,6 +1201,10 @@ define('pgadmin.browser', [
       ) {
         ctx.op = 'RECREATE';
         traversePath();
+      // call RECREATE operation for server_groups so that the hierarchy is reordered on server group name update
+      } else if (_old._type == 'server_group' && _new._type == 'server_group') {
+        ctx.op = 'RECREATE';
+        traversePath();
       } else {
         ctx.op = 'UPDATE';
         traversePath();

web/pgadmin/static/js/components/PgTree/FileTreeX/index.tsx

@@ -294,9 +294,6 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
   private readonly update = async (item, itemData): Promise<void> => {
     item._metadata.data = itemData;
     await this.props.update(item.path, itemData);
-    await this.changeResolvePath(item);
-    await this.remove(item);
-    await this.create(item.parent, itemData);
     this.events.dispatch(FileTreeXEvent.onTreeEvents, window.event, 'updated', item);
   };
 

web/pgadmin/static/js/components/PgTree/types.ts

@@ -81,6 +81,7 @@ export interface IFileTreeXProps {
      * Amalgam of unix's `mkdir` and `touch` command
      */
     create: (path: string, type: FileType) => IFileEntryItem | Promise<IFileEntryItem>
+    update: (path: string, data: {}) => IFileEntryItem | Promise<boolean>
     onReady?: (handle: IFileTreeXHandle) => void
     onEvent?: (event: IFileTreeXTriggerEvents) => void
     onContextMenu?: (ev: React.MouseEvent, item?: FileOrDir) => void