[PATCH pve-manager v5 20/21] ui: cpu flags selector: add search bar for large lists of flags

[Arthur Bied-Charreton <a.bied-charreton@proxmox.com>]

Add a search bar for the CPU flags list queried from
/cluster/qemu/cpu-flags, which is very long.

Do not display it for VM-specific flags (~15 flags), as they are
easier to scan through, and it would overload the ProcessorEdit window.

Signed-off-by: Arthur Bied-Charreton <a.bied-charreton@proxmox.com>
---
 www/manager6/form/VMCPUFlagSelector.js | 48 ++++++++++++++++++++++++--
 1 file changed, 45 insertions(+), 3 deletions(-)

diff --git a/www/manager6/form/VMCPUFlagSelector.js b/www/manager6/form/VMCPUFlagSelector.js
index f7a56b5a..574d44e0 100644
--- a/www/manager6/form/VMCPUFlagSelector.js
+++ b/www/manager6/form/VMCPUFlagSelector.js
@@ -62,7 +62,11 @@ Ext.define('PVE.form.VMCPUFlagSelector', {
 
         let flags = '';
 
-        store.getData().each(function (rec) {
+        // Get the values directly from the data source. Using store.getData() here
+        // would iterate over the filtered values, potentially overwriting flags that
+        // are set but currently filtered out by the search bar.
+        let source = store.getDataSource();
+        source.each(function (rec) {
             let s = rec.get('state');
             if (s && s !== '=') {
                 let f = rec.get('name');
@@ -277,7 +281,45 @@ Ext.define('PVE.form.VMCPUFlagSelector', {
 
         me.value = me.originalValue = '';
 
-        me.dockedItems = [{
+        me.dockedItems = [];
+
+        if (!me.restrictToVMFlags) {
+            me.dockedItems.push({
+                xtype: 'toolbar',
+                dock: 'top',
+                items: {
+                    xtype: 'textfield',
+                    emptyText: gettext('Search'),
+                    submitValue: false,
+                    listeners: {
+                        change: {
+                            buffer: 100,
+                            fn: function (field, value) {
+                                let store = field.up('grid').getStore();
+                                if (value) {
+                                    let lv = value.toLowerCase();
+                                    store.addFilter({
+                                        id: 'search-filter',
+                                        filterFn: (rec) => {
+                                            let name = rec.get('name') || '';
+                                            let desc = rec.get('description') || '';
+                                            return (
+                                                name.toLowerCase().includes(lv) ||
+                                                desc.toLowerCase().includes(lv)
+                                            );
+                                        },
+                                    });
+                                } else {
+                                    store.removeFilter('search-filter');
+                                }
+                            },
+                        },
+                    },
+                },
+            });
+        }
+
+        me.dockedItems.push({
             xtype: 'toolbar',
             dock: 'bottom',
             padding: '0 5',
@@ -304,7 +346,7 @@ Ext.define('PVE.form.VMCPUFlagSelector', {
                     },
                 },
             ],
-        }];
+        });
 
         me.callParent(arguments);
 
-- 
2.47.3