From 2565fdd075c84fcec4148219e4e22ae4d43246f2 Mon Sep 17 00:00:00 2001
From: Dominik Csapak <d.csapak@proxmox.com>
Date: Tue, 27 Oct 2020 16:20:10 +0100
Subject: [PATCH] ui: MainView/NavigationTree: improve tree selection handling

this fixes some bugs related to selection handling in the treelist:
* datastores were not selected after a reload
* reloading when in a tabpanel on any tab but the first, would
  not select a treenode
* changing between datastores on any tab but the first would
  not select the same tab on the new datastore

fixed those by mostly rewriting the changePath handling for
datastores and tabpanels in general

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 www/MainView.js       | 70 ++++++++++++++++++++++---------------------
 www/NavigationTree.js | 22 ++++++++++++--
 2 files changed, 55 insertions(+), 37 deletions(-)

diff --git a/www/MainView.js b/www/MainView.js
index cfd19058..7998e535 100644
--- a/www/MainView.js
+++ b/www/MainView.js
@@ -67,46 +67,48 @@ Ext.define('PBS.MainView', {
 	    var contentpanel = me.lookupReference('contentpanel');
 	    var lastpanel = contentpanel.getLayout().getActiveItem();
 
+	    let tabChangeListener = function(tp, newc, oldc) {
+		let newpath = path;
+
+		// only add the subpath part for the
+		// non-default tabs
+		if (tp.items.findIndex('id', newc.id) !== 0) {
+		    newpath += `:${newc.getItemId()}`;
+		}
+
+		me.redirectTo(newpath);
+	    };
+
+	    let xtype = path;
 	    var obj;
+	    let datastore;
 	    if (PBS.Utils.isDataStorePath(path)) {
-		let datastore = PBS.Utils.getDataStoreFromPath(path);
-		obj = contentpanel.add({
-		    xtype: 'pbsDataStorePanel',
-		    nodename: 'localhost',
-		    datastore,
-		});
-	    } else {
-		obj = contentpanel.add({
-		    xtype: path,
-		    nodename: 'localhost',
-		    border: false,
-		});
+		datastore = PBS.Utils.getDataStoreFromPath(path);
+		if (lastpanel && lastpanel.xtype === 'pbsDataStorePanel' && !subpath) {
+		    let activeTab = lastpanel.getActiveTab();
+		    let newpath = path;
+		    if (lastpanel.items.indexOf(activeTab) !== 0) {
+			subpath = activeTab.getItemId();
+			newpath += `:${subpath}`;
+		    }
+		    me.redirectTo(newpath);
+		}
+		xtype = 'pbsDataStorePanel';
 	    }
+	    obj = contentpanel.add({
+		xtype,
+		datastore,
+		nodename: 'localhost',
+		border: false,
+		activeTab: subpath || 0,
+		listeners: {
+		    tabchange: tabChangeListener,
+		},
+	    });
 
 	    var treelist = me.lookupReference('navtree');
 
-	    treelist.suspendEvents();
-	    if (subpath === undefined) {
-		treelist.select(path);
-	    } else {
-		treelist.select(path + ':' + subpath);
-	    }
-	    treelist.resumeEvents();
-
-	    if (Ext.isFunction(obj.setActiveTab)) {
-		obj.setActiveTab(subpath || 0);
-		obj.addListener('tabchange', function(tabpanel, newc, oldc) {
-		    var newpath = path;
-
-		    // only add the subpath part for the
-		    // non-default tabs
-		    if (tabpanel.items.findIndex('id', newc.id) !== 0) {
-			newpath += ":" + newc.getItemId();
-		    }
-
-		    me.redirectTo(newpath);
-		});
-	    }
+	    treelist.select(path, true);
 
 	    contentpanel.setActiveItem(obj);
 
diff --git a/www/NavigationTree.js b/www/NavigationTree.js
index 54e0adeb..6524a5c3 100644
--- a/www/NavigationTree.js
+++ b/www/NavigationTree.js
@@ -163,6 +163,12 @@ Ext.define('PBS.view.main.NavigationTree', {
 	    });
 
 	    Ext.Array.forEach(erase_list, function(node) { list.removeChild(node, true); });
+
+	    if (view.pathToSelect !== undefined) {
+		let path = view.pathToSelect;
+		delete view.pathToSelect;
+		view.select(path, true);
+	    }
 	},
     },
 
@@ -186,10 +192,20 @@ Ext.define('PBS.view.main.NavigationTree', {
 	},
     },
 
-    select: function(path) {
+    select: function(path, silent) {
 	var me = this;
-	var item = me.getStore().findRecord('path', path, 0, false, true, true);
-	me.setSelection(item);
+	if (me.rstore.isLoaded()) {
+	    if (silent) {
+		me.suspendEvents(false);
+	    }
+	    var item = me.getStore().findRecord('path', path, 0, false, true, true);
+	    me.setSelection(item);
+	    if (silent) {
+		me.resumeEvents(true);
+	    }
+	} else {
+	    me.pathToSelect = path;
+	}
     },
 
     animation: false,