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/action_creators/global_actions.jsx
+++ b/webapp/action_creators/global_actions.jsx
@@ -157,6 +157,11 @@ export function emitPostFocusEvent(postId) {
    );
 }

+export function emitProfilesForDmList() {
+    AsyncClient.getProfilesForDirectMessageList();
+    AsyncClient.getTeamMembers(TeamStore.getCurrentId());
+}
+
 export function emitCloseRightHandSide() {
    AppDispatcher.handleServerAction({
        type: ActionTypes.RECEIVED_SEARCH,
@@ -335,6 +340,10 @@ export function emitClearSuggestions(suggestionId) {
 }

 export function emitPreferenceChangedEvent(preference) {
+    if (preference.category === Constants.Preferences.CATEGORY_DIRECT_CHANNEL_SHOW) {
+        AsyncClient.getDirectProfiles();
+    }
+
    AppDispatcher.handleServerAction({
        type: Constants.ActionTypes.RECEIVED_PREFERENCE,
        preference
--- a/webapp/client/client.jsx
+++ b/webapp/client/client.jsx
@@ -862,13 +862,22 @@ export default class Client {

    getProfilesForTeam = (teamId, success, error) => {
        request.
-            get(`${this.getUsersRoute()}/profiles/${teamId}?skip_direct=true`).
+            get(`${this.getUsersRoute()}/profiles/${teamId}`).
            set(this.defaultHeaders).
            type('application/json').
            accept('application/json').
            end(this.handleResponse.bind(this, 'getProfilesForTeam', success, error));
    }

+    getProfilesForDirectMessageList = (success, error) => {
+        request.
+            get(`${this.getUsersRoute()}/profiles_for_dm_list/${this.getTeamId()}`).
+            set(this.defaultHeaders).
+            type('application/json').
+            accept('application/json').
+            end(this.handleResponse.bind(this, 'getProfilesForDirectMessageList', success, error));
+    }
+
    getStatuses = (ids, success, error) => {
        request.
            post(`${this.getUsersRoute()}/status`).
--- 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 !== '') {
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -542,6 +542,10 @@
  "admin.team.userCreationTitle": "Enable User Creation: ",
  "admin.team_analytics.activeUsers": "Active Users With Posts",
  "admin.team_analytics.totalPosts": "Total Posts",
+  "admin.team.restrictDirectMessage": "Enable users to open Direct Message channels with:",
+  "admin.team.restrictDirectMessageDesc": "'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.",
+  "admin.team.restrict_direct_message_any": "Any user on the Mattermost server",
+  "admin.team.restrict_direct_message_team": "Any member of the team",
  "admin.userList.title": "Users for {team}",
  "admin.userList.title2": "Users for {team} ({count})",
  "admin.user_item.authServiceEmail": ", <strong>Sign-in Method:</strong> Email",
@@ -859,6 +863,9 @@
  "file_upload.pasted": "Image Pasted at ",
  "filtered_user_list.count": "{count} {count, plural, =0 {0 members} one {member} other {members}}",
  "filtered_user_list.countTotal": "{count} {count, plural, =0 {0 members} one {member} other {members}} of {total} Total",
+  "filtered_user_list.show": "Show",
+  "filtered_user_list.any_team": "All Users",
+  "filtered_user_list.team_only": "Members of this Team",
  "filtered_user_list.member": "Member",
  "filtered_user_list.search": "Search members",
  "find_team.email": "Email",
@@ -1120,7 +1127,7 @@
  "sidebar.createChannel": "Create new channel",
  "sidebar.createGroup": "Create new group",
  "sidebar.direct": "Direct Messages",
-  "sidebar.more": "More ({count})",
+  "sidebar.more": "More",
  "sidebar.moreElips": "More...",
  "sidebar.pg": "Private Groups",
  "sidebar.removeList": "Remove from list",
--- a/webapp/i18n/es.json
+++ b/webapp/i18n/es.json
@@ -1118,7 +1118,7 @@
  "sidebar.createChannel": "Crear un nuevo canal",
  "sidebar.createGroup": "Crear un nuevo grupo",
  "sidebar.direct": "Mensajes Directos",
-  "sidebar.more": "Más ({count})",
+  "sidebar.more": "Más",
  "sidebar.moreElips": "Más...",
  "sidebar.pg": "Grupos Privados",
  "sidebar.removeList": "Remover de la lista",
--- a/webapp/i18n/fr.json
+++ b/webapp/i18n/fr.json
@@ -976,7 +976,7 @@
  "sidebar.createChannel": "Créer un nouveau canal",
  "sidebar.createGroup": "Créer un nouveau groupe",
  "sidebar.direct": "Messages privés",
-  "sidebar.more": "Plus ({count})",
+  "sidebar.more": "Plus",
  "sidebar.moreElips": "Plus...",
  "sidebar.pg": "Groupes privés",
  "sidebar.removeList": "Retirer de la liste",
--- a/webapp/i18n/ja.json
+++ b/webapp/i18n/ja.json
@@ -1078,7 +1078,7 @@
  "sidebar.createChannel": "新しいチャンネルを作成する",
  "sidebar.createGroup": "新しいグループを作成する",
  "sidebar.direct": "ダイレクトメッセージ",
-  "sidebar.more": "もっと表示する({count})",
+  "sidebar.more": "もっと表示する",
  "sidebar.moreElips": "もっと…",
  "sidebar.pg": "非公開グループ",
  "sidebar.removeList": "一覧から削除する",
--- a/webapp/i18n/pt.json
+++ b/webapp/i18n/pt.json
@@ -1120,7 +1120,7 @@
  "sidebar.createChannel": "Criar novo canal",
  "sidebar.createGroup": "Criar um novo grupo",
  "sidebar.direct": "Mensagens Diretas",
-  "sidebar.more": "Mais ({count})",
+  "sidebar.more": "Mais",
  "sidebar.moreElips": "Mais...",
  "sidebar.pg": "Grupos Privados",
  "sidebar.removeList": "Remover da lista",
--- a/webapp/sass/components/_modal.scss
+++ b/webapp/sass/components/_modal.scss
@@ -436,6 +436,21 @@
            margin-top: 5px;
        }

+        .member-show {
+            @include opacity(.8);
+            float: right;
+            margin-top: 12px;
+            margin-right: 3px;
+        }
+
+        .member-select {
+            @include opacity(.8);
+            float: right;
+            width: auto;
+            margin-top: 5px;
+            margin-right: 5px;
+        }
+
        .more-purpose {
            @include opacity(.7);
        }
--- a/webapp/stores/user_store.jsx
+++ b/webapp/stores/user_store.jsx
@@ -7,6 +7,7 @@ import EventEmitter from 'events';
 import Constants from 'utils/constants.jsx';
 const ActionTypes = Constants.ActionTypes;

+const CHANGE_EVENT_DM_LIST = 'change_dm_list';
 const CHANGE_EVENT = 'change';
 const CHANGE_EVENT_SESSIONS = 'change_sessions';
 const CHANGE_EVENT_AUDITS = 'change_audits';
@@ -19,6 +20,7 @@ class UserStoreClass extends EventEmitter {
    }

    clear() {
+        this.profiles_for_dm_list = {};
        this.profiles = {};
        this.direct_profiles = {};
        this.statuses = {};
@@ -40,6 +42,18 @@ class UserStoreClass extends EventEmitter {
        this.removeListener(CHANGE_EVENT, callback);
    }

+    emitDmListChange() {
+        this.emit(CHANGE_EVENT_DM_LIST);
+    }
+
+    addDmListChangeListener(callback) {
+        this.on(CHANGE_EVENT_DM_LIST, callback);
+    }
+
+    removeDmListChangeListener(callback) {
+        this.removeListener(CHANGE_EVENT_DM_LIST, callback);
+    }
+
    emitSessionsChange() {
        this.emit(CHANGE_EVENT_SESSIONS);
    }
@@ -190,6 +204,29 @@ class UserStoreClass extends EventEmitter {
        }
    }

+    getProfilesForDmList() {
+        const currentId = this.getCurrentId();
+        const profiles = [];
+
+        for (const id in this.profiles_for_dm_list) {
+            if (this.profiles_for_dm_list.hasOwnProperty(id) && id !== currentId) {
+                var profile = this.profiles_for_dm_list[id];
+
+                if (profile.delete_at === 0) {
+                    profiles.push(profile);
+                }
+            }
+        }
+
+        profiles.sort((a, b) => a.username.localeCompare(b.username));
+
+        return profiles;
+    }
+
+    saveProfilesForDmList(profiles) {
+        this.profiles_for_dm_list = profiles;
+    }
+
    setSessions(sessions) {
        this.sessions = sessions;
    }
@@ -278,6 +315,10 @@ UserStore.dispatchToken = AppDispatcher.register((payload) => {
    var action = payload.action;

    switch (action.type) {
+    case ActionTypes.RECEIVED_PROFILES_FOR_DM_LIST:
+        UserStore.saveProfilesForDmList(action.profiles);
+        UserStore.emitDmListChange();
+        break;
    case ActionTypes.RECEIVED_PROFILES:
        UserStore.saveProfiles(action.profiles);
        UserStore.emitChange();
--- a/webapp/tests/client_user.test.jsx
+++ b/webapp/tests/client_user.test.jsx
@@ -480,6 +480,20 @@ describe('Client.User', function() {
        });
    });

+    it('getProfilesForDirectMessageList', function(done) {
+        TestHelper.initBasic(() => {
+            TestHelper.basicClient().getProfilesForDirectMessageList(
+                function(data) {
+                    assert.equal(Object.keys(data).length > 0, true);
+                    done();
+                },
+                function(err) {
+                    done(new Error(err.message));
+                }
+            );
+        });
+    });
+
    it('getStatuses', function(done) {
        TestHelper.initBasic(() => {
            var ids = [];
--- a/webapp/utils/async_client.jsx
+++ b/webapp/utils/async_client.jsx
@@ -224,6 +224,28 @@ export function getTeamMembers(teamId) {
    );
 }

+export function getProfilesForDirectMessageList() {
+    if (isCallInProgress('getProfilesForDirectMessageList')) {
+        return;
+    }
+
+    callTracker.getProfilesForDirectMessageList = utils.getTimestamp();
+    Client.getProfilesForDirectMessageList(
+        (data) => {
+            callTracker.getProfilesForDirectMessageList = 0;
+
+            AppDispatcher.handleServerAction({
+                type: ActionTypes.RECEIVED_PROFILES_FOR_DM_LIST,
+                profiles: data
+            });
+        },
+        (err) => {
+            callTracker.getProfilesForDirectMessageList = 0;
+            dispatchError(err, 'getProfilesForDirectMessageList');
+        }
+    );
+}
+
 export function getProfiles() {
    if (isCallInProgress('getProfiles')) {
        return;
--- a/webapp/utils/constants.jsx
+++ b/webapp/utils/constants.jsx
@@ -60,6 +60,7 @@ export default {
        RECEIVED_MENTION_DATA: null,
        RECEIVED_ADD_MENTION: null,

+        RECEIVED_PROFILES_FOR_DM_LIST: null,
        RECEIVED_PROFILES: null,
        RECEIVED_DIRECT_PROFILES: null,
        RECEIVED_ME: null,
--- a/webapp/utils/utils.jsx
+++ b/webapp/utils/utils.jsx
@@ -1247,6 +1247,13 @@ export function openDirectChannelToUser(user, successCb, errorCb) {
        'true'
    );

+    // if the user in another team and isn't already in the direct message
+    // list then we should add him so his name shows up correctly.
+    var profileUser = UserStore.getProfile(user.id);
+    if (!profileUser) {
+        UserStore.getDirectProfiles()[user.id] = user;
+    }
+
    const channelName = this.getDirectChannelName(UserStore.getCurrentId(), user.id);
    let channel = ChannelStore.getByName(channelName);