PLT-7287 Move access token text in user list to under the dropdown (#7099)

* Move access token text in user list to under the dropdown

* Updating UI for token help text (#7107)

2 files changed, 40 insertions, 31 deletions

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 1dbb6b325..79ccc8b31 100644
--- a/webapp/components/admin_console/system_users/system_users_dropdown.jsx
+++ b/webapp/components/admin_console/system_users/system_users_dropdown.jsx
@@ -10,6 +10,7 @@ import Constants from 'utils/constants.jsx';
 import * as Utils from 'utils/utils.jsx';
 import {updateActive} from 'actions/user_actions.jsx';
 import {adminResetMfa} from 'actions/admin_actions.jsx';
+import * as UserUtils from 'mattermost-redux/utils/user_utils';
 
 import {FormattedMessage} from 'react-intl';
 
@@ -195,6 +196,43 @@ export default class SystemUsersDropdown extends React.Component {
         );
     }
 
+    renderAccessToken = () => {
+        const userAccessTokensEnabled = global.window.mm_config.EnableUserAccessTokens === 'true';
+        if (!userAccessTokensEnabled) {
+            return null;
+        }
+
+        const user = this.props.user;
+        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 = '';
+        if (hasUserAccessTokenRole || isSystemAdmin) {
+            if (hasPostAllRole) {
+                messageId = 'admin.user_item.userAccessTokenPostAll';
+            } else if (hasPostAllPublicRole) {
+                messageId = 'admin.user_item.userAccessTokenPostAllPublic';
+            } else {
+                messageId = 'admin.user_item.userAccessTokenYes';
+            }
+        }
+
+        if (!messageId) {
+            return null;
+        }
+
+        return (
+            <div className='light margin-top half'>
+                <FormattedMessage
+                    key='admin.user_item.userAccessToken'
+                    id={messageId}
+                />
+            </div>
+        );
+    }
+
     render() {
         let serverError = null;
         if (this.state.serverError) {
@@ -445,7 +483,7 @@ export default class SystemUsersDropdown extends React.Component {
         }
 
         return (
-            <div className='dropdown member-drop'>
+            <div className='dropdown member-drop text-right'>
                 <a
                     id='memberDropdown'
                     href='#'
@@ -457,6 +495,7 @@ export default class SystemUsersDropdown extends React.Component {
                     <span>{currentRoles} </span>
                     <span className='caret'/>
                 </a>
+                {this.renderAccessToken()}
                 <ul
                     className='dropdown-menu member-menu'
                     role='menu'
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 2863f9cec..8a7f30e1b 100644
--- a/webapp/components/admin_console/system_users/system_users_list.jsx
+++ b/webapp/components/admin_console/system_users/system_users_list.jsx
@@ -16,7 +16,6 @@ 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';
 
@@ -196,35 +195,6 @@ 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;
     }