[pve-devel] [PATCH widget-toolkit 2/2] notify: change 'Remove' button to 'Reset to default' for built-ins

[Lukas Wagner <l.wagner@proxmox.com>]

A HTTP DELETE for a built-in target/matcher acts as a reset to its
defaults. This patch changes the 'Remove' button text based on the
selected target/matcher. If it is a built-in, the button text is
changed to 'Reset to default'. Also, if the built-in is not actually
modified, the button is disabled.

Signed-off-by: Lukas Wagner <l.wagner@proxmox.com>
---
 src/panel/NotificationConfigView.js | 63 +++++++++++++++++++++++++++++
 1 file changed, 63 insertions(+)

diff --git a/src/panel/NotificationConfigView.js b/src/panel/NotificationConfigView.js
index 4d3ee46..2e2eede 100644
--- a/src/panel/NotificationConfigView.js
+++ b/src/panel/NotificationConfigView.js
@@ -1,3 +1,32 @@
+Ext.define('Proxmox.panel.NotificationConfigViewModel', {
+    extend: 'Ext.app.ViewModel',
+
+    alias: 'viewmodel.pmxNotificationConfigPanel',
+
+    formulas: {
+	builtinSelected: function(get) {
+	    let origin = get('selection')?.get('origin');
+	    return origin === 'modified-builtin' || origin === 'builtin';
+	},
+	removeButtonText: function(get) {
+	    if (get('builtinSelected')) {
+		return gettext('Reset to default');
+	    } else {
+		return gettext('Remove');
+	    }
+	},
+	removeButtonConfirmMessage: function(get) {
+	    if (get('builtinSelected')) {
+		return gettext('Do you want to reset {0} to its default settings?');
+	    } else {
+		// Use default message provided by the button
+		return undefined;
+	    }
+	},
+    },
+
+});
+
 Ext.define('Proxmox.panel.NotificationConfigView', {
     extend: 'Ext.panel.Panel',
     alias: 'widget.pmxNotificationConfigView',
@@ -36,6 +65,14 @@ Ext.define('Proxmox.panel.NotificationEndpointView', {
 
     title: gettext('Notification Targets'),
 
+    viewModel: {
+	type: 'pmxNotificationConfigPanel',
+    },
+
+    bind: {
+	selection: '{selection}',
+    },
+
     controller: {
 	xclass: 'Ext.app.ViewController',
 
@@ -70,6 +107,7 @@ Ext.define('Proxmox.panel.NotificationEndpointView', {
 	    let me = this;
 	    let view = me.getView();
 	    view.getStore().rstore.load();
+	    this.getView().setSelection(null);
 	},
 
 	testEndpoint: function() {
@@ -205,9 +243,17 @@ Ext.define('Proxmox.panel.NotificationEndpointView', {
 		{
 		    xtype: 'proxmoxStdRemoveButton',
 		    callback: 'reload',
+		    bind: {
+			text: '{removeButtonText}',
+			customConfirmationMessage: '{removeButtonConfirmMessage}',
+		    },
 		    getUrl: function(rec) {
 			return `${me.baseUrl}/endpoints/${rec.data.type}/${rec.getId()}`;
 		    },
+		    enableFn: (rec) => {
+			let origin = rec.get('origin');
+			return origin === 'user-created' || origin === 'modified-builtin';
+		    },
 		},
 		'-',
 		{
@@ -260,9 +306,18 @@ Ext.define('Proxmox.panel.NotificationMatcherView', {
 
 	reload: function() {
 	    this.getView().getStore().rstore.load();
+	    this.getView().setSelection(null);
 	},
     },
 
+    viewModel: {
+	type: 'pmxNotificationConfigPanel',
+    },
+
+    bind: {
+	selection: '{selection}',
+    },
+
     listeners: {
 	itemdblclick: 'openEditForSelectedItem',
 	activate: 'reload',
@@ -342,7 +397,15 @@ Ext.define('Proxmox.panel.NotificationMatcherView', {
 		{
 		    xtype: 'proxmoxStdRemoveButton',
 		    callback: 'reload',
+		    bind: {
+			text: '{removeButtonText}',
+			customConfirmationMessage: '{removeButtonConfirmMessage}',
+		    },
 		    baseurl: `${me.baseUrl}/matchers`,
+		    enableFn: (rec) => {
+			let origin = rec.get('origin');
+			return origin === 'user-created' || origin === 'modified-builtin';
+		    },
 		},
 	    ],
 	});
-- 
2.39.2