diff --git a/app/components/post/post.js b/app/components/post/post.js
index 885f18ec8..478fe9dd8 100644
--- a/app/components/post/post.js
+++ b/app/components/post/post.js
@@ -23,12 +23,17 @@ import ProfilePicture from 'app/components/profile_picture';
import FileAttachmentList from 'app/components/file_attachment_list/file_attachment_list_container';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
+import webhookIcon from 'assets/images/icons/webhook.jpg';
+
import {Constants} from 'mattermost-redux/constants';
import {isSystemMessage} from 'mattermost-redux/utils/post_utils';
import {isAdmin} from 'mattermost-redux/utils/user_utils';
+const BOT_NAME = 'BOT';
+
class Post extends PureComponent {
static propTypes = {
+ config: PropTypes.object.isRequired,
currentTeamId: PropTypes.string.isRequired,
currentUserId: PropTypes.string.isRequired,
intl: intlShape.isRequired,
@@ -252,17 +257,18 @@ class Post extends PureComponent {
};
render() {
- const style = getStyleSheet(this.props.theme);
+ const {config, post, theme} = this.props;
+ const style = getStyleSheet(theme);
const PROFILE_PICTURE_SIZE = 32;
let profilePicture;
let displayName;
let messageStyle;
- if (isSystemMessage(this.props.post)) {
+ if (isSystemMessage(post)) {
profilePicture = (
@@ -278,24 +284,43 @@ class Post extends PureComponent {
);
messageStyle = [style.message, style.systemMessage];
- } else if (this.props.post.props && this.props.post.props.from_webhook) {
- profilePicture = (
-
-
+
+
+ );
+ } else {
+ profilePicture = (
+
-
- );
+ );
+ }
+ let name = this.props.displayName;
+ if (post.props.override_username && config.EnablePostUsernameOverride === 'true') {
+ name = post.props.override_username;
+ }
displayName = (
-
- {this.props.post.props.override_username}
-
+
+
+ {name}
+
+
+ {BOT_NAME}
+
+
);
messageStyle = [style.message, style.webhookMessage];
} else {
@@ -426,14 +451,29 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
marginBottom: 10
},
displayName: {
+ color: theme.centerChannelColor,
fontSize: 14,
fontWeight: '600',
- marginRight: 10,
- color: theme.centerChannelColor
+ marginRight: 5
+ },
+ botContainer: {
+ flexDirection: 'row'
+ },
+ bot: {
+ alignSelf: 'center',
+ backgroundColor: changeOpacity(theme.centerChannelColor, 0.15),
+ borderRadius: 2,
+ color: theme.centerChannelColor,
+ fontSize: 10,
+ fontWeight: '600',
+ marginRight: 5,
+ paddingVertical: 2,
+ paddingHorizontal: 4
},
time: {
color: theme.centerChannelColor,
fontSize: 12,
+ marginLeft: 5,
opacity: 0.5
},
commentedOn: {
diff --git a/app/components/post/post_container.js b/app/components/post/post_container.js
index bbefe0a90..4925bf60d 100644
--- a/app/components/post/post_container.js
+++ b/app/components/post/post_container.js
@@ -21,6 +21,7 @@ function mapStateToProps(state, ownProps) {
const myPreferences = getMyPreferences(state);
return {
+ config: state.entities.general.config,
commentedOnDisplayName: displayUsername(commentedOnUser, myPreferences),
currentTeamId: getCurrentTeamId(state),
currentUserId: getCurrentUserId(state),
diff --git a/assets/base/images/icons/webhook.jpg b/assets/base/images/icons/webhook.jpg
new file mode 100644
index 000000000..80f0b1cb6
Binary files /dev/null and b/assets/base/images/icons/webhook.jpg differ