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

[Elias Huhsovitz <e.huhsovitz@proxmox.com>]

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