Changed TeamMembersModal to use UserList

web/react/components/confirm_modal.jsx

@@ -44,7 +44,7 @@ export default class ConfirmModal extends React.Component {
                         className='btn btn-primary'
                         onClick={this.props.onConfirm}
                     >
-                        {this.props.confirm_button}
+                        {this.props.confirmButton}
                     </button>
                 </Modal.Footer>
             </Modal>
@@ -55,13 +55,13 @@ export default class ConfirmModal extends React.Component {
 ConfirmModal.defaultProps = {
     title: '',
     message: '',
-    confirm_button: ''
+    confirmButton: ''
 };
 ConfirmModal.propTypes = {
     show: React.PropTypes.bool.isRequired,
-    title: React.PropTypes.string,
-    message: React.PropTypes.string,
-    confirm_button: React.PropTypes.string,
+    title: React.PropTypes.node,
+    message: React.PropTypes.node,
+    confirmButton: React.PropTypes.node,
     onConfirm: React.PropTypes.func.isRequired,
     onCancel: React.PropTypes.func.isRequired
 };

web/react/components/member_list_team.jsx

@@ -1,7 +1,8 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import MemberListTeamItem from './member_list_team_item.jsx';
+import FilteredUserList from './filtered_user_list.jsx';
+import TeamMembersDropdown from './team_members_dropdown.jsx';
 import UserStore from '../stores/user_store.jsx';
 
 export default class MemberListTeam extends React.Component {
@@ -44,21 +45,11 @@ export default class MemberListTeam extends React.Component {
     }
 
     render() {
-        const memberList = this.state.users.map((user) => {
-            return (
-                <MemberListTeamItem
-                    key={user.id}
-                    user={user}
-                />
-            );
-        });
-
         return (
-            <table className='table more-table member-list-holder'>
-                <tbody>
-                    {memberList}
-                </tbody>
-            </table>
+            <FilteredUserList
+                users={this.state.users}
+                actions={[TeamMembersDropdown]}
+            />
         );
     }
 }

web/react/components/team_members_dropdown.jsx

@@ -9,28 +9,9 @@ import * as Utils from '../utils/utils.jsx';
 import ConfirmModal from './confirm_modal.jsx';
 import TeamStore from '../stores/team_store.jsx';
 
-import {injectIntl, intlShape, defineMessages, FormattedMessage} from 'mm-intl';
+import {FormattedMessage} from 'mm-intl';
 
-var holders = defineMessages({
-    confirmDemoteRoleTitle: {
-        id: 'member_team_item.confirmDemoteRoleTitle',
-        defaultMessage: 'Confirm demotion from System Admin role'
-    },
-    confirmDemotion: {
-        id: 'member_team_item.confirmDemotion',
-        defaultMessage: 'Confirm Demotion'
-    },
-    confirmDemoteDescription: {
-        id: 'member_team_item.confirmDemoteDescription',
-        defaultMessage: 'If you demote yourself from the System Admin role and there is not another user with System Admin privileges, you\'ll need to re-assign a System Admin by accessing the Mattermost server through a terminal and running the following command.'
-    },
-    confirmDemotionCmd: {
-        id: 'member_team_item.confirmDemotionCmd',
-        defaultMessage: 'platform -assign_role -team_name="yourteam" -email="name@yourcompany.com" -role="system_admin"'
-    }
-});
-
-export default class MemberListTeamItem extends React.Component {
+export default class TeamMembersDropdown extends React.Component {
     constructor(props) {
         super(props);
 
@@ -163,7 +144,6 @@ export default class MemberListTeamItem extends React.Component {
                 defaultMessage='Member'
             />
         );
-        const timestamp = UserStore.getCurrentUser().update_at;
 
         if (user.roles.length > 0) {
             if (Utils.isSystemAdmin(user.roles)) {
@@ -185,7 +165,6 @@ export default class MemberListTeamItem extends React.Component {
             }
         }
 
-        const email = user.email;
         let showMakeMember = user.roles === 'admin' || user.roles === 'system_admin';
         let showMakeAdmin = user.roles === '' || user.roles === 'system_admin';
         let showMakeActive = false;
@@ -276,15 +255,43 @@ export default class MemberListTeamItem extends React.Component {
             );
         }
         const me = UserStore.getCurrentUser();
-        const {formatMessage} = this.props.intl;
         let makeDemoteModal = null;
         if (this.props.user.id === me.id) {
+            const title = (
+                <FormattedMessage
+                    id='member_team_item.confirmDemoteRoleTitle'
+                    defaultMessage='Confirm demotion from System Admin role'
+                />
+            );
+            const message = (
+                <div>
+                    <FormattedMessage
+                        id='member_team_item.confirmDemoteDescription'
+                        defaultMessage="If you demote yourself from the System Admin role and there is not another user with System Admin privileges, you'll need to re-assign a System Admin by accessing the Mattermost server through a terminal and running the following command."
+                    />
+                    <br/>
+                    <br/>
+                    <FormattedMessage
+                        id='member_team_item.confirmDemotionCmd'
+                        defaultMessage='platform -assign_role -team_name="yourteam" -email="name@yourcompany.com" -role="system_admin"'
+                    />
+                    {serverError}
+                </div>
+            );
+
+            const confirmButton = (
+                <FormattedMessage
+                    id='member_team_item.confirmDemotion'
+                    defaultMessage='Confirm Demotion'
+                />
+            );
+
             makeDemoteModal = (
                 <ConfirmModal
                     show={this.state.showDemoteModal}
-                    title={formatMessage(holders.confirmDemoteRoleTitle)}
-                    message={[formatMessage(holders.confirmDemoteDescription), React.createElement('br'), React.createElement('br'), formatMessage(holders.confirmDemotionCmd), serverError]}
-                    confirm_button={formatMessage(holders.confirmDemotion)}
+                    title={title}
+                    message={message}
+                    confirmButton={confirmButton}
                     onConfirm={this.handleDemoteSubmit}
                     onCancel={this.handleDemoteCancel}
                 />
@@ -292,48 +299,33 @@ export default class MemberListTeamItem extends React.Component {
         }
 
         return (
-            <tr>
-                <td className='row member-div'>
-                    <img
-                        className='post-profile-img pull-left'
-                        src={`/api/v1/users/${user.id}/image?time=${timestamp}&${Utils.getSessionIndex()}`}
-                        height='36'
-                        width='36'
-                    />
-                    <span className='more-name'>{Utils.displayUsername(user.id)}</span>
-                    <span className='more-description'>{email}</span>
-                    <div className='dropdown member-drop'>
-                        <a
-                            href='#'
-                            className='dropdown-toggle theme'
-                            type='button'
-                            data-toggle='dropdown'
-                            aria-expanded='true'
-                        >
-                            <span className='fa fa-pencil'></span>
-                            <span>{currentRoles} </span>
-                        </a>
-                        <ul
-                            className='dropdown-menu member-menu'
-                            role='menu'
-                        >
-                            {makeAdmin}
-                            {makeMember}
-                            {makeActive}
-                            {makeNotActive}
-                        </ul>
-                    </div>
-                    {makeDemoteModal}
-                    {serverError}
-                </td>
-            </tr>
+            <div className='dropdown member-drop'>
+                <a
+                    href='#'
+                    className='dropdown-toggle theme'
+                    type='button'
+                    data-toggle='dropdown'
+                    aria-expanded='true'
+                >
+                    <span className='fa fa-pencil'></span>
+                    <span>{currentRoles} </span>
+                </a>
+                <ul
+                    className='dropdown-menu member-menu'
+                    role='menu'
+                >
+                    {makeAdmin}
+                    {makeMember}
+                    {makeActive}
+                    {makeNotActive}
+                </ul>
+                {makeDemoteModal}
+                {serverError}
+            </div>
         );
     }
 }
 
-MemberListTeamItem.propTypes = {
-    intl: intlShape.isRequired,
+TeamMembersDropdown.propTypes = {
     user: React.PropTypes.object.isRequired
 };
-
-export default injectIntl(MemberListTeamItem);

web/react/components/team_members_modal.jsx

@@ -28,12 +28,13 @@ export default class TeamMembersModal extends React.Component {
     }
 
     onShow() {
-        if ($(window).width() > 768) {
+        // TODO ugh
+        /*if ($(window).width() > 768) {
             $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar();
             $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 200);
         } else {
             $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 150);
-        }
+        }*/
     }
 
     render() {
@@ -41,7 +42,7 @@ export default class TeamMembersModal extends React.Component {
 
         return (
             <Modal
-                dialogClassName='team-members-modal'
+                dialogClassName='more-modal'
                 show={this.props.show}
                 onHide={this.props.onHide}
             >
@@ -54,10 +55,8 @@ export default class TeamMembersModal extends React.Component {
                         }}
                     />
                 </Modal.Header>
-                <Modal.Body ref='modalBody'>
-                    <div className='team-member-list'>
-                        <MemberListTeam/>
-                    </div>
+                <Modal.Body>
+                    <MemberListTeam/>
                 </Modal.Body>
                 <Modal.Footer>
                     <button