Merge pull request #1613 from florianorben/PLT-1326

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

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>

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 (

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) {

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'>

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
 };