[PATCH pve-manager v4 27/27] ui: firewall: groups: add controls for dangling references

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

Add the reference action selector the ipset and alias dialogs have for
security groups as well.

The edit dialog has it in its advanced section, preselected to 'rename'.
The remove button becomes a FirewallObjectRemove, preselected to
'delete'. Both dialogs wait on the task the API returns.

Signed-off-by: Arthur Bied-Charreton <a.bied-charreton@proxmox.com>
---
 www/manager6/Utils.js             |  2 +
 www/manager6/dc/SecurityGroups.js | 81 +++++++++++++++++++++++++++++--
 2 files changed, 79 insertions(+), 4 deletions(-)

diff --git a/www/manager6/Utils.js b/www/manager6/Utils.js
index 9ec3951a..fcfb5f95 100644
--- a/www/manager6/Utils.js
+++ b/www/manager6/Utils.js
@@ -2196,6 +2196,8 @@ Ext.define('PVE.Utils', {
             download: [gettext('File'), gettext('Download')],
             'fw-alias-delete': [gettext('Firewall Alias'), gettext('Delete')],
             'fw-alias-rename': [gettext('Firewall Alias'), gettext('Rename')],
+            'fw-group-delete': [gettext('Firewall Security Group'), gettext('Delete')],
+            'fw-group-rename': [gettext('Firewall Security Group'), gettext('Rename')],
             'fw-ipset-delete': [gettext('Firewall IPSet'), gettext('Delete')],
             'fw-ipset-rename': [gettext('Firewall IPSet'), gettext('Rename')],
             hamigrate: ['HA', gettext('Migrate')],
diff --git a/www/manager6/dc/SecurityGroups.js b/www/manager6/dc/SecurityGroups.js
index a1454003..43a154ff 100644
--- a/www/manager6/dc/SecurityGroups.js
+++ b/www/manager6/dc/SecurityGroups.js
@@ -12,6 +12,10 @@ Ext.define('PVE.SecurityGroupEdit', {
 
     allow_iface: false,
 
+    showProgress: true,
+
+    onlineHelp: 'pve_firewall_dangling_references',
+
     initComponent: function () {
         var me = this;
 
@@ -49,10 +53,43 @@ Ext.define('PVE.SecurityGroupEdit', {
             });
         }
 
+        let advancedItems = [];
+        if (!me.isCreate) {
+            advancedItems.push({
+                xtype: 'pveFirewallReferenceAction',
+                preferredValue: 'rename',
+                referenceActions: [
+                    {
+                        text: gettext('Keep'),
+                        value: 'keep',
+                        description: gettext('Do not touch firewall rules referencing this security group.'),
+                    },
+                    {
+                        text: gettext('Disable'),
+                        value: 'disable',
+                        description: gettext('Disable firewall rules referencing this security group.'),
+                    },
+                    {
+                        text: gettext('Delete'),
+                        value: 'drop',
+                        description: gettext('Delete firewall rules referencing this security group.'),
+                    },
+                    {
+                        text: gettext('Rename'),
+                        value: 'rename',
+                        description: gettext(
+                            'Rewrite referencing firewall rules to point to the new security group name.',
+                        ),
+                    },
+                ],
+            });
+        }
+
         var ipanel = Ext.create('Proxmox.panel.InputPanel', {
             // InputPanel does not have a 'create' property, does it need a 'isCreate'
             isCreate: me.isCreate,
             items: items,
+            advancedItems: advancedItems.length ? advancedItems : undefined,
         });
 
         Ext.apply(me, {
@@ -148,11 +185,47 @@ Ext.define('PVE.SecurityGroupList', {
             },
         });
 
-        me.removeBtn = Ext.create('Proxmox.button.StdRemoveButton', {
+        me.removeBtn = new Proxmox.button.Button({
+            text: gettext('Remove'),
+            disabled: true,
+            dangerous: true,
             selModel: sm,
-            baseurl: me.base_url + '/',
-            enableFn: (rec) => canEdit && rec && me.base_url,
-            callback: () => reload(),
+            enableFn: (rec) => canEdit && !!rec,
+            handler: function (btn, event, rec) {
+                Ext.create('PVE.window.FirewallObjectRemove', {
+                    item: { id: rec.data.group },
+                    url: me.base_url + '/' + rec.data.group,
+                    text: Ext.String.format(
+                        gettext("Are you sure you want to remove security group '{0}'"),
+                        rec.data.group,
+                    ),
+                    referenceActions: [
+                        {
+                            text: gettext('Keep'),
+                            value: 'keep',
+                            description: gettext(
+                                'Do not touch firewall rules referencing this security group.',
+                            ),
+                        },
+                        {
+                            text: gettext('Disable'),
+                            value: 'disable',
+                            description: gettext(
+                                'Disable firewall rules referencing this security group.',
+                            ),
+                        },
+                        {
+                            text: gettext('Delete'),
+                            value: 'drop',
+                            description: gettext(
+                                'Delete firewall rules referencing this security group.',
+                            ),
+                        },
+                    ],
+                    apiCallDone: reload,
+                    taskDone: reload,
+                }).show();
+            },
         });
 
         Ext.apply(me, {
-- 
2.47.3