diff options
Diffstat (limited to 'webapp/components')
-rw-r--r-- | webapp/components/post_view/components/post_body.jsx | 18 | ||||
-rw-r--r-- | webapp/components/post_view/components/post_message_view.jsx | 57 | ||||
-rw-r--r-- | webapp/components/post_view/components/system_message_helpers.jsx | 228 | ||||
-rw-r--r-- | webapp/components/rhs_comment.jsx | 10 | ||||
-rw-r--r-- | webapp/components/rhs_root_post.jsx | 3 |
5 files changed, 276 insertions, 40 deletions
diff --git a/webapp/components/post_view/components/post_body.jsx b/webapp/components/post_view/components/post_body.jsx index e690b3702..8b650423f 100644 --- a/webapp/components/post_view/components/post_body.jsx +++ b/webapp/components/post_view/components/post_body.jsx @@ -156,22 +156,6 @@ export default class PostBody extends React.Component { ); } - let message; - if (this.props.post.state === Constants.POST_DELETED) { - message = ( - <p> - <FormattedMessage - id='post_body.deleted' - defaultMessage='(message deleted)' - /> - </p> - ); - } else { - message = ( - <PostMessageContainer post={this.props.post}/> - ); - } - const messageWrapper = ( <div key={`${post.id}_message`} @@ -179,7 +163,7 @@ export default class PostBody extends React.Component { className={postClass} > {loading} - {message} + <PostMessageContainer post={this.props.post}/> </div> ); diff --git a/webapp/components/post_view/components/post_message_view.jsx b/webapp/components/post_view/components/post_message_view.jsx index eff791aec..371dd64eb 100644 --- a/webapp/components/post_view/components/post_message_view.jsx +++ b/webapp/components/post_view/components/post_message_view.jsx @@ -4,9 +4,12 @@ import React from 'react'; import {FormattedMessage} from 'react-intl'; +import Constants from 'utils/constants.jsx'; +import * as PostUtils from 'utils/post_utils.jsx'; import * as TextFormatting from 'utils/text_formatting.jsx'; import * as Utils from 'utils/utils.jsx'; -import * as PostUtils from 'utils/post_utils.jsx'; + +import {renderSystemMessage} from './system_message_helpers.jsx'; export default class PostMessageView extends React.Component { static propTypes = { @@ -29,6 +32,14 @@ export default class PostMessageView extends React.Component { return true; } + if (nextProps.post.state !== this.props.post.state) { + return true; + } + + if (nextProps.post.type !== this.props.post.type) { + return true; + } + // emojis are immutable if (nextProps.emojis !== this.props.emojis) { return true; @@ -49,26 +60,43 @@ export default class PostMessageView extends React.Component { return false; } - editedIndicator() { + renderDeletedPost() { return ( - PostUtils.isEdited(this.props.post) ? - <span className='edited'> - <FormattedMessage - id='post_message_view.edited' - defaultMessage='(edited)' - /> - </span> : - '' + <p> + <FormattedMessage + id='post_body.deleted' + defaultMessage='(message deleted)' + /> + </p> + ); + } + + renderEditedIndicator() { + if (!PostUtils.isEdited(this.props.post)) { + return null; + } + + return ( + <span className='edited'> + <FormattedMessage + id='post_message_view.edited' + defaultMessage='(edited)' + /> + </span> ); } render() { + if (this.props.post.state === Constants.POST_DELETED) { + return this.renderDeletedPost(); + } + if (!this.props.enableFormatting) { return ( <span> {this.props.post.message} - {this.editedIndicator()} + {this.renderEditedIndicator()} </span> ); } @@ -82,13 +110,18 @@ export default class PostMessageView extends React.Component { team: this.props.team }); + const renderedSystemMessage = renderSystemMessage(this.props.post, options); + if (renderedSystemMessage) { + return <div>{renderedSystemMessage}</div>; + } + return ( <div> <span onClick={Utils.handleFormattedTextClick} dangerouslySetInnerHTML={{__html: TextFormatting.formatText(this.props.post.message, options)}} /> - {this.editedIndicator()} + {this.renderEditedIndicator()} </div> ); } diff --git a/webapp/components/post_view/components/system_message_helpers.jsx b/webapp/components/post_view/components/system_message_helpers.jsx new file mode 100644 index 000000000..6f6454599 --- /dev/null +++ b/webapp/components/post_view/components/system_message_helpers.jsx @@ -0,0 +1,228 @@ +// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import React from 'react'; +import {FormattedMessage} from 'react-intl'; + +import {PostTypes} from 'utils/constants.jsx'; +import {formatText} from 'utils/text_formatting.jsx'; + +function renderFormattedText(value, options) { + return <span dangerouslySetInnerHTML={{__html: formatText(value, options)}}/>; +} + +function renderJoinChannelMessage(post, options) { + const username = renderFormattedText(post.props.username, options); + + return ( + <FormattedMessage + id='api.channel.join_channel.post_and_forget' + defaultMessage='{username} has joined the channel.' + values={{username}} + /> + ); +} + +function renderLeaveChannelMessage(post, options) { + const username = renderFormattedText(post.props.username, options); + + return ( + <FormattedMessage + id='api.channel.leave.left' + defaultMessage='{username} has left the channel.' + values={{username}} + /> + ); +} + +function renderAddToChannelMessage(post, options) { + const username = renderFormattedText(post.props.username, options); + const addedUsername = renderFormattedText(post.props.addedUsername, options); + + return ( + <FormattedMessage + id='api.channel.add_member.added' + defaultMessage='{addedUsername} added to the channel by {username}' + values={{ + username, + addedUsername + }} + /> + ); +} + +function renderRemoveFromChannelMessage(post, options) { + const removedUsername = renderFormattedText(post.props.removedUsername, options); + + return ( + <FormattedMessage + id='api.channel.remove_member.removed' + defaultMessage='{removedUsername} was removed from the channel' + values={{ + removedUsername + }} + /> + ); +} + +function renderHeaderChangeMessage(post, options) { + if (!post.props.username) { + return null; + } + + const headerOptions = { + ...options, + singleline: true + }; + + const username = renderFormattedText(post.props.username, options); + const oldHeader = post.props.old_header ? renderFormattedText(post.props.old_header, headerOptions) : null; + const newHeader = post.props.new_header ? renderFormattedText(post.props.new_header, headerOptions) : null; + + if (post.props.new_header) { + if (post.props.old_header) { + return ( + <FormattedMessage + id='api.channel.post_update_channel_header_message_and_forget.updated_from' + defaultMessage='{username} updated the channel header from: {old} to: {new}' + values={{ + username, + old: oldHeader, + new: newHeader + }} + /> + ); + } + + return ( + <FormattedMessage + id='api.channel.post_update_channel_header_message_and_forget.updated_to' + defaultMessage='{username} updated the channel header to: {new}' + values={{ + username, + new: newHeader + }} + /> + ); + } else if (post.props.old_header) { + return ( + <FormattedMessage + id='api.channel.post_update_channel_header_message_and_forget.removed' + defaultMessage='{username} removed the channel header (was: {old})' + values={{ + username, + old: oldHeader + }} + /> + ); + } + + return null; +} + +function renderDisplayNameChangeMessage(post, options) { + if (!(post.props.username && post.props.old_displayname && post.props.new_displayname)) { + return null; + } + + const username = renderFormattedText(post.props.username, options); + const oldDisplayName = post.props.old_displayname; + const newDisplayName = post.props.new_displayname; + + return ( + <FormattedMessage + id='api.channel.post_update_channel_displayname_message_and_forget.updated_from' + defaultMessage='{username} updated the channel display name from: {old} to: {new}' + values={{ + username, + old: oldDisplayName, + new: newDisplayName + }} + /> + ); +} + +function renderPurposeChangeMessage(post, options) { + if (!post.props.username) { + return null; + } + + const username = renderFormattedText(post.props.username, options); + const oldPurpose = post.props.old_purpose; + const newPurpose = post.props.new_purpose; + + if (post.props.new_purpose) { + if (post.props.old_purpose) { + return ( + <FormattedMessage + id='app.channel.post_update_channel_purpose_message.updated_from' + defaultMessage='{username} updated the channel purpose from: {old} to: {new}' + values={{ + username, + old: oldPurpose, + new: newPurpose + }} + /> + ); + } + + return ( + <FormattedMessage + id='app.channel.post_update_channel_purpose_message.updated_to' + defaultMessage='{username} updated the channel purpose to: {new}' + values={{ + username, + new: newPurpose + }} + /> + ); + } else if (post.props.old_purpose) { + return ( + <FormattedMessage + id='app.channel.post_update_channel_purpose_message.removed' + defaultMessage='{username} removed the channel purpose (was: {old})' + values={{ + username, + old: oldPurpose + }} + /> + ); + } + + return null; +} + +function renderChannelDeletedMessage(post, options) { + if (!post.props.username) { + return null; + } + + const username = renderFormattedText(post.props.username, options); + + return ( + <FormattedMessage + id='api.channel.delete_channel.archived' + defaultMessage='{username} has archived the channel.' + values={{username}} + /> + ); +} + +const systemMessageRenderers = { + [PostTypes.JOIN_CHANNEL]: renderJoinChannelMessage, + [PostTypes.LEAVE_CHANNEL]: renderLeaveChannelMessage, + [PostTypes.ADD_TO_CHANNEL]: renderAddToChannelMessage, + [PostTypes.REMOVE_FROM_CHANNEL]: renderRemoveFromChannelMessage, + [PostTypes.HEADER_CHANGE]: renderHeaderChangeMessage, + [PostTypes.DISPLAYNAME_CHANGE]: renderDisplayNameChangeMessage, + [PostTypes.PURPOSE_CHANGE]: renderPurposeChangeMessage, + [PostTypes.CHANNEL_DELETED]: renderChannelDeletedMessage +}; + +export function renderSystemMessage(post, options) { + if (!systemMessageRenderers[post.type]) { + return null; + } + + return systemMessageRenderers[post.type](post, options); +} diff --git a/webapp/components/rhs_comment.jsx b/webapp/components/rhs_comment.jsx index 26659c7a1..0eb7717b3 100644 --- a/webapp/components/rhs_comment.jsx +++ b/webapp/components/rhs_comment.jsx @@ -294,7 +294,6 @@ export default class RhsComment extends React.Component { let loading; let postClass = ''; - let message = <PostMessageContainer post={post}/>; if (post.state === Constants.POST_FAILED) { postClass += ' post-fail'; @@ -307,13 +306,6 @@ export default class RhsComment extends React.Component { src={loadingGif} /> ); - } else if (this.props.post.state === Constants.POST_DELETED) { - message = ( - <FormattedMessage - id='post_body.deleted' - defaultMessage='(message deleted)' - /> - ); } let systemMessageClass = ''; @@ -491,7 +483,7 @@ export default class RhsComment extends React.Component { <div className='post__body'> <div className={postClass}> {loading} - {message} + <PostMessageContainer post={post}/> </div> {fileAttachment} <ReactionListContainer diff --git a/webapp/components/rhs_root_post.jsx b/webapp/components/rhs_root_post.jsx index 7d00e2322..a114c7385 100644 --- a/webapp/components/rhs_root_post.jsx +++ b/webapp/components/rhs_root_post.jsx @@ -358,7 +358,6 @@ export default class RhsRootPost extends React.Component { } const profilePicContainer = (<div className='post__img'>{profilePic}</div>); - const messageWrapper = <PostMessageContainer post={post}/>; let flag; let flagFunc; @@ -445,7 +444,7 @@ export default class RhsRootPost extends React.Component { <div className='post__body'> <PostBodyAdditionalContent post={post} - message={messageWrapper} + message={<PostMessageContainer post={post}/>} previewCollapsed={this.props.previewCollapsed} /> {fileAttachment} |