PLT-914 Add mention notifications for replies on a comment thread (#3130)

* PLT-914 Add mention notifications for replies on a comment thread

* remove useless store method
fix highlighting comments posted before th user write something to thread

* refactor out isCommentMention function after rebase

* change comment bar highlighting to replay icon mention highlighting

* settings and always visible highlight

* fix unit tests for new settings

* change highlight behaviour
- if any message in comment thread generates mention - all thread is highlighted
- remove always visible highlightion

* fix bug about the textarea in the center channel not clearing

* fix default settings value notify_props.comments

* do not highlight own comments if there is no other user's messages in thread

* refactor out ReactDOM.findDOMNode

* refactor out using of UserStore from component

webapp/components/user_settings/user_settings_notifications.jsx

@@ -2,7 +2,6 @@
 // See License.txt for license information.
 
 import $ from 'jquery';
-import ReactDOM from 'react-dom';
 import SettingItemMin from '../setting_item_min.jsx';
 import SettingItemMax from '../setting_item_max.jsx';
 
@@ -26,6 +25,10 @@ function getNotificationsStateFromStores() {
     if (user.notify_props && user.notify_props.desktop) {
         desktop = user.notify_props.desktop;
     }
+    var comments = 'never';
+    if (user.notify_props && user.notify_props.comments) {
+        comments = user.notify_props.comments;
+    }
     var email = 'true';
     if (user.notify_props && user.notify_props.email) {
         email = user.notify_props.email;
@@ -82,7 +85,8 @@ function getNotificationsStateFromStores() {
         customKeys,
         customKeysChecked: customKeys.length > 0,
         firstNameKey,
-        channelKey
+        channelKey,
+        notifyCommentsLevel: comments
     };
 }
 
@@ -103,6 +107,10 @@ const holders = defineMessages({
         id: 'user.settings.notifications.wordsTrigger',
         defaultMessage: 'Words that trigger mentions'
     },
+    comments: {
+        id: 'user.settings.notifications.comments',
+        defaultMessage: 'Comment threads notifications'
+    },
     close: {
         id: 'user.settings.notifications.close',
         defaultMessage: 'Close'
@@ -140,6 +148,7 @@ class NotificationsTab extends React.Component {
         data.desktop_sound = this.state.enableSound;
         data.desktop = this.state.notifyLevel;
         data.push = this.state.notifyPushLevel;
+        data.comments = this.state.notifyCommentsLevel;
 
         var mentionKeys = [];
         if (this.state.usernameKey) {
@@ -195,21 +204,26 @@ class NotificationsTab extends React.Component {
     }
     handleNotifyRadio(notifyLevel) {
         this.setState({notifyLevel});
-        ReactDOM.findDOMNode(this.refs.wrapper).focus();
+        this.refs.wrapper.focus();
+    }
+
+    handleNotifyCommentsRadio(notifyCommentsLevel) {
+        this.setState({notifyCommentsLevel});
+        this.refs.wrapper.focus();
     }
 
     handlePushRadio(notifyPushLevel) {
         this.setState({notifyPushLevel});
-        ReactDOM.findDOMNode(this.refs.wrapper).focus();
+        this.refs.wrapper.focus();
     }
 
     handleEmailRadio(enableEmail) {
         this.setState({enableEmail});
-        ReactDOM.findDOMNode(this.refs.wrapper).focus();
+        this.refs.wrapper.focus();
     }
     handleSoundRadio(enableSound) {
         this.setState({enableSound});
-        ReactDOM.findDOMNode(this.refs.wrapper).focus();
+        this.refs.wrapper.focus();
     }
     updateUsernameKey(val) {
         this.setState({usernameKey: val});
@@ -224,10 +238,10 @@ class NotificationsTab extends React.Component {
         this.setState({channelKey: val});
     }
     updateCustomMentionKeys() {
-        var checked = ReactDOM.findDOMNode(this.refs.customcheck).checked;
+        var checked = this.refs.customcheck.checked;
 
         if (checked) {
-            var text = ReactDOM.findDOMNode(this.refs.custommentions).value;
+            var text = this.refs.custommentions.value;
 
             // remove all spaces and split string into individual keys
             this.setState({customKeys: text.replace(/ /g, ''), customKeysChecked: true});
@@ -236,7 +250,7 @@ class NotificationsTab extends React.Component {
         }
     }
     onCustomChange() {
-        ReactDOM.findDOMNode(this.refs.customcheck).checked = true;
+        this.refs.customcheck.checked = true;
         this.updateCustomMentionKeys();
     }
     createPushNotificationSection() {
@@ -902,6 +916,126 @@ class NotificationsTab extends React.Component {
             );
         }
 
+        var commentsSection;
+        var handleUpdateCommentsSection;
+        if (this.props.activeSection === 'comments') {
+            var commentsActive = [false, false, false];
+            if (this.state.notifyCommentsLevel === 'never') {
+                commentsActive[2] = true;
+            } else if (this.state.notifyCommentsLevel === 'root') {
+                commentsActive[1] = true;
+            } else {
+                commentsActive[0] = true;
+            }
+
+            let inputs = [];
+
+            inputs.push(
+                <div key='userNotificationLevelOption'>
+                    <div className='radio'>
+                        <label>
+                            <input
+                                type='radio'
+                                name='commentsNotificationLevel'
+                                checked={commentsActive[0]}
+                                onChange={this.handleNotifyCommentsRadio.bind(this, 'any')}
+                            />
+                            <FormattedMessage
+                                id='user.settings.notifications.commentsAny'
+                                defaultMessage='Mention any comments in a thread you participated in (This will include both mentions to your root post and any comments after you commented on a post)'
+                            />
+                        </label>
+                        <br/>
+                    </div>
+                    <div className='radio'>
+                        <label>
+                            <input
+                                type='radio'
+                                name='commentsNotificationLevel'
+                                checked={commentsActive[1]}
+                                onChange={this.handleNotifyCommentsRadio.bind(this, 'root')}
+                            />
+                            <FormattedMessage
+                                id='user.settings.notifications.commentsRoot'
+                                defaultMessage='Mention any comments on your post'
+                            />
+                        </label>
+                        <br/>
+                    </div>
+                    <div className='radio'>
+                        <label>
+                            <input
+                                type='radio'
+                                name='commentsNotificationLevel'
+                                checked={commentsActive[2]}
+                                onChange={this.handleNotifyCommentsRadio.bind(this, 'never')}
+                            />
+                            <FormattedMessage
+                                id='user.settings.notifications.commentsNever'
+                                defaultMessage='No mentions for comments'
+                            />
+                        </label>
+                    </div>
+                </div>
+            );
+
+            const extraInfo = (
+                <span>
+                    <FormattedMessage
+                        id='user.settings.notifications.commentsInfo'
+                        defaultMessage='Mode of triggering notifications on posts in comment threads you participated in.'
+                    />
+                </span>
+            );
+
+            commentsSection = (
+                <SettingItemMax
+                    title={formatMessage(holders.comments)}
+                    extraInfo={extraInfo}
+                    inputs={inputs}
+                    submit={this.handleSubmit}
+                    server_error={serverError}
+                    updateSection={this.handleCancel}
+                />
+            );
+        } else {
+            let describe = '';
+            if (this.state.notifyCommentsLevel === 'never') {
+                describe = (
+                    <FormattedMessage
+                        id='user.settings.notifications.commentsNever'
+                        defaultMessage='No mentions for comments'
+                    />
+                );
+            } else if (this.state.notifyCommentsLevel === 'root') {
+                describe = (
+                    <FormattedMessage
+                        id='user.settings.notifications.commentsRoot'
+                        defaultMessage='Mention any comments on your post'
+                    />
+                );
+            } else {
+                describe = (
+                    <FormattedMessage
+                        id='user.settings.notifications.commentsAny'
+                        defaultMessage='Mention any comments in a thread you participated in (This will include both mentions to your root post and any comments after you commented on a post)'
+                    />
+                );
+            }
+
+            handleUpdateCommentsSection = function updateCommentsSection() {
+                this.props.updateSection('comments');
+            }.bind(this);
+
+            commentsSection = (
+                <SettingItemMin
+                    title={formatMessage(holders.comments)}
+                    describe={describe}
+                    updateSection={handleUpdateCommentsSection}
+                />
+            );
+        }
+
         const pushNotificationSection = this.createPushNotificationSection();
 
         return (
@@ -952,6 +1086,8 @@ class NotificationsTab extends React.Component {
                     {pushNotificationSection}
                     <div className='divider-light'/>
                     {keysSection}
+                    <div className='divider-light'/>
+                    {commentsSection}
                     <div className='divider-dark'/>
                 </div>
             </div>