UX: respect "prioritize username in ux" setting wherever possible (#12357)

This commit ensures that "prioritize username in ux" setting is
respected in following places:

- user directory
- user summary
- badge detail
- group detail

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

@@ -2,6 +2,7 @@ import Component from "@ember/component";
 import { alias } from "@ember/object/computed";
 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();
@@ -24,4 +25,9 @@ export default Component.extend({
       return name;
     }
   },
+
+  @discourseComputed("user.name")
+  nameFirst(name) {
+    return prioritizeNameInUx(name);
+  },
 });

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

@@ -13,8 +13,8 @@
 
 <div class="user-detail">
   <div class="name-line">
-    <span class="username"><a href={{this.userPath}} data-user-card={{@user.username}}>{{format-username @user.username}}</a></span>
+    <span class={{if nameFirst "name bold" "username bold"}}><a href={{this.userPath}} data-user-card={{@user.username}}>{{if nameFirst this.name (format-username @user.username)}}</a></span>
-    <span class="name">{{this.name}}</span>
+    <span class={{if nameFirst "username margin" "name margin"}}><a href={{this.userPath}} data-user-card={{@user.username}}>{{if nameFirst (format-username @user.username) this.name}}</a></span>
     {{plugin-outlet name="after-user-name" connectorTagName="span" args=(hash user=user)}}
   </div>
   <div class="title">{{@user.title}}</div>

app/assets/javascripts/discourse/tests/acceptance/group-requests-test.js

@@ -91,7 +91,7 @@ acceptance("Group Requests", function (needs) {
         .text()
         .trim()
         .replace(/\s+/g, " "),
-      "eviltrout Robin Ward"
+      "Robin Ward eviltrout"
     );
     assert.equal(
       queryAll(".group-members tr:first-child td:nth-child(3)").text().trim(),

app/assets/stylesheets/common/base/directory.scss

@@ -74,7 +74,7 @@
   .me {
     background-color: var(--highlight-low-or-medium);
     .username a,
-    .name,
+    .name a,
     .title,
     .number,
     .time-read {

app/assets/stylesheets/common/components/user-info.scss

@@ -27,13 +27,16 @@
       @include ellipsis;
     }
 
-    .username a {
+    .bold a {
       font-weight: bold;
-      color: var(--primary-high-or-secondary-low);
     }
 
-    .name {
+    .margin a {
       margin-left: 5px;
+    }
+
+    .name a,
+    .username a {
       color: var(--primary-high-or-secondary-low);
     }
 
@@ -62,7 +65,7 @@
       display: block;
     }
 
-    .name {
+    .margin a {
       margin-left: 0;
     }