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)

5 files changed, 51 insertions, 36 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;
     }
 
diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index 02e0964ce..3b69c147e 100755
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -988,11 +988,9 @@
   "admin.manage_roles.manageRolesTitle": "Manage Roles",
   "admin.manage_roles.cancel": "Cancel",
   "admin.manage_roles.save": "Save",
-  "admin.user_item.userAccessTokenNo": "<strong>User Access Tokens:</strong> No",
-  "admin.user_item.userAccessTokenAdmin": "<strong>User Access Tokens:</strong> Yes (with system_admin)",
-  "admin.user_item.userAccessTokenPostAll": "<strong>User Access Tokens:</strong> Yes (with post:all)",
-  "admin.user_item.userAccessTokenPostAllPublic": "<strong>User Access Tokens:</strong> Yes (with post:channels)",
-  "admin.user_item.userAccessTokenYes": "<strong>User Access Tokens:</strong> Yes",
+  "admin.user_item.userAccessTokenPostAll": "(with post:all user access tokens)",
+  "admin.user_item.userAccessTokenPostAllPublic": "(with post:channels user access tokens)",
+  "admin.user_item.userAccessTokenYes": "(with user access tokens)",
   "admin.user_item.authServiceEmail": "<strong>Sign-in Method:</strong> Email",
   "admin.user_item.authServiceNotEmail": "<strong>Sign-in Method:</strong> {service}",
   "admin.user_item.confirmDemoteDescription": "If you demote yourself from the System Admin role and there is not another user with System Admin privileges, you'll need to re-assign a System Admin by accessing the Mattermost server through a terminal and running the following command.",
diff --git a/webapp/sass/base/_typography.scss b/webapp/sass/base/_typography.scss
index c91aec668..83f3e6b8b 100644
--- a/webapp/sass/base/_typography.scss
+++ b/webapp/sass/base/_typography.scss
@@ -22,6 +22,10 @@ body {
     font-family: 'Open Sans', sans-serif;
 }
 
+.light {
+    @include opacity(.6);
+}
+
 .word-break--all {
     word-break: break-all;
 }
diff --git a/webapp/sass/utils/_modifiers.scss b/webapp/sass/utils/_modifiers.scss
index 467b9a086..e388d0901 100644
--- a/webapp/sass/utils/_modifiers.scss
+++ b/webapp/sass/utils/_modifiers.scss
@@ -83,6 +83,10 @@
 .margin-top {
     margin-top: 7px;
 
+    &.half {
+        margin-top: 4px;
+    }
+
     &.x2 {
         margin-top: 14px;
     }