PLT-2074 Refactor desktop notification settings UI and add setting for duration (#3883)

* Refactor desktop notification settings UI and add setting for duration

* Update en.json

* Update desktop_notification_settings.jsx

2 files changed, 15 insertions, 6 deletions

diff --git a/webapp/utils/constants.jsx b/webapp/utils/constants.jsx
index 60cc82ff6..1ec20d3e8 100644
--- a/webapp/utils/constants.jsx
+++ b/webapp/utils/constants.jsx
@@ -809,7 +809,8 @@ export const Constants = {
     PERMISSIONS_SYSTEM_ADMIN: 'system_admin',
     MENTION_MEMBERS: 'mention.members',
     MENTION_NONMEMBERS: 'mention.nonmembers',
-    MENTION_SPECIAL: 'mention.special'
+    MENTION_SPECIAL: 'mention.special',
+    DEFAULT_NOTIFICATION_DURATION: 5000
 };
 
 export default Constants;
diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx
index 3059ce529..2780196db 100644
--- a/webapp/utils/utils.jsx
+++ b/webapp/utils/utils.jsx
@@ -86,18 +86,23 @@ export function getCookie(name) {
 
 var requestedNotificationPermission = false;
 
-export function notifyMe(title, body, channel, teamId) {
+export function notifyMe(title, body, channel, teamId, duration) {
     if (!('Notification' in window)) {
         return;
     }
 
+    let notificationDuration = Constants.DEFAULT_NOTIFICATION_DURATION;
+    if (duration != null) {
+        notificationDuration = duration;
+    }
+
     if (Notification.permission === 'granted' || (Notification.permission === 'default' && !requestedNotificationPermission)) {
         requestedNotificationPermission = true;
 
         Notification.requestPermission((permission) => {
             if (permission === 'granted') {
                 try {
-                    var notification = new Notification(title, {body, tag: body, icon: icon50});
+                    var notification = new Notification(title, {body, tag: body, icon: icon50, requireInteraction: notificationDuration === 0});
                     notification.onclick = () => {
                         window.focus();
                         if (channel) {
@@ -108,9 +113,12 @@ export function notifyMe(title, body, channel, teamId) {
                             browserHistory.push(TeamStore.getCurrentTeamUrl() + '/channels/town-square');
                         }
                     };
-                    setTimeout(() => {
-                        notification.close();
-                    }, 5000);
+
+                    if (notificationDuration > 0) {
+                        setTimeout(() => {
+                            notification.close();
+                        }, notificationDuration);
+                    }
                 } catch (e) {
                     console.error(e); //eslint-disable-line no-console
                 }