[PATCH pve-manager v2 1/1] fabrics: wireguard: node edit: use network selector

[PATCH pve-manager v2 1/1] fabrics: wireguard: node edit: use network selector

[Stefan Hanreich]

For internal nodes, turn the endpoint form field into a network
selector that allows users to select IP addresses from a dropdown.
This makes the intention of the field clearer and also saves users
some typing since they can just select any configured IP on the node
without having to re-type it.

The defaultFocus property is set for the node edit window, to avoid
the network selector getting autofocused which leads to an ugly,
mispositioned combogrid getting rendered automatically when the edit
window gets rendered initially. Focus on the form can still be gained
by pressing Tab an additional time.

Suggested-by: Dominik Csapak <d.csapak@proxmox.com>
Signed-off-by: Stefan Hanreich <s.hanreich@proxmox.com>
---

Notes:
    Changes from v1 (Thanks @Dominik):
    * fixed stray 'qqq' in label
    * made allowBlank always true, since it isn't necessary to set this
      dynamically.
    * properly set deleteEmpty / skipEmptyText for internal endpoint
      field

 .../sdn/fabrics/wireguard/NodeEdit.js         | 38 +++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/www/manager6/sdn/fabrics/wireguard/NodeEdit.js b/www/manager6/sdn/fabrics/wireguard/NodeEdit.js
index fe4639ade..cc0f4cb38 100644
--- a/www/manager6/sdn/fabrics/wireguard/NodeEdit.js
+++ b/www/manager6/sdn/fabrics/wireguard/NodeEdit.js
@@ -27,6 +27,8 @@ Ext.define('PVE.sdn.Fabric.WireGuard.Node.Edit', {
         },
     },
 
+    defaultFocus: 'no',
+
     additionalItems: [
         {
             xtype: 'proxmoxtextfield',
@@ -56,12 +58,41 @@ Ext.define('PVE.sdn.Fabric.WireGuard.Node.Edit', {
             allowBlank: false,
         },
         {
+            // endpoint field for internal nodes
+            xtype: 'proxmoxNetworkSelector',
+            reference: 'networkSelector',
+            fieldLabel: gettext('Endpoint'),
+            emptyText: gettext('Host that peers connect to'),
+            labelWidth: 120,
+            name: 'endpoint',
+            type: 'any_bridge',
+            valueField: 'address',
+            displayField: 'address',
+            autoSelect: false,
+            notFoundIsValid: true,
+            editable: true,
+            allowBlank: true,
+            skipEmptyText: true,
+            bind: {
+                hidden: '{!current.isPveNode}',
+                disabled: '{!current.isPveNode}',
+            },
+            cbind: {
+                deleteEmpty: '{!isCreate}',
+            },
+        },
+        {
+            // endpoint field for external nodes
             xtype: 'proxmoxtextfield',
             fieldLabel: gettext('Endpoint'),
             emptyText: gettext('Host that peers connect to'),
             labelWidth: 120,
             name: 'endpoint',
             allowBlank: false,
+            bind: {
+                hidden: '{current.isPveNode}',
+                disabled: '{current.isPveNode}',
+            },
         },
         {
             xtype: 'proxmoxtextfield',
@@ -167,6 +198,13 @@ Ext.define('PVE.sdn.Fabric.WireGuard.Node.Edit', {
                     },
                 },
             },
+            listeners: {
+                change: function (_this, newValue) {
+                    if (me.getViewModel().get('current.isPveNode')) {
+                        me.lookupReference('networkSelector').setNodename(newValue);
+                    }
+                },
+            },
         });
 
         return config;
-- 
2.47.3