[PATCH manager] ui: qemu: rename button label 'Edit' to 'Attach' for unused disks

[PATCH manager] ui: 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 jittering when switching between labels of
different lengths, apply the same maximum-width calculation hack on
render that is already used for the remove button.

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

diff --git a/www/manager6/qemu/HardwareView.js b/www/manager6/qemu/HardwareView.js
index 8b932995..3a59658a 100644
--- a/www/manager6/qemu/HardwareView.js
+++ b/www/manager6/qemu/HardwareView.js
@@ -474,9 +474,26 @@ Ext.define('PVE.qemu.HardwareView', {
 
         let edit_btn = new Proxmox.button.Button({
             text: gettext('Edit'),
+            defaultText: gettext('Edit'),
+            altText: gettext('Attach'),
             selModel: sm,
             disabled: true,
             handler: run_editor,
+            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 "Edit" and "Attach" 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 runEfiEnroll = function () {
@@ -818,6 +835,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

Re: [PATCH manager] ui: qemu: rename button label 'Edit' to 'Attach' for unused disks

[Thomas Lamprecht]

Am 30.10.26 um 13:43 schrieb 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.

nice small UX polish, I like those a lot!


> To prevent the toolbar from jittering when switching between labels of
> different lengths, apply the same maximum-width calculation hack on
> render that is already used for the remove button.

We have this a few times - as you probably figured yourself, seeing that
you copied over the same comment block. After a few time the ROI of adding
a common impl grows super-linear, so always worth evaluating if one should
also do that upfront. Here that actually happened already, I factored out
the core logic as a small Proxmox.button.AltText (proxmoxAltTextButton)
component in proxmox-widget-toolkit a while ago. Please use that here, and
potentially also move other existing handrolled use sites over to that too in
a separate clean-up commit to avoid that another one replicates them again
manually by stumbling upon such a handrolled commit.