UX: Use username/name in group member list according to site setting (#75)

assets/javascripts/discourse/components/group-assignments-filter.js.es6

@@ -1,5 +1,14 @@
+import discourseComputed from "discourse-common/utils/decorators";
 import Component from "@ember/component";
 
 export default Component.extend({
-  tagName: "li"
+  tagName: "li",
+
+  @discourseComputed("siteSettings.prioritize_username_in_ux", "filter.username", "filter.displayName")
+  displayName(prioritize_username_in_ux, username, displayName){
+    if(prioritize_username_in_ux){
+      return username;
+    }
+    return displayName;
+  }
 });

assets/javascripts/discourse/templates/components/group-assignments-filter.hbs

@@ -1,6 +1,6 @@
 {{#if show-avatar}}
   {{#link-to "group.assignments.show" filter.username_lower}}
-    {{avatar filter avatarTemplatePath="avatar_template" usernamePath="username" imageSize="small"}} {{filter.username}}
+    {{avatar filter avatarTemplatePath="avatar_template" usernamePath="username" imageSize="small"}} {{displayName}}
   {{/link-to}}
 {{else}}
   {{#link-to "group.assignments.show" filter}}

assets/javascripts/discourse/templates/group/assignments.hbs

@@ -1,13 +1,13 @@
 <section class="user-secondary-navigation">
-    {{#mobile-nav class="activity-nav" desktopClass="action-list activity-list nav-stacked" currentPath=router._router.currentPath}}
+  {{#mobile-nav class="activity-nav" desktopClass="action-list activity-list nav-stacked" currentPath=router._router.currentPath}}
-      {{#load-more selector=".activity-nav li" action=(action "loadMore")}}
+    {{#load-more selector=".activity-nav li" action=(action "loadMore")}}
-        {{group-assignments-filter show-avatar=false filter="everyone" routeType=route_type}}
+      {{group-assignments-filter show-avatar=false filter="everyone" routeType=route_type}}
-        {{#each model.members as |member|}}
+      {{#each model.members as |member|}}
-          {{group-assignments-filter show-avatar=true filter=member routeType=route_type}}
+        {{group-assignments-filter show-avatar=true filter=member routeType=route_type}}
-        {{/each}}
+      {{/each}}
-        {{conditional-loading-spinner condition=loading}}
+      {{conditional-loading-spinner condition=loading}}
-      {{/load-more}}
+    {{/load-more}}
-    {{/mobile-nav}}
+  {{/mobile-nav}}
 </section>
 <section class="user-content">
   {{outlet}}

test/javascripts/components/group-assignments-filter-test.js.es6

@@ -0,0 +1,48 @@
+import componentTest from "helpers/component-test";
+
+moduleForComponent("group-assignments-filter", { integration: true });
+
+componentTest("display username", {
+  template: "{{group-assignments-filter show-avatar=true filter=filter}}",
+
+  beforeEach() {
+    this.siteSettings.prioritize_username_in_ux = true;
+    this.set("filter", {
+      id: 2,
+      username: "Ahmed",
+      displayName: "Ahmed Gagan",
+      name: "Ahmed Gagan",
+      avatar_template: "/letter_avatar_proxy/v4/letter/a/8c91f0/{size}.png",
+      title: "trust_level_0",
+      last_posted_at: "2020-06-22T10:15:54.532Z",
+      last_seen_at: "2020-07-07T11:55:59.437Z",
+      added_at: "2020-06-22T09:55:31.692Z",
+      timezone: "Asia/Calcutta"
+    });
+  },
+  async test(assert) {
+    assert.ok(find("li")[0].innerText.trim(), "Ahmed");
+  }
+});
+componentTest("display name", {
+  template: "{{group-assignments-filter show-avatar=true filter=filter}}",
+
+  beforeEach() {
+    this.siteSettings.prioritize_username_in_ux = true;
+    this.set("filter", {
+      id: 2,
+      username: "Ahmed",
+      displayName: "Ahmed Gagan",
+      name: "Ahmed Gagan",
+      avatar_template: "/letter_avatar_proxy/v4/letter/a/8c91f0/{size}.png",
+      title: "trust_level_0",
+      last_posted_at: "2020-06-22T10:15:54.532Z",
+      last_seen_at: "2020-07-07T11:55:59.437Z",
+      added_at: "2020-06-22T09:55:31.692Z",
+      timezone: "Asia/Calcutta"
+    });
+  },
+  async test(assert) {
+    assert.ok(find("li")[0].innerText.trim(), "Ahmed Gagan");
+  }
+});