PLT-3754 EE: Add a Display Option to disable Join/Leave messages (#3808)

* PLT-3754 EE: Add a Display Option to disable Join/Leave messages

* Differentiate between join/leave add/remove messages

* Update user removed from channel text message

2 files changed, 26 insertions, 5 deletions

diff --git a/webapp/components/post_view/post_focus_view_controller.jsx b/webapp/components/post_view/post_focus_view_controller.jsx
index 4a7d312f5..a1c474184 100644
--- a/webapp/components/post_view/post_focus_view_controller.jsx
+++ b/webapp/components/post_view/post_focus_view_controller.jsx
@@ -34,8 +34,10 @@ export default class PostFocusView extends React.Component {
             profiles = Object.assign({}, profiles, UserStore.getDirectProfiles());
         }
 
+        const joinLeaveEnabled = PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'join_leave', true);
+
         this.state = {
-            postList: PostStore.getVisiblePosts(focusedPostId),
+            postList: PostStore.filterPosts(focusedPostId, joinLeaveEnabled),
             currentUser: UserStore.getCurrentUser(),
             profiles,
             scrollType: ScrollTypes.POST,
@@ -79,9 +81,11 @@ export default class PostFocusView extends React.Component {
             return;
         }
 
+        const joinLeaveEnabled = PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'join_leave', true);
+
         this.setState({
             scrollPostId: focusedPostId,
-            postList: PostStore.getVisiblePosts(focusedPostId),
+            postList: PostStore.filterPosts(focusedPostId, joinLeaveEnabled),
             atTop: PostStore.getVisibilityAtTop(focusedPostId),
             atBottom: PostStore.getVisibilityAtBottom(focusedPostId)
         });
@@ -103,7 +107,15 @@ export default class PostFocusView extends React.Component {
     }
 
     onPreferenceChange() {
+        const focusedPostId = PostStore.getFocusedPostId();
+        if (focusedPostId == null) {
+            return;
+        }
+
+        const joinLeaveEnabled = PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'join_leave', true);
+
         this.setState({
+            postList: PostStore.filterPosts(focusedPostId, joinLeaveEnabled),
             flaggedPosts: PreferenceStore.getCategory(Constants.Preferences.CATEGORY_FLAGGED_POST)
         });
     }
diff --git a/webapp/components/post_view/post_view_controller.jsx b/webapp/components/post_view/post_view_controller.jsx
index 1dd5e9176..2451dfc8d 100644
--- a/webapp/components/post_view/post_view_controller.jsx
+++ b/webapp/components/post_view/post_view_controller.jsx
@@ -44,9 +44,11 @@ export default class PostViewController extends React.Component {
             lastViewed = member.last_viewed_at;
         }
 
+        const joinLeaveEnabled = PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'join_leave', true);
+
         this.state = {
             channel,
-            postList: PostStore.getVisiblePosts(channel.id),
+            postList: PostStore.filterPosts(channel.id, joinLeaveEnabled),
             currentUser: UserStore.getCurrentUser(),
             profiles,
             atTop: PostStore.getVisibilityAtTop(channel.id),
@@ -83,7 +85,10 @@ export default class PostViewController extends React.Component {
             previewSuffix = '_' + Utils.generateId();
         }
 
+        const joinLeaveEnabled = PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'join_leave', true);
+
         this.setState({
+            postList: PostStore.filterPosts(this.state.channel.id, joinLeaveEnabled),
             displayNameType: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', 'false'),
             displayPostsInCenter: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_CENTERED,
             compactDisplay: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT) === Preferences.MESSAGE_DISPLAY_COMPACT,
@@ -103,8 +108,10 @@ export default class PostViewController extends React.Component {
     }
 
     onPostsChange() {
+        const joinLeaveEnabled = PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'join_leave', true);
+
         this.setState({
-            postList: JSON.parse(JSON.stringify(PostStore.getVisiblePosts(this.state.channel.id))),
+            postList: PostStore.filterPosts(this.state.channel.id, joinLeaveEnabled),
             atTop: PostStore.getVisibilityAtTop(this.state.channel.id)
         });
     }
@@ -152,12 +159,14 @@ export default class PostViewController extends React.Component {
                 profiles = Object.assign({}, profiles, UserStore.getDirectProfiles());
             }
 
+            const joinLeaveEnabled = PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'join_leave', true);
+
             this.setState({
                 channel,
                 lastViewed,
                 ownNewMessage: false,
                 profiles: JSON.parse(JSON.stringify(profiles)),
-                postList: JSON.parse(JSON.stringify(PostStore.getVisiblePosts(channel.id))),
+                postList: PostStore.filterPosts(channel.id, joinLeaveEnabled),
                 displayNameType: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', 'false'),
                 displayPostsInCenter: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_CENTERED,
                 compactDisplay: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT) === Preferences.MESSAGE_DISPLAY_COMPACT,