From 5da5c0bbfb80cb5c9cf2699f42d17decc2d60f5b Mon Sep 17 00:00:00 2001 From: Joram Wilander Date: Tue, 1 Aug 2017 11:06:53 -0400 Subject: PLT-6987 User access token UI (#7007) * Add user access token UI * Fix enter press and update mattermost-redux * Updating UI for access token stuff (#7066) * Revert segment key --- .../components/admin_console/system_users/index.js | 5 +- .../admin_console/system_users/system_users.jsx | 25 ++- .../system_users/system_users_dropdown.jsx | 175 +++++++++------------ .../system_users/system_users_list.jsx | 103 +++++++++--- 4 files changed, 184 insertions(+), 124 deletions(-) (limited to 'webapp/components/admin_console/system_users') diff --git a/webapp/components/admin_console/system_users/index.js b/webapp/components/admin_console/system_users/index.js index 8f1c0dc35..261a11d7e 100644 --- a/webapp/components/admin_console/system_users/index.js +++ b/webapp/components/admin_console/system_users/index.js @@ -4,7 +4,7 @@ import {connect} from 'react-redux'; import {bindActionCreators} from 'redux'; import {getTeams, getTeamStats} from 'mattermost-redux/actions/teams'; -import {getUser} from 'mattermost-redux/actions/users'; +import {getUser, getUserAccessToken} from 'mattermost-redux/actions/users'; import {getTeamsList} from 'mattermost-redux/selectors/entities/teams'; @@ -22,7 +22,8 @@ function mapDispatchToProps(dispatch) { actions: bindActionCreators({ getTeams, getTeamStats, - getUser + getUser, + getUserAccessToken }, dispatch) }; } diff --git a/webapp/components/admin_console/system_users/system_users.jsx b/webapp/components/admin_console/system_users/system_users.jsx index 5c8aa9bfd..4fbdc26d8 100644 --- a/webapp/components/admin_console/system_users/system_users.jsx +++ b/webapp/components/admin_console/system_users/system_users.jsx @@ -54,7 +54,12 @@ export default class SystemUsers extends React.Component { /* * Function to get a user */ - getUser: PropTypes.func.isRequired + getUser: PropTypes.func.isRequired, + + /* + * Function to get a user access token + */ + getUserAccessToken: PropTypes.func.isRequired }).isRequired } @@ -240,7 +245,7 @@ export default class SystemUsers extends React.Component { (users) => { if (users.length === 0 && term.length === USER_ID_LENGTH) { // This term didn't match any users name, but it does look like it might be a user's ID - this.getUserById(term); + this.getUserByTokenOrId(term); } else { this.setState({loading: false}); } @@ -269,6 +274,22 @@ export default class SystemUsers extends React.Component { ); } + getUserByTokenOrId = async (id) => { + if (global.window.mm_config.EnableUserAccessTokens === 'true') { + const {data} = await this.props.actions.getUserAccessToken(id); + + if (data) { + this.term = data.user_id; + this.setState({term: data.user_id}); + this.updateUsersFromStore(this.state.teamId, data.user_id); + this.getUserById(data.user_id); + return; + } + } + + this.getUserById(id); + } + renderFilterRow(doSearch) { const teams = this.props.teams.map((team) => { return ( diff --git a/webapp/components/admin_console/system_users/system_users_dropdown.jsx b/webapp/components/admin_console/system_users/system_users_dropdown.jsx index fe53ade44..1dbb6b325 100644 --- a/webapp/components/admin_console/system_users/system_users_dropdown.jsx +++ b/webapp/components/admin_console/system_users/system_users_dropdown.jsx @@ -8,7 +8,7 @@ import UserStore from 'stores/user_store.jsx'; import Constants from 'utils/constants.jsx'; import * as Utils from 'utils/utils.jsx'; -import {updateUserRoles, updateActive} from 'actions/user_actions.jsx'; +import {updateActive} from 'actions/user_actions.jsx'; import {adminResetMfa} from 'actions/admin_actions.jsx'; import {FormattedMessage} from 'react-intl'; @@ -19,28 +19,36 @@ import React from 'react'; export default class SystemUsersDropdown extends React.Component { static propTypes = { + + /* + * User to manage with dropdown + */ user: PropTypes.object.isRequired, + + /* + * Function to open password reset, takes user as an argument + */ doPasswordReset: PropTypes.func.isRequired, - doManageTeams: PropTypes.func.isRequired + + /* + * Function to open manage teams, takes user as an argument + */ + doManageTeams: PropTypes.func.isRequired, + + /* + * Function to open manage roles, takes user as an argument + */ + doManageRoles: PropTypes.func.isRequired, + + /* + * Function to open manage tokens, takes user as an argument + */ + doManageTokens: PropTypes.func.isRequired }; constructor(props) { super(props); - this.handleMakeMember = this.handleMakeMember.bind(this); - this.handleMakeActive = this.handleMakeActive.bind(this); - this.handleShowDeactivateMemberModal = this.handleShowDeactivateMemberModal.bind(this); - this.handleDeactivateMember = this.handleDeactivateMember.bind(this); - this.handleDeactivateCancel = this.handleDeactivateCancel.bind(this); - this.handleMakeSystemAdmin = this.handleMakeSystemAdmin.bind(this); - this.handleManageTeams = this.handleManageTeams.bind(this); - this.handleResetPassword = this.handleResetPassword.bind(this); - this.handleResetMfa = this.handleResetMfa.bind(this); - this.handleDemoteSystemAdmin = this.handleDemoteSystemAdmin.bind(this); - this.handleDemoteSubmit = this.handleDemoteSubmit.bind(this); - this.handleDemoteCancel = this.handleDemoteCancel.bind(this); - this.renderDeactivateMemberModal = this.renderDeactivateMemberModal.bind(this); - this.state = { serverError: null, showDemoteModal: false, @@ -50,61 +58,39 @@ export default class SystemUsersDropdown extends React.Component { }; } - doMakeMember() { - updateUserRoles( - this.props.user.id, - 'system_user', - null, + handleMakeActive = (e) => { + e.preventDefault(); + updateActive(this.props.user.id, true, null, (err) => { this.setState({serverError: err.message}); } ); } - handleMakeMember(e) { + handleManageTeams = (e) => { e.preventDefault(); - const me = UserStore.getCurrentUser(); - if (this.props.user.id === me.id && me.roles.includes('system_admin')) { - this.handleDemoteSystemAdmin(this.props.user, 'member'); - } else { - this.doMakeMember(); - } - } - handleMakeActive(e) { - e.preventDefault(); - updateActive(this.props.user.id, true, null, - (err) => { - this.setState({serverError: err.message}); - } - ); + this.props.doManageTeams(this.props.user); } - handleMakeSystemAdmin(e) { + handleManageRoles = (e) => { e.preventDefault(); - updateUserRoles( - this.props.user.id, - 'system_user system_admin', - null, - (err) => { - this.setState({serverError: err.message}); - } - ); + this.props.doManageRoles(this.props.user); } - handleManageTeams(e) { + handleManageTokens = (e) => { e.preventDefault(); - this.props.doManageTeams(this.props.user); + this.props.doManageTokens(this.props.user); } - handleResetPassword(e) { + handleResetPassword = (e) => { e.preventDefault(); this.props.doPasswordReset(this.props.user); } - handleResetMfa(e) { + handleResetMfa = (e) => { e.preventDefault(); adminResetMfa(this.props.user.id, @@ -115,7 +101,7 @@ export default class SystemUsersDropdown extends React.Component { ); } - handleDemoteSystemAdmin(user, role) { + handleDemoteSystemAdmin = (user, role) => { this.setState({ serverError: this.state.serverError, showDemoteModal: true, @@ -124,7 +110,7 @@ export default class SystemUsersDropdown extends React.Component { }); } - handleDemoteCancel() { + handleDemoteCancel = () => { this.setState({ serverError: null, showDemoteModal: false, @@ -133,7 +119,7 @@ export default class SystemUsersDropdown extends React.Component { }); } - handleDemoteSubmit() { + handleDemoteSubmit = () => { if (this.state.role === 'member') { this.doMakeMember(); } @@ -147,13 +133,13 @@ export default class SystemUsersDropdown extends React.Component { } } - handleShowDeactivateMemberModal(e) { + handleShowDeactivateMemberModal = (e) => { e.preventDefault(); this.setState({showDeactivateMemberModal: true}); } - handleDeactivateMember() { + handleDeactivateMember = () => { updateActive(this.props.user.id, false, null, (err) => { this.setState({serverError: err.message}); @@ -163,11 +149,11 @@ export default class SystemUsersDropdown extends React.Component { this.setState({showDeactivateMemberModal: false}); } - handleDeactivateCancel() { + handleDeactivateCancel = () => { this.setState({showDeactivateMemberModal: false}); } - renderDeactivateMemberModal() { + renderDeactivateMemberModal = () => { const title = ( ); - showMakeMember = false; - showMakeSystemAdmin = false; showMakeActive = true; showMakeNotActive = false; showManageTeams = false; @@ -267,44 +249,6 @@ export default class SystemUsersDropdown extends React.Component { disableActivationToggle = true; } - let makeSystemAdmin = null; - if (showMakeSystemAdmin) { - makeSystemAdmin = ( -
  • - - - -
    • - ); - } - - let makeMember = null; - if (showMakeMember) { - makeMember = ( -
  • - - - -
    • - ); - } - let menuClass = ''; if (disableActivationToggle) { menuClass = 'disabled'; @@ -427,6 +371,25 @@ export default class SystemUsersDropdown extends React.Component { ); } + let manageTokens; + if (global.window.mm_config.EnableUserAccessTokens === 'true') { + manageTokens = ( +
  • + + + +
    • + ); + } + let makeDemoteModal = null; if (this.props.user.id === me.id) { const title = ( @@ -498,11 +461,23 @@ export default class SystemUsersDropdown extends React.Component { className='dropdown-menu member-menu' role='menu' > - {makeMember} {makeActive} {makeNotActive} - {makeSystemAdmin} +
  • + + + +
    • {manageTeams} + {manageTokens} {mfaReset} {passwordReset} diff --git a/webapp/components/admin_console/system_users/system_users_list.jsx b/webapp/components/admin_console/system_users/system_users_list.jsx index 6d58137ff..2863f9cec 100644 --- a/webapp/components/admin_console/system_users/system_users_list.jsx +++ b/webapp/components/admin_console/system_users/system_users_list.jsx @@ -6,6 +6,8 @@ import PropTypes from 'prop-types'; import {FormattedMessage, FormattedHTMLMessage} from 'react-intl'; import ManageTeamsModal from 'components/admin_console/manage_teams_modal/manage_teams_modal.jsx'; +import ManageRolesModal from 'components/admin_console/manage_roles_modal'; +import ManageTokensModal from 'components/admin_console/manage_tokens_modal'; import ResetPasswordModal from 'components/admin_console/reset_password_modal.jsx'; import SearchableUserList from 'components/searchable_user_list/searchable_user_list.jsx'; @@ -14,6 +16,7 @@ const dispatch = store.dispatch; const getState = store.getState; import {getUser} from 'mattermost-redux/actions/users'; +import * as UserUtils from 'mattermost-redux/utils/user_utils'; import {Constants} from 'utils/constants.jsx'; import * as Utils from 'utils/utils.jsx'; @@ -37,21 +40,12 @@ export default class SystemUsersList extends React.Component { constructor(props) { super(props); - this.nextPage = this.nextPage.bind(this); - this.previousPage = this.previousPage.bind(this); - this.search = this.search.bind(this); - - this.doManageTeams = this.doManageTeams.bind(this); - this.doManageTeamsDismiss = this.doManageTeamsDismiss.bind(this); - - this.doPasswordReset = this.doPasswordReset.bind(this); - this.doPasswordResetDismiss = this.doPasswordResetDismiss.bind(this); - this.doPasswordResetSubmit = this.doPasswordResetSubmit.bind(this); - this.state = { page: 0, showManageTeamsModal: false, + showManageRolesModal: false, + showManageTokensModal: false, showPasswordModal: false, user: null }; @@ -63,17 +57,17 @@ export default class SystemUsersList extends React.Component { } } - nextPage() { + nextPage = () => { this.setState({page: this.state.page + 1}); this.props.nextPage(this.state.page + 1); } - previousPage() { + previousPage = () => { this.setState({page: this.state.page - 1}); } - search(term) { + search = (term) => { this.props.search(term); if (term !== '') { @@ -81,35 +75,63 @@ export default class SystemUsersList extends React.Component { } } - doManageTeams(user) { + doManageTeams = (user) => { this.setState({ showManageTeamsModal: true, user }); } - doManageTeamsDismiss() { + doManageRoles = (user) => { + this.setState({ + showManageRolesModal: true, + user + }); + } + + doManageTokens = (user) => { + this.setState({ + showManageTokensModal: true, + user + }); + } + + doManageTeamsDismiss = () => { this.setState({ showManageTeamsModal: false, user: null }); } - doPasswordReset(user) { + doManageRolesDismiss = () => { + this.setState({ + showManageRolesModal: false, + user: null + }); + } + + doManageTokensDismiss = () => { + this.setState({ + showManageTokensModal: false, + user: null + }); + } + + doPasswordReset = (user) => { this.setState({ showPasswordModal: true, user }); } - doPasswordResetDismiss() { + doPasswordResetDismiss = () => { this.setState({ showPasswordModal: false, user: null }); } - doPasswordResetSubmit(user) { + doPasswordResetSubmit = (user) => { getUser(user.id)(dispatch, getState); this.setState({ @@ -174,6 +196,35 @@ export default class SystemUsersList extends React.Component { } } + const userAccessTokensEnabled = global.window.mm_config.EnableUserAccessTokens === 'true'; + if (userAccessTokensEnabled) { + const hasPostAllRole = UserUtils.hasPostAllRole(user.roles); + const hasPostAllPublicRole = UserUtils.hasPostAllPublicRole(user.roles); + const hasUserAccessTokenRole = UserUtils.hasUserAccessTokenRole(user.roles); + const isSystemAdmin = UserUtils.isSystemAdmin(user.roles); + + let messageId = 'admin.user_item.userAccessTokenNo'; + if (hasUserAccessTokenRole || isSystemAdmin) { + if (isSystemAdmin) { + messageId = 'admin.user_item.userAccessTokenAdmin'; + } else if (hasPostAllRole) { + messageId = 'admin.user_item.userAccessTokenPostAll'; + } else if (hasPostAllPublicRole) { + messageId = 'admin.user_item.userAccessTokenPostAllPublic'; + } else { + messageId = 'admin.user_item.userAccessTokenYes'; + } + } + + info.push(', '); + info.push( + + ); + } + return info; } @@ -236,7 +287,9 @@ export default class SystemUsersList extends React.Component { actions={[SystemUsersDropdown]} actionProps={{ doPasswordReset: this.doPasswordReset, - doManageTeams: this.doManageTeams + doManageTeams: this.doManageTeams, + doManageRoles: this.doManageRoles, + doManageTokens: this.doManageTokens }} nextPage={this.nextPage} previousPage={this.previousPage} @@ -250,6 +303,16 @@ export default class SystemUsersList extends React.Component { show={this.state.showManageTeamsModal} onModalDismissed={this.doManageTeamsDismiss} /> + +