PLT-2664 Split out push notifications from email notifications (#3049)

* Split out push and email notification logic, always send push notifications on mention

* Add user setting to control push notifications

* Minor changeto simplify code

2 files changed, 159 insertions, 10 deletions

diff --git a/webapp/components/user_settings/user_settings_notifications.jsx b/webapp/components/user_settings/user_settings_notifications.jsx
index 6a3f598e2..9d60f27fa 100644
--- a/webapp/components/user_settings/user_settings_notifications.jsx
+++ b/webapp/components/user_settings/user_settings_notifications.jsx
@@ -30,6 +30,10 @@ function getNotificationsStateFromStores() {
     if (user.notify_props && user.notify_props.email) {
         email = user.notify_props.email;
     }
+    var push = 'mention';
+    if (user.notify_props && user.notify_props.push) {
+        push = user.notify_props.push;
+    }
 
     var usernameKey = false;
     var mentionKey = false;
@@ -72,9 +76,20 @@ function getNotificationsStateFromStores() {
         }
     }
 
-    return {notifyLevel: desktop, enableEmail: email, soundNeeded: soundNeeded, enableSound: sound,
-            usernameKey: usernameKey, mentionKey: mentionKey, customKeys: customKeys, customKeysChecked: customKeys.length > 0,
-            firstNameKey: firstNameKey, allKey: allKey, channelKey: channelKey};
+    return {
+        notifyLevel: desktop,
+        notifyPushLevel: push,
+        enableEmail: email,
+        soundNeeded,
+        enableSound: sound,
+        usernameKey,
+        mentionKey,
+        customKeys,
+        customKeysChecked: customKeys.length > 0,
+        firstNameKey,
+        allKey,
+        channelKey
+    };
 }
 
 const holders = defineMessages({
@@ -121,6 +136,7 @@ class NotificationsTab extends React.Component {
         this.updateChannelKey = this.updateChannelKey.bind(this);
         this.updateCustomMentionKeys = this.updateCustomMentionKeys.bind(this);
         this.onCustomChange = this.onCustomChange.bind(this);
+        this.createPushNotificationSection = this.createPushNotificationSection.bind(this);
 
         this.state = getNotificationsStateFromStores();
     }
@@ -130,6 +146,7 @@ class NotificationsTab extends React.Component {
         data.email = this.state.enableEmail;
         data.desktop_sound = this.state.enableSound;
         data.desktop = this.state.notifyLevel;
+        data.push = this.state.notifyPushLevel;
 
         var mentionKeys = [];
         if (this.state.usernameKey) {
@@ -185,15 +202,21 @@ class NotificationsTab extends React.Component {
         this.updateState();
     }
     handleNotifyRadio(notifyLevel) {
-        this.setState({notifyLevel: notifyLevel});
+        this.setState({notifyLevel});
+        ReactDOM.findDOMNode(this.refs.wrapper).focus();
+    }
+
+    handlePushRadio(notifyPushLevel) {
+        this.setState({notifyPushLevel});
         ReactDOM.findDOMNode(this.refs.wrapper).focus();
     }
+
     handleEmailRadio(enableEmail) {
-        this.setState({enableEmail: enableEmail});
+        this.setState({enableEmail});
         ReactDOM.findDOMNode(this.refs.wrapper).focus();
     }
     handleSoundRadio(enableSound) {
-        this.setState({enableSound: enableSound});
+        this.setState({enableSound});
         ReactDOM.findDOMNode(this.refs.wrapper).focus();
     }
     updateUsernameKey(val) {
@@ -227,12 +250,126 @@ class NotificationsTab extends React.Component {
         ReactDOM.findDOMNode(this.refs.customcheck).checked = true;
         this.updateCustomMentionKeys();
     }
+    createPushNotificationSection() {
+        var handleUpdateDesktopSection;
+        if (this.props.activeSection === 'push') {
+            var notifyActive = [false, false, false];
+            if (this.state.notifyPushLevel === 'all') {
+                notifyActive[0] = true;
+            } else if (this.state.notifyPushLevel === 'none') {
+                notifyActive[2] = true;
+            } else {
+                notifyActive[1] = true;
+            }
+
+            let inputs = [];
+
+            inputs.push(
+                <div key='userNotificationLevelOption'>
+                    <div className='radio'>
+                        <label>
+                            <input
+                                type='radio'
+                                checked={notifyActive[0]}
+                                onChange={this.handlePushRadio.bind(this, 'all')}
+                            />
+                            <FormattedMessage
+                                id='user.settings.push_notification.allActivity'
+                                defaultMessage='For all activity'
+                            />
+                        </label>
+                        <br/>
+                    </div>
+                    <div className='radio'>
+                        <label>
+                            <input
+                                type='radio'
+                                checked={notifyActive[1]}
+                                onChange={this.handlePushRadio.bind(this, 'mention')}
+                            />
+                            <FormattedMessage
+                                id='user.settings.push_notifications.onlyMentions'
+                                defaultMessage='For mentions and direct messages'
+                            />
+                        </label>
+                        <br/>
+                    </div>
+                    <div className='radio'>
+                        <label>
+                            <input
+                                type='radio'
+                                checked={notifyActive[2]}
+                                onChange={this.handlePushRadio.bind(this, 'none')}
+                            />
+                            <FormattedMessage
+                                id='user.settings.push_notifications.off'
+                                defaultMessage='Off'
+                            />
+                        </label>
+                    </div>
+                </div>
+            );
+
+            const extraInfo = (
+                <span>
+                    <FormattedMessage
+                        id='user.settings.push_notifications.info'
+                        defaultMessage='Notification alerts are pushed to your mobile device when there is activity in Mattermost.'
+                    />
+                </span>
+            );
+
+            return (
+                <SettingItemMax
+                    title={Utils.localizeMessage('user.settings.notifications.push', 'Mobile push notifications')}
+                    extraInfo={extraInfo}
+                    inputs={inputs}
+                    submit={this.handleSubmit}
+                    server_error={this.state.serverError}
+                    updateSection={this.handleCancel}
+                />
+            );
+        }
+
+        let describe = '';
+        if (this.state.notifyPushLevel === 'all') {
+            describe = (
+                <FormattedMessage
+                    id='user.settings.push_notification.allActivity'
+                    defaultMessage='For all activity'
+                />
+            );
+        } else if (this.state.notifyPushLevel === 'none') {
+            describe = (
+                <FormattedMessage
+                    id='user.settings.push_notifications.off'
+                    defaultMessage='Off'
+                />
+            );
+        } else {
+            describe = (
+                <FormattedMessage
+                    id='user.settings.push_notifications.onlyMentions'
+                    defaultMessage='For mentions and direct messages'
+                />
+            );
+        }
+
+        handleUpdateDesktopSection = function updateDesktopSection() {
+            this.props.updateSection('push');
+        }.bind(this);
+
+        return (
+            <SettingItemMin
+                title={Utils.localizeMessage('user.settings.notifications.push', 'Mobile push notifications')}
+                describe={describe}
+                updateSection={handleUpdateDesktopSection}
+            />
+        );
+    }
     render() {
         const {formatMessage} = this.props.intl;
-        var serverError = null;
-        if (this.state.serverError) {
-            serverError = this.state.serverError;
-        }
+        const serverError = this.state.serverError;
 
         var user = this.props.user;
 
@@ -764,6 +901,11 @@ class NotificationsTab extends React.Component {
             );
         }
 
+        let pushNotificationSection;
+        if (global.window.mm_config.SendPushNotifications === 'true') {
+            pushNotificationSection = this.createPushNotificationSection();
+        }
+
         return (
             <div>
                 <div className='modal-header'>
@@ -809,6 +951,8 @@ class NotificationsTab extends React.Component {
                     <div className='divider-light'/>
                     {emailSection}
                     <div className='divider-light'/>
+                    {pushNotificationSection}
+                    <div className='divider-light'/>
                     {keysSection}
                     <div className='divider-dark'/>
                 </div>
diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index e75691663..164d57ae2 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -1390,6 +1390,11 @@
   "user.settings.modal.notifications": "Notifications",
   "user.settings.modal.security": "Security",
   "user.settings.modal.title": "Account Settings",
+  "user.settings.push_notification.off": "Off",
+  "user.settings.push_notification.onlyMentions": "For mentions and direct messages",
+  "user.settings.push_notification.allActivity": "For all activity",
+  "user.settings.push_notification.info": "Notification alerts are pushed to your mobile device when there is activity in Mattermost.",
+  "user.settings.notification.push": "Mobile push notifications",
   "user.settings.notification.allActivity": "For all activity",
   "user.settings.notification.soundConfig": "Please configure notification sounds in your browser settings",
   "user.settings.notifications.channelWide": "Channel-wide mentions \"@channel\"",