[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
2017-06-30 16:06:59 +08:00
--- a/api4/team_test.go
+++ b/api4/team_test.go
@@ -1422,7 +1422,8 @@ func TestInviteUsersToTeam(t *testing.T) {
 		t.Fatal("should return true")
 	}

-	expectedSubject := "[Mattermost] " + th.SystemAdminUser.GetDisplayName() + " invited you to join " + th.BasicTeam.DisplayName + " Team"
+	nameFormat := *utils.Cfg.TeamSettings.TeammateNameDisplay
+	expectedSubject := "[Mattermost] " + th.SystemAdminUser.GetDisplayName(nameFormat) + " invited you to join " + th.BasicTeam.DisplayName + " Team"
 	//Check if the email was send to the rigth email address
 	for _, email := range emailList {
 		var resultsMailbox utils.JSONMessageHeaderInbucket
--- a/app/diagnostics.go
+++ b/app/diagnostics.go
@@ -209,6 +209,7 @@ func trackConfig() {
 		"max_notifications_per_channel":       *utils.Cfg.TeamSettings.MaxNotificationsPerChannel,
 		"max_users_per_team":                  utils.Cfg.TeamSettings.MaxUsersPerTeam,
 		"max_channels_per_team":               *utils.Cfg.TeamSettings.MaxChannelsPerTeam,
+		"teammate_name_display":               *utils.Cfg.TeamSettings.TeammateNameDisplay,
 		"isdefault_site_name":                 isDefault(utils.Cfg.TeamSettings.SiteName, "Mattermost"),
 		"isdefault_custom_brand_text":         isDefault(*utils.Cfg.TeamSettings.CustomBrandText, model.TEAM_SETTINGS_DEFAULT_CUSTOM_BRAND_TEXT),
 		"isdefault_custom_description_text":   isDefault(*utils.Cfg.TeamSettings.CustomDescriptionText, model.TEAM_SETTINGS_DEFAULT_CUSTOM_DESCRIPTION_TEXT),
--- a/app/email_batching.go
+++ b/app/email_batching.go
@@ -4,7 +4,6 @@
 package app

 import (
-	"database/sql"
 	"fmt"
 	"html/template"
 	"strconv"
@@ -163,7 +162,6 @@ func (job *EmailBatchingJob) checkPendingNotifications(now time.Time, handler fu

 func sendBatchedEmailNotification(userId string, notifications []*batchedNotification) {
 	uchan := Srv.Store.User().Get(userId)
-	pchan := Srv.Store.Preference().Get(userId, model.PREFERENCE_CATEGORY_DISPLAY_SETTINGS, model.PREFERENCE_NAME_DISPLAY_NAME_FORMAT)

 	var user *model.User
 	if result := <-uchan; result.Err != nil {
@@ -174,17 +172,7 @@ func sendBatchedEmailNotification(userId string, notifications []*batchedNotific
 	}

 	translateFunc := utils.GetUserTranslations(user.Locale)
-
-	var displayNameFormat string
-	if result := <-pchan; result.Err != nil && result.Err.DetailedError != sql.ErrNoRows.Error() {
-		l4g.Warn("api.email_batching.send_batched_email_notification.preferences.app_error")
-		return
-	} else if result.Err != nil {
-		// no display name format saved, so fall back to default
-		displayNameFormat = model.PREFERENCE_DEFAULT_DISPLAY_NAME_FORMAT
-	} else {
-		displayNameFormat = result.Data.(model.Preference).Value
-	}
+	displayNameFormat := *utils.Cfg.TeamSettings.TeammateNameDisplay

 	var contents string
 	for _, notification := range notifications {
@@ -236,7 +224,7 @@ func renderBatchedPost(template *utils.HTMLTemplate, post *model.Post, teamName
 		l4g.Warn(utils.T("api.email_batching.render_batched_post.sender.app_error"))
 		return ""
 	} else {
-		template.Props["SenderName"] = result.Data.(*model.User).GetDisplayNameForPreference(displayNameFormat)
+		template.Props["SenderName"] = result.Data.(*model.User).GetDisplayName(displayNameFormat)
 	}

 	if result := <-cchan; result.Err != nil {
--- a/app/import_test.go
+++ b/app/import_test.go
@@ -1586,7 +1586,6 @@ func TestImportImportUser(t *testing.T) {
 		Theme:              ptrStr(`{"awayIndicator":"#DCBD4E","buttonBg":"#23A2FF","buttonColor":"#FFFFFF","centerChannelBg":"#ffffff","centerChannelColor":"#333333","codeTheme":"github","image":"/static/files/a4a388b38b32678e83823ef1b3e17766.png","linkColor":"#2389d7","mentionBj":"#2389d7","mentionColor":"#ffffff","mentionHighlightBg":"#fff2bb","mentionHighlightLink":"#2f81b7","newMessageSeparator":"#FF8800","onlineIndicator":"#7DBE00","sidebarBg":"#fafafa","sidebarHeaderBg":"#3481B9","sidebarHeaderTextColor":"#ffffff","sidebarText":"#333333","sidebarTextActiveBorder":"#378FD2","sidebarTextActiveColor":"#111111","sidebarTextHoverBg":"#e6f2fa","sidebarUnreadText":"#333333","type":"Mattermost"}`),
 		SelectedFont:       ptrStr("Roboto Slab"),
 		UseMilitaryTime:    ptrStr("true"),
-		NameFormat:         ptrStr("nickname_full_name"),
 		CollapsePreviews:   ptrStr("true"),
 		MessageDisplay:     ptrStr("compact"),
 		ChannelDisplayMode: ptrStr("centered"),
@@ -1625,10 +1624,6 @@ func TestImportImportUser(t *testing.T) {
 				t.Fatalf("Preference does not match.")
 			}

-			if preference.Name == "name_format" && preference.Value != *data.NameFormat {
-				t.Fatalf("Preference does not match.")
-			}
-
 			if preference.Name == "collapse_previews" && preference.Value != *data.CollapsePreviews {
 				t.Fatalf("Preference does not match.")
 			}
@@ -1650,7 +1645,6 @@ func TestImportImportUser(t *testing.T) {
 		Theme:              ptrStr(`{"awayIndicator":"#123456","buttonBg":"#23A2FF","buttonColor":"#FFFFFF","centerChannelBg":"#ffffff","centerChannelColor":"#333333","codeTheme":"github","image":"/static/files/a4a388b38b32678e83823ef1b3e17766.png","linkColor":"#2389d7","mentionBj":"#2389d7","mentionColor":"#ffffff","mentionHighlightBg":"#fff2bb","mentionHighlightLink":"#2f81b7","newMessageSeparator":"#FF8800","onlineIndicator":"#7DBE00","sidebarBg":"#fafafa","sidebarHeaderBg":"#3481B9","sidebarHeaderTextColor":"#ffffff","sidebarText":"#333333","sidebarTextActiveBorder":"#378FD2","sidebarTextActiveColor":"#111111","sidebarTextHoverBg":"#e6f2fa","sidebarUnreadText":"#333333","type":"Mattermost"}`),
 		SelectedFont:       ptrStr("Lato"),
 		UseMilitaryTime:    ptrStr("false"),
-		NameFormat:         ptrStr("full_name"),
 		CollapsePreviews:   ptrStr("false"),
 		MessageDisplay:     ptrStr("clean"),
 		ChannelDisplayMode: ptrStr("full"),
@@ -1684,10 +1678,6 @@ func TestImportImportUser(t *testing.T) {
 				t.Fatalf("Preference does not match.")
 			}

-			if preference.Name == "name_format" && preference.Value != *data.NameFormat {
-				t.Fatalf("Preference does not match.")
-			}
-
 			if preference.Name == "collapse_previews" && preference.Value != *data.CollapsePreviews {
 				t.Fatalf("Preference does not match.")
 			}
--- a/app/team.go
+++ b/app/team.go
@@ -657,7 +657,8 @@ func InviteNewUsersToTeam(emailList []string, teamId, senderId string) *model.Ap
 		user = result.Data.(*model.User)
 	}

-	SendInviteEmails(team, user.GetDisplayName(), emailList, utils.GetSiteURL())
+	nameFormat := *utils.Cfg.TeamSettings.TeammateNameDisplay
+	SendInviteEmails(team, user.GetDisplayName(nameFormat), emailList, utils.GetSiteURL())

 	return nil
 }
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -4311,6 +4311,10 @@
    "id": "model.config.is_valid.sql_query_timeout.app_error",
    "translation": "Invalid query timeout for SQL settings.  Must be a positive number."
  },
+  {
+    "id": "model.config.is_valid.teammate_name_display.app_error",
+    "translation": "Invalid teammate display.  Must be 'full_name', 'nickname_full_name' or 'username'"
+  },
  {
    "id": "model.config.is_valid.time_between_user_typing.app_error",
    "translation": "Time between user typing updates should not be set to less than 1000 milliseconds."
--- a/model/config.go
+++ b/model/config.go
@@ -39,6 +39,10 @@ const (
 	DIRECT_MESSAGE_ANY  = "any"
 	DIRECT_MESSAGE_TEAM = "team"

+	SHOW_USERNAME          = "username"
+	SHOW_NICKNAME_FULLNAME = "nickname_full_name"
+	SHOW_FULLNAME          = "full_name"
+
 	PERMISSIONS_ALL           = "all"
 	PERMISSIONS_CHANNEL_ADMIN = "channel_admin"
 	PERMISSIONS_TEAM_ADMIN    = "team_admin"
@@ -322,6 +326,7 @@ type TeamSettings struct {
 	UserStatusAwayTimeout               *int64
 	MaxChannelsPerTeam                  *int64
 	MaxNotificationsPerChannel          *int64
+	TeammateNameDisplay                 *string
 }

 type LdapSettings struct {
@@ -702,6 +707,11 @@ func (o *Config) SetDefaults() {
 		*o.TeamSettings.MaxNotificationsPerChannel = 1000
 	}

+	if o.TeamSettings.TeammateNameDisplay == nil {
+		o.TeamSettings.TeammateNameDisplay = new(string)
+		*o.TeamSettings.TeammateNameDisplay = SHOW_FULLNAME
+	}
+
 	if o.EmailSettings.EnableSignInWithEmail == nil {
 		o.EmailSettings.EnableSignInWithEmail = new(bool)

@@ -1394,6 +1404,10 @@ func (o *Config) IsValid() *AppError {
 		return NewLocAppError("Config.IsValid", "model.config.is_valid.restrict_direct_message.app_error", nil, "")
 	}

+	if !(*o.TeamSettings.TeammateNameDisplay == SHOW_FULLNAME || *o.TeamSettings.TeammateNameDisplay == SHOW_NICKNAME_FULLNAME || *o.TeamSettings.TeammateNameDisplay == SHOW_USERNAME) {
+		return NewLocAppError("Config.IsValid", "model.config.is_valid.teammate_name_display.app_error", nil, "")
+	}
+
 	if len(o.SqlSettings.AtRestEncryptKey) < 32 {
 		return NewLocAppError("Config.IsValid", "model.config.is_valid.encrypt_sql.app_error", nil, "")
 	}
--- a/model/preference.go
+++ b/model/preference.go
@@ -17,13 +17,8 @@ const (
 	PREFERENCE_CATEGORY_ADVANCED_SETTINGS   = "advanced_settings"
 	PREFERENCE_CATEGORY_FLAGGED_POST        = "flagged_post"

-	PREFERENCE_CATEGORY_DISPLAY_SETTINGS   = "display_settings"
-	PREFERENCE_NAME_COLLAPSE_SETTING       = "collapse_previews"
-	PREFERENCE_NAME_DISPLAY_NAME_FORMAT    = "name_format"
-	PREFERENCE_VALUE_DISPLAY_NAME_NICKNAME = "nickname_full_name"
-	PREFERENCE_VALUE_DISPLAY_NAME_FULL     = "full_name"
-	PREFERENCE_VALUE_DISPLAY_NAME_USERNAME = "username"
-	PREFERENCE_DEFAULT_DISPLAY_NAME_FORMAT = PREFERENCE_VALUE_DISPLAY_NAME_USERNAME
+	PREFERENCE_CATEGORY_DISPLAY_SETTINGS = "display_settings"
+	PREFERENCE_NAME_COLLAPSE_SETTING     = "collapse_previews"

 	PREFERENCE_CATEGORY_THEME = "theme"
 	// the name for theme props is the team id
--- a/model/user.go
+++ b/model/user.go
@@ -383,26 +383,16 @@ func (u *User) GetFullName() string {
 	}
 }

-func (u *User) GetDisplayName() string {
-	if u.Nickname != "" {
-		return u.Nickname
-	} else if fullName := u.GetFullName(); fullName != "" {
-		return fullName
-	} else {
-		return u.Username
-	}
-}
-
-func (u *User) GetDisplayNameForPreference(nameFormat string) string {
+func (u *User) GetDisplayName(nameFormat string) string {
 	displayName := u.Username

-	if nameFormat == PREFERENCE_VALUE_DISPLAY_NAME_NICKNAME {
+	if nameFormat == SHOW_NICKNAME_FULLNAME {
 		if u.Nickname != "" {
 			displayName = u.Nickname
 		} else if fullName := u.GetFullName(); fullName != "" {
 			displayName = fullName
 		}
-	} else if nameFormat == PREFERENCE_VALUE_DISPLAY_NAME_FULL {
+	} else if nameFormat == SHOW_FULLNAME {
 		if fullName := u.GetFullName(); fullName != "" {
 			displayName = fullName
 		}
--- a/model/user_test.go
+++ b/model/user_test.go
@@ -179,20 +179,37 @@ func TestUserGetFullName(t *testing.T) {
 }

 func TestUserGetDisplayName(t *testing.T) {
-	user := User{Username: "user"}
+	user := User{Username: "username"}

-	if displayName := user.GetDisplayName(); displayName != "user" {
+	if displayName := user.GetDisplayName(SHOW_FULLNAME); displayName != "username" {
+		t.Fatal("Display name should be username")
+	}
+
+	if displayName := user.GetDisplayName(SHOW_NICKNAME_FULLNAME); displayName != "username" {
+		t.Fatal("Display name should be username")
+	}
+
+	if displayName := user.GetDisplayName(SHOW_USERNAME); displayName != "username" {
 		t.Fatal("Display name should be username")
 	}

 	user.FirstName = "first"
 	user.LastName = "last"
-	if displayName := user.GetDisplayName(); displayName != "first last" {
+
+	if displayName := user.GetDisplayName(SHOW_FULLNAME); displayName != "first last" {
 		t.Fatal("Display name should be full name")
 	}

+	if displayName := user.GetDisplayName(SHOW_NICKNAME_FULLNAME); displayName != "first last" {
+		t.Fatal("Display name should be full name since there is no nickname")
+	}
+
+	if displayName := user.GetDisplayName(SHOW_USERNAME); displayName != "username" {
+		t.Fatal("Display name should be username")
+	}
+
 	user.Nickname = "nickname"
-	if displayName := user.GetDisplayName(); displayName != "nickname" {
+	if displayName := user.GetDisplayName(SHOW_NICKNAME_FULLNAME); displayName != "nickname" {
 		t.Fatal("Display name should be nickname")
 	}
 }
--- a/utils/config.go
+++ b/utils/config.go
@@ -411,6 +411,7 @@ func getClientConfig(c *model.Config) map[string]string {
 	props["RestrictPublicChannelDeletion"] = *c.TeamSettings.RestrictPublicChannelDeletion
 	props["RestrictPrivateChannelDeletion"] = *c.TeamSettings.RestrictPrivateChannelDeletion
 	props["RestrictPrivateChannelManageMembers"] = *c.TeamSettings.RestrictPrivateChannelManageMembers
+	props["TeammateNameDisplay"] = *c.TeamSettings.TeammateNameDisplay

 	props["EnableOAuthServiceProvider"] = strconv.FormatBool(c.ServiceSettings.EnableOAuthServiceProvider)
 	props["GoogleDeveloperKey"] = c.ServiceSettings.GoogleDeveloperKey
--- a/webapp/components/admin_console/users_and_teams_settings.jsx
+++ b/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>
        );
    }
--- a/webapp/components/user_list_row.jsx
+++ b/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;
--- a/webapp/components/user_settings/user_settings_display.jsx
+++ b/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}
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -875,8 +875,13 @@
  "admin.team.siteNameDescription": "Name of service shown in login screens and UI.",
  "admin.team.siteNameExample": "E.g.: \"Mattermost\"",
  "admin.team.siteNameTitle": "Site Name:",
+  "admin.team.showFullname": "Show first and last name (default)",
+  "admin.team.showNickname": "Show nickname if one exists, otherwise show first and last name",
+  "admin.team.showUsername": "Show username",
  "admin.team.teamCreationDescription": "When false, only System Administrators can create teams.",
  "admin.team.teamCreationTitle": "Enable Team Creation: ",
+  "admin.team.teammateNameDisplay": "Teammate Name Display:",
+  "admin.team.teammateNameDisplayDesc": "Set how to display users' names in posts and the Direct Messages list.",
  "admin.team.upload": "Upload",
  "admin.team.uploadDesc": "Customize your user experience by adding a custom image to your login screen. Recommended maximum image size is less than 2 MB.",
  "admin.team.uploaded": "Uploaded!",
@@ -2188,7 +2193,7 @@
  "user.settings.display.showFullname": "Show first and last name",
  "user.settings.display.showNickname": "Show nickname if one exists, otherwise show first and last name",
  "user.settings.display.showUsername": "Show username (default)",
-  "user.settings.display.teammateDisplay": "Teammate Name Display",
+  "user.settings.display.teammateNameDisplay": "Teammate Name Display",
  "user.settings.display.theme.applyToAllTeams": "Apply new theme to all my teams",
  "user.settings.display.theme.customTheme": "Custom Theme",
  "user.settings.display.theme.describe": "Open to manage your theme",
--- a/webapp/utils/constants.jsx
+++ b/webapp/utils/constants.jsx
@@ -37,8 +37,6 @@ export const Preferences = {
    CATEGORY_DIRECT_CHANNEL_SHOW: 'direct_channel_show',
    CATEGORY_GROUP_CHANNEL_SHOW: 'group_channel_show',
    CATEGORY_DISPLAY_SETTINGS: 'display_settings',
-    DISPLAY_PREFER_NICKNAME: 'nickname_full_name',
-    DISPLAY_PREFER_FULL_NAME: 'full_name',
    CATEGORY_ADVANCED_SETTINGS: 'advanced_settings',
    TUTORIAL_STEP: 'tutorial_step',
    CHANNEL_DISPLAY_MODE: 'channel_display_mode',
@@ -970,7 +968,12 @@ export const Constants = {
    TEST_ID_COUNT: 10,
    CENTER: 'center',
    RHS: 'rhs',
-    RHS_ROOT: 'rhsroot'
+    RHS_ROOT: 'rhsroot',
+    TEAMMATE_NAME_DISPLAY: {
+        SHOW_USERNAME: 'username',
+        SHOW_NICKNAME_FULLNAME: 'nickname_full_name',
+        SHOW_FULLNAME: 'full_name'
+    }
 };

 export default Constants;
--- a/webapp/utils/utils.jsx
+++ b/webapp/utils/utils.jsx
@@ -1015,21 +1015,19 @@ export function displayUsername(userId) {
 }

 export function displayUsernameForUser(user) {
-    const nameFormat = PreferenceStore.get(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', 'false');
-
-    let username = '';
    if (user) {
-        if (nameFormat === Constants.Preferences.DISPLAY_PREFER_NICKNAME) {
-            username = user.nickname || getFullName(user);
-        } else if (nameFormat === Constants.Preferences.DISPLAY_PREFER_FULL_NAME) {
-            username = getFullName(user);
-        }
-        if (!username.trim().length) {
-            username = user.username;
+        const nameFormat = global.window.mm_config.TeammateNameDisplay;
+        let name = user.username;
+        if (nameFormat === Constants.TEAMMATE_NAME_DISPLAY.SHOW_NICKNAME_FULLNAME && user.nickname && user.nickname !== '') {
+            name = user.nickname;
+        } else if ((user.first_name || user.last_name) && (nameFormat === Constants.TEAMMATE_NAME_DISPLAY.SHOW_NICKNAME_FULLNAME || nameFormat === Constants.TEAMMATE_NAME_DISPLAY.SHOW_FULLNAME)) {
+            name = getFullName(user);
        }
+
+        return name;
    }

-    return username;
+    return null;
 }

 // Converts a file size in bytes into a human-readable string of the form '123MB'.