PLT-6201/PLT-6220 Don't show pin or reaction options for system messages (#6010)

* PLT-6220 Removed ability to react to system messages

* PLT-6201 Removed ability to pin system messages

webapp/components/post_view/components/post_header.jsx

@@ -82,7 +82,6 @@ export default class PostHeader extends React.Component {
                         commentCount={this.props.commentCount}
                         handleCommentClick={this.props.handleCommentClick}
                         handleDropdownOpened={this.props.handleDropdownOpened}
-                        allowReply={!isSystemMessage}
                         isLastComment={this.props.isLastComment}
                         sameUser={this.props.sameUser}
                         currentUser={this.props.currentUser}

webapp/components/post_view/components/post_info.jsx

@@ -63,13 +63,8 @@ export default class PostInfo extends React.Component {
         $('#post_dropdown' + this.props.post.id).on('hidden.bs.dropdown', () => this.props.handleDropdownOpened(false));
     }
 
-    createDropdown() {
+    createDropdown(isSystemMessage) {
         const post = this.props.post;
-        const isSystemMessage = PostUtils.isSystemMessage(post);
-
-        if (post.state === Constants.POST_FAILED || post.state === Constants.POST_LOADING) {
-            return '';
-        }
 
         var type = 'Post';
         if (post.root_id && post.root_id.length > 0) {
@@ -82,7 +77,7 @@ export default class PostInfo extends React.Component {
             dataComments = this.props.commentCount;
         }
 
-        if (this.props.allowReply) {
+        if (!isSystemMessage) {
             dropdownContents.push(
                 <li
                     key='replyLink'
@@ -157,7 +152,6 @@ export default class PostInfo extends React.Component {
                     </a>
                 </li>
             );
-        }
 
             if (this.props.post.is_pinned) {
                 dropdownContents.push(
@@ -194,6 +188,7 @@ export default class PostInfo extends React.Component {
                     </li>
                 );
             }
+        }
 
         if (this.canDelete) {
             dropdownContents.push(
@@ -331,21 +326,28 @@ export default class PostInfo extends React.Component {
 
     render() {
         var post = this.props.post;
-        var comments = '';
-        var showCommentClass = '';
-        var commentCountText = this.props.commentCount;
         const flagIcon = Constants.FLAG_ICON_SVG;
 
         this.canDelete = PostUtils.canDeletePost(post);
         this.canEdit = PostUtils.canEditPost(post, this.editDisableAction);
 
+        const isEphemeral = Utils.isPostEphemeral(post);
+        const isPending = post.state === Constants.POST_FAILED || post.state === Constants.POST_LOADING;
+        const isSystemMessage = PostUtils.isSystemMessage(post);
+
+        let comments = null;
+        let react = null;
+        if (!isEphemeral && !isPending && !isSystemMessage) {
+            let showCommentClass;
+            let commentCountText;
             if (this.props.commentCount >= 1) {
                 showCommentClass = ' icon--show';
+                commentCountText = this.props.commentCount;
             } else {
+                showCommentClass = '';
                 commentCountText = '';
             }
 
-        if (post.state !== Constants.POST_FAILED && post.state !== Constants.POST_LOADING && !Utils.isPostEphemeral(post) && this.props.allowReply) {
             comments = (
                 <a
                     href='#'
@@ -361,13 +363,8 @@ export default class PostInfo extends React.Component {
                     </span>
                 </a>
             );
-        }
 
-        let react;
+            if (Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW)) {
-        if (post.state !== Constants.POST_FAILED &&
-            post.state !== Constants.POST_LOADING &&
-            !Utils.isPostEphemeral(post) &&
-            Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW)) {
                 react = (
                     <span>
                         <Overlay
@@ -396,16 +393,18 @@ export default class PostInfo extends React.Component {
 
                 );
             }
+        }
 
         let options;
-        if (Utils.isPostEphemeral(post)) {
+        if (isEphemeral) {
             options = (
                 <li className='col col__remove'>
                     {this.createRemovePostButton()}
                 </li>
             );
-        } else {
+        } else if (!isPending) {
-            const dropdown = this.createDropdown();
+            const dropdown = this.createDropdown(isSystemMessage);
+
             if (dropdown) {
                 options = (
                     <li className='col col__reply'>
@@ -461,7 +460,7 @@ export default class PostInfo extends React.Component {
         }
 
         let flagTrigger;
-        if (!Utils.isPostEphemeral(post)) {
+        if (isEphemeral) {
             flagTrigger = (
                 <OverlayTrigger
                     key={'flagtooltipkey' + flagVisible}
@@ -516,14 +515,12 @@ PostInfo.defaultProps = {
     post: null,
     commentCount: 0,
     isLastComment: false,
-    allowReply: false,
     sameUser: false
 };
 PostInfo.propTypes = {
     post: React.PropTypes.object.isRequired,
     commentCount: React.PropTypes.number.isRequired,
     isLastComment: React.PropTypes.bool.isRequired,
-    allowReply: React.PropTypes.bool.isRequired,
     handleCommentClick: React.PropTypes.func.isRequired,
     handleDropdownOpened: React.PropTypes.func.isRequired,
     sameUser: React.PropTypes.bool.isRequired,

webapp/components/rhs_comment.jsx

@@ -151,7 +151,7 @@ export default class RhsComment extends React.Component {
         unpinPost(this.props.post.channel_id, this.props.post.id);
     }
 
-    createDropdown() {
+    createDropdown(isSystemMessage) {
         const post = this.props.post;
 
         if (post.state === Constants.POST_FAILED || post.state === Constants.POST_LOADING) {
@@ -201,6 +201,7 @@ export default class RhsComment extends React.Component {
             }
         }
 
+        if (!isSystemMessage) {
             dropdownContents.push(
                 <li
                     key='rhs-root-permalink'
@@ -253,6 +254,7 @@ export default class RhsComment extends React.Component {
                     </li>
                 );
             }
+        }
 
         if (this.canDelete) {
             dropdownContents.push(
@@ -362,15 +364,10 @@ export default class RhsComment extends React.Component {
         const post = this.props.post;
         const flagIcon = Constants.FLAG_ICON_SVG;
         const mattermostLogo = Constants.MATTERMOST_ICON_SVG;
-        const isSystemMessage = PostUtils.isSystemMessage(post);
-        let canReact = false;
 
-        if (post.state !== Constants.POST_FAILED &&
+        const isEphemeral = Utils.isPostEphemeral(post);
-            post.state !== Constants.POST_LOADING &&
+        const isPending = post.state === Constants.POST_FAILED || post.state === Constants.POST_LOADING;
-            !Utils.isPostEphemeral(post) &&
+        const isSystemMessage = PostUtils.isSystemMessage(post);
-            Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW)) {
-            canReact = true;
-        }
 
         var currentUserCss = '';
         if (this.props.currentUser.id === post.user_id) {
@@ -412,7 +409,7 @@ export default class RhsComment extends React.Component {
             }
 
             botIndicator = <li className='col col__name bot-indicator'>{'BOT'}</li>;
-        } else if (PostUtils.isSystemMessage(post)) {
+        } else if (isSystemMessage) {
             userProfile = (
                 <UserProfile
                     user={{}}
@@ -474,7 +471,7 @@ export default class RhsComment extends React.Component {
             );
         }
 
-        if (PostUtils.isSystemMessage(post)) {
+        if (isSystemMessage) {
             profilePic = (
                 <span
                     className='icon'
@@ -556,7 +553,7 @@ export default class RhsComment extends React.Component {
         }
 
         let flagTrigger;
-        if (!Utils.isPostEphemeral(post)) {
+        if (isEphemeral) {
             flagTrigger = (
                 <OverlayTrigger
                     key={'commentflagtooltipkey' + flagVisible}
@@ -578,7 +575,7 @@ export default class RhsComment extends React.Component {
         let react;
         let reactOverlay;
 
-        if (canReact) {
+        if (!isEphemeral && !isPending && !isSystemMessage && Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW)) {
             react = (
                 <span>
                     <a
@@ -612,17 +609,17 @@ export default class RhsComment extends React.Component {
         }
 
         let options;
-        if (Utils.isPostEphemeral(post)) {
+        if (isEphemeral) {
             options = (
                 <li className='col col__remove'>
                     {this.createRemovePostButton()}
                 </li>
             );
-        } else if (!PostUtils.isSystemMessage(post)) {
+        } else if (!isSystemMessage) {
             options = (
                 <li className='col col__reply'>
                     {reactOverlay}
-                    {this.createDropdown()}
+                    {this.createDropdown(isSystemMessage)}
                     {react}
                 </li>
             );

webapp/components/rhs_root_post.jsx

@@ -182,18 +182,15 @@ export default class RhsRootPost extends React.Component {
         const mattermostLogo = Constants.MATTERMOST_ICON_SVG;
         var timestamp = user ? user.last_picture_update : 0;
         var channel = ChannelStore.get(post.channel_id);
-        let canReact = false;
         const flagIcon = Constants.FLAG_ICON_SVG;
-        if (post.state !== Constants.POST_FAILED &&
-            post.state !== Constants.POST_LOADING &&
-            !Utils.isPostEphemeral(post) &&
-            Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW)) {
-            canReact = true;
-        }
 
         this.canDelete = PostUtils.canDeletePost(post);
         this.canEdit = PostUtils.canEditPost(post, this.editDisableAction);
 
+        const isEphemeral = Utils.isPostEphemeral(post);
+        const isPending = post.state === Constants.POST_FAILED || post.state === Constants.POST_LOADING;
+        const isSystemMessage = PostUtils.isSystemMessage(post);
+
         var type = 'Post';
         if (post.root_id.length > 0) {
             type = 'Comment';
@@ -205,7 +202,7 @@ export default class RhsRootPost extends React.Component {
         }
 
         var systemMessageClass = '';
-        if (PostUtils.isSystemMessage(post)) {
+        if (isSystemMessage) {
             systemMessageClass = 'post--system';
         }
 
@@ -226,7 +223,7 @@ export default class RhsRootPost extends React.Component {
         let react;
         let reactOverlay;
 
-        if (canReact) {
+        if (!isEphemeral && !isPending && !isSystemMessage && Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW)) {
             react = (
                 <span>
                     <a
@@ -298,6 +295,7 @@ export default class RhsRootPost extends React.Component {
             }
         }
 
+        if (!isSystemMessage) {
             dropdownContents.push(
                 <li
                     key='rhs-root-permalink'
@@ -350,6 +348,7 @@ export default class RhsRootPost extends React.Component {
                     </li>
                 );
             }
+        }
 
         if (this.canDelete) {
             dropdownContents.push(
@@ -443,7 +442,7 @@ export default class RhsRootPost extends React.Component {
             }
 
             botIndicator = <li className='col col__name bot-indicator'>{'BOT'}</li>;
-        } else if (PostUtils.isSystemMessage(post)) {
+        } else if (isSystemMessage) {
             userProfile = (
                 <UserProfile
                     user={{}}
@@ -485,7 +484,7 @@ export default class RhsRootPost extends React.Component {
             );
         }
 
-        if (PostUtils.isSystemMessage(post)) {
+        if (isSystemMessage) {
             profilePic = (
                 <span
                     className='icon'