[NEW] Setting to dismiss desktop notification only after interaction (#14807)

* added default and user specific setting for desktop notification

* added parameter to REST API endpoint users.setPreferences require user interaction setting of desktop notifications

* added usage of user specific setting 'desktopNotificationRequireInteraction'

* added descriptions for user preference and default setting

* add descriptions and label texts

app/api/server/v1/users.js

@@ -512,6 +512,7 @@ API.v1.addRoute('users.setPreferences', { authRequired: true }, {
 				enableAutoAway: Match.Maybe(Boolean),
 				highlights: Match.Maybe(Array),
 				desktopNotificationDuration: Match.Maybe(Number),
+				desktopNotificationRequireInteraction: Match.Maybe(Boolean),
 				messageViewMode: Match.Maybe(Number),
 				hideUsernames: Match.Maybe(Boolean),
 				hideRoles: Match.Maybe(Boolean),

app/lib/server/startup/settings.js

@@ -225,6 +225,12 @@ settings.addGroup('Accounts', function() {
 			public: true,
 			i18nLabel: 'Notification_Duration',
 		});
+		this.add('Accounts_Default_User_Preferences_desktopNotificationRequireInteraction', false, {
+			type: 'boolean',
+			public: true,
+			i18nLabel: 'Notification_RequireInteraction',
+			i18nDescription: 'Notification_RequireInteraction_Description',
+		});
 		this.add('Accounts_Default_User_Preferences_audioNotifications', 'mentions', {
 			type: 'select',
 			values: [

app/ui-account/client/accountPreferences.html

@@ -102,6 +102,14 @@
 								{{/if}}
 							</div>
 						</div>
+						<div class="input-line double-col" id="unreadAlert">
+							<label class="setting-label">{{_ "Notification_RequireInteraction"}}</label>
+							<div class="setting-field">
+								<label><input type="radio" name="desktopNotificationRequireInteraction" value="true" checked="{{checked 'desktopNotificationRequireInteraction' true}}"/> {{_ "On"}}</label>
+								<label><input type="radio" name="desktopNotificationRequireInteraction" value="false" checked="{{checked 'desktopNotificationRequireInteraction' false}}"/> {{_ "Off"}}</label>
+								<div class="settings-description secondary-font-color">{{_ "Only_works_with_chrome_version_greater_50"}}</div>
+							</div>
+						</div>
 						<div class="input-line double-col" id="desktopNotifications">
 							<label class="setting-label">{{_ "Notification_Desktop_Default_For"}}</label>
 							<div class="rc-select setting-field">

app/ui-account/client/accountPreferences.js

@@ -90,6 +90,13 @@ Template.accountPreferences.helpers({
 	defaultDesktopNotificationDuration() {
 		return settings.get('Accounts_Default_User_Preferences_desktopNotificationDuration');
 	},
+	desktopNotificationRequireInteraction() {
+		const userPref = getUserPreference(Meteor.userId(), 'desktopNotificationRequireInteraction', 'undefined');
+		return userPref !== 'undefined' ? userPref : undefined;
+	},
+	defaultDesktopNotificationRequireInteraction() {
+		return settings.get('Accounts_Default_User_Preferences_desktopNotificationRequireInteraction');
+	},
 	idleTimeLimit() {
 		return getUserPreference(Meteor.userId(), 'idleTimeLimit');
 	},
@@ -189,6 +196,12 @@ Template.accountPreferences.onCreated(function() {
 			data.hideRoles = JSON.parse($('#hideRoles').find('input:checked').val());
 		}
 
+		if ($('input[name=desktopNotificationRequireInteraction]:checked').val() === undefined) {
+			data.desktopNotificationRequireInteraction = settings.get('Accounts_Default_User_Preferences_desktopNotificationRequireInteraction');
+		} else {
+			data.desktopNotificationRequireInteraction = JSON.parse($('input[name=desktopNotificationRequireInteraction]:checked').val());
+		}
+
 		// if highlights changed we need page reload
 		const highlights = getUserPreference(Meteor.userId(), 'highlights');
 		if (highlights && highlights.join('\n') !== data.highlights.join('\n')) {

app/ui/client/lib/notification.js

@@ -41,6 +41,7 @@ export const KonchatNotification = {
 					tag: notification.payload._id,
 					silent: true,
 					canReply: true,
+					requireInteraction: getUserPreference(Meteor.userId(), 'desktopNotificationRequireInteraction'),
 				});
 
 				const notificationDuration = notification.duration - 0 || getUserPreference(Meteor.userId(), 'desktopNotificationDuration') - 0;

packages/rocketchat-i18n/i18n/de-IN.i18n.json

@@ -2164,6 +2164,8 @@
   "Not_Imported_Messages_Title": "Der Import folgender Nachrichten schlug fehl",
   "Notification_Desktop_Default_For": "Desktop-Benachrichtigungen anzeigen für",
   "Notification_Duration": "Benachrichtigungsdauer",
+  "Notification_RequireInteraction": "Der Benutzer muss mit der Desktop-Benachrichtigung interagieren um diese auszublenden",
+  "Notification_RequireInteraction_Description": "Verwendung nur mit Chrome Browser Version > 50 möglich. Verwendet den Parameter <i>requireInteraction</i> um die Anzeigedauer der Desktop-Benachrichtigung bis zur Benutzerinteraktion zu verlängern.",
   "Notification_Mobile_Default_For": "Mobile Benachrichtigungen anzeigen für",
   "Notifications": "Benachrichtigungen",
   "Notifications_Always_Notify_Mobile": "Immer das Mobiltelefon benachrichtigen",
@@ -2212,6 +2214,7 @@
   "Only_authorized_users_can_write_new_messages": "Nur Authentifizierte Benutzer können neue Nachrichten schreiben",
   "Only_from_users": "Löscht nur den Inhalt dieser Benutzer",
   "Only_On_Desktop": "Desktop Modus (senden mit der Eingabeaste nur auf dem Desktop PC)",
+  "Only_works_with_chrome_version_greater_50": "Funktioniert nur mit Chrome Browser Versionen > 50",
   "Only_you_can_see_this_message": "Nur Du kannst diese Nachricht sehen",
   "Oops!": "Hoppla",
   "Oops_page_not_found": "Hoppla, Seite nicht gefunden",

packages/rocketchat-i18n/i18n/de.i18n.json

@@ -2316,6 +2316,8 @@
   "Not_Imported_Messages_Title": "Der Import folgender Nachrichten schlug fehl",
   "Notification_Desktop_Default_For": "Desktop-Benachrichtigungen anzeigen für",
   "Notification_Duration": "Benachrichtigungsdauer",
+  "Notification_RequireInteraction": "Benutzerinteraktion notwendig um Benachrichtigung auszublenden",
+  "Notification_RequireInteraction_Description": "Verwendung nur mit Chrome Browser Version > 50 möglich. Verwendet den Parameter <i>requireInteraction</i> um die Anzeigedauer der Desktop-Benachrichtigung bis zur Benutzerinteraktion zu verlängern.",
   "Notification_Mobile_Default_For": "Mobile Benachrichtigungen anzeigen für",
   "Notifications": "Benachrichtigungen",
   "Notifications_Always_Notify_Mobile": "Immer das Mobiltelefon benachrichtigen",
@@ -2362,6 +2364,7 @@
   "Only_authorized_users_can_write_new_messages": "Nur Authentifizierte Benutzer können neue Nachrichten schreiben",
   "Only_from_users": "Löscht nur den Inhalt dieser Benutzer (lassen Sie den Inhalt leer)",
   "Only_On_Desktop": "Desktop Modus (senden mit der Eingabeaste nur auf dem Desktop PC)",
+  "Only_works_with_chrome_version_greater_50": "Funktioniert nur mit Chrome Browser Versionen > 50",
   "Only_you_can_see_this_message": "Nur Sie können diese Nachricht sehen",
   "Oops!": "Hoppla",
   "Oops_page_not_found": "Hoppla, Seite nicht gefunden",

packages/rocketchat-i18n/i18n/en.i18n.json

@@ -2328,6 +2328,8 @@
   "Not_Imported_Messages_Title": "The following messages were not imported successfully",
   "Notification_Desktop_Default_For": "Show Desktop Notifications For",
   "Notification_Duration": "Notification Duration",
+  "Notification_RequireInteraction": "Require Interaction to Dismiss Desktop Notification",
+  "Notification_RequireInteraction_Description": "Works only with Chrome browser versions > 50. Utilizes the parameter <i>requireInteraction</i> to show the desktop notification to indefinite until the user interacts with it.",
   "Notification_Mobile_Default_For": "Push Mobile Notifications For",
   "Notifications": "Notifications",
   "Notifications_Always_Notify_Mobile": "Always notify mobile",
@@ -2375,6 +2377,7 @@
   "Only_authorized_users_can_write_new_messages": "Only authorized users can write new messages",
   "Only_from_users": "Only prune content from these users (leave empty to prune everyone's content)",
   "Only_On_Desktop": "Desktop mode (only sends with enter on desktop)",
+  "Only_works_with_chrome_version_greater_50": "Only works with Chrome browser versions > 50",
   "Only_you_can_see_this_message": "Only you can see this message",
   "Oops!": "Oops",
   "Oops_page_not_found": "Oops, page not found",

tests/data/user.js

@@ -24,6 +24,7 @@ export const preferences = {
 		enableAutoAway: true,
 		highlights: [],
 		desktopNotificationDuration: 0,
+		desktopNotificationRequireInteraction: false,
 		messageViewMode: 0,
 		hideUsernames: false,
 		hideRoles: false,

tests/end-to-end/api/00-miscellaneous.js

@@ -125,6 +125,7 @@ describe('miscellaneous', function() {
 					'enableAutoAway',
 					// 'highlights',
 					'desktopNotificationDuration',
+					'desktopNotificationRequireInteraction',
 					'messageViewMode',
 					'hideUsernames',
 					'hideRoles',