Updating user access token UI (#7091)

* Updating user access token UI

Updating help text

Updating tokenlistClass

Updating string for token

Updating translations

Updating translations

Updating translations

* Updating translations

* Minor UI fix

* Update manage_tokens_modal.jsx

* Update user_settings_security.jsx

* Update en.json

* Fix merge conflicts

1 files changed, 54 insertions, 42 deletions

diff --git a/webapp/components/user_settings/user_settings_security/user_settings_security.jsx b/webapp/components/user_settings/user_settings_security/user_settings_security.jsx
index 5c9ad67e3..ef55642e6 100644
--- a/webapp/components/user_settings/user_settings_security/user_settings_security.jsx
+++ b/webapp/components/user_settings/user_settings_security/user_settings_security.jsx
@@ -41,7 +41,7 @@ export default class SecurityTab extends React.Component {
         setEnforceFocus: PropTypes.func.isRequired,
 
         /*
-         * The user access tokens for the user
+         * The personal access tokens for the user
          */
         userAccessTokens: PropTypes.object,
 
@@ -54,22 +54,22 @@ export default class SecurityTab extends React.Component {
             getMe: PropTypes.func.isRequired,
 
             /*
-             * Function to get user access tokens for a user
+             * Function to get personal access tokens for a user
              */
             getUserAccessTokensForUser: PropTypes.func.isRequired,
 
             /*
-             * Function to create a user access token
+             * Function to create a personal access token
              */
             createUserAccessToken: PropTypes.func.isRequired,
 
             /*
-             * Function to revoke a user access token
+             * Function to revoke a personal access token
              */
             revokeUserAccessToken: PropTypes.func.isRequired,
 
             /*
-             * Function to clear user access tokens locally
+             * Function to clear personal access tokens locally
              */
             clearUserAccessTokens: PropTypes.func.isRequired
         }).isRequired
@@ -980,7 +980,7 @@ export default class SecurityTab extends React.Component {
         const description = this.refs.newtokendescription ? this.refs.newtokendescription.value : '';
 
         if (description === '') {
-            this.setState({tokenError: Utils.localizeMessage('user.settings.tokens.nameRequired', 'Please enter a name.')});
+            this.setState({tokenError: Utils.localizeMessage('user.settings.tokens.nameRequired', 'Please enter a description.')});
             return;
         }
 
@@ -1013,14 +1013,14 @@ export default class SecurityTab extends React.Component {
                 confirmTitle: (
                     <FormattedMessage
                         id='user.settings.tokens.confirmCreateTitle'
-                        defaultMessage='Create System Admin User Access Token'
+                        defaultMessage='Create System Admin Personal Access Token'
                     />
                 ),
                 confirmMessage: (
                     <div className='alert alert-danger'>
                         <FormattedHTMLMessage
                             id='user.settings.tokens.confirmCreateMessage'
-                            defaultMessage='You are generating a user access token with System Admin permissions. Are you sure want to create this token?'
+                            defaultMessage='You are generating a personal access token with System Admin permissions. Are you sure want to create this token?'
                         />
                     </div>
                 ),
@@ -1056,17 +1056,17 @@ export default class SecurityTab extends React.Component {
             confirmTitle: (
                 <FormattedMessage
                     id='user.settings.tokens.confirmDeleteTitle'
-                    defaultMessage='Delete {name} Token?'
-                    values={{
-                        name: token.description
-                    }}
+                    defaultMessage='Delete Token?'
                 />
             ),
             confirmMessage: (
                 <div className='alert alert-danger'>
                     <FormattedHTMLMessage
                         id='user.settings.tokens.confirmDeleteMessage'
-                        defaultMessage='Any integrations using this token will no longer be able to access the Mattermost API. You cannot undo this action. Are you sure want to delete this token?'
+                        defaultMessage='Any integrations using this token will no longer be able to access the Mattermost API. You cannot undo this action. <br /><br />Are you sure want to delete the {description} token?'
+                        values={{
+                            description: token.description
+                        }}
                     />
                 </div>
             ),
@@ -1093,6 +1093,7 @@ export default class SecurityTab extends React.Component {
 
     createTokensSection = () => {
         let updateSectionStatus;
+        let tokenListClass = '';
 
         if (this.props.activeSection === 'tokens') {
             const tokenList = [];
@@ -1107,7 +1108,11 @@ export default class SecurityTab extends React.Component {
                         className='setting-box__item'
                     >
                         <div className='whitespace--nowrap overflow--ellipsis'>
-                            <strong>{token.description}</strong>
+                            <FormattedMessage
+                                id='user.settings.tokens.tokenDesc'
+                                defaultMessage='Token Description: '
+                            />
+                            {token.description}
                         </div>
                         <div className='setting-box__token-id whitespace--nowrap overflow--ellipsis'>
                             <FormattedMessage
@@ -1136,23 +1141,24 @@ export default class SecurityTab extends React.Component {
                 );
             });
 
+            let noTokenText;
             if (tokenList.length === 0) {
-                tokenList.push(
+                noTokenText = (
                     <FormattedMessage
                         key='notokens'
                         id='user.settings.tokens.userAccessTokensNone'
-                        defaultMessage='No user access tokens.'
+                        defaultMessage='No personal access tokens.'
                     />
                 );
             }
-            let extraInfo;
 
+            let extraInfo;
             if (isMobile()) {
                 extraInfo = (
                     <span>
                         <FormattedHTMLMessage
                             id='user.settings.tokens.description_mobile'
-                            defaultMessage='<a href="https://about.mattermost.com/default-user-access-tokens" target="_blank">User access tokens</a> function similar to session tokens and can be used by integrations to <a href="https://about.mattermost.com/default-api-authentication" target="_blank">authenticate against the REST API</a>. Create new tokens on your desktop.'
+                            defaultMessage='<a href="https://about.mattermost.com/default-user-access-tokens" target="_blank">Personal access tokens</a> function similar to session tokens and can be used by integrations to <a href="https://about.mattermost.com/default-api-authentication" target="_blank">authenticate against the REST API</a>. Create new tokens on your desktop.'
                         />
                     </span>
                 );
@@ -1161,7 +1167,7 @@ export default class SecurityTab extends React.Component {
                     <span>
                         <FormattedHTMLMessage
                             id='user.settings.tokens.description'
-                            defaultMessage='<a href="https://about.mattermost.com/default-user-access-tokens" target="_blank">User access tokens</a> function similar to session tokens and can be used by integrations to <a href="https://about.mattermost.com/default-api-authentication" target="_blank">authenticate against the REST API</a>.'
+                            defaultMessage='<a href="https://about.mattermost.com/default-user-access-tokens" target="_blank">Personal access tokens</a> function similar to session tokens and can be used by integrations to <a href="https://about.mattermost.com/default-api-authentication" target="_blank">authenticate against the REST API</a>.'
                         />
                     </span>
                 );
@@ -1175,7 +1181,7 @@ export default class SecurityTab extends React.Component {
                             <label className='col-sm-auto control-label padding-right x2'>
                                 <FormattedMessage
                                     id='user.settings.tokens.name'
-                                    defaultMessage='Name: '
+                                    defaultMessage='Token Description: '
                                 />
                             </label>
                             <div className='col-sm-5'>
@@ -1191,8 +1197,8 @@ export default class SecurityTab extends React.Component {
                         <div>
                             <div className='padding-top x2'>
                                 <FormattedMessage
-                                    id='user.settings.tokens.nameDescription'
-                                    defaultMessage='Give a name for your token, so you remember what it’s used for. A token is generated after you hit "Save".'
+                                    id='user.settings.tokens.nameHelp'
+                                    defaultMessage='Enter a description for your token to remember what it does.'
                                 />
                             </div>
                             <div>
@@ -1225,6 +1231,10 @@ export default class SecurityTab extends React.Component {
                     </div>
                 );
             } else if (this.state.tokenCreationState === TOKEN_CREATED) {
+                if (tokenList.length === 0) {
+                    tokenListClass = ' hidden';
+                }
+
                 newTokenSection = (
                     <div
                         className='alert alert-warning'
@@ -1232,26 +1242,28 @@ export default class SecurityTab extends React.Component {
                         <i className='fa fa-warning margin-right'/>
                         <FormattedMessage
                             id='user.settings.tokens.copy'
-                            defaultMessage="Please copy the token below. You won't be able to see it again!"
+                            defaultMessage="Please copy the access token below. You won't be able to see it again!"
                         />
                         <br/>
                         <br/>
-                        <FormattedMessage
-                            id='user.settings.tokens.name'
-                            defaultMessage='Name: '
-                        />
-                        {this.state.newToken.description}
-                        <br/>
-                        <FormattedMessage
-                            id='user.settings.tokens.id'
-                            defaultMessage='ID: '
-                        />
-                        {this.state.newToken.id}
-                        <br/>
-                        <strong>
+                        <div className='whitespace--nowrap overflow--ellipsis'>
+                            <FormattedMessage
+                                id='user.settings.tokens.name'
+                                defaultMessage='Token Description: '
+                            />
+                            {this.state.newToken.description}
+                        </div>
+                        <div className='whitespace--nowrap overflow--ellipsis'>
+                            <FormattedMessage
+                                id='user.settings.tokens.id'
+                                defaultMessage='Token ID: '
+                            />
+                            {this.state.newToken.id}
+                        </div>
+                        <strong className='word-break--all'>
                             <FormattedMessage
                                 id='user.settings.tokens.token'
-                                defaultMessage='Token: '
+                                defaultMessage='Access Token: '
                             />
                             {this.state.newToken.token}
                         </strong>
@@ -1279,10 +1291,10 @@ export default class SecurityTab extends React.Component {
                     className='padding-top'
                 >
                     <div key='tokenList'>
-                        <div className='alert alert-transparent'>
+                        <div className={'alert alert-transparent' + tokenListClass}>
                             {tokenList}
+                            {noTokenText}
                         </div>
-                        <br/>
                         {newTokenSection}
                     </div>
                 </div>
@@ -1296,7 +1308,7 @@ export default class SecurityTab extends React.Component {
 
             return (
                 <SettingItemMax
-                    title={Utils.localizeMessage('user.settings.tokens.title', 'User Access Tokens')}
+                    title={Utils.localizeMessage('user.settings.tokens.title', 'Personal Access Tokens')}
                     inputs={inputs}
                     extraInfo={extraInfo}
                     infoPosition='top'
@@ -1313,7 +1325,7 @@ export default class SecurityTab extends React.Component {
             );
         }
 
-        const describe = Utils.localizeMessage('user.settings.tokens.clickToEdit', "Click 'Edit' to manage your user access tokens");
+        const describe = Utils.localizeMessage('user.settings.tokens.clickToEdit', "Click 'Edit' to manage your personal access tokens");
 
         updateSectionStatus = function updateSection() {
             this.props.updateSection('tokens');
@@ -1321,7 +1333,7 @@ export default class SecurityTab extends React.Component {
 
         return (
             <SettingItemMin
-                title={Utils.localizeMessage('user.settings.tokens.title', 'User Access Tokens')}
+                title={Utils.localizeMessage('user.settings.tokens.title', 'Personal Access Tokens')}
                 describe={describe}
                 updateSection={updateSectionStatus}
             />