[PATCH manager v2 0/3] ui: lxc/qemu: reduce ambiguity when attaching unused disk

[PATCH manager v2 0/3] ui: lxc/qemu: reduce ambiguity when attaching unused disk

[Elias Huhsovitz]

Small UI quality of life improvements to reduce the ambiguity of
attaching/adding an unused disk to vm/container:
* rename 'Edit' button to 'Attach' for unused disks.
* Convert existing buttons that display altText to
  `Proxmox.button.AltText`
* Make button ordering of lxc/qemu hardware options consistent

This also came it in a forum post [0] some time ago.

[0] https://forum.proxmox.com/threads/how-do-i-reattach-a-disk-to-vm.108339/

Changes v1->v2:
---------------
* utilize Proxmox.button.AltText for all buttons displaying alt text
* re-order buttons in hardware/resources tab

Previous Versions
-----------------
v1: https://lore.proxmox.com/pve-devel/20261030124235.124337-1-e.huhsovitz@proxmox.com/

Elias Huhsovitz (3):
  ui: lxc/qemu: rename button label 'Edit' to 'Attach' for unused disks
  ui: lxc/qemu: convert buttons displaying altText to
    proxmoxAltTextButton
  ui: qemu: re-order buttons in hardware tab to match lxc layout

 www/manager6/lxc/Resources.js     | 24 ++++++------------------
 www/manager6/qemu/HardwareView.js | 27 +++++++++------------------
 2 files changed, 15 insertions(+), 36 deletions(-)

-- 
2.47.3

[PATCH manager v2 1/3] ui: lxc/qemu: rename button label 'Edit' to 'Attach' for unused disks

[Elias Huhsovitz]

Currently, adding an unused (detached) disk requires the user to select
the disk and click the generic "Edit" button. This is confusing,
because: (1) The "Edit" label does not implicitly convey the action of
adding/attaching the disk. (2) The action to make a disk unused is
explicitly labeled "Detach", so a user expects a contrary "Attach"
button.

Harmonize the UI terminology by dynamically changing the "Edit" button
label to "Attach" when an unused disk is selected. This mirrors the
existing behavior of the "Remove" button, which changes to "Detach" for
used disks.

To prevent the toolbar from moving when switching between labels of
different lengths, change the edit button to a proxmoxAltTextButton.

Signed-off-by: Elias Huhsovitz <e.huhsovitz@proxmox.com>
---
 www/manager6/lxc/Resources.js     | 7 +++++--
 www/manager6/qemu/HardwareView.js | 8 +++++++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/www/manager6/lxc/Resources.js b/www/manager6/lxc/Resources.js
index df513bb7..40321d03 100644
--- a/www/manager6/lxc/Resources.js
+++ b/www/manager6/lxc/Resources.js
@@ -217,15 +217,17 @@ Ext.define('PVE.lxc.RessourceView', {
             });
         };
 
-        var edit_btn = new Proxmox.button.Button({
+        let edit_btn = new Proxmox.button.AltText({
             text: gettext('Edit'),
+            defaultText: gettext('Edit'),
+            altText: gettext('Attach'),
             selModel: me.selModel,
             disabled: true,
             enableFn: function (rec) {
                 if (!rec) {
                     return false;
                 }
-                var rowdef = rows[rec.data.key];
+                let rowdef = rows[rec.data.key];
                 return !!rowdef.editor;
             },
             handler: function () {
@@ -332,6 +334,7 @@ Ext.define('PVE.lxc.RessourceView', {
                 }
             }
             edit_btn.setDisabled(noedit);
+            edit_btn.setText(isUnusedDisk ? edit_btn.altText : edit_btn.defaultText);
 
             volumeaction_btn.setDisabled(!isDisk || !diskCap);
             move_menuitem.setDisabled(isUnusedDisk);
diff --git a/www/manager6/qemu/HardwareView.js b/www/manager6/qemu/HardwareView.js
index 8b932995..3eebd05f 100644
--- a/www/manager6/qemu/HardwareView.js
+++ b/www/manager6/qemu/HardwareView.js
@@ -472,8 +472,10 @@ Ext.define('PVE.qemu.HardwareView', {
             }
         };
 
-        let edit_btn = new Proxmox.button.Button({
+        let edit_btn = new Proxmox.button.AltText({
             text: gettext('Edit'),
+            defaultText: gettext('Edit'),
+            altText: gettext('Attach'),
             selModel: sm,
             disabled: true,
             handler: run_editor,
@@ -818,6 +820,10 @@ Ext.define('PVE.qemu.HardwareView', {
                     (isDisk && !diskCap),
             );
 
+            edit_btn.setText(
+                isUnusedDisk && !isCloudInit ? edit_btn.altText : edit_btn.defaultText,
+            );
+
             diskaction_btn.setDisabled(
                 pending || !diskCap || isCloudInit || !(isDisk || isEfi || tpmMoveable),
             );
-- 
2.47.3

[PATCH manager v2 2/3] ui: lxc/qemu: convert buttons displaying altText to proxmoxAltTextButton

[Elias Huhsovitz]

Buttons displaying alternative text, depending on the config state, rely
on a listener to set to appropriate width. This prevents the whole
toolbar to move when switching between hardware/resources.

Currently this behaviour is defined for each button that displays
alternative text individually.

Convert the buttons to a proxmoxAltTextButton, as defined in the
proxmox-widget-toolkit, to unify the width handling.

Signed-off-by: Elias Huhsovitz <e.huhsovitz@proxmox.com>
---
 www/manager6/lxc/Resources.js     | 17 +----------------
 www/manager6/qemu/HardwareView.js | 17 +----------------
 2 files changed, 2 insertions(+), 32 deletions(-)

diff --git a/www/manager6/lxc/Resources.js b/www/manager6/lxc/Resources.js
index 40321d03..e04d5283 100644
--- a/www/manager6/lxc/Resources.js
+++ b/www/manager6/lxc/Resources.js
@@ -235,7 +235,7 @@ Ext.define('PVE.lxc.RessourceView', {
             },
         });
 
-        var remove_btn = new Proxmox.button.Button({
+        var remove_btn = new Proxmox.button.AltText({
             text: gettext('Remove'),
             defaultText: gettext('Remove'),
             altText: gettext('Detach'),
@@ -256,21 +256,6 @@ Ext.define('PVE.lxc.RessourceView', {
                 return msg;
             },
             handler: run_remove,
-            listeners: {
-                render: function (btn) {
-                    // hack: calculate the max button width on first display to prevent the whole
-                    // toolbar to move when we switch between the "Remove" and "Detach" labels
-                    let def = btn.getSize().width;
-
-                    btn.setText(btn.altText);
-                    let alt = btn.getSize().width;
-
-                    btn.setText(btn.defaultText);
-
-                    let optimal = alt > def ? alt : def;
-                    btn.setSize({ width: optimal });
-                },
-            },
         });
 
         let move_menuitem = new Ext.menu.Item({
diff --git a/www/manager6/qemu/HardwareView.js b/www/manager6/qemu/HardwareView.js
index 3eebd05f..bc0aa19d 100644
--- a/www/manager6/qemu/HardwareView.js
+++ b/www/manager6/qemu/HardwareView.js
@@ -633,7 +633,7 @@ Ext.define('PVE.qemu.HardwareView', {
             },
         });
 
-        let remove_btn = new Proxmox.button.Button({
+        let remove_btn = new Proxmox.button.AltText({
             text: gettext('Remove'),
             defaultText: gettext('Remove'),
             altText: gettext('Detach'),
@@ -679,21 +679,6 @@ Ext.define('PVE.qemu.HardwareView', {
                     },
                 });
             },
-            listeners: {
-                render: function (btn) {
-                    // hack: calculate the max button width on first display to prevent the whole
-                    // toolbar to move when we switch between the "Remove" and "Detach" labels
-                    var def = btn.getSize().width;
-
-                    btn.setText(btn.altText);
-                    var alt = btn.getSize().width;
-
-                    btn.setText(btn.defaultText);
-
-                    var optimal = alt > def ? alt : def;
-                    btn.setSize({ width: optimal });
-                },
-            },
         });
 
         let revert_btn = new PVE.button.PendingRevert({
-- 
2.47.3

[PATCH manager v2 3/3] ui: qemu: re-order buttons in hardware tab to match lxc layout

[Elias Huhsovitz]

In the qemu hardware tab, the button ordering is: Add, Remove, Edit,
Disk Action, Revert.
In the lxc resources tab, the ordering is: Add, Edit, Remove, Volume
Action, Revert.
The Remove & Edit Buttons are swapped.

Re-order button in hardware tab to match the lxc layout, i.e., set the
same ordering for both tabs.

Signed-off-by: Elias Huhsovitz <e.huhsovitz@proxmox.com>
---
 www/manager6/qemu/HardwareView.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/www/manager6/qemu/HardwareView.js b/www/manager6/qemu/HardwareView.js
index bc0aa19d..c9af81fe 100644
--- a/www/manager6/qemu/HardwareView.js
+++ b/www/manager6/qemu/HardwareView.js
@@ -941,8 +941,8 @@ Ext.define('PVE.qemu.HardwareView', {
                         ],
                     }),
                 },
-                remove_btn,
                 edit_btn,
+                remove_btn,
                 diskaction_btn,
                 revert_btn,
             ],
-- 
2.47.3