Merge pull request #106 from mattermost/mm-1119

fixes mm-1119 adds @all and @channel mention capabilites

7 files changed, 74 insertions, 11 deletions

diff --git a/web/react/components/mention.jsx b/web/react/components/mention.jsx
index 86a423138..3c33ddf49 100644
--- a/web/react/components/mention.jsx
+++ b/web/react/components/mention.jsx
@@ -6,10 +6,16 @@ module.exports = React.createClass({
         this.props.handleClick(this.props.username);
     },
     render: function() {
+        var icon;
+        if (this.props.id != null) {
+            icon = <span><img className="mention-img" src={"/api/v1/users/" + this.props.id + "/image"}/></span>;
+        } else {
+            icon = <span><i className="mention-img fa fa-users fa-2x"></i></span>;
+        }
         return (
             <div className="mentions-name" onClick={this.handleClick}>
-                <img className="mention-img" src={"/api/v1/users/" + this.props.id + "/image"}/>
-                <span>@{this.props.username}</span><span className="mention-fullname">{this.props.name}</span>
+                <div className="pull-left">{icon}</div>
+                <div className="pull-left mention-align"><span>@{this.props.username}</span><span className="mention-fullname">{this.props.secondary_text}</span></div>
             </div>
         );
     }
diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx
index 8b7e25b04..eb21e0efe 100644
--- a/web/react/components/mention_list.jsx
+++ b/web/react/components/mention_list.jsx
@@ -74,6 +74,18 @@ module.exports = React.createClass({
             users.push(profiles[id]);
         }
 
+        var all = {};
+        all.username = "all";
+        all.full_name = "";
+        all.secondary_text = "Notifies everyone in the team";
+        users.push(all);
+
+        var channel = {};
+        channel.username = "channel";
+        channel.full_name = "";
+        channel.secondary_text = "Notifies everyone in the channel";
+        users.push(channel);
+
         users.sort(function(a,b) {
             if (a.username < b.username) return -1;
             if (a.username > b.username) return 1;
@@ -91,6 +103,7 @@ module.exports = React.createClass({
                 var splitName = users[i].full_name.split(' ');
                 firstName = splitName[0].toLowerCase();
                 lastName = splitName.length > 1 ? splitName[splitName.length-1].toLowerCase() : "";
+                users[i].secondary_text = users[i].full_name;
             }
 
             if (firstName.lastIndexOf(mentionText,0) === 0
@@ -99,7 +112,7 @@ module.exports = React.createClass({
                     <Mention
                         ref={'mention' + index}
                         username={users[i].username}
-                        name={users[i].full_name}
+                        secondary_text={users[i].secondary_text}
                         id={users[i].id}
                         handleClick={this.handleClick} />
                 );
diff --git a/web/react/components/textbox.jsx b/web/react/components/textbox.jsx
index 7a4762e07..934e863a2 100644
--- a/web/react/components/textbox.jsx
+++ b/web/react/components/textbox.jsx
@@ -153,7 +153,7 @@ module.exports = React.createClass({
         var mentions = [];
         for (var i = 0; i < matches.length; i++) {
             var m = matches[i].substring(1,matches[i].length).trim();
-            if (m in profileMap && mentions.indexOf(m) === -1) {
+            if ((m in profileMap && mentions.indexOf(m) === -1) || Constants.SPECIAL_MENTIONS.indexOf(m) !== -1) {
                 mentions.push(m);
             }
         }
diff --git a/web/react/components/user_settings.jsx b/web/react/components/user_settings.jsx
index 147973fb7..f97a06db3 100644
--- a/web/react/components/user_settings.jsx
+++ b/web/react/components/user_settings.jsx
@@ -20,11 +20,10 @@ function getNotificationsStateFromStores() {
     var mention_key = false;
     var custom_keys = "";
     var first_name_key = false;
+    var all_key = false;
+    var channel_key = false;
 
-    if (!user.notify_props) {
-        mention_keys = user.username;
-        if (user.full_name.length > 0) mention_keys += ","+ user.full_name.split(" ")[0];
-    } else {
+    if (user.notify_props) {
         if (user.notify_props.mention_keys !== undefined) {
             var keys = user.notify_props.mention_keys.split(',');
 
@@ -48,9 +47,17 @@ function getNotificationsStateFromStores() {
         if (user.notify_props.first_name !== undefined) {
             first_name_key = user.notify_props.first_name === "true";
         }
+
+        if (user.notify_props.all !== undefined) {
+            all_key = user.notify_props.all === "true";
+        }
+
+        if (user.notify_props.channel !== undefined) {
+            channel_key = user.notify_props.channel === "true";
+        }
     }
 
-    return { notify_level: desktop, enable_email: email, enable_sound: sound, username_key: username_key, mention_key: mention_key, custom_keys: custom_keys, custom_keys_checked: custom_keys.length > 0, first_name_key: first_name_key };
+    return { notify_level: desktop, enable_email: email, enable_sound: sound, username_key: username_key, mention_key: mention_key, custom_keys: custom_keys, custom_keys_checked: custom_keys.length > 0, first_name_key: first_name_key, all_key: all_key, channel_key: channel_key };
 }
 
 
@@ -73,6 +80,8 @@ var NotificationsTab = React.createClass({
 
         data["mention_keys"] = string_keys;
         data["first_name"] = this.state.first_name_key ? "true" : "false";
+        data["all"] = this.state.all_key ? "true" : "false";
+        data["channel"] = this.state.channel_key ? "true" : "false";
 
         client.updateUserNotifyProps(data,
             function(data) {
@@ -120,6 +129,12 @@ var NotificationsTab = React.createClass({
     updateFirstNameKey: function(val) {
         this.setState({ first_name_key: val });
     },
+    updateAllKey: function(val) {
+        this.setState({ all_key: val });
+    },
+    updateChannelKey: function(val) {
+        this.setState({ channel_key: val });
+    },
     updateCustomMentionKeys: function() {
         var checked = this.refs.customcheck.getDOMNode().checked;
 
@@ -343,6 +358,26 @@ var NotificationsTab = React.createClass({
                 <div>
                     <div className="checkbox">
                         <label>
+                            <input type="checkbox" checked={this.state.all_key} onChange={function(e){self.updateAllKey(e.target.checked);}}>{'Team-wide mentions "@all"'}</input>
+                        </label>
+                    </div>
+                </div>
+            );
+
+            inputs.push(
+                <div>
+                    <div className="checkbox">
+                        <label>
+                            <input type="checkbox" checked={this.state.channel_key} onChange={function(e){self.updateChannelKey(e.target.checked);}}>{'Channel-wide mentions "@channel"'}</input>
+                        </label>
+                    </div>
+                </div>
+            );
+
+            inputs.push(
+                <div>
+                    <div className="checkbox">
+                        <label>
                             <input ref="customcheck" type="checkbox" checked={this.state.custom_keys_checked} onChange={this.updateCustomMentionKeys}>{'Other non-case sensitive words, separated by commas:'}</input>
                         </label>
                     </div>
@@ -369,6 +404,8 @@ var NotificationsTab = React.createClass({
             }
             if (this.state.username_key) keys.push(this.props.user.username);
             if (this.state.mention_key) keys.push('@'+this.props.user.username);
+            if (this.state.all_key) keys.push('@all');
+            if (this.state.channel_key) keys.push('@channel');
             if (this.state.custom_keys.length > 0) keys = keys.concat(this.state.custom_keys.split(','));
 
             var describe = "";
diff --git a/web/react/stores/user_store.jsx b/web/react/stores/user_store.jsx
index bbca92c84..e1df4879f 100644
--- a/web/react/stores/user_store.jsx
+++ b/web/react/stores/user_store.jsx
@@ -240,6 +240,9 @@ var UserStore = assign({}, EventEmitter.prototype, {
         if (first.length > 0) keys.push(first);
       }
 
+      if (user.notify_props.all === "true") keys.push('@all');
+      if (user.notify_props.channel === "true") keys.push('@channel');
+
       return keys;
     } else {
       return [];
diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx
index a5124afe2..3aadfb4b0 100644
--- a/web/react/utils/constants.jsx
+++ b/web/react/utils/constants.jsx
@@ -36,6 +36,7 @@ module.exports = {
     SERVER_ACTION: null,
     VIEW_ACTION: null
   }),
+  SPECIAL_MENTIONS: ['all', 'channel'],
   CHARACTER_LIMIT: 4000,
   IMAGE_TYPES: ['jpg', 'gif', 'bmp', 'png'],
   AUDIO_TYPES: ['mp3', 'wav', 'wma', 'm4a', 'flac', 'aac'],
diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx
index 75c583c8f..d50a044bc 100644
--- a/web/react/utils/utils.jsx
+++ b/web/react/utils/utils.jsx
@@ -421,10 +421,13 @@ module.exports.textToJsx = function(text, options) {
                 highlightSearchClass = " search-highlight";
             }
 
-            if (explicitMention && UserStore.getProfileByUsername(explicitMention[1])) {
+            if (explicitMention &&
+                (UserStore.getProfileByUsername(explicitMention[1]) ||
+                Constants.SPECIAL_MENTIONS.indexOf(explicitMention[1]) !== -1))
+            {
                 var name = explicitMention[1];
                 // do both a non-case sensitive and case senstive check
-                var mClass = (name.toLowerCase() in implicitKeywords || name in implicitKeywords) ? mentionClass : "";
+                var mClass = (('@'+name.toLowerCase()) in implicitKeywords || ('@'+name) in implicitKeywords) ? mentionClass : "";
 
                 var suffix = word.match(puncEndRegex);
                 var prefix = word.match(puncStartRegex);