summaryrefslogtreecommitdiffstats
path: root/webapp/components/admin_console
diff options
context:
space:
mode:
Diffstat (limited to 'webapp/components/admin_console')
-rw-r--r--webapp/components/admin_console/admin_navbar_dropdown.jsx4
-rw-r--r--webapp/components/admin_console/admin_team_members_dropdown.jsx (renamed from webapp/components/admin_console/user_item.jsx)126
-rw-r--r--webapp/components/admin_console/team_users.jsx255
3 files changed, 179 insertions, 206 deletions
diff --git a/webapp/components/admin_console/admin_navbar_dropdown.jsx b/webapp/components/admin_console/admin_navbar_dropdown.jsx
index 7b958cbb0..f20451b4b 100644
--- a/webapp/components/admin_console/admin_navbar_dropdown.jsx
+++ b/webapp/components/admin_console/admin_navbar_dropdown.jsx
@@ -22,7 +22,7 @@ export default class AdminNavbarDropdown extends React.Component {
this.state = {
teams: TeamStore.getAll(),
- teamMembers: TeamStore.getTeamMembers()
+ teamMembers: TeamStore.getMyTeamMembers()
};
}
@@ -45,7 +45,7 @@ export default class AdminNavbarDropdown extends React.Component {
onTeamChange() {
this.setState({
teams: TeamStore.getAll(),
- teamMembers: TeamStore.getTeamMembers()
+ teamMembers: TeamStore.getMyTeamMembers()
});
}
diff --git a/webapp/components/admin_console/user_item.jsx b/webapp/components/admin_console/admin_team_members_dropdown.jsx
index ac548afe0..85daa86ba 100644
--- a/webapp/components/admin_console/user_item.jsx
+++ b/webapp/components/admin_console/admin_team_members_dropdown.jsx
@@ -8,11 +8,11 @@ import UserStore from 'stores/user_store.jsx';
import ConfirmModal from '../confirm_modal.jsx';
import TeamStore from 'stores/team_store.jsx';
-import {FormattedMessage, FormattedHTMLMessage} from 'react-intl';
+import {FormattedMessage} from 'react-intl';
import React from 'react';
-export default class UserItem extends React.Component {
+export default class AdminTeamMembersDropdown extends React.Component {
constructor(props) {
super(props);
@@ -50,7 +50,7 @@ export default class UserItem extends React.Component {
}
);
Client.updateTeamMemberRoles(
- this.props.team.id,
+ this.props.teamMember.team_id,
this.props.user.id,
'team_user',
() => {
@@ -74,7 +74,7 @@ export default class UserItem extends React.Component {
handleRemoveFromTeam() {
Client.removeUserFromTeam(
- this.props.team.id,
+ this.props.teamMember.team_id,
this.props.user.id,
() => {
this.props.refreshProfiles();
@@ -111,7 +111,7 @@ export default class UserItem extends React.Component {
doMakeTeamAdmin() {
Client.updateTeamMemberRoles(
- this.props.team.id,
+ this.props.teamMember.team_id,
this.props.user.id,
'team_user team_admin',
() => {
@@ -241,7 +241,6 @@ export default class UserItem extends React.Component {
}
const me = UserStore.getCurrentUser();
- const email = user.email;
let showMakeMember = Utils.isAdmin(teamMember.roles) || Utils.isSystemAdmin(user.roles);
let showMakeAdmin = !Utils.isAdmin(teamMember.roles) && !Utils.isSystemAdmin(user.roles);
let showMakeSystemAdmin = !Utils.isSystemAdmin(user.roles);
@@ -406,39 +405,8 @@ export default class UserItem extends React.Component {
);
}
- let mfaActiveText;
- if (mfaEnabled) {
- if (user.mfa_active) {
- mfaActiveText = (
- <FormattedHTMLMessage
- id='admin.user_item.mfaYes'
- defaultMessage=', <strong>MFA</strong>: Yes'
- />
- );
- } else {
- mfaActiveText = (
- <FormattedHTMLMessage
- id='admin.user_item.mfaNo'
- defaultMessage=', <strong>MFA</strong>: No'
- />
- );
- }
- }
-
- let authServiceText;
let passwordReset;
if (user.auth_service) {
- const service = (user.auth_service === Constants.LDAP_SERVICE || user.auth_service === Constants.SAML_SERVICE) ? user.auth_service.toUpperCase() : Utils.toTitleCase(user.auth_service);
- authServiceText = (
- <FormattedHTMLMessage
- id='admin.user_item.authServiceNotEmail'
- defaultMessage=', <strong>Sign-in Method:</strong> {service}'
- values={{
- service
- }}
- />
- );
-
passwordReset = (
<li role='presentation'>
<a
@@ -454,13 +422,6 @@ export default class UserItem extends React.Component {
</li>
);
} else {
- authServiceText = (
- <FormattedHTMLMessage
- id='admin.user_item.authServiceEmail'
- defaultMessage=', <strong>Sign-in Method:</strong> Email'
- />
- );
-
passwordReset = (
<li role='presentation'>
<a
@@ -531,63 +492,38 @@ export default class UserItem extends React.Component {
}
return (
- <div className='more-modal__row'>
- <img
- className='more-modal__image pull-left'
- src={`${Client.getUsersRoute()}/${user.id}/image?time=${user.update_at}`}
- height='36'
- width='36'
- />
- <div className='more-modal__details'>
- <div className='more-modal__name'>{displayedName}</div>
- <div className='more-modal__description'>
- <FormattedHTMLMessage
- id='admin.user_item.emailTitle'
- defaultMessage='<strong>Email:</strong> {email}'
- values={{
- email
- }}
- />
- {authServiceText}
- {mfaActiveText}
- </div>
- {serverError}
- </div>
- <div className='more-modal__actions'>
- <div className='dropdown member-drop'>
- <a
- href='#'
- className='dropdown-toggle theme'
- type='button'
- data-toggle='dropdown'
- aria-expanded='true'
- >
- <span>{currentRoles} </span>
- <span className='caret'/>
- </a>
- <ul
- className='dropdown-menu member-menu'
- role='menu'
- >
- {removeFromTeam}
- {makeAdmin}
- {makeMember}
- {makeActive}
- {makeNotActive}
- {makeSystemAdmin}
- {mfaReset}
- {passwordReset}
- </ul>
- </div>
- </div>
+ <div className='dropdown member-drop'>
+ <a
+ href='#'
+ className='dropdown-toggle theme'
+ type='button'
+ data-toggle='dropdown'
+ aria-expanded='true'
+ >
+ <span>{currentRoles} </span>
+ <span className='caret'/>
+ </a>
+ <ul
+ className='dropdown-menu member-menu'
+ role='menu'
+ >
+ {removeFromTeam}
+ {makeAdmin}
+ {makeMember}
+ {makeActive}
+ {makeNotActive}
+ {makeSystemAdmin}
+ {mfaReset}
+ {passwordReset}
+ </ul>
{makeDemoteModal}
+ {serverError}
</div>
);
}
}
-UserItem.propTypes = {
- team: React.PropTypes.object.isRequired,
+AdminTeamMembersDropdown.propTypes = {
user: React.PropTypes.object.isRequired,
teamMember: React.PropTypes.object.isRequired,
refreshProfiles: React.PropTypes.func.isRequired,
diff --git a/webapp/components/admin_console/team_users.jsx b/webapp/components/admin_console/team_users.jsx
index 56b76c195..8fa73b084 100644
--- a/webapp/components/admin_console/team_users.jsx
+++ b/webapp/components/admin_console/team_users.jsx
@@ -1,16 +1,25 @@
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
-import AdminStore from 'stores/admin_store.jsx';
-import Client from 'client/web_client.jsx';
-import FormError from 'components/form_error.jsx';
-import LoadingScreen from '../loading_screen.jsx';
-import UserItem from './user_item.jsx';
+import SearchableUserList from 'components/searchable_user_list.jsx';
+import AdminTeamMembersDropdown from './admin_team_members_dropdown.jsx';
import ResetPasswordModal from './reset_password_modal.jsx';
+import FormError from 'components/form_error.jsx';
+
+import AdminStore from 'stores/admin_store.jsx';
+import TeamStore from 'stores/team_store.jsx';
+import UserStore from 'stores/user_store.jsx';
+
+import {searchUsers, loadProfilesAndTeamMembers, loadTeamMembersForProfilesList} from 'actions/user_actions.jsx';
+import {getTeamStats} from 'utils/async_client.jsx';
-import {FormattedMessage} from 'react-intl';
+import Constants from 'utils/constants.jsx';
+import * as Utils from 'utils/utils.jsx';
import React from 'react';
+import {FormattedMessage, FormattedHTMLMessage} from 'react-intl';
+
+const USERS_PER_PAGE = 50;
export default class UserList extends React.Component {
static get propTypes() {
@@ -23,34 +32,49 @@ export default class UserList extends React.Component {
super(props);
this.onAllTeamsChange = this.onAllTeamsChange.bind(this);
+ this.onStatsChange = this.onStatsChange.bind(this);
+ this.onUsersChange = this.onUsersChange.bind(this);
+ this.onTeamChange = this.onTeamChange.bind(this);
- this.getTeamProfiles = this.getTeamProfiles.bind(this);
- this.getCurrentTeamProfiles = this.getCurrentTeamProfiles.bind(this);
this.doPasswordReset = this.doPasswordReset.bind(this);
this.doPasswordResetDismiss = this.doPasswordResetDismiss.bind(this);
this.doPasswordResetSubmit = this.doPasswordResetSubmit.bind(this);
- this.getTeamMemberForUser = this.getTeamMemberForUser.bind(this);
+ this.nextPage = this.nextPage.bind(this);
+ this.search = this.search.bind(this);
+ this.loadComplete = this.loadComplete.bind(this);
+
+ const stats = TeamStore.getStats(this.props.params.team);
this.state = {
team: AdminStore.getTeam(this.props.params.team),
- users: null,
- teamMembers: null,
+ users: [],
+ teamMembers: TeamStore.getMembersInTeam(this.props.params.team),
+ total: stats.member_count,
serverError: null,
showPasswordModal: false,
+ loading: true,
user: null
};
}
componentDidMount() {
- this.getCurrentTeamProfiles();
-
AdminStore.addAllTeamsChangeListener(this.onAllTeamsChange);
+ UserStore.addInTeamChangeListener(this.onUsersChange);
+ TeamStore.addChangeListener(this.onTeamChange);
+ TeamStore.addStatsChangeListener(this.onStatsChange);
+
+ loadProfilesAndTeamMembers(0, Constants.PROFILE_CHUNK_SIZE, this.props.params.team, this.loadComplete);
+ getTeamStats(this.props.params.team);
}
componentWillReceiveProps(nextProps) {
if (nextProps.params.team !== this.props.params.team) {
+ const stats = TeamStore.getStats(nextProps.params.team);
this.setState({
- team: AdminStore.getTeam(nextProps.params.team)
+ team: AdminStore.getTeam(nextProps.params.team),
+ users: [],
+ teamMembers: TeamStore.getMembersInTeam(nextProps.params.team),
+ total: stats.member_count
});
this.getTeamProfiles(nextProps.params.team);
@@ -59,6 +83,13 @@ export default class UserList extends React.Component {
componentWillUnmount() {
AdminStore.removeAllTeamsChangeListener(this.onAllTeamsChange);
+ UserStore.removeInTeamChangeListener(this.onUsersChange);
+ TeamStore.removeChangeListener(this.onTeamChange);
+ TeamStore.removeStatsChangeListener(this.onStatsChange);
+ }
+
+ loadComplete() {
+ this.setState({loading: false});
}
onAllTeamsChange() {
@@ -67,59 +98,21 @@ export default class UserList extends React.Component {
});
}
- getCurrentTeamProfiles() {
- this.getTeamProfiles(this.props.params.team);
+ onStatsChange() {
+ const stats = TeamStore.getStats(this.props.params.team);
+ this.setState({total: stats.member_count});
}
- getTeamProfiles(teamId) {
- Client.getTeamMembers(
- teamId,
- (data) => {
- this.setState({
- teamMembers: data
- });
- },
- (err) => {
- this.setState({
- teamMembers: null,
- serverError: err.message
- });
- }
- );
-
- Client.getProfilesForTeam(
- teamId,
- (users) => {
- var memberList = [];
- for (var id in users) {
- if (users.hasOwnProperty(id)) {
- memberList.push(users[id]);
- }
- }
-
- memberList.sort((a, b) => {
- if (a.username < b.username) {
- return -1;
- }
+ onUsersChange() {
+ this.setState({users: UserStore.getProfileListInTeam(this.props.params.team)});
+ }
- if (a.username > b.username) {
- return 1;
- }
+ onTeamChange() {
+ this.setState({teamMembers: TeamStore.getMembersInTeam(this.props.params.team)});
+ }
- return 0;
- });
-
- this.setState({
- users: memberList
- });
- },
- (err) => {
- this.setState({
- users: null,
- serverError: err.message
- });
- }
- );
+ nextPage(page) {
+ loadProfilesAndTeamMembers((page + 1) * USERS_PER_PAGE, USERS_PER_PAGE, this.props.params.team);
}
doPasswordReset(user) {
@@ -144,20 +137,21 @@ export default class UserList extends React.Component {
});
}
- getTeamMemberForUser(userId) {
- if (this.state.teamMembers) {
- for (const index in this.state.teamMembers) {
- if (this.state.teamMembers.hasOwnProperty(index)) {
- var teamMember = this.state.teamMembers[index];
-
- if (teamMember.user_id === userId) {
- return teamMember;
- }
- }
- }
+ search(term) {
+ if (term === '') {
+ this.setState({search: false, users: UserStore.getProfileListInTeam(this.props.params.team)});
+ return;
}
- return null;
+ searchUsers(
+ term,
+ this.props.params.team,
+ {},
+ (users) => {
+ this.setState({loading: true, search: true, users});
+ loadTeamMembersForProfilesList(users, this.props.params.team, this.loadComplete);
+ }
+ );
}
render() {
@@ -165,41 +159,71 @@ export default class UserList extends React.Component {
return null;
}
- if (this.state.users == null || this.state.teamMembers == null) {
- return (
- <div className='wrapper--fixed'>
- <h3>
- <FormattedMessage
- id='admin.userList.title'
- defaultMessage='Users for {team}'
- values={{
- team: this.state.team.name
- }}
- />
- </h3>
- <FormError error={this.state.serverError}/>
- <LoadingScreen/>
- </div>
- );
- }
+ const teamMembers = this.state.teamMembers;
+ const users = this.state.users;
+ const actionUserProps = {};
+ const extraInfo = {};
+ const mfaEnabled = global.window.mm_license.IsLicensed === 'true' && global.window.mm_license.MFA === 'true' && global.window.mm_config.EnableMultifactorAuthentication === 'true';
+
+ let usersToDisplay;
+ if (this.state.loading) {
+ usersToDisplay = null;
+ } else {
+ usersToDisplay = [];
+
+ for (let i = 0; i < users.length; i++) {
+ const user = users[i];
+
+ if (teamMembers[user.id]) {
+ usersToDisplay.push(user);
+ actionUserProps[user.id] = {
+ teamMember: teamMembers[user.id]
+ };
+
+ const info = [];
+
+ if (user.auth_service) {
+ const service = (user.auth_service === Constants.LDAP_SERVICE || user.auth_service === Constants.SAML_SERVICE) ? user.auth_service.toUpperCase() : Utils.toTitleCase(user.auth_service);
+ info.push(
+ <FormattedHTMLMessage
+ id='admin.user_item.authServiceNotEmail'
+ defaultMessage='<strong>Sign-in Method:</strong> {service}'
+ values={{
+ service
+ }}
+ />
+ );
+ } else {
+ info.push(
+ <FormattedHTMLMessage
+ id='admin.user_item.authServiceEmail'
+ defaultMessage='<strong>Sign-in Method:</strong> Email'
+ />
+ );
+ }
- var memberList = this.state.users.map((user) => {
- var teamMember = this.getTeamMemberForUser(user.id);
+ if (mfaEnabled) {
+ if (user.mfa_active) {
+ info.push(
+ <FormattedHTMLMessage
+ id='admin.user_item.mfaYes'
+ defaultMessage='<strong>MFA</strong>: Yes'
+ />
+ );
+ } else {
+ info.push(
+ <FormattedHTMLMessage
+ id='admin.user_item.mfaNo'
+ defaultMessage='<strong>MFA</strong>: No'
+ />
+ );
+ }
+ }
- if (!teamMember || teamMember.delete_at > 0) {
- return null;
+ extraInfo[user.id] = info;
+ }
}
-
- return (
- <UserItem
- team={this.state.team}
- key={'user_' + user.id}
- user={user}
- teamMember={teamMember}
- refreshProfiles={this.getCurrentTeamProfiles}
- doPasswordReset={this.doPasswordReset}
- />);
- });
+ }
return (
<div className='wrapper--fixed'>
@@ -209,7 +233,7 @@ export default class UserList extends React.Component {
defaultMessage='Users for {team} ({count})'
values={{
team: this.state.team.name,
- count: this.state.users.length
+ count: this.state.total
}}
/>
</h3>
@@ -219,7 +243,20 @@ export default class UserList extends React.Component {
role='form'
>
<div className='more-modal__list member-list-holder'>
- {memberList}
+ <SearchableUserList
+ users={usersToDisplay}
+ usersPerPage={USERS_PER_PAGE}
+ total={this.state.total}
+ extraInfo={extraInfo}
+ nextPage={this.nextPage}
+ search={this.search}
+ actions={[AdminTeamMembersDropdown]}
+ actionProps={{
+ refreshProfiles: this.getCurrentTeamProfiles,
+ doPasswordReset: this.doPasswordReset
+ }}
+ actionUserProps={actionUserProps}
+ />
</div>
</form>
<ResetPasswordModal
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-09-11 18:55:48 +0000