PLT-1326: Enable channel posts of type join or leave not trigger unread notifications

8 files changed, 60 insertions, 8 deletions

diff --git a/web/react/components/post.jsx b/web/react/components/post.jsx
index b32656bfc..786a4a325 100644
--- a/web/react/components/post.jsx
+++ b/web/react/components/post.jsx
@@ -173,6 +173,11 @@ export default class Post extends React.Component {
             shouldHighlightClass = 'post--highlight';
         }
 
+        let systemMessageClass = '';
+        if (utils.isSystemMessage(post)) {
+            systemMessageClass = 'post--system';
+        }
+
         let profilePic = null;
         if (!this.props.hideProfilePic) {
             let src = '/api/v1/users/' + post.user_id + '/image?time=' + timestamp + '&' + utils.getSessionIndex();
@@ -180,6 +185,8 @@ export default class Post extends React.Component {
                 if (post.props.override_icon_url) {
                     src = post.props.override_icon_url;
                 }
+            } else if (utils.isSystemMessage(post)) {
+                src = Constants.SYSTEM_MESSAGE_PROFILE_IMAGE;
             }
 
             profilePic = (
@@ -195,7 +202,7 @@ export default class Post extends React.Component {
             <div>
                 <div
                     id={'post_' + post.id}
-                    className={'post ' + sameUserClass + ' ' + rootUser + ' ' + postType + ' ' + currentUserCss + ' ' + shouldHighlightClass}
+                    className={'post ' + sameUserClass + ' ' + rootUser + ' ' + postType + ' ' + currentUserCss + ' ' + shouldHighlightClass + ' ' + systemMessageClass}
                 >
                     <div className='post__content'>
                         <div className='post__img'>{profilePic}</div>
diff --git a/web/react/components/post_header.jsx b/web/react/components/post_header.jsx
index ffc32f82c..76b3a64be 100644
--- a/web/react/components/post_header.jsx
+++ b/web/react/components/post_header.jsx
@@ -3,6 +3,9 @@
 
 import UserProfile from './user_profile.jsx';
 import PostInfo from './post_info.jsx';
+import * as Utils from '../utils/utils.jsx';
+
+import Constants from '../utils/constants.jsx';
 
 export default class PostHeader extends React.Component {
     constructor(props) {
@@ -27,6 +30,15 @@ export default class PostHeader extends React.Component {
             }
 
             botIndicator = <li className='col col__name bot-indicator'>{'BOT'}</li>;
+        } else if (Utils.isSystemMessage(post)) {
+            userProfile = (
+                <UserProfile
+                    userId={''}
+                    overwriteName={''}
+                    overwriteImage={Constants.SYSTEM_MESSAGE_PROFILE_IMAGE}
+                    disablePopover={true}
+                />
+            );
         }
 
         return (
diff --git a/web/react/components/posts_view.jsx b/web/react/components/posts_view.jsx
index d0eee5a23..740ce04f6 100644
--- a/web/react/components/posts_view.jsx
+++ b/web/react/components/posts_view.jsx
@@ -87,6 +87,7 @@ export default class PostsView extends React.Component {
             const post = posts[order[i]];
             const parentPost = posts[post.parent_id];
             const prevPost = posts[order[i + 1]];
+            const postUserId = Utils.isSystemMessage(post) ? '' : post.user_id;
 
             // If the post is a comment whose parent has been deleted, don't add it to the list.
             if (parentPost && parentPost.state === Constants.POST_DELETED) {
@@ -102,6 +103,7 @@ export default class PostsView extends React.Component {
                 const prevPostIsComment = Utils.isComment(prevPost);
                 const postFromWebhook = Boolean(post.props && post.props.from_webhook);
                 const prevPostFromWebhook = Boolean(prevPost.props && prevPost.props.from_webhook);
+                const prevPostUserId = Utils.isSystemMessage(prevPost) ? '' : prevPostUserId;
                 let prevWebhookName = '';
                 if (prevPost.props && prevPost.props.override_username) {
                     prevWebhookName = prevPost.props.override_username;
@@ -116,7 +118,7 @@ export default class PostsView extends React.Component {
                 //     the previous post was made within 5 minutes of the current post,
                 //     the previous post and current post are both from webhooks or both not,
                 //     the previous post and current post have the same webhook usernames
-                if (prevPost.user_id === post.user_id &&
+                if (prevPostUserId === postUserId &&
                         post.create_at - prevPost.create_at <= 1000 * 60 * 5 &&
                         postFromWebhook === prevPostFromWebhook &&
                         prevWebhookName === curWebhookName) {
@@ -144,7 +146,7 @@ export default class PostsView extends React.Component {
                 //     the current post is not a comment,
                 //     the previous post and current post are both from webhooks or both not,
                 //     the previous post and current post have the same webhook usernames
-                if (prevPost.user_id === post.user_id &&
+                if (prevPostUserId === postUserId &&
                         !prevPostIsComment &&
                         !postIsComment &&
                         postFromWebhook === prevPostFromWebhook &&
@@ -191,7 +193,7 @@ export default class PostsView extends React.Component {
                 );
             }
 
-            if (post.user_id !== userId &&
+            if (postUserId !== userId &&
                     this.props.messageSeparatorTime !== 0 &&
                     post.create_at > this.props.messageSeparatorTime &&
                     !renderedLastViewed) {
diff --git a/web/react/components/rhs_root_post.jsx b/web/react/components/rhs_root_post.jsx
index 0dd969ad0..0a37a6803 100644
--- a/web/react/components/rhs_root_post.jsx
+++ b/web/react/components/rhs_root_post.jsx
@@ -12,6 +12,8 @@ import twemoji from 'twemoji';
 import PostBodyAdditionalContent from './post_body_additional_content.jsx';
 import * as EventHelpers from '../dispatcher/event_helpers.jsx';
 
+import Constants from '../utils/constants.jsx';
+
 export default class RhsRootPost extends React.Component {
     constructor(props) {
         super(props);
@@ -58,6 +60,11 @@ export default class RhsRootPost extends React.Component {
             currentUserCss = 'current--user';
         }
 
+        var systemMessageClass = '';
+        if (utils.isSystemMessage(post)) {
+            systemMessageClass = 'post--system';
+        }
+
         var channelName;
         if (channel) {
             if (channel.type === 'D') {
@@ -156,6 +163,15 @@ export default class RhsRootPost extends React.Component {
             }
 
             botIndicator = <li className='col col__name bot-indicator'>{'BOT'}</li>;
+        } else if (utils.isSystemMessage(post)) {
+            userProfile = (
+                <UserProfile
+                    userId={''}
+                    overwriteName={''}
+                    overwriteImage={Constants.SYSTEM_MESSAGE_PROFILE_IMAGE}
+                    disablePopover={true}
+                />
+            );
         }
 
         let src = '/api/v1/users/' + post.user_id + '/image?time=' + timestamp + '&' + utils.getSessionIndex();
@@ -163,6 +179,8 @@ export default class RhsRootPost extends React.Component {
             if (post.props.override_icon_url) {
                 src = post.props.override_icon_url;
             }
+        } else if (utils.isSystemMessage(post)) {
+            src = Constants.SYSTEM_MESSAGE_PROFILE_IMAGE;
         }
 
         const profilePic = (
@@ -175,7 +193,7 @@ export default class RhsRootPost extends React.Component {
         );
 
         return (
-            <div className={'post post--root ' + currentUserCss}>
+            <div className={'post post--root ' + currentUserCss + ' ' + systemMessageClass}>
                 <div className='post-right-channel__name'>{channelName}</div>
                 <div className='post__content'>
                     <div className='post__img'>
diff --git a/web/react/components/user_profile.jsx b/web/react/components/user_profile.jsx
index ea104fedb..385cd0f52 100644
--- a/web/react/components/user_profile.jsx
+++ b/web/react/components/user_profile.jsx
@@ -65,11 +65,16 @@ export default class UserProfile extends React.Component {
             return <div>{name}</div>;
         }
 
+        var profileImg = '/api/v1/users/' + this.state.profile.id + '/image?time=' + this.state.profile.update_at + '&' + Utils.getSessionIndex();
+        if (this.props.overwriteImage) {
+            profileImg = this.props.overwriteImage;
+        }
+
         var dataContent = [];
         dataContent.push(
             <img
                 className='user-popover__image'
-                src={'/api/v1/users/' + this.state.profile.id + '/image?time=' + this.state.profile.update_at + '&' + Utils.getSessionIndex()}
+                src={profileImg}
                 height='128'
                 width='128'
                 key='user-popover-image'
@@ -130,10 +135,12 @@ export default class UserProfile extends React.Component {
 UserProfile.defaultProps = {
     userId: '',
     overwriteName: '',
+    overwriteImage: '',
     disablePopover: false
 };
 UserProfile.propTypes = {
     userId: React.PropTypes.string,
     overwriteName: React.PropTypes.string,
+    overwriteImage: React.PropTypes.string,
     disablePopover: React.PropTypes.bool
 };
diff --git a/web/react/stores/socket_store.jsx b/web/react/stores/socket_store.jsx
index 2e0769cc4..29aa32a08 100644
--- a/web/react/stores/socket_store.jsx
+++ b/web/react/stores/socket_store.jsx
@@ -163,7 +163,7 @@ function handleNewPostEvent(msg) {
     }
 
     // Send desktop notification
-    if (UserStore.getCurrentId() !== msg.user_id || post.props.from_webhook === 'true') {
+    if ((UserStore.getCurrentId() !== msg.user_id || post.props.from_webhook === 'true') && !Utils.isSystemMessage(post)) {
         const msgProps = msg.props;
 
         let mentions = [];
diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx
index 8164095b9..25a494d07 100644
--- a/web/react/utils/constants.jsx
+++ b/web/react/utils/constants.jsx
@@ -118,7 +118,9 @@ export default {
     POST_LOADING: 'loading',
     POST_FAILED: 'failed',
     POST_DELETED: 'deleted',
-    POST_TYPE_JOIN_LEAVE: 'join_leave',
+    POST_TYPE_JOIN_LEAVE: 'system_join_leave',
+    SYSTEM_MESSAGE_PREFIX: 'system_',
+    SYSTEM_MESSAGE_PROFILE_IMAGE: '/static/images/logo_compact.png',
     RESERVED_TEAM_NAMES: [
         'www',
         'web',
diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx
index 0a52f5b37..a1d800bca 100644
--- a/web/react/utils/utils.jsx
+++ b/web/react/utils/utils.jsx
@@ -1243,3 +1243,7 @@ export function getPostTerm(post) {
 export function isFeatureEnabled(feature) {
     return PreferenceStore.getPreference(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, Constants.FeatureTogglePrefix + feature.label, {value: 'false'}).value === 'true';
 }
+
+export function isSystemMessage(post) {
+    return post.type && (post.type.lastIndexOf(Constants.SYSTEM_MESSAGE_PREFIX) === 0);
+}
\ No newline at end of file