[PLT-5864] Move teammate name display setting to the System Console (#6681)

* move teammate name display setting to the system console

* update all the likes of TeammateNameDisplay names

* fix gofmt error

* rebase and fix conflict

webapp/components/admin_console/users_and_teams_settings.jsx

@@ -31,6 +31,7 @@ export default class UsersAndTeamsSettings extends AdminSettings {
         config.TeamSettings.MaxUsersPerTeam = this.parseIntNonZero(this.state.maxUsersPerTeam, Constants.DEFAULT_MAX_USERS_PER_TEAM);
         config.TeamSettings.RestrictCreationToDomains = this.state.restrictCreationToDomains;
         config.TeamSettings.RestrictDirectMessage = this.state.restrictDirectMessage;
+        config.TeamSettings.TeammateNameDisplay = this.state.teammateNameDisplay;
         config.TeamSettings.MaxChannelsPerTeam = this.parseIntNonZero(this.state.maxChannelsPerTeam, Constants.DEFAULT_MAX_CHANNELS_PER_TEAM);
         config.TeamSettings.MaxNotificationsPerChannel = this.parseIntNonZero(this.state.maxNotificationsPerChannel, Constants.DEFAULT_MAX_NOTIFICATIONS_PER_CHANNEL);
 
@@ -44,6 +45,7 @@ export default class UsersAndTeamsSettings extends AdminSettings {
             maxUsersPerTeam: config.TeamSettings.MaxUsersPerTeam,
             restrictCreationToDomains: config.TeamSettings.RestrictCreationToDomains,
             restrictDirectMessage: config.TeamSettings.RestrictDirectMessage,
+            teammateNameDisplay: config.TeamSettings.TeammateNameDisplay,
             maxChannelsPerTeam: config.TeamSettings.MaxChannelsPerTeam,
             maxNotificationsPerChannel: config.TeamSettings.MaxNotificationsPerChannel
         };
@@ -188,6 +190,28 @@ export default class UsersAndTeamsSettings extends AdminSettings {
                     value={this.state.restrictDirectMessage}
                     onChange={this.handleChange}
                 />
+                <DropdownSetting
+                    id='teammateNameDisplay'
+                    values={[
+                        {value: Constants.TEAMMATE_NAME_DISPLAY.SHOW_USERNAME, text: Utils.localizeMessage('admin.team.showUsername', 'Show username')},
+                        {value: Constants.TEAMMATE_NAME_DISPLAY.SHOW_NICKNAME_FULLNAME, text: Utils.localizeMessage('admin.team.showNickname', 'Show nickname if one exists, otherwise show first and last name')},
+                        {value: Constants.TEAMMATE_NAME_DISPLAY.SHOW_FULLNAME, text: Utils.localizeMessage('admin.team.showFullname', 'Show first and last name (default)')}
+                    ]}
+                    label={
+                        <FormattedMessage
+                            id='admin.team.teammateNameDisplay'
+                            defaultMessage='Teammate Name Display:'
+                        />
+                    }
+                    helpText={
+                        <FormattedHTMLMessage
+                            id='admin.team.teammateNameDisplayDesc'
+                            defaultMessage="Set how to display users' names in posts and the Direct Messages list."
+                        />
+                    }
+                    value={this.state.teammateNameDisplay}
+                    onChange={this.handleChange}
+                />
             </SettingsGroup>
         );
     }

webapp/components/user_list_row.jsx

@@ -4,9 +4,7 @@
 import ProfilePicture from 'components/profile_picture.jsx';
 
 import UserStore from 'stores/user_store.jsx';
-import PreferenceStore from 'stores/preference_store.jsx';
 
-import Constants from 'utils/constants.jsx';
 import * as Utils from 'utils/utils.jsx';
 import {Client4} from 'mattermost-redux/client';
 
@@ -16,13 +14,10 @@ import React from 'react';
 import {FormattedHTMLMessage} from 'react-intl';
 
 export default function UserListRow({user, extraInfo, actions, actionProps, actionUserProps, userCount}) {
-    const nameFormat = PreferenceStore.get(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', '');
-
-    let name = user.username;
-    if (user.nickname && nameFormat === Constants.Preferences.DISPLAY_PREFER_NICKNAME) {
-        name = `${user.nickname} (@${user.username})`;
-    } else if ((user.first_name || user.last_name) && (nameFormat === Constants.Preferences.DISPLAY_PREFER_NICKNAME || nameFormat === Constants.Preferences.DISPLAY_PREFER_FULL_NAME)) {
-        name = `${Utils.getFullName(user)} (@${user.username})`;
+    const displayName = Utils.displayUsernameForUser(user);
+    let name = `${displayName} (@${user.username})`;
+    if (displayName === user.username) {
+        name = user.username;
     }
 
     let buttons = null;

webapp/components/user_settings/user_settings_display.jsx

@@ -21,7 +21,6 @@ import {FormattedMessage} from 'react-intl';
 function getDisplayStateFromStores() {
     return {
         militaryTime: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'use_military_time', 'false'),
-        nameFormat: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', 'username'),
         selectedFont: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'selected_font', Constants.DEFAULT_FONT),
         channelDisplayMode: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT),
         messageDisplay: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT),
@@ -38,7 +37,6 @@ export default class UserSettingsDisplay extends React.Component {
 
         this.handleSubmit = this.handleSubmit.bind(this);
         this.handleClockRadio = this.handleClockRadio.bind(this);
-        this.handleNameRadio = this.handleNameRadio.bind(this);
         this.handleFont = this.handleFont.bind(this);
         this.updateSection = this.updateSection.bind(this);
         this.updateState = this.updateState.bind(this);
@@ -60,12 +58,6 @@ export default class UserSettingsDisplay extends React.Component {
             name: 'use_military_time',
             value: this.state.militaryTime
         };
-        const namePreference = {
-            user_id: userId,
-            category: Preferences.CATEGORY_DISPLAY_SETTINGS,
-            name: 'name_format',
-            value: this.state.nameFormat
-        };
         const fontPreference = {
             user_id: userId,
             category: Preferences.CATEGORY_DISPLAY_SETTINGS,
@@ -91,7 +83,7 @@ export default class UserSettingsDisplay extends React.Component {
             value: this.state.collapseDisplay
         };
 
-        savePreferences([timePreference, namePreference, fontPreference, channelDisplayModePreference, messageDisplayPreference, collapseDisplayPreference],
+        savePreferences([timePreference, fontPreference, channelDisplayModePreference, messageDisplayPreference, collapseDisplayPreference],
             () => {
                 this.updateSection('');
             }
@@ -102,10 +94,6 @@ export default class UserSettingsDisplay extends React.Component {
         this.setState({militaryTime});
     }
 
-    handleNameRadio(nameFormat) {
-        this.setState({nameFormat});
-    }
-
     handleChannelDisplayModeRadio(channelDisplayMode) {
         this.setState({channelDisplayMode});
     }
@@ -251,7 +239,6 @@ export default class UserSettingsDisplay extends React.Component {
     render() {
         const serverError = this.state.serverError || null;
         let clockSection;
-        let nameFormatSection;
         let channelDisplayModeSection;
         let fontSection;
         let languagesSection;
@@ -366,143 +353,6 @@ export default class UserSettingsDisplay extends React.Component {
             );
         }
 
-        const showUsername = (
-            <FormattedMessage
-                id='user.settings.display.showUsername'
-                defaultMessage='Show username (default)'
-            />
-        );
-        const showNickname = (
-            <FormattedMessage
-                id='user.settings.display.showNickname'
-                defaultMessage='Show nickname if one exists, otherwise show first and last name'
-            />
-        );
-        const showFullName = (
-            <FormattedMessage
-                id='user.settings.display.showFullname'
-                defaultMessage='Show first and last name'
-            />
-        );
-        if (this.props.activeSection === 'name_format') {
-            const nameFormat = [false, false, false];
-            if (this.state.nameFormat === 'nickname_full_name') {
-                nameFormat[0] = true;
-            } else if (this.state.nameFormat === 'full_name') {
-                nameFormat[2] = true;
-            } else {
-                nameFormat[1] = true;
-            }
-
-            const inputs = [
-                <div key='userDisplayNameOptions'>
-                    <div className='radio'>
-                        <label>
-                            <input
-                                id='nameFormatUsername'
-                                type='radio'
-                                name='nameFormat'
-                                checked={nameFormat[1]}
-                                onChange={this.handleNameRadio.bind(this, 'username')}
-                            />
-                            {showUsername}
-                        </label>
-                        <br/>
-                    </div>
-                    <div className='radio'>
-                        <label>
-                            <input
-                                id='nameFormatNickname'
-                                type='radio'
-                                name='nameFormat'
-                                checked={nameFormat[0]}
-                                onChange={this.handleNameRadio.bind(this, 'nickname_full_name')}
-                            />
-                            {showNickname}
-                        </label>
-                        <br/>
-                    </div>
-                    <div className='radio'>
-                        <label>
-                            <input
-                                id='nameFormatFullName'
-                                type='radio'
-                                name='nameFormat'
-                                checked={nameFormat[2]}
-                                onChange={this.handleNameRadio.bind(this, 'full_name')}
-                            />
-                            {showFullName}
-                        </label>
-                        <br/>
-                    </div>
-                    <div>
-                        <br/>
-                        <FormattedMessage
-                            id='user.settings.display.nameOptsDesc'
-                            defaultMessage="Set how to display other user's names in posts and the Direct Messages list."
-                        />
-                    </div>
-                </div>
-            ];
-
-            nameFormatSection = (
-                <SettingItemMax
-                    title={
-                        <FormattedMessage
-                            id='user.settings.display.teammateDisplay'
-                            defaultMessage='Teammate Name Display'
-                        />
-                    }
-                    inputs={inputs}
-                    submit={this.handleSubmit}
-                    server_error={serverError}
-                    updateSection={(e) => {
-                        this.updateSection('');
-                        e.preventDefault();
-                    }}
-                />
-            );
-        } else {
-            let describe;
-            if (this.state.nameFormat === 'username') {
-                describe = (
-                    <FormattedMessage
-                        id='user.settings.display.showUsername'
-                        defaultMessage='Show username (default)'
-                    />
-                );
-            } else if (this.state.nameFormat === 'full_name') {
-                describe = (
-                    <FormattedMessage
-                        id='user.settings.display.showFullname'
-                        defaultMessage='Show first and last name'
-                    />
-                );
-            } else {
-                describe = (
-                    <FormattedMessage
-                        id='user.settings.display.showNickname'
-                        defaultMessage='Show nickname if one exists, otherwise show first and last name'
-                    />
-                );
-            }
-
-            nameFormatSection = (
-                <SettingItemMin
-                    title={
-                        <FormattedMessage
-                            id='user.settings.display.teammateDisplay'
-                            defaultMessage='Teammate Name Display'
-                        />
-                    }
-                    describe={describe}
-                    updateSection={() => {
-                        this.props.updateSection('name_format');
-                    }}
-                />
-            );
-        }
-
         if (this.props.activeSection === Preferences.MESSAGE_DISPLAY) {
             const messageDisplay = [false, false];
             if (this.state.messageDisplay === Preferences.MESSAGE_DISPLAY_CLEAN) {
@@ -884,8 +734,6 @@ export default class UserSettingsDisplay extends React.Component {
                     <div className='divider-dark'/>
                     {clockSection}
                     <div className='divider-dark'/>
-                    {nameFormatSection}
-                    <div className='divider-dark'/>
                     {collapseSection}
                     <div className='divider-dark'/>
                     {messageDisplaySection}