DEV: Add transformers for customizing post users popup display names (discourse#40954)

- Adds value transformers to allow plugins to customize how user names
and usernames are displayed in the post users popup.

Author: branquinhoaa

frontend/discourse/app/components/post/menu/post-users-menu.gjs

@@ -5,6 +5,7 @@ import didInsert from "@ember/render-modifiers/modifiers/did-insert";
 import { schedule } from "@ember/runloop";
 import { service } from "@ember/service";
 import { trustHTML } from "@ember/template";
+import { applyValueTransformer } from "discourse/lib/transformer";
 import DLoadMore from "discourse/ui-kit/d-load-more";
 import DUserAvatar from "discourse/ui-kit/d-user-avatar";
 import DUserLink from "discourse/ui-kit/d-user-link";
@@ -39,10 +40,20 @@ export default class PostUsersMenu extends Component {
   @tracked bodyMinHeight = null;
 
   displayName = (user) => {
+    let defaultName;
     if (user.name && !this.siteSettings.prioritize_username_in_ux) {
-      return user.name;
+      defaultName = user.name;
+    } else {
+      defaultName = user.username;
     }
-    return user.username;
+    return applyValueTransformer("post-user-display-name", defaultName, {
+      user,
+    });
+  };
+  displayUsername = (user) => {
+    return applyValueTransformer("post-user-display-username", user.username, {
+      user,
+    });
   };
   resetAndReload = () => {
     this.users = [];
@@ -150,7 +161,7 @@ export default class PostUsersMenu extends Component {
                     @username={{user.username}}
                     class="post-users-popup__username"
                   >
-                    @{{user.username}}
+                    @{{this.displayUsername user}}
                   </DUserLink>
                 {{/unless}}
               </div>

frontend/discourse/app/lib/registry/transformers.js

@@ -104,6 +104,8 @@ export const VALUE_TRANSFORMERS = Object.freeze([
   "post-small-action-class",
   "post-small-action-custom-component",
   "post-small-action-icon",
+  "post-user-display-name",
+  "post-user-display-username",
   "poster-name-class",
   "poster-name-icons",
   "poster-name-user-title",

frontend/discourse/tests/integration/components/post/menu/post-users-menu-test.gjs

@@ -1,6 +1,7 @@
 import { render, settled, waitFor, waitUntil } from "@ember/test-helpers";
 import { module, test } from "qunit";
 import PostUsersMenu from "discourse/components/post/menu/post-users-menu";
+import { withPluginApi } from "discourse/lib/plugin-api";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
 import stubIntersectionObserver from "discourse/tests/helpers/stub-intersection-observer";
 import {
@@ -183,5 +184,61 @@ module(
       await renderPromise;
       await settled();
     });
+
+    test("can transform the display name via post-user-display-name transformer", async function (assert) {
+      this.siteSettings.prioritize_username_in_ux = false;
+
+      withPluginApi((api) => {
+        api.registerValueTransformer(
+          "post-user-display-name",
+          ({ value, context }) => {
+            if (context.user.id === 1) {
+              return "Custom Name";
+            }
+            return value;
+          }
+        );
+      });
+
+      const fetchUsers = () =>
+        Promise.resolve({ users: makeUsers(2), canLoadMore: false });
+
+      await renderMenu({ fetchUsers });
+
+      assert
+        .dom(".post-users-popup__item:nth-child(1) .post-users-popup__name")
+        .hasText("Custom Name", "first user has custom name");
+      assert
+        .dom(".post-users-popup__item:nth-child(2) .post-users-popup__name")
+        .hasText("User 2", "second user has default name");
+    });
+
+    test("can transform the username via post-user-display-username transformer", async function (assert) {
+      this.siteSettings.prioritize_username_in_ux = false;
+
+      withPluginApi((api) => {
+        api.registerValueTransformer(
+          "post-user-display-username",
+          ({ value, context }) => {
+            if (context.user.id === 1) {
+              return "custom_username";
+            }
+            return value;
+          }
+        );
+      });
+
+      const fetchUsers = () =>
+        Promise.resolve({ users: makeUsers(2), canLoadMore: false });
+
+      await renderMenu({ fetchUsers });
+
+      assert
+        .dom(".post-users-popup__item:nth-child(1) .post-users-popup__username")
+        .hasText("@custom_username", "first user has custom username");
+      assert
+        .dom(".post-users-popup__item:nth-child(2) .post-users-popup__username")
+        .hasText("@u2", "second user has default username");
+    });
   }
 );