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

5 files changed, 192 insertions, 54 deletions

diff --git a/webapp/components/admin_console/team_settings.jsx b/webapp/components/admin_console/team_settings.jsx
index bbb7ec3c4..e7bfcd74a 100644
--- 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'>
diff --git a/webapp/components/create_team/components/team_url.jsx b/webapp/components/create_team/components/team_url.jsx
index 1a20066b5..34e696938 100644
--- 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();
diff --git a/webapp/components/filtered_user_list.jsx b/webapp/components/filtered_user_list.jsx
index e12faa298..83747c03d 100644
--- 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
 };
 
diff --git a/webapp/components/more_direct_channels.jsx b/webapp/components/more_direct_channels.jsx
index a7fb2b6cd..761ce0c37 100644
--- 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
diff --git a/webapp/components/sidebar.jsx b/webapp/components/sidebar.jsx
index 4ab8b6b40..4ce89d37c 100644
--- 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 !== '') {