ui: acl: add improved permission selector

taken mostly from PVE, with adaption to how PBS does things.
Main difference is that we do not have a resource store singleton
here which we can use, but for datastores we can already use the
always present datastore-list store. Register it to the store manager
with a "storeId" property (vs. our internal storeid one).

Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>

www/Makefile

@@ -9,6 +9,7 @@ JSSRC=							\
 	form/RemoteSelector.js				\
 	form/DataStoreSelector.js			\
 	form/CalendarEvent.js				\
+	form/PermissionPathSelector.js			\
 	data/RunningTasksStore.js			\
 	button/TaskButton.js				\
 	config/UserView.js				\

www/NavigationTree.js

@@ -102,6 +102,7 @@ Ext.define('PBS.view.main.NavigationTree', {
 	    view.rstore = Ext.create('Proxmox.data.UpdateStore', {
 		autoStart: true,
 		interval: 15 * 1000,
+		storeId: 'pbs-datastore-list',
 		storeid: 'pbs-datastore-list',
 		model: 'pbs-datastore-list'
 	    });

www/form/PermissionPathSelector.js

@@ -0,0 +1,73 @@
+Ext.define('PBS.data.PermissionPathsStore', {
+    extend: 'Ext.data.Store',
+    alias: 'store.pbsPermissionPaths',
+    fields: ['value'],
+    autoLoad: false,
+    data: [
+	{ 'value': '/' },
+	{ 'value': '/access' },
+	{ 'value': '/access/acl' },
+	{ 'value': '/access/users' },
+	{ 'value': '/datastore' },
+	{ 'value': '/remote' },
+	{ 'value': '/system' },
+	{ 'value': '/system/disks' },
+	{ 'value': '/system/log' },
+	{ 'value': '/system/network' },
+	{ 'value': '/system/network/dns' },
+	{ 'value': '/system/network/interfaces' },
+	{ 'value': '/system/services' },
+	{ 'value': '/system/status' },
+	{ 'value': '/system/tasks' },
+	{ 'value': '/system/time' },
+    ],
+
+    constructor: function(config) {
+	let me = this;
+
+	config = config || {};
+	me.callParent([config]);
+
+	// TODO: this is but a HACK until we have some sort of resource
+	// storage like PVE
+	let datastores = Ext.data.StoreManager.lookup('pbs-datastore-list');
+
+	if (datastores) {
+	    let donePaths = {};
+	    me.suspendEvents();
+	    datastores.each(function(record) {
+		let path = `/datastore/${record.data.store}`;
+		if (path !== undefined && !donePaths[path]) {
+		    me.add({ value: path });
+		    donePaths[path] = 1;
+		}
+	    });
+	    me.resumeEvents();
+
+	    me.fireEvent('refresh', me);
+	    me.fireEvent('datachanged', me);
+	}
+
+	me.sort({
+	    property: 'value',
+	    direction: 'ASC',
+	});
+    },
+});
+
+Ext.define('PBS.form.PermissionPathSelector', {
+    extend: 'Ext.form.field.ComboBox',
+    xtype: 'pbsPermissionPathSelector',
+
+    valueField: 'value',
+    displayField: 'value',
+    typeAhead: true,
+    anyMatch: true,
+    queryMode: 'local',
+
+    store: {
+	type: 'pbsPermissionPaths',
+    },
+    regexText: gettext('Invalid permission path.'),
+    regex: /\/((access|datastore|remote|system)\/.*)?/,
+});

www/window/ACLEdit.js

@@ -7,6 +7,7 @@ Ext.define('PBS.window.ACLEdit', {
     method: 'PUT',
     isAdd: true,
     isCreate: true,
+    width: 450,
 
     // caller can give a static path
     path: undefined,
@@ -25,7 +26,7 @@ Ext.define('PBS.window.ACLEdit', {
 
     items: [
 	{
-	    xtype: 'pmxDisplayEditField',
+	    xtype: 'pbsPermissionPathSelector',
 	    fieldLabel: gettext('Path'),
 	    cbind: {
 		editable: '{!path}',