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

[Dominik Csapak <d.csapak@proxmox.com>]

looks fine code wise, but one thing that is not good IMO is that
if I select 'None' for the shape, the tags won't be shown too
here.

I'd say that in the bulk action grids we always want to show them
in the tags column, so we should exclude the 'None' style from there.

Maybe adding a filter or option to tagStyleClass could do that.

On 5/15/26 2:08 PM, Erik Fastermann wrote:
> Use the tag style configured in the options for the bulk action table.
> 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 v1:
>   * use the tag style configured in the options menu
> 
>   www/manager6/UIOptions.js       | 14 +++++++++++---
>   www/manager6/dc/OptionView.js   |  4 ++--
>   www/manager6/form/VMSelector.js |  2 ++
>   3 files changed, 15 insertions(+), 5 deletions(-)
> 
> diff --git a/www/manager6/UIOptions.js b/www/manager6/UIOptions.js
> index 99b999b7..7f9583c2 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 ?? ''));
>   
> +        const tagStyle = PVE.UIOptions.tagStyleClass(style);
> +
> +        Ext.ComponentQuery.query('pveResourceTree')[0].setUserCls(tagStyle);
> +        Ext.ComponentQuery.query('vmselector').forEach(component => {
> +            component.setUserCls(tagStyle);
> +        });
> +    },
> +
> +    tagStyleClass: function (style) {
>           let shape = style?.shape ?? 'circle';
>           if (shape === '__default__') {
> -            style = 'circle';
> +            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 7c8d3792..a19ba136 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..f45c4db1 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']);
>       },
>   });
>