PLT-2707 Adding option to show DM list from all of server (#2871)

* PLT-2707 Adding option to show DM list from all of server * Fixing loc
2016-05-04 06:31:42 -07:00
--- a/webapp/components/admin_console/team_settings.jsx
+++ b/webapp/components/admin_console/team_settings.jsx
@@ -24,6 +24,14 @@ const holders = defineMessages({
    saving: {
        id: 'admin.team.saving',
        defaultMessage: 'Saving Config...'
+    },
+    restrictDirectMessageAny: {
+        id: 'admin.team.restrict_direct_message_any',
+        defaultMessage: 'Any user on the Mattermost server'
+    },
+    restrictDirectMessageTeam: {
+        id: 'admin.team.restrict_direct_message_team',
+        defaultMessage: 'Any member of the team'
    }
 });

@@ -48,6 +56,7 @@ class TeamSettings extends React.Component {
            saveNeeded: false,
            brandImageExists: false,
            enableCustomBrand: this.props.config.TeamSettings.EnableCustomBrand,
+            restrictDirectMessage: this.props.config.TeamSettings.RestrictDirectMessage,
            serverError: null
        };
    }
@@ -104,6 +113,7 @@ class TeamSettings extends React.Component {
        config.TeamSettings.EnableUserCreation = this.refs.EnableUserCreation.checked;
        config.TeamSettings.EnableOpenServer = this.refs.EnableOpenServer.checked;
        config.TeamSettings.RestrictTeamNames = this.refs.RestrictTeamNames.checked;
+        config.TeamSettings.RestrictDirectMessage = this.refs.RestrictDirectMessage.value.trim();

        if (this.refs.EnableCustomBrand) {
            config.TeamSettings.EnableCustomBrand = this.refs.EnableCustomBrand.checked;
@@ -660,6 +670,36 @@ class TeamSettings extends React.Component {
                        </div>
                    </div>

+                    <div className='form-group'>
+                        <label
+                            className='control-label col-sm-4'
+                            htmlFor='restrictDirectMessage'
+                        >
+                            <FormattedMessage
+                                id='admin.team.restrictDirectMessage'
+                                defaultMessage='Enable users to open Direct Message channels with:'
+                            />
+                        </label>
+                        <div className='col-sm-8'>
+                            <select
+                                className='form-control'
+                                id='restrictDirectMessage'
+                                ref='RestrictDirectMessage'
+                                defaultValue={this.props.config.TeamSettings.RestrictDirectMessage}
+                                onChange={this.handleChange.bind(this, 'restrictDirectMessage')}
+                            >
+                                <option value='any'>{formatMessage(holders.restrictDirectMessageAny)}</option>
+                                <option value='team'>{formatMessage(holders.restrictDirectMessageTeam)}</option>
+                            </select>
+                            <p className='help-text'>
+                                <FormattedHTMLMessage
+                                    id='admin.team.restrictDirectMessageDesc'
+                                    defaultMessage='"Any user on the Mattermost server" enables users to open a Direct Message channel with any user on the server, even if they are not on any teams together. "Any member of the team" limits the ability to open Direct Message channels to only users who are in the same team.'
+                                />
+                            </p>
+                        </div>
+                    </div>
+
                    {brand}

                    <div className='form-group'>
--- a/webapp/components/create_team/components/team_url.jsx
+++ b/webapp/components/create_team/components/team_url.jsx
@@ -5,6 +5,7 @@ import $ from 'jquery';
 import ReactDOM from 'react-dom';
 import * as Utils from 'utils/utils.jsx';
 import Client from 'utils/web_client.jsx';
+import * as AsyncClient from 'utils/async_client.jsx';
 import TeamStore from 'stores/team_store.jsx';
 import UserStore from 'stores/user_store.jsx';
 import Constants from 'utils/constants.jsx';
@@ -99,6 +100,7 @@ class TeamUrl extends React.Component {
                        (team) => {
                            Client.track('signup', 'signup_team_08_complete');
                            $('#sign-up-button').button('reset');
+                            AsyncClient.getDirectProfiles();
                            TeamStore.saveTeam(team);
                            TeamStore.appendTeamMember({team_id: team.id, user_id: UserStore.getCurrentId(), roles: 'admin'});
                            TeamStore.emitChange();
--- a/webapp/components/filtered_user_list.jsx
+++ b/webapp/components/filtered_user_list.jsx
@@ -15,6 +15,14 @@ const holders = defineMessages({
    search: {
        id: 'filtered_user_list.search',
        defaultMessage: 'Search members'
+    },
+    anyTeam: {
+        id: 'filtered_user_list.any_team',
+        defaultMessage: 'All Users'
+    },
+    teamOnly: {
+        id: 'filtered_user_list.team_only',
+        defaultMessage: 'Members of this Team'
    }
 });

@@ -25,9 +33,13 @@ class FilteredUserList extends React.Component {
        super(props);

        this.handleFilterChange = this.handleFilterChange.bind(this);
+        this.handleListChange = this.handleListChange.bind(this);
+        this.filterUsers = this.filterUsers.bind(this);

        this.state = {
-            filter: ''
+            filter: '',
+            users: this.filterUsers(props.teamMembers, props.users),
+            selected: 'team'
        };
    }

@@ -37,18 +49,49 @@ class FilteredUserList extends React.Component {
        }
    }

+    filterUsers(teamMembers, users) {
+        if (!teamMembers || teamMembers.length === 0) {
+            return users;
+        }
+
+        var filteredUsers = users.filter((user) => {
+            for (const index in teamMembers) {
+                if (teamMembers.hasOwnProperty(index) && teamMembers[index].user_id === user.id) {
+                    return true;
+                }
+            }
+
+            return false;
+        });
+
+        return filteredUsers;
+    }
+
    handleFilterChange(e) {
        this.setState({
            filter: e.target.value
        });
    }

+    handleListChange(e) {
+        var users = this.props.users;
+
+        if (e.target.value === 'team') {
+            users = this.filterUsers(this.props.teamMembers, this.props.users);
+        }
+
+        this.setState({
+            selected: e.target.value,
+            users
+        });
+    }
+
    render() {
        const {formatMessage} = this.props.intl;

-        let users = this.props.users;
+        let users = this.state.users;

-        if (this.state.filter) {
+        if (this.state.filter && this.state.filter.length > 0) {
            const filter = this.state.filter.toLowerCase();

            users = users.filter((user) => {
@@ -60,7 +103,7 @@ class FilteredUserList extends React.Component {
        }

        let count;
-        if (users.length === this.props.users.length) {
+        if (users.length === this.state.users.length) {
            count = (
                <FormattedMessage
                    id='filtered_user_list.count'
@@ -77,12 +120,42 @@ class FilteredUserList extends React.Component {
                    defaultMessage='{count} {count, plural, =0 {0 members} one {member} other {members}} of {total} Total'
                    values={{
                        count: users.length,
-                        total: this.props.users.length
+                        total: this.state.users.length
                    }}
                />
            );
        }

+        let teamToggle;
+
+        let teamMembers = this.props.teamMembers;
+        if (this.props.showTeamToggle) {
+            teamMembers = [];
+
+            teamToggle = (
+                <div className='col-sm-6'>
+                    <select
+                        className='form-control member-select'
+                        id='restrictList'
+                        ref='restrictList'
+                        defaultValue='team'
+                        onChange={this.handleListChange}
+                    >
+                        <option value='any'>{formatMessage(holders.anyTeam)}</option>
+                        <option value='team'>{formatMessage(holders.teamOnly)}</option>
+                    </select>
+                    <span
+                        className='member-show'
+                    >
+                        <FormattedMessage
+                            id='filtered_user_list.show'
+                            defaultMessage='Show'
+                        />
+                    </span>
+                </div>
+            );
+        }
+
        return (
            <div
                className='filtered-user-list'
@@ -100,6 +173,7 @@ class FilteredUserList extends React.Component {
                    <div className='col-sm-6'>
                        <span className='member-count'>{count}</span>
                    </div>
+                    {teamToggle}
                </div>
                <div
                    ref='userList'
@@ -107,7 +181,7 @@ class FilteredUserList extends React.Component {
                >
                    <UserList
                        users={users}
-                        teamMembers={this.props.teamMembers}
+                        teamMembers={teamMembers}
                        actions={this.props.actions}
                        actionProps={this.props.actionProps}
                    />
@@ -121,7 +195,8 @@ FilteredUserList.defaultProps = {
    users: [],
    teamMembers: [],
    actions: [],
-    actionProps: {}
+    actionProps: {},
+    showTeamToggle: false
 };

 FilteredUserList.propTypes = {
@@ -130,6 +205,7 @@ FilteredUserList.propTypes = {
    teamMembers: React.PropTypes.arrayOf(React.PropTypes.object),
    actions: React.PropTypes.arrayOf(React.PropTypes.func),
    actionProps: React.PropTypes.object,
+    showTeamToggle: React.PropTypes.bool,
    style: React.PropTypes.object
 };

--- a/webapp/components/more_direct_channels.jsx
+++ b/webapp/components/more_direct_channels.jsx
@@ -4,11 +4,14 @@
 import {Modal} from 'react-bootstrap';
 import FilteredUserList from './filtered_user_list.jsx';
 import UserStore from 'stores/user_store.jsx';
+import TeamStore from 'stores/team_store.jsx';
 import * as Utils from 'utils/utils.jsx';
+import * as GlobalActions from 'action_creators/global_actions.jsx';

 import {FormattedMessage} from 'react-intl';
 import {browserHistory} from 'react-router';
 import SpinnerButton from 'components/spinner_button.jsx';
+import LoadingScreen from 'components/loading_screen.jsx';

 import React from 'react';

@@ -17,38 +20,27 @@ export default class MoreDirectChannels extends React.Component {
        super(props);

        this.handleHide = this.handleHide.bind(this);
+        this.handleOnEnter = this.handleOnEnter.bind(this);
        this.handleShowDirectChannel = this.handleShowDirectChannel.bind(this);
        this.handleUserChange = this.handleUserChange.bind(this);
+        this.onTeamChange = this.onTeamChange.bind(this);
        this.createJoinDirectChannelButton = this.createJoinDirectChannelButton.bind(this);

        this.state = {
-            users: this.getUsersFromStore(),
+            users: null,
+            teamMembers: null,
            loadingDMChannel: -1
        };
    }

-    getUsersFromStore() {
-        const currentId = UserStore.getCurrentId();
-        const profiles = UserStore.getActiveOnlyProfiles();
-        const users = [];
-
-        for (const id in profiles) {
-            if (id !== currentId) {
-                users.push(profiles[id]);
-            }
-        }
-
-        users.sort((a, b) => a.username.localeCompare(b.username));
-
-        return users;
-    }
-
    componentDidMount() {
-        UserStore.addChangeListener(this.handleUserChange);
+        UserStore.addDmListChangeListener(this.handleUserChange);
+        TeamStore.addChangeListener(this.onTeamChange);
    }

    componentWillUnmount() {
-        UserStore.removeChangeListener(this.handleUserChange);
+        UserStore.removeDmListChangeListener(this.handleUserChange);
+        TeamStore.removeChangeListener(this.onTeamChange);
    }

    shouldComponentUpdate(nextProps, nextState) {
@@ -77,6 +69,17 @@ export default class MoreDirectChannels extends React.Component {
        }
    }

+    handleOnEnter() {
+        this.setState({
+            users: null,
+            teamMembers: null
+        });
+    }
+
+    handleOnEntered() {
+        GlobalActions.emitProfilesForDmList();
+    }
+
    handleShowDirectChannel(teammate, e) {
        e.preventDefault();

@@ -99,7 +102,15 @@ export default class MoreDirectChannels extends React.Component {
    }

    handleUserChange() {
-        this.setState({users: this.getUsersFromStore()});
+        this.setState({
+            users: UserStore.getProfilesForDmList()
+        });
+    }
+
+    onTeamChange() {
+        this.setState({
+            teamMembers: TeamStore.getMembersForTeam()
+        });
    }

    createJoinDirectChannelButton({user}) {
@@ -123,11 +134,33 @@ export default class MoreDirectChannels extends React.Component {
            maxHeight = Utils.windowHeight() - 300;
        }

+        var body = null;
+        if (this.state.users == null || this.state.teamMembers == null) {
+            body = (<LoadingScreen/>);
+        } else {
+            var showTeamToggle = false;
+            if (global.window.mm_config.RestrictDirectMessage === 'any') {
+                showTeamToggle = true;
+            }
+
+            body = (
+                <FilteredUserList
+                    style={{maxHeight}}
+                    users={this.state.users}
+                    teamMembers={this.state.teamMembers}
+                    actions={[this.createJoinDirectChannelButton]}
+                    showTeamToggle={showTeamToggle}
+                />
+            );
+        }
+
        return (
            <Modal
                dialogClassName='more-modal more-direct-channels'
                show={this.props.show}
                onHide={this.handleHide}
+                onEnter={this.handleOnEnter}
+                onEntered={this.handleOnEntered}
            >
                <Modal.Header closeButton={true}>
                    <Modal.Title>
@@ -138,11 +171,7 @@ export default class MoreDirectChannels extends React.Component {
                    </Modal.Title>
                </Modal.Header>
                <Modal.Body>
-                    <FilteredUserList
-                        style={{maxHeight}}
-                        users={this.state.users}
-                        actions={[this.createJoinDirectChannelButton]}
-                    />
+                    {body}
                </Modal.Body>
                <Modal.Footer>
                    <button
--- a/webapp/components/sidebar.jsx
+++ b/webapp/components/sidebar.jsx
@@ -124,8 +124,6 @@ export default class Sidebar extends React.Component {

        directChannels.sort(this.sortChannelsByDisplayName);

-        const hiddenDirectChannelCount = UserStore.getActiveOnlyProfileList(true).length - directChannels.length;
-
        const tutorialStep = PreferenceStore.getInt(Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), 999);

        return {
@@ -134,7 +132,6 @@ export default class Sidebar extends React.Component {
            publicChannels,
            privateChannels,
            directChannels,
-            hiddenDirectChannelCount,
            unreadCounts: JSON.parse(JSON.stringify(ChannelStore.getUnreadCounts())),
            showTutorialTip: tutorialStep === TutorialSteps.CHANNEL_POPOVER,
            currentTeam: TeamStore.getCurrent(),
@@ -527,25 +524,19 @@ export default class Sidebar extends React.Component {
        }
        head.appendChild(link);

-        var directMessageMore = null;
-        if (this.state.hiddenDirectChannelCount > 0) {
-            directMessageMore = (
-                <li key='more'>
-                    <a
-                        href='#'
-                        onClick={this.showMoreDirectChannelsModal}
-                    >
-                        <FormattedMessage
-                            id='sidebar.more'
-                            defaultMessage='More ({count})'
-                            values={{
-                                count: this.state.hiddenDirectChannelCount
-                            }}
-                        />
-                    </a>
-                </li>
-            );
-        }
+        var directMessageMore = (
+            <li key='more'>
+                <a
+                    href='#'
+                    onClick={this.showMoreDirectChannelsModal}
+                >
+                    <FormattedMessage
+                        id='sidebar.more'
+                        defaultMessage='More'
+                    />
+                </a>
+            </li>
+        );

        let showChannelModal = false;
        if (this.state.newChannelModalType !== '') {