[pve-devel] [PATCH manager 2/2] ui: one-off backup: show hint if notification-system is used

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

When mode is 'auto' and 'mailto' is empty, show hint that the
notification system will be used.

Signed-off-by: Lukas Wagner <l.wagner@proxmox.com>
---
 www/manager6/window/Backup.js | 37 +++++++++++++++++++++++++++++++----
 1 file changed, 33 insertions(+), 4 deletions(-)

diff --git a/www/manager6/window/Backup.js b/www/manager6/window/Backup.js
index 4418a9c7..ce679971 100644
--- a/www/manager6/window/Backup.js
+++ b/www/manager6/window/Backup.js
@@ -30,10 +30,27 @@ Ext.define('PVE.window.Backup', {
 	    name: 'mode',
 	});
 
+	let viewModel = new Ext.app.ViewModel({
+	    formulas: {
+		showMailtoField: (get) =>
+		    ['auto', 'legacy-sendmail'].includes(get('notificationMode')),
+		hintTextVisible: (get) => get('notificationMode') === 'auto' && !get('mailto'),
+	    },
+	    data: {
+		mailto: '',
+		notificationMode: 'auto',
+	    },
+	});
+
 	let mailtoField = Ext.create('Ext.form.field.Text', {
 	    fieldLabel: gettext('Send email to'),
 	    name: 'mailto',
 	    emptyText: Proxmox.Utils.noneText,
+	    viewModel,
+	    bind: {
+		value: '{mailto}',
+		hidden: '{!showMailtoField}',
+	    },
 	});
 
 	let notificationModeSelector = Ext.create({
@@ -46,10 +63,21 @@ Ext.define('PVE.window.Backup', {
 	    fieldLabel: gettext('Notification mode'),
 	    name: 'notification-mode',
 	    value: 'auto',
-	    listeners: {
-		change: function(field, value) {
-		    mailtoField.setDisabled(value === 'notification-system');
-		},
+	    viewModel,
+	    bind: {
+		value: '{notificationMode}',
+	    },
+	});
+
+	let notificationSystemHint = Ext.create({
+	    xtype: 'displayfield',
+	    padding: '0 0 0 5',
+	    userCls: 'pmx-hint',
+	    hidden: true,
+	    value: gettext('No email configured, the notification system will be used'),
+	    viewModel,
+	    bind: {
+		hidden: '{!hintTextVisible}',
 	    },
 	});
 
@@ -198,6 +226,7 @@ Ext.define('PVE.window.Backup', {
 		compressionSelector,
 		notificationModeSelector,
 		mailtoField,
+		notificationSystemHint,
 		removeCheckbox,
 	    ],
 	    columnB: [
-- 
2.39.2