DEV: Add applyValueTransformer to poster name (#33086)

rngus2344 · martin-brennan · commit eb1901848297 · 2025-06-10T11:15:07.000+10:00
## Changes

This PR adds applyValueTransformer to poster name.
diff --git a/app/assets/javascripts/discourse/app/components/post/meta-data/poster-name.gjs b/app/assets/javascripts/discourse/app/components/post/meta-data/poster-name.gjs
@@ -82,6 +82,12 @@ export default class PostMetaDataPosterName extends Component {
     );
   }
 
+  get additionalClasses() {
+    return applyValueTransformer("poster-name-class", [], {
+      user: this.user,
+    });
+  }
+
   @bind
   refreshUserStatus() {
     this.#stopTrackingUserStatus();
@@ -139,6 +145,7 @@ export default class PostMetaDataPosterName extends Component {
               @post.primary_group_name
               (concat "group--" @post.primary_group_name)
             )
+            this.additionalClasses
           }}
         >
           {{! use the position argument to choose between the first and second name if needed}}
diff --git a/app/assets/javascripts/discourse/app/lib/transformer/registry.js b/app/assets/javascripts/discourse/app/lib/transformer/registry.js
@@ -50,6 +50,7 @@ export const VALUE_TRANSFORMERS = Object.freeze([
   "post-small-action-custom-component",
   "post-small-action-icon",
   "post-text-selection-prevent-close",
+  "poster-name-class",
   "site-setting-enable-welcome-banner",
   "site-setting-search-experience",
   "small-user-attrs",
diff --git a/app/assets/javascripts/discourse/app/widgets/poster-name.js b/app/assets/javascripts/discourse/app/widgets/poster-name.js
@@ -3,6 +3,7 @@ import { h } from "virtual-dom";
 import getURL from "discourse/lib/get-url";
 import { iconNode } from "discourse/lib/icon-library";
 import { prioritizeNameInUx } from "discourse/lib/settings";
+import { applyValueTransformer } from "discourse/lib/transformer";
 import { formatUsername } from "discourse/lib/utilities";
 import RenderGlimmer from "discourse/widgets/render-glimmer";
 import { applyDecorators, createWidget } from "discourse/widgets/widget";
@@ -105,6 +106,12 @@ export default createWidget("poster-name", {
     );
   },
 
+  additionalClasses(attrs) {
+    return applyValueTransformer("poster-name-class", [], {
+      user: attrs.user,
+    });
+  },
+
   html(attrs) {
     const username = attrs.username;
     const name = attrs.name;
@@ -129,6 +136,7 @@ export default createWidget("poster-name", {
     if (attrs.new_user) {
       classNames.push("new-user");
     }
+    classNames.push(...this.additionalClasses(attrs));
 
     const primaryGroupName = attrs.primary_group_name;
     if (primaryGroupName && primaryGroupName.length) {
diff --git a/app/assets/javascripts/discourse/tests/integration/components/post/meta-data/poster-name-test.gjs b/app/assets/javascripts/discourse/tests/integration/components/post/meta-data/poster-name-test.gjs
@@ -187,5 +187,27 @@ module(
         .dom("span.poster-icon.test-smile > a > .emoji[alt='smile']")
         .exists();
     });
+
+    test("poster name additional classes", async function (assert) {
+      this.post.username = "eviltrout";
+      this.post.user = this.store.createRecord("user", {
+        username: "eviltrout",
+      });
+      withPluginApi((api) => {
+        api.registerValueTransformer(
+          "poster-name-class",
+          ({ value, context }) => {
+            if (context.user.username === "eviltrout") {
+              value.push(...["custom-class", "another-class"]);
+            }
+            return value;
+          }
+        );
+      });
+
+      await renderComponent(this.post);
+      assert.dom("span.custom-class").exists();
+      assert.dom("span.another-class").exists();
+    });
   }
 );

Original file line number	Diff line number	Diff line change
`@@ -82,6 +82,12 @@ export default class PostMetaDataPosterName extends Component {`
`82`	`82`	`);`
`83`	`83`	`}`
`84`	`84`
	`85`	`+ get additionalClasses() {`
	`86`	`+ return applyValueTransformer("poster-name-class", [], {`
	`87`	`+ user: this.user,`
	`88`	`+ });`
	`89`	`+ }`
	`90`	`+`
`85`	`91`	`@bind`
`86`	`92`	`refreshUserStatus() {`
`87`	`93`	`this.#stopTrackingUserStatus();`
`@@ -139,6 +145,7 @@ export default class PostMetaDataPosterName extends Component {`
`139`	`145`	`@post.primary_group_name`
`140`	`146`	`(concat "group--" @post.primary_group_name)`
`141`	`147`	`)`
	`148`	`+ this.additionalClasses`
`142`	`149`	`}}`
`143`	`150`	`>`
`144`	`151`	`{{! use the position argument to choose between the first and second name if needed}}`