diff --git a/webapp/components/post_view/components/post_header.jsx b/webapp/components/post_view/components/post_header.jsx index 5e0a8a5a4c..3b5df47d55 100644 --- a/webapp/components/post_view/components/post_header.jsx +++ b/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} diff --git a/webapp/components/post_view/components/post_info.jsx b/webapp/components/post_view/components/post_info.jsx index 1da3ecd240..509809c8ce 100644 --- a/webapp/components/post_view/components/post_info.jsx +++ b/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(
    • ); - } - if (this.props.post.is_pinned) { - dropdownContents.push( -
  • - - - -
    • - ); - } else { - dropdownContents.push( -
  • - + + +
    • + ); + } else { + dropdownContents.push( +
  • - - -
    • - ); + + + + + ); + } } if (this.canDelete) { @@ -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); - if (this.props.commentCount >= 1) { - showCommentClass = ' icon--show'; - } else { - commentCountText = ''; - } + 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 = ( ); - } - let react; - if (post.state !== Constants.POST_FAILED && - post.state !== Constants.POST_LOADING && - !Utils.isPostEphemeral(post) && - Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW)) { - react = ( - - this.setState({showEmojiPicker: false})} - target={() => ReactDOM.findDOMNode(this.refs['reactIcon_' + post.id])} + if (Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW)) { + react = ( + + this.setState({showEmojiPicker: false})} + target={() => ReactDOM.findDOMNode(this.refs['reactIcon_' + post.id])} - > - + - - - - + /> + + + + - ); + ); + } } let options; - if (Utils.isPostEphemeral(post)) { + if (isEphemeral) { options = (
  • {this.createRemovePostButton()}
    • ); - } else { - const dropdown = this.createDropdown(); + } else if (!isPending) { + const dropdown = this.createDropdown(isSystemMessage); + if (dropdown) { options = (
  • @@ -461,7 +460,7 @@ export default class PostInfo extends React.Component { } let flagTrigger; - if (!Utils.isPostEphemeral(post)) { + if (isEphemeral) { flagTrigger = ( - - - -
    • - ); + + + + + ); - if (post.is_pinned) { - dropdownContents.push( -
  • - - - -
    • - ); - } else { - dropdownContents.push( -
  • - + + +
    • + ); + } else { + dropdownContents.push( +
  • - - -
    • - ); + + + + + ); + } } if (this.canDelete) { @@ -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 && - post.state !== Constants.POST_LOADING && - !Utils.isPostEphemeral(post) && - Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW)) { - canReact = true; - } + const isEphemeral = Utils.isPostEphemeral(post); + 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) { @@ -412,7 +409,7 @@ export default class RhsComment extends React.Component { } botIndicator =
  • {'BOT'}
    • ; - } else if (PostUtils.isSystemMessage(post)) { + } else if (isSystemMessage) { userProfile = ( {this.createRemovePostButton()} ); - } else if (!PostUtils.isSystemMessage(post)) { + } else if (!isSystemMessage) { options = (
  • {reactOverlay} - {this.createDropdown()} + {this.createDropdown(isSystemMessage)} {react}
    • ); diff --git a/webapp/components/rhs_root_post.jsx b/webapp/components/rhs_root_post.jsx index b298853d87..9a9f83f0ca 100644 --- a/webapp/components/rhs_root_post.jsx +++ b/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 = (     - - - - - ); + + + + + ); - if (post.is_pinned) { - dropdownContents.push( -
  • - - - -
    • - ); - } else { - dropdownContents.push( -
  • - + + +
    • + ); + } else { + dropdownContents.push( +
  • - - -
    • - ); + + + + + ); + } } if (this.canDelete) { @@ -443,7 +442,7 @@ export default class RhsRootPost extends React.Component { } botIndicator =
  • {'BOT'}
    • ; - } else if (PostUtils.isSystemMessage(post)) { + } else if (isSystemMessage) { userProfile = (