From 92881adb406edb5766b298c242e08efdda9d2f3a Mon Sep 17 00:00:00 2001
From: Monviech <79600909+Monviech@users.noreply.github.com>
Date: Thu, 27 Mar 2025 11:23:35 +0100
Subject: [PATCH] firewall/filter: Use fetch_options from opnsense_ui.js to
 build interface_select selectpicker (#8493)

* firewall/filter: Use fetch_options from opnsense_ui.js to build interface_select selectpicker

* Update src/opnsense/mvc/app/controllers/OPNsense/Firewall/Api/FilterController.php

Co-authored-by: Franco Fichtner <franco@opnsense.org>

---------

Co-authored-by: Franco Fichtner <franco@opnsense.org>
---
 .../Firewall/Api/FilterController.php         |  3 +-
 .../views/OPNsense/Firewall/filter_rule.volt  | 32 +------------------
 src/opnsense/www/js/opnsense_ui.js            |  3 +-
 3 files changed, 5 insertions(+), 33 deletions(-)

diff --git a/src/opnsense/mvc/app/controllers/OPNsense/Firewall/Api/FilterController.php b/src/opnsense/mvc/app/controllers/OPNsense/Firewall/Api/FilterController.php
index 2e7c52061..a9bc102f1 100644
--- a/src/opnsense/mvc/app/controllers/OPNsense/Firewall/Api/FilterController.php
+++ b/src/opnsense/mvc/app/controllers/OPNsense/Firewall/Api/FilterController.php
@@ -342,7 +342,8 @@ class FilterController extends FilterBaseController
                 'items' => [
                     [
                         'value' => '',
-                        'label' => gettext('Any')
+                        'label' => gettext('Any'),
+                        'selected' => true,
                     ]
                 ]
             ],
diff --git a/src/opnsense/mvc/app/views/OPNsense/Firewall/filter_rule.volt b/src/opnsense/mvc/app/views/OPNsense/Firewall/filter_rule.volt
index 8a7eca58d..6b2c2f5d6 100644
--- a/src/opnsense/mvc/app/views/OPNsense/Firewall/filter_rule.volt
+++ b/src/opnsense/mvc/app/views/OPNsense/Firewall/filter_rule.volt
@@ -500,38 +500,8 @@
         });
 
         // Populate interface selectpicker
+        $('#interface_select').fetch_options('/api/firewall/filter/get_interface_list');
         $("#interface_select_container").show();
-        ajaxCall('/api/firewall/filter/get_interface_list', {},
-            function(data, status) {
-                const $select = $('#interface_select');
-                $select.empty();
-                for (const [groupkey, group] of Object.entries(data)) {
-                    if (group.items.length > 0) {
-                        let $optgroup = $('<optgroup>', {
-                                "label": `${group.label}`,
-                                "data-icon": `${group.icon}`
-                        });
-                        group.items.forEach(function(iface) {
-                            let optprops = {
-                                value: iface.value,
-                                'data-subtext': group.label,
-                                text: iface.label
-                            };
-                            if (iface.value === '') {
-                                /* floating selected by default */
-                                optprops['selected'] = 'selected';
-                            }
-                            $optgroup.append($('<option>', optprops));
-                        });
-                        $select.append($optgroup);
-                    }
-                }
-                $select.selectpicker('refresh');
-            },
-            function(xhr, textStatus, errorThrown) {
-                console.error("Failed to load interface list:", textStatus, errorThrown);
-            }
-        );
 
         // move selectpickers into action bar
         $("#interface_select_container").detach().insertBefore('#{{formGridFilterRule["table_id"]}}-header > .row > .actionBar > .search');
diff --git a/src/opnsense/www/js/opnsense_ui.js b/src/opnsense/www/js/opnsense_ui.js
index b2d64b597..07d1d36ec 100644
--- a/src/opnsense/www/js/opnsense_ui.js
+++ b/src/opnsense/www/js/opnsense_ui.js
@@ -672,7 +672,8 @@ $.fn.fetch_options = function(url, params, data_callback, store_data) {
                             $('<option>', {
                                 value: item.value,
                                 text: item.label,
-                                'data-subtext': group.label
+                                'data-subtext': group.label,
+                                selected: item.selected ? 'selected' : undefined
                             })
                         );
                     }