#4755 Combining consecutive user join/leave system messages to single message and few other changes. (#5945)

fix 7 and 8

remove @ at "{username} joined the channel"

refactor and update test

2 files changed, 46 insertions, 13 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
             }}
diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index e138660b0..6414d1881 100755
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -1015,15 +1015,15 @@
   "analytics.team.title": "Team Statistics for {team}",
   "analytics.team.totalPosts": "Total Posts",
   "analytics.team.totalUsers": "Total Users",
-  "api.channel.add_member.added": "{addedUsername} added to the channel by {username}",
+  "api.channel.add_member.added": " {username} added {addedUsername} to the channel.",
   "api.channel.delete_channel.archived": "{username} has archived the channel.",
-  "api.channel.join_channel.post_and_forget": "{username} has joined the channel.",
-  "api.channel.leave.left": "{username} has left the channel.",
+  "api.channel.join_channel.post_and_forget": "{username} joined the channel.",
+  "api.channel.leave.left": "{username} left the channel.",
   "api.channel.post_update_channel_displayname_message_and_forget.updated_from": "{username} updated the channel display name from: {old} to: {new}",
   "api.channel.post_update_channel_header_message_and_forget.removed": "{username} removed the channel header (was: {old})",
   "api.channel.post_update_channel_header_message_and_forget.updated_from": "{username} updated the channel header from: {old} to: {new}",
   "api.channel.post_update_channel_header_message_and_forget.updated_to": "{username} updated the channel header to: {new}",
-  "api.channel.remove_member.removed": "{removedUsername} was removed from the channel",
+  "api.channel.remove_member.removed": "{removedUsername} was removed from the channel.",
   "app.channel.post_update_channel_purpose_message.removed": "{username} removed the channel purpose (was: {old})",
   "app.channel.post_update_channel_purpose_message.updated_from": "{username} updated the channel purpose from: {old} to: {new}",
   "app.channel.post_update_channel_purpose_message.updated_to": "{username} updated the channel purpose to: {new}",