1 files changed, 42 insertions, 9 deletions

diff --git a/webapp/components/post_view/post_message_view/system_message_helpers.jsx b/webapp/components/post_view/post_message_view/system_message_helpers.jsx
index c134e1a7a..c215ddb59 100644
--- a/webapp/components/post_view/post_message_view/system_message_helpers.jsx
+++ b/webapp/components/post_view/post_message_view/system_message_helpers.jsx
@@ -7,6 +7,13 @@ import {FormattedMessage} from 'react-intl';
 import {PostTypes} from 'utils/constants.jsx';
 import {formatText} from 'utils/text_formatting.jsx';
 
+const joinLeaveMessageGetters = {
+    [PostTypes.JOIN_CHANNEL]: getJoinChannelMessage,
+    [PostTypes.LEAVE_CHANNEL]: getLeaveChannelMessage,
+    [PostTypes.ADD_TO_CHANNEL]: getAddToChannelMessage,
+    [PostTypes.REMOVE_FROM_CHANNEL]: getRemoveFromChannelMessage
+};
+
 function renderUsername(value, options) {
     return renderFormattedText(value, {...options, markdown: false});
 }
@@ -15,38 +22,60 @@ function renderFormattedText(value, options) {
     return <span dangerouslySetInnerHTML={{__html: formatText(value, options)}}/>;
 }
 
+function renderJoinLeaveMessage(post, options, messageFunction) {
+    if (post.props.messages) {
+        return (
+            <div>
+                {post.props.messages.map((message, key) => <span key={key}> {joinLeaveMessageGetters[message.type](message, options)}</span>)}
+            </div>
+        );
+    }
+    return messageFunction(post.props, options);
+}
+
 function renderJoinChannelMessage(post, options) {
-    const username = renderUsername(post.props.username, options);
+    return renderJoinLeaveMessage(post, options, getJoinChannelMessage);
+}
+
+function getJoinChannelMessage(messageProps, options) {
+    const username = renderUsername(messageProps.username, options);
 
     return (
         <FormattedMessage
             id='api.channel.join_channel.post_and_forget'
-            defaultMessage='{username} has joined the channel.'
+            defaultMessage='{username} joined the channel.'
             values={{username}}
         />
     );
 }
 
 function renderLeaveChannelMessage(post, options) {
-    const username = renderUsername(post.props.username, options);
+    return renderJoinLeaveMessage(post, options, getLeaveChannelMessage);
+}
+
+function getLeaveChannelMessage(messageProps, options) {
+    const username = renderUsername(messageProps.username, options);
 
     return (
         <FormattedMessage
             id='api.channel.leave.left'
-            defaultMessage='{username} has left the channel.'
+            defaultMessage='{username} left the channel.'
             values={{username}}
         />
     );
 }
 
 function renderAddToChannelMessage(post, options) {
-    const username = renderUsername(post.props.username, options);
-    const addedUsername = renderUsername(post.props.addedUsername, options);
+    return renderJoinLeaveMessage(post, options, getAddToChannelMessage);
+}
 
+function getAddToChannelMessage(messageProps, options) {
+    const username = renderUsername(messageProps.username, options);
+    const addedUsername = renderUsername(messageProps.addedUsername, options);
     return (
         <FormattedMessage
             id='api.channel.add_member.added'
-            defaultMessage='{addedUsername} added to the channel by {username}'
+            defaultMessage='{username} added {addedUsername} to the channel.'
             values={{
                 username,
                 addedUsername
@@ -56,12 +85,16 @@ function renderAddToChannelMessage(post, options) {
 }
 
 function renderRemoveFromChannelMessage(post, options) {
-    const removedUsername = renderUsername(post.props.removedUsername, options);
+    return renderJoinLeaveMessage(post, options, getRemoveFromChannelMessage);
+}
+
+function getRemoveFromChannelMessage(messageProps, options) {
+    const removedUsername = renderUsername(messageProps.removedUsername, options);
 
     return (
         <FormattedMessage
             id='api.channel.remove_member.removed'
-            defaultMessage='{removedUsername} was removed from the channel'
+            defaultMessage='{removedUsername} was removed from the channel.'
             values={{
                 removedUsername
             }}