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
2016-08-18 17:37:55 -05:00
--- 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)
        });
    }
--- 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,
--- a/webapp/components/user_settings/user_settings_advanced.jsx
+++ b/webapp/components/user_settings/user_settings_advanced.jsx
@@ -27,6 +27,7 @@ export default class AdvancedSettingsDisplay extends React.Component {
        this.saveEnabledFeatures = this.saveEnabledFeatures.bind(this);

        this.renderFormattingSection = this.renderFormattingSection.bind(this);
+        this.renderJoinLeaveSection = this.renderJoinLeaveSection.bind(this);

        this.state = this.getStateFromStores();
    }
@@ -44,6 +45,11 @@ export default class AdvancedSettingsDisplay extends React.Component {
                Constants.Preferences.CATEGORY_ADVANCED_SETTINGS,
                'formatting',
                'true'
+            ),
+            join_leave: PreferenceStore.get(
+                Constants.Preferences.CATEGORY_ADVANCED_SETTINGS,
+                'join_leave',
+                'true'
            )
        };

@@ -232,6 +238,85 @@ export default class AdvancedSettingsDisplay extends React.Component {
        );
    }

+    renderJoinLeaveSection() {
+        if (window.mm_config.BuildEnterpriseReady === 'true' && window.mm_license && window.mm_license.IsLicensed === 'true') {
+            if (this.props.activeSection === 'join_leave') {
+                return (
+                    <SettingItemMax
+                        title={
+                            <FormattedMessage
+                                id='user.settings.advance.joinLeaveTitle'
+                                defaultMessage='Enable Join/Leave Messages'
+                            />
+                        }
+                        inputs={
+                            <div>
+                                <div className='radio'>
+                                    <label>
+                                        <input
+                                            type='radio'
+                                            name='join_leave'
+                                            checked={this.state.settings.join_leave !== 'false'}
+                                            onChange={this.updateSetting.bind(this, 'join_leave', 'true')}
+                                        />
+                                        <FormattedMessage
+                                            id='user.settings.advance.on'
+                                            defaultMessage='On'
+                                        />
+                                    </label>
+                                    <br/>
+                                </div>
+                                <div className='radio'>
+                                    <label>
+                                        <input
+                                            type='radio'
+                                            name='join_leave'
+                                            checked={this.state.settings.join_leave === 'false'}
+                                            onChange={this.updateSetting.bind(this, 'join_leave', 'false')}
+                                        />
+                                        <FormattedMessage
+                                            id='user.settings.advance.off'
+                                            defaultMessage='Off'
+                                        />
+                                    </label>
+                                    <br/>
+                                </div>
+                                <div>
+                                    <br/>
+                                    <FormattedMessage
+                                        id='user.settings.advance.joinLeaveDesc'
+                                        defaultMessage='When "On", System Messages saying a user has joined or left a channel will be visible. When "Off", the System Messages about joining or leaving a channel will be hidden. A message will still show up when you are added to a channel, so you can receive a notification.'
+                                    />
+                                </div>
+                            </div>
+                        }
+                        submit={() => this.handleSubmit('join_leave')}
+                        server_error={this.state.serverError}
+                        updateSection={(e) => {
+                            this.updateSection('');
+                            e.preventDefault();
+                        }}
+                    />
+                );
+            }
+
+            return (
+                <SettingItemMin
+                    title={
+                        <FormattedMessage
+                            id='user.settings.advance.joinLeaveTitle'
+                            defaultMessage='Enable Join/Leave Messages'
+                        />
+                    }
+                    describe={this.renderOnOffLabel(this.state.settings.join_leave)}
+                    updateSection={() => this.props.updateSection('join_leave')}
+                />
+            );
+        }
+
+        return null;
+    }
+
    renderFeatureLabel(feature) {
        switch (feature) {
        case 'MARKDOWN_PREVIEW':
@@ -342,6 +427,12 @@ export default class AdvancedSettingsDisplay extends React.Component {
            formattingSectionDivider = <div className='divider-light'/>;
        }

+        const displayJoinLeaveSection = this.renderJoinLeaveSection();
+        let displayJoinLeaveSectionDivider = null;
+        if (displayJoinLeaveSection) {
+            displayJoinLeaveSectionDivider = <div className='divider-light'/>;
+        }
+
        let previewFeaturesSection;
        let previewFeaturesSectionDivider;
        if (this.state.preReleaseFeaturesKeys.length > 0) {
@@ -454,6 +545,8 @@ export default class AdvancedSettingsDisplay extends React.Component {
                    {ctrlSendSection}
                    {formattingSectionDivider}
                    {formattingSection}
+                    {displayJoinLeaveSectionDivider}
+                    {displayJoinLeaveSection}
                    {previewFeaturesSectionDivider}
                    {previewFeaturesSection}
                    <div className='divider-dark'/>