PLT-6297 Added post--pinned CSS class to pinned posts (#6303)

3 files changed, 130 insertions, 114 deletions

diff --git a/webapp/components/post_view/components/post.jsx b/webapp/components/post_view/components/post.jsx
index f5c96d2bc..8ca84aa20 100644
--- a/webapp/components/post_view/components/post.jsx
+++ b/webapp/components/post_view/components/post.jsx
@@ -1,32 +1,53 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import PostHeader from './post_header.jsx';
-import PostBody from './post_body.jsx';
+import React, {Component, PropTypes} from 'react';
+
 import ProfilePicture from 'components/profile_picture.jsx';
 
-import Constants from 'utils/constants.jsx';
-const ActionTypes = Constants.ActionTypes;
+import AppDispatcher from 'dispatcher/app_dispatcher.jsx';
 
-import * as Utils from 'utils/utils.jsx';
+import Constants, {ActionTypes} from 'utils/constants.jsx';
 import * as PostUtils from 'utils/post_utils.jsx';
-import AppDispatcher from 'dispatcher/app_dispatcher.jsx';
+import * as Utils from 'utils/utils.jsx';
+
+import PostBody from './post_body.jsx';
+import PostHeader from './post_header.jsx';
 
-import React from 'react';
+export default class Post extends Component {
+    static propTypes = {
+        post: PropTypes.object.isRequired,
+        parentPost: PropTypes.object,
+        user: PropTypes.object,
+        sameUser: PropTypes.bool,
+        sameRoot: PropTypes.bool,
+        hideProfilePic: PropTypes.bool,
+        isLastPost: PropTypes.bool,
+        isLastComment: PropTypes.bool,
+        shouldHighlight: PropTypes.bool,
+        displayNameType: PropTypes.string,
+        currentUser: PropTypes.object.isRequired,
+        center: PropTypes.bool,
+        compactDisplay: PropTypes.bool,
+        previewCollapsed: PropTypes.string,
+        commentCount: PropTypes.number,
+        isCommentMention: PropTypes.bool,
+        useMilitaryTime: PropTypes.bool.isRequired,
+        isFlagged: PropTypes.bool,
+        status: PropTypes.string,
+        isBusy: PropTypes.bool,
+        childComponentDidUpdateFunction: PropTypes.func
+    };
 
-export default class Post extends React.Component {
     constructor(props) {
         super(props);
 
-        this.handleCommentClick = this.handleCommentClick.bind(this);
-        this.handleDropdownOpened = this.handleDropdownOpened.bind(this);
-        this.forceUpdateInfo = this.forceUpdateInfo.bind(this);
-
         this.state = {
             dropdownOpened: false
         };
     }
-    handleCommentClick(e) {
+
+    handleCommentClick = (e) => {
         e.preventDefault();
 
         AppDispatcher.handleServerAction({
@@ -39,12 +60,14 @@ export default class Post extends React.Component {
             results: null
         });
     }
-    handleDropdownOpened(opened) {
+
+    handleDropdownOpened = (opened) => {
         this.setState({
             dropdownOpened: opened
         });
     }
-    forceUpdateInfo() {
+
+    forceUpdateInfo = () => {
         this.refs.info.forceUpdate();
         this.refs.header.forceUpdate();
     }
@@ -116,26 +139,17 @@ export default class Post extends React.Component {
 
         return false;
     }
-    render() {
-        const post = this.props.post;
-        const parentPost = this.props.parentPost;
-        const mattermostLogo = Constants.MATTERMOST_ICON_SVG;
-
-        if (!post.props) {
-            post.props = {};
-        }
 
-        let type = 'Post';
-        if (post.root_id && post.root_id.length > 0) {
-            type = 'Comment';
-        }
+    getClassName = (post, isSystemMessage, fromWebhook) => {
+        let className = 'post';
 
-        let hideControls = '';
         if (post.state === Constants.POST_DELETED || post.state === Constants.POST_FAILED) {
-            hideControls = 'post--hide-controls';
+            className += ' post--hide-controls';
         }
 
-        const commentCount = this.props.commentCount;
+        if (this.props.shouldHighlight) {
+            className += ' post--highlight';
+        }
 
         let rootUser;
         if (this.props.sameRoot) {
@@ -145,47 +159,64 @@ export default class Post extends React.Component {
         }
 
         let currentUserCss = '';
-        if (this.props.currentUser.id === post.user_id && !post.props.from_webhook && !PostUtils.isSystemMessage(post)) {
+        if (this.props.currentUser.id === post.user_id && !fromWebhook && !isSystemMessage) {
             currentUserCss = 'current--user';
         }
 
-        let timestamp = 0;
-        if (!this.props.user || this.props.user.last_picture_update == null) {
-            timestamp = this.props.currentUser.last_picture_update;
-        } else {
-            timestamp = this.props.user.last_picture_update;
-        }
-
         let sameUserClass = '';
         if (this.props.sameUser) {
             sameUserClass = 'same--user';
         }
 
-        let shouldHighlightClass = '';
-        if (this.props.shouldHighlight) {
-            shouldHighlightClass = 'post--highlight';
-        }
-
         let postType = '';
-        if (type !== 'Post') {
+        if (post.root_id && post.root_id.length > 0) {
             postType = 'post--comment';
-        } else if (commentCount > 0) {
+        } else if (this.props.commentCount > 0) {
             postType = 'post--root';
             sameUserClass = '';
             rootUser = '';
         }
 
-        let systemMessageClass = '';
-        if (PostUtils.isSystemMessage(post)) {
-            systemMessageClass = 'post--system';
+        if (isSystemMessage) {
+            className += ' post--system';
             sameUserClass = '';
             currentUserCss = '';
             postType = '';
             rootUser = '';
         }
 
+        if (this.props.compactDisplay) {
+            className += ' post--compact';
+        }
+
+        if (this.state.dropdownOpened) {
+            className += ' post--hovered';
+        }
+
+        if (post.is_pinned) {
+            className += ' post--pinned';
+        }
+
+        return className + ' ' + sameUserClass + ' ' + rootUser + ' ' + postType + ' ' + currentUserCss;
+    }
+
+    render() {
+        const post = this.props.post;
+        const parentPost = this.props.parentPost;
+        const mattermostLogo = Constants.MATTERMOST_ICON_SVG;
+
+        const isSystemMessage = PostUtils.isSystemMessage(post);
+        const fromWebhook = post.props && post.props.from_webhook === 'true';
+
+        let timestamp = 0;
+        if (!this.props.user || this.props.user.last_picture_update == null) {
+            timestamp = this.props.currentUser.last_picture_update;
+        } else {
+            timestamp = this.props.user.last_picture_update;
+        }
+
         let status = this.props.status;
-        if (post.props && post.props.from_webhook === 'true') {
+        if (fromWebhook) {
             status = null;
         }
 
@@ -198,13 +229,13 @@ export default class Post extends React.Component {
             />
         );
 
-        if (post.props && post.props.from_webhook) {
+        if (fromWebhook) {
             profilePic = (
                 <ProfilePicture
                     src={PostUtils.getProfilePicSrcForPost(post, timestamp)}
                 />
             );
-        } else if (PostUtils.isSystemMessage(post)) {
+        } else if (isSystemMessage) {
             profilePic = (
                 <span
                     className='icon'
@@ -218,10 +249,7 @@ export default class Post extends React.Component {
             centerClass = 'center';
         }
 
-        let compactClass = '';
         if (this.props.compactDisplay) {
-            compactClass = 'post--compact';
-
             if (post.props && post.props.from_webhook) {
                 profilePic = (
                     <ProfilePicture
@@ -243,11 +271,6 @@ export default class Post extends React.Component {
 
         const profilePicContainer = (<div className='post__img'>{profilePic}</div>);
 
-        let dropdownOpenedClass = '';
-        if (this.state.dropdownOpened) {
-            dropdownOpenedClass = 'post--hovered';
-        }
-
         return (
             <div
                 ref={(div) => {
@@ -256,7 +279,7 @@ export default class Post extends React.Component {
             >
                 <div
                     id={'post_' + post.id}
-                    className={'post ' + sameUserClass + ' ' + compactClass + ' ' + rootUser + ' ' + postType + ' ' + currentUserCss + ' ' + shouldHighlightClass + ' ' + systemMessageClass + ' ' + hideControls + ' ' + dropdownOpenedClass}
+                    className={this.getClassName(this.props.post, isSystemMessage, fromWebhook)}
                 >
                     <div className={'post__content ' + centerClass}>
                         {profilePicContainer}
@@ -265,7 +288,7 @@ export default class Post extends React.Component {
                                 ref='header'
                                 post={post}
                                 sameRoot={this.props.sameRoot}
-                                commentCount={commentCount}
+                                commentCount={this.props.commentCount}
                                 handleCommentClick={this.handleCommentClick}
                                 handleDropdownOpened={this.handleDropdownOpened}
                                 isLastComment={this.props.isLastComment}
@@ -298,27 +321,3 @@ export default class Post extends React.Component {
         );
     }
 }
-
-Post.propTypes = {
-    post: React.PropTypes.object.isRequired,
-    parentPost: React.PropTypes.object,
-    user: React.PropTypes.object,
-    sameUser: React.PropTypes.bool,
-    sameRoot: React.PropTypes.bool,
-    hideProfilePic: React.PropTypes.bool,
-    isLastPost: React.PropTypes.bool,
-    isLastComment: React.PropTypes.bool,
-    shouldHighlight: React.PropTypes.bool,
-    displayNameType: React.PropTypes.string,
-    currentUser: React.PropTypes.object.isRequired,
-    center: React.PropTypes.bool,
-    compactDisplay: React.PropTypes.bool,
-    previewCollapsed: React.PropTypes.string,
-    commentCount: React.PropTypes.number,
-    isCommentMention: React.PropTypes.bool,
-    useMilitaryTime: React.PropTypes.bool.isRequired,
-    isFlagged: React.PropTypes.bool,
-    status: React.PropTypes.string,
-    isBusy: React.PropTypes.bool,
-    childComponentDidUpdateFunction: React.PropTypes.func
-};
diff --git a/webapp/components/rhs_comment.jsx b/webapp/components/rhs_comment.jsx
index e7d55813d..fb0972804 100644
--- a/webapp/components/rhs_comment.jsx
+++ b/webapp/components/rhs_comment.jsx
@@ -360,6 +360,28 @@ export default class RhsComment extends React.Component {
         addReaction(this.props.post.channel_id, this.props.post.id, emojiName);
     }
 
+    getClassName = (post, isSystemMessage) => {
+        let className = 'post post--thread';
+
+        if (this.props.currentUser.id === post.user_id) {
+            className += ' current--user';
+        }
+
+        if (isSystemMessage) {
+            className += ' post--system';
+        }
+
+        if (this.props.compactDisplay) {
+            className += 'post--compact';
+        }
+
+        if (post.is_pinned) {
+            className += ' post--pinned';
+        }
+
+        return className;
+    }
+
     render() {
         const post = this.props.post;
         const flagIcon = Constants.FLAG_ICON_SVG;
@@ -369,11 +391,6 @@ export default class RhsComment extends React.Component {
         const isPending = post.state === Constants.POST_FAILED || post.state === Constants.POST_LOADING;
         const isSystemMessage = PostUtils.isSystemMessage(post);
 
-        var currentUserCss = '';
-        if (this.props.currentUser.id === post.user_id) {
-            currentUserCss = 'current--user';
-        }
-
         var timestamp = this.props.currentUser.last_picture_update;
 
         let status = this.props.status;
@@ -445,11 +462,6 @@ export default class RhsComment extends React.Component {
             postClass += ' post--edited';
         }
 
-        let systemMessageClass = '';
-        if (isSystemMessage) {
-            systemMessageClass = 'post--system';
-        }
-
         let profilePic = (
             <ProfilePicture
                 src={PostUtils.getProfilePicSrcForPost(post, timestamp)}
@@ -480,10 +492,7 @@ export default class RhsComment extends React.Component {
             );
         }
 
-        let compactClass = '';
         if (this.props.compactDisplay) {
-            compactClass = 'post--compact';
-
             if (post.props && post.props.from_webhook) {
                 profilePic = (
                     <ProfilePicture
@@ -646,7 +655,7 @@ export default class RhsComment extends React.Component {
         return (
             <div
                 ref={'post_body_' + post.id}
-                className={'post post--thread ' + currentUserCss + ' ' + compactClass + ' ' + systemMessageClass}
+                className={this.getClassName(post, isSystemMessage)}
             >
                 <div className='post__content'>
                     {profilePicContainer}
diff --git a/webapp/components/rhs_root_post.jsx b/webapp/components/rhs_root_post.jsx
index 023387bb4..65bc52f73 100644
--- a/webapp/components/rhs_root_post.jsx
+++ b/webapp/components/rhs_root_post.jsx
@@ -176,6 +176,27 @@ export default class RhsRootPost extends React.Component {
         addReaction(this.props.post.channel_id, this.props.post.id, emojiName);
     }
 
+    getClassName = (post, isSystemMessage) => {
+        let className = 'post post--root post--thread';
+        if (UserStore.getCurrentId() === post.user_id) {
+            className += ' current--user';
+        }
+
+        if (isSystemMessage) {
+            className += ' post--system';
+        }
+
+        if (this.props.compactDisplay) {
+            className += 'post--compact';
+        }
+
+        if (post.is_pinned) {
+            className += ' post--pinned';
+        }
+
+        return className;
+    }
+
     render() {
         const post = this.props.post;
         const user = this.props.user;
@@ -196,16 +217,6 @@ export default class RhsRootPost extends React.Component {
             type = 'Comment';
         }
 
-        var userCss = '';
-        if (UserStore.getCurrentId() === post.user_id) {
-            userCss = 'current--user';
-        }
-
-        var systemMessageClass = '';
-        if (isSystemMessage) {
-            systemMessageClass = 'post--system';
-        }
-
         var channelName;
         if (channel) {
             if (channel.type === 'D') {
@@ -493,11 +504,7 @@ export default class RhsRootPost extends React.Component {
             );
         }
 
-        let compactClass = '';
-        let postClass = '';
         if (this.props.compactDisplay) {
-            compactClass = 'post--compact';
-
             if (post.props && post.props.from_webhook) {
                 profilePic = (
                     <ProfilePicture
@@ -516,6 +523,7 @@ export default class RhsRootPost extends React.Component {
             }
         }
 
+        let postClass = '';
         if (PostUtils.isEdited(this.props.post)) {
             postClass += ' post--edited';
         }
@@ -581,7 +589,7 @@ export default class RhsRootPost extends React.Component {
         return (
             <div
                 id='thread--root'
-                className={'post post--root post--thread ' + userCss + ' ' + systemMessageClass + ' ' + compactClass}
+                className={this.getClassName(post, isSystemMessage)}
             >
                 <div className='post-right-channel__name'>{channelName}</div>
                 <div className='post__content'>