[PATCH pve-manager v3] fix #6348: ui: bulk action: use options tag style

[PATCH pve-manager v3] fix #6348: ui: bulk action: use options tag style

[Erik Fastermann]

Use the tag style configured in the options for the bulk action table or
the default if set to none. This improves visual consistency and makes
tagged resources easier to identify at a glance.

Signed-off-by: Erik Fastermann <e.fastermann@proxmox.com>
---

  changes since v2:
  * use the default tag style if none is configured 

 www/manager6/UIOptions.js       | 16 ++++++++++++----
 www/manager6/dc/OptionView.js   |  4 ++--
 www/manager6/form/VMSelector.js |  2 ++
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/www/manager6/UIOptions.js b/www/manager6/UIOptions.js
index 99b999b7..8c4674af 100644
--- a/www/manager6/UIOptions.js
+++ b/www/manager6/UIOptions.js
@@ -60,12 +60,20 @@ Ext.define('PVE.UIOptions', {
         let overrides = style?.['color-map'];
         PVE.UIOptions.updateTagOverrides(PVE.UIOptions.parseTagOverrides(overrides ?? ''));
 
+        Ext.ComponentQuery.query('pveResourceTree')[0].setUserCls(
+            PVE.UIOptions.tagStyleClass(style),
+        );
+        Ext.ComponentQuery.query('vmselector').forEach((component) => {
+            component.setUserCls(PVE.UIOptions.tagStyleClass(style, true));
+        });
+    },
+
+    tagStyleClass: function (style, replaceNone = false) {
         let shape = style?.shape ?? 'circle';
-        if (shape === '__default__') {
-            style = 'circle';
+        if (shape === '__default__' || (shape === 'none' && replaceNone)) {
+            shape = 'circle';
         }
-
-        Ext.ComponentQuery.query('pveResourceTree')[0].setUserCls(`proxmox-tags-${shape}`);
+        return `proxmox-tags-${shape}`;
     },
 
     tagTreeStyles: {
diff --git a/www/manager6/dc/OptionView.js b/www/manager6/dc/OptionView.js
index da9d216b..dc12aa7e 100644
--- a/www/manager6/dc/OptionView.js
+++ b/www/manager6/dc/OptionView.js
@@ -393,7 +393,7 @@ Ext.define('PVE.dc.OptionView', {
                 let colors = PVE.UIOptions.parseTagOverrides(value?.['color-map']);
                 let shape = value.shape;
                 let shapeText = PVE.UIOptions.tagTreeStyles[shape ?? '__default__'];
-                let txt = Ext.String.format(gettext('Tree Shape: {0}'), shapeText);
+                let txt = Ext.String.format(gettext('Shape: {0}'), shapeText);
                 let orderText = PVE.UIOptions.tagOrderOptions[value.ordering ?? '__default__'];
                 txt += `, ${Ext.String.format(gettext('Ordering: {0}'), orderText)}`;
                 if (value['case-sensitive']) {
@@ -457,7 +457,7 @@ Ext.define('PVE.dc.OptionView', {
                             {
                                 name: 'shape',
                                 xtype: 'proxmoxComboGrid',
-                                fieldLabel: gettext('Tree Shape'),
+                                fieldLabel: gettext('Shape'),
                                 valueField: 'value',
                                 displayField: 'display',
                                 allowBlank: false,
diff --git a/www/manager6/form/VMSelector.js b/www/manager6/form/VMSelector.js
index 57aa73a7..a9e90b04 100644
--- a/www/manager6/form/VMSelector.js
+++ b/www/manager6/form/VMSelector.js
@@ -267,6 +267,8 @@ Ext.define('PVE.form.VMSelector', {
                 me.getSelectionModel().selectAll(false);
             });
         }
+
+        me.userCls = PVE.UIOptions.tagStyleClass(PVE.UIOptions.options['tag-style'], true);
     },
 });
 
-- 
2.47.3