FIX: Prioritize names and usernames consistently (#16686)

The prioritize_username_in_ux site settings controls if the username or
name will be prioritized in the user interface. On the user directory
page the name was never displayed if the user and username were very
similar, being completely different from all the other places where the
username or name is displayed.

app/assets/javascripts/discourse/app/components/about-page-users.js

@@ -1,7 +1,5 @@
 import Component from "@ember/component";
 import { computed } from "@ember/object";
-import { formatUsername } from "discourse/lib/utilities";
-import { normalize } from "discourse/components/user-info";
 import { prioritizeNameInUx } from "discourse/lib/settings";
 import { renderAvatar } from "discourse/helpers/user-avatar";
 import { userPath } from "discourse/lib/url";
@@ -9,13 +7,7 @@ import { userPath } from "discourse/lib/url";
 export default Component.extend({
   usersTemplates: computed("users.[]", function () {
     return (this.users || []).map((user) => {
-      let name = user.name;
-      let username = user.username;
-      let prioritizeName = prioritizeNameInUx(name);
-      let hideName = false;
-      if (name && normalize(username) === normalize(name)) {
-        hideName = true;
-      }
+      const { name, username } = user;
 
       return {
         name,
@@ -26,9 +18,7 @@ export default Component.extend({
           siteSettings: this.siteSettings,
         }),
         title: user.title || "",
-        formatedUsername: formatUsername(username),
-        prioritizeName,
-        hideName,
+        prioritizeName: prioritizeNameInUx(name),
       };
     });
   }),

app/assets/javascripts/discourse/app/components/user-info.js

@@ -4,10 +4,6 @@ import discourseComputed from "discourse-common/utils/decorators";
 import { userPath } from "discourse/lib/url";
 import { prioritizeNameInUx } from "discourse/lib/settings";
 
-export function normalize(name) {
-  return name.replace(/[\-\_ \.]/g, "").toLowerCase();
-}
-
 export default Component.extend({
   classNameBindings: [":user-info", "size"],
   attributeBindings: ["data-username"],
@@ -21,13 +17,6 @@ export default Component.extend({
     return userPath(username);
   },
 
-  @discourseComputed("user.name", "user.username")
-  name(name, username) {
-    if (name && normalize(username) !== normalize(name)) {
-      return name;
-    }
-  },
-
   @discourseComputed("user.name")
   nameFirst(name) {
     return prioritizeNameInUx(name);

app/assets/javascripts/discourse/app/templates/components/about-page-users.hbs

@@ -15,9 +15,7 @@
           </a>
         </span>
         <span class="name">
-          {{#unless userTemplate.hideName}}
-            {{#if userTemplate.prioritizeName}}{{userTemplate.username}}{{else}}{{userTemplate.name}}{{/if}}
-          {{/unless}}
+          {{#if userTemplate.prioritizeName}}{{userTemplate.username}}{{else}}{{userTemplate.name}}{{/if}}
         </span>
       </div>
       <div class="title">{{userTemplate.title}}</div>

app/assets/javascripts/discourse/app/templates/components/user-info.hbs

@@ -12,19 +12,19 @@
     <span class={{if nameFirst "name bold" "username bold"}}>
       {{#if includeLink}}
         <a href={{this.userPath}} data-user-card={{@user.username}}>
-          {{if nameFirst this.name (format-username @user.username)}}
+          {{if nameFirst @user.name (format-username @user.username)}}
         </a>
       {{else}}
-        {{if nameFirst this.name (format-username @user.username)}}
+        {{if nameFirst @user.name (format-username @user.username)}}
       {{/if}}
     </span>
     <span class={{if nameFirst "username margin" "name margin"}}>
       {{#if includeLink}}
         <a href={{this.userPath}} data-user-card={{@user.username}}>
-          {{if nameFirst (format-username @user.username) this.name}}
+          {{if nameFirst (format-username @user.username) @user.name}}
         </a>
       {{else}}
-        {{if nameFirst (format-username @user.username) this.name}}
+        {{if nameFirst (format-username @user.username) @user.name}}
       {{/if}}
     </span>
     {{plugin-outlet name="after-user-name" tagName="span" connectorTagName="span" args=(hash user=user)}}

app/assets/javascripts/discourse/tests/integration/components/user-info-test.js

@@ -2,11 +2,43 @@ import componentTest, {
   setupRenderingTest,
 } from "discourse/tests/helpers/component-test";
 import hbs from "htmlbars-inline-precompile";
-import { discourseModule, exists } from "discourse/tests/helpers/qunit-helpers";
+import {
+  discourseModule,
+  exists,
+  query,
+} from "discourse/tests/helpers/qunit-helpers";
 
 discourseModule("Integration | Component | user-info", function (hooks) {
   setupRenderingTest(hooks);
 
+  componentTest("prioritized name", {
+    template: hbs`{{user-info user=currentUser}}`,
+
+    beforeEach() {
+      this.siteSettings.prioritize_username_in_ux = false;
+      this.currentUser.name = "Evil Trout";
+    },
+
+    async test(assert) {
+      assert.equal(query(".name.bold").innerText.trim(), "Evil Trout");
+      assert.equal(query(".username.margin").innerText.trim(), "eviltrout");
+    },
+  });
+
+  componentTest("prioritized username", {
+    template: hbs`{{user-info user=currentUser}}`,
+
+    beforeEach() {
+      this.siteSettings.prioritize_username_in_ux = true;
+      this.currentUser.name = "Evil Trout";
+    },
+
+    async test(assert) {
+      assert.equal(query(".username.bold").innerText.trim(), "eviltrout");
+      assert.equal(query(".name.margin").innerText.trim(), "Evil Trout");
+    },
+  });
+
   componentTest("includeLink", {
     template: hbs`{{user-info user=currentUser includeLink=includeLink}}`,