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

4 files changed, 184 insertions, 124 deletions

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 = (
             <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>
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(
+                <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}