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
2017-08-01 11:06:53 -04:00
--- 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)
    };
 }
--- 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 (
--- 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,28 +58,7 @@ export default class SystemUsersDropdown extends React.Component {
        };
    }

-    doMakeMember() {
-        updateUserRoles(
-            this.props.user.id,
-            'system_user',
-            null,
-            (err) => {
-                this.setState({serverError: err.message});
-            }
-        );
-    }
-
-    handleMakeMember(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) {
+    handleMakeActive = (e) => {
        e.preventDefault();
        updateActive(this.props.user.id, true, null,
            (err) => {
@@ -80,31 +67,30 @@ export default class SystemUsersDropdown extends React.Component {
        );
    }

-    handleMakeSystemAdmin(e) {
-        e.preventDefault();
-
-        updateUserRoles(
-            this.props.user.id,
-            'system_user system_admin',
-            null,
-            (err) => {
-                this.setState({serverError: err.message});
-            }
-        );
-    }
-
-    handleManageTeams(e) {
+    handleManageTeams = (e) => {
        e.preventDefault();

        this.props.doManageTeams(this.props.user);
    }

-    handleResetPassword(e) {
+    handleManageRoles = (e) => {
+        e.preventDefault();
+
+        this.props.doManageRoles(this.props.user);
+    }
+
+    handleManageTokens = (e) => {
+        e.preventDefault();
+
+        this.props.doManageTokens(this.props.user);
+    }
+
+    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 = (
            <FormattedMessage
                id='deactivate_member_modal.title'
@@ -240,8 +226,6 @@ export default class SystemUsersDropdown extends React.Component {
        }

        const me = UserStore.getCurrentUser();
-        let showMakeMember = Utils.isSystemAdmin(user.roles);
-        let showMakeSystemAdmin = !Utils.isSystemAdmin(user.roles);
        let showMakeActive = false;
        let showMakeNotActive = !Utils.isSystemAdmin(user.roles);
        let showManageTeams = true;
@@ -255,8 +239,6 @@ export default class SystemUsersDropdown extends React.Component {
                    defaultMessage='Inactive'
                />
            );
-            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 = (
-                <li role='presentation'>
-                    <a
-                        id='makeSystemAdmin'
-                        role='menuitem'
-                        href='#'
-                        onClick={this.handleMakeSystemAdmin}
-                    >
-                        <FormattedMessage
-                            id='admin.user_item.makeSysAdmin'
-                            defaultMessage='Make System Admin'
-                        />
-                    </a>
-                </li>
-            );
-        }
-
-        let makeMember = null;
-        if (showMakeMember) {
-            makeMember = (
-                <li role='presentation'>
-                    <a
-                        id='makeMember'
-                        role='menuitem'
-                        href='#'
-                        onClick={this.handleMakeMember}
-                    >
-                        <FormattedMessage
-                            id='admin.user_item.makeMember'
-                            defaultMessage='Make Member'
-                        />
-                    </a>
-                </li>
-            );
-        }
-
        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 = (
+                <li role='presentation'>
+                    <a
+                        id='manageTokens'
+                        role='menuitem'
+                        href='#'
+                        onClick={this.handleManageTokens}
+                    >
+                        <FormattedMessage
+                            id='admin.user_item.manageTokens'
+                            defaultMessage='Manage Tokens'
+                        />
+                    </a>
+                </li>
+            );
+        }
+
        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}
+                    <li role='presentation'>
+                        <a
+                            id='manageRoles'
+                            role='menuitem'
+                            href='#'
+                            onClick={this.handleManageRoles}
+                        >
+                            <FormattedMessage
+                                id='admin.user_item.manageRoles'
+                                defaultMessage='Manage Roles'
+                            />
+                        </a>
+                    </li>
                    {manageTeams}
+                    {manageTokens}
                    {mfaReset}
                    {passwordReset}
                </ul>
--- 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(
+                <FormattedHTMLMessage
+                    key='admin.user_item.userAccessToken'
+                    id={messageId}
+                />
+            );
+        }
+
        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}
                />
+                <ManageRolesModal
+                    user={this.state.user}
+                    show={this.state.showManageRolesModal}
+                    onModalDismissed={this.doManageRolesDismiss}
+                />
+                <ManageTokensModal
+                    user={this.state.user}
+                    show={this.state.showManageTokensModal}
+                    onModalDismissed={this.doManageTokensDismiss}
+                />
                <ResetPasswordModal
                    user={this.state.user}
                    show={this.state.showPasswordModal}