[pve-devel] [PATCH manager] ui: fix datacenter tags options inputs

[Dominik Csapak]

* dont allow blank for tree shape
* allow completely removing registered tags and user-tag-access properties
* correctly check validity for the listfield
* use correct gettexts
* don't inject empty field in the listfield when setting an empty string

Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
 www/manager6/dc/OptionView.js         |  9 +++++----
 www/manager6/dc/RegisteredTagsEdit.js | 18 +++++++++++-------
 www/manager6/dc/UserTagAccessEdit.js  |  2 +-
 www/manager6/form/ListField.js        |  8 ++++++--
 4 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/www/manager6/dc/OptionView.js b/www/manager6/dc/OptionView.js
index 7f77ea758..5cb5b0b6f 100644
--- a/www/manager6/dc/OptionView.js
+++ b/www/manager6/dc/OptionView.js
@@ -384,6 +384,7 @@ Ext.define('PVE.dc.OptionView', {
 				fieldLabel: gettext('Tree Shape'),
 				valueField: 'value',
 				displayField: 'display',
+				allowBlank: false,
 				listConfig: {
 				    columns: [
 					{
@@ -448,12 +449,12 @@ Ext.define('PVE.dc.OptionView', {
 		    return Ext.String.format(gettext('Mode: {0}'), 'free');
 		}
 		let mode = value?.['user-allow'] ?? 'free';
-		let list = value?.['user-allow-list'].join(',');
-		let modeTxt = Ext.String.format(gettext('Mode {0}'), mode);
+		let list = value?.['user-allow-list']?.join(',') ?? '';
+		let modeTxt = Ext.String.format(gettext('Mode: {0}'), mode);
 		let overrides = PVE.Utils.tagOverrides;
 		let tags = PVE.Utils.renderTags(list, overrides);
-
-		return `${modeTxt}, ${gettext('Pre-defined:')} ${tags}`;
+		let listTxt = tags !== '' ? `, ${gettext('Pre-defiend:')} ${tags}` : '';
+		return `${modeTxt}${listTxt}`;
 	    },
 	    header: gettext('User Tag Access'),
 	    editor: {
diff --git a/www/manager6/dc/RegisteredTagsEdit.js b/www/manager6/dc/RegisteredTagsEdit.js
index 75b4f9ba3..b46326ae8 100644
--- a/www/manager6/dc/RegisteredTagsEdit.js
+++ b/www/manager6/dc/RegisteredTagsEdit.js
@@ -36,25 +36,29 @@ Ext.define('PVE.dc.RegisteredTagsEdit', {
 	    setValues: function(values) {
 		let allowed_tags = values?.['user-tag-access']?.['user-allow-list'] ?? [];
 		this.up('pveRegisteredTagEdit').allowed_tags = allowed_tags;
-
-		let tags = values?.['registered-tags'] ?? '';
+		let tags = values?.['registered-tags'];
 		return Proxmox.panel.InputPanel.prototype.setValues.call(this, { tags });
 	    },
 	    onGetValues: function(values) {
-		return {
-		    'registered-tags': values,
-		};
+		if (!values.tags) {
+		    return {
+			'delete': 'registered-tags',
+		    };
+		} else {
+		    return {
+			'registered-tags': values.tags,
+		    };
+		}
 	    },
 	    items: [
 		{
 		    name: 'tags',
 		    xtype: 'pveListField',
-		    emptyText: gettext('No Tags defined'),
-		    fieldTitle: gettext('Tag'),
 		    maskRe: PVE.Utils.tagCharRegex,
 		    gridConfig: {
 			height: 200,
 			scrollable: true,
+			emptyText: gettext('No Tags defined'),
 		    },
 		    listeners: {
 			change: 'tagChange',
diff --git a/www/manager6/dc/UserTagAccessEdit.js b/www/manager6/dc/UserTagAccessEdit.js
index f22ac9b3d..61c38c074 100644
--- a/www/manager6/dc/UserTagAccessEdit.js
+++ b/www/manager6/dc/UserTagAccessEdit.js
@@ -40,7 +40,7 @@ Ext.define('PVE.dc.UserTagAccessEdit', {
 	    },
 	    onGetValues: function(values) {
 		if (values === undefined || Object.keys(values).length === 0) {
-		    return { 'delete': name };
+		    return { 'delete': 'user-tag-access' };
 		}
 		return {
 		    'user-tag-access': PVE.Parser.printPropertyString(values),
diff --git a/www/manager6/form/ListField.js b/www/manager6/form/ListField.js
index 77e9ebfca..61e37f7e5 100644
--- a/www/manager6/form/ListField.js
+++ b/www/manager6/form/ListField.js
@@ -22,7 +22,8 @@ Ext.define('PVE.form.ListField', {
 
     setValue: function(list) {
 	let me = this;
-	list = Ext.isArray(list) ? list : (list ?? '').split(';');
+	list = Ext.isArray(list) ? list : (list ?? '').split(';').filter(t => t !== '');
+
 	let store = me.lookup('grid').getStore();
 	if (list.length > 0) {
 	    store.setData(list.map(item => ({ item })));
@@ -99,6 +100,7 @@ Ext.define('PVE.form.ListField', {
 
 	    grid.getStore().remove(record);
 	    view.checkChange();
+	    view.validate();
 	},
 
 	itemChange: function(field, newValue) {
@@ -108,7 +110,9 @@ Ext.define('PVE.form.ListField', {
 	    }
 	    let column = field.getWidgetColumn();
 	    rec.set(column.dataIndex, newValue);
-	    field.up('pveListField').checkChange();
+	    let list = field.up('pveListField');
+	    list.checkChange();
+	    list.validate();
 	},
 
 	control: {
-- 
2.30.2