[pbs-devel] [PATCH proxmox-backup v2 1/2] gui: remove document.execCommand calls

[pbs-devel] [PATCH proxmox-backup v2 1/2] gui: remove document.execCommand calls

[Gabriel Goller]

The `document.execCommand` call is deprecated since a few years [0] so I
went ahead and removed it. We only use it to copy stuff to the clipboard
and the recommended way now is to use `navigator.clipboard.writeText`
[1]. `writeText` is kind of new, but I think we'll be alright regarding
compatibility (Compat table is also available at [1]).

Making the handler functions async is okay because extjs executes the
handler and does not expect any result from it, nor does it need to do
some work afterwards.

[0]: https://developer.mozilla.org/en-US/docs/Web/API/document/execCommand
[1]: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText

Signed-off-by: Gabriel Goller <g.goller@proxmox.com>
---

v2, thanks @Dominik:
 - add explanation of why async handlers are ok

 www/ServerStatus.js             | 8 +++-----
 www/panel/NodeInfo.js           | 5 ++---
 www/window/DatastoreRepoInfo.js | 5 ++---
 www/window/TokenEdit.js         | 6 +++---
 4 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/www/ServerStatus.js b/www/ServerStatus.js
index 0c105c63..770deecb 100644
--- a/www/ServerStatus.js
+++ b/www/ServerStatus.js
@@ -76,11 +76,9 @@ Ext.define('PBS.ServerStatus', {
 		{
 		    xtype: 'button',
 		    iconCls: 'fa fa-clipboard',
-		    handler: function(button) {
-			window.getSelection().selectAllChildren(
-			    document.getElementById('pkgversions'),
-			);
-			document.execCommand("copy");
+		    handler: async function(button) {
+			let el = document.getElementById('pkgversions');
+			await navigator.clipboard.writeText(el.textContent);
 		    },
 		    text: gettext('Copy'),
 		},
diff --git a/www/panel/NodeInfo.js b/www/panel/NodeInfo.js
index 454986ef..9d741e45 100644
--- a/www/panel/NodeInfo.js
+++ b/www/panel/NodeInfo.js
@@ -45,10 +45,9 @@ Ext.define('PBS.NodeInfoPanel', {
 		    {
 			xtype: 'button',
 			iconCls: 'fa fa-clipboard',
-			handler: function(b) {
+			handler: async function(b) {
 			    var el = document.getElementById('fingerprintField');
-			    el.select();
-			    document.execCommand("copy");
+			    await navigator.clipboard.writeText(el.value);
 			},
 			text: gettext('Copy'),
 		    },
diff --git a/www/window/DatastoreRepoInfo.js b/www/window/DatastoreRepoInfo.js
index e862d7ad..2f2db477 100644
--- a/www/window/DatastoreRepoInfo.js
+++ b/www/window/DatastoreRepoInfo.js
@@ -113,15 +113,14 @@ Ext.define('PBS.form.CopyField', {
 	    iconCls: 'fa fa-clipboard x-btn-icon-el-default-toolbar-small',
 	    baseCls: 'x-btn',
 	    cls: 'x-btn-default-toolbar-small proxmox-inline-button',
-	    handler: function() {
+	    handler: async function() {
 		let me = this;
 		let field = me.up('pbsCopyField');
 		let el = field.getComponent('inputField')?.inputEl;
 		if (!el?.dom) {
 		    return;
 		}
-		el.dom.select();
-		document.execCommand("copy");
+		await navigator.clipboard.writeText(el.dom.value);
 	    },
 	    text: gettext('Copy'),
 	},
diff --git a/www/window/TokenEdit.js b/www/window/TokenEdit.js
index 80540212..c1856be8 100644
--- a/www/window/TokenEdit.js
+++ b/www/window/TokenEdit.js
@@ -203,9 +203,9 @@ Ext.define('PBS.window.TokenShow', {
     ],
     buttons: [
 	{
-	    handler: function(b) {
-		document.getElementById('token-secret-value').select();
-		document.execCommand("copy");
+	    handler: async function(b) {
+		let el = document.getElementById('token-secret-value');
+		await navigator.clipboard.writeText(el.value);
 	    },
 	    text: gettext('Copy Secret Value'),
 	},
-- 
2.43.0

[pbs-devel] [PATCH proxmox-backup v2 2/2] fix #5188: gui: add copy to clipboard on snapshots

[Gabriel Goller]

When navigating to Datastores -> Content, it is now possible to
right-click on a snapshot/group and copy the name to the clipboard.
This makes the proxmox-backup-client much easier to use, especially when
restoring archives.

Signed-off-by: Gabriel Goller <g.goller@proxmox.com>
---

v2, thanks @Dominik:
 - change name to 'copy name to clipboard' to avoid confusion

 www/datastore/Content.js | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/www/datastore/Content.js b/www/datastore/Content.js
index fa0b7d2c..c2403ff9 100644
--- a/www/datastore/Content.js
+++ b/www/datastore/Content.js
@@ -546,6 +546,10 @@ Ext.define('PBS.DataStoreContent', {
 	    });
 	},
 
+	onCopy: async function(view, rI, cI, item, e, { data }) {
+	    await navigator.clipboard.writeText(data.text);
+	},
+
 	onNotesEdit: function(view, data) {
 	    let me = this;
 
@@ -884,6 +888,7 @@ Ext.define('PBS.DataStoreContent', {
 	    if (record.data.ty === 'group') {
 		menu = Ext.create('PBS.datastore.GroupCmdMenu', {
 		    title: gettext('Group'),
+		    onCopy: createControllerCallback('onCopy'),
 		    onVerify: createControllerCallback('onVerify'),
 		    onChangeOwner: createControllerCallback('onChangeOwner'),
 		    onPrune: createControllerCallback('onPrune'),
@@ -892,6 +897,7 @@ Ext.define('PBS.DataStoreContent', {
 	    } else if (record.data.ty === 'dir') {
 		menu = Ext.create('PBS.datastore.SnapshotCmdMenu', {
 		    title: gettext('Snapshot'),
+		    onCopy: createControllerCallback('onCopy'),
 		    onVerify: createControllerCallback('onVerify'),
 		    onProtectionChange: createControllerCallback('onProtectionChange'),
 		    onForget: createControllerCallback('onForget'),
@@ -1284,12 +1290,21 @@ Ext.define('PBS.datastore.GroupCmdMenu', {
     extend: 'Ext.menu.Menu',
     mixins: ['Proxmox.Mixin.CBind'],
 
+    onCopy: undefined,
     onVerify: undefined,
     onChangeOwner: undefined,
     onPrune: undefined,
     onForget: undefined,
 
     items: [
+	{
+	    text: gettext('Copy name to clipboard'),
+	    iconCls: 'fa fa-clipboard',
+	    handler: function() { this.up('menu').onCopy(); },
+	    cbind: {
+		hidden: '{!onCopy}',
+	    },
+	},
 	{
 	    text: gettext('Verify'),
 	    iconCls: 'pve-icon-verify-lettering',
@@ -1330,11 +1345,21 @@ Ext.define('PBS.datastore.SnapshotCmdMenu', {
     extend: 'Ext.menu.Menu',
     mixins: ['Proxmox.Mixin.CBind'],
 
+    onCopy: undefined,
     onVerify: undefined,
     onProtectionChange: undefined,
     onForget: undefined,
 
     items: [
+	{
+	    text: gettext('Copy name to clipboard'),
+	    iconCls: 'fa fa-clipboard',
+	    handler: function() { this.up('menu').onCopy(); },
+	    cbind: {
+		hidden: '{!onCopy}',
+		disabled: '{!onCopy}',
+	    },
+	},
 	{
 	    text: gettext('Verify'),
 	    iconCls: 'pve-icon-verify-lettering',
-- 
2.43.0

[pbs-devel] applied-series: [PATCH proxmox-backup v2 1/2] gui: remove document.execCommand calls

[Thomas Lamprecht]

Am 14/03/2024 um 10:32 schrieb Gabriel Goller:
> The `document.execCommand` call is deprecated since a few years [0] so I
> went ahead and removed it. We only use it to copy stuff to the clipboard
> and the recommended way now is to use `navigator.clipboard.writeText`
> [1]. `writeText` is kind of new, but I think we'll be alright regarding
> compatibility (Compat table is also available at [1]).
> 
> Making the handler functions async is okay because extjs executes the
> handler and does not expect any result from it, nor does it need to do
> some work afterwards.
> 
> [0]: https://developer.mozilla.org/en-US/docs/Web/API/document/execCommand
> [1]: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText
> 
> Signed-off-by: Gabriel Goller <g.goller@proxmox.com>
> ---
> 
> v2, thanks @Dominik:
>  - add explanation of why async handlers are ok
> 
>  www/ServerStatus.js             | 8 +++-----
>  www/panel/NodeInfo.js           | 5 ++---
>  www/window/DatastoreRepoInfo.js | 5 ++---
>  www/window/TokenEdit.js         | 6 +++---
>  4 files changed, 10 insertions(+), 14 deletions(-)
> 
>

applied, thanks!