DEV: Add latest-topic-list-item-class value transformer (#30718)

Add transformer to enable adding classes to the component `LatestTopicListItem`

app/assets/javascripts/discourse/app/components/topic-list/latest-topic-list-item.gjs

@@ -13,12 +13,19 @@ import discourseTags from "discourse/helpers/discourse-tags";
 import formatDate from "discourse/helpers/format-date";
 import topicFeaturedLink from "discourse/helpers/topic-featured-link";
 import topicLink from "discourse/helpers/topic-link";
+import { applyValueTransformer } from "discourse/lib/transformer";
 
 export default class LatestTopicListItem extends Component {
   get tagClassNames() {
     return this.args.topic.tags?.map((tagName) => `tag-${tagName}`);
   }
 
+  get additionalClasses() {
+    return applyValueTransformer("latest-topic-list-item-class", [], {
+      topic: this.args.topic,
+    });
+  }
+
   <template>
     <div
       data-topic-id={{@topic.id}}
@@ -32,6 +39,7 @@ export default class LatestTopicListItem extends Component {
         (if @topic.pinned "pinned")
         (if @topic.closed "closed")
         (if @topic.visited "visited")
+        this.additionalClasses
       }}
     >
       <PluginOutlet

app/assets/javascripts/discourse/app/lib/transformer/registry.js

@@ -12,19 +12,20 @@ export const VALUE_TRANSFORMERS = Object.freeze([
   "home-logo-href",
   "home-logo-image-url",
   "invite-simple-mode-topic",
+  "latest-topic-list-item-class",
   "mentions-class",
   "more-topics-tabs",
   "move-to-topic-merge-options",
   "move-to-topic-move-options",
-  "navigation-bar-dropdown-mode",
   "navigation-bar-dropdown-icon",
-  "parent-category-row-class-mobile",
+  "navigation-bar-dropdown-mode",
   "parent-category-row-class",
+  "parent-category-row-class-mobile",
   "post-menu-buttons",
   "small-user-attrs",
+  "topic-list-class",
   "topic-list-columns",
   "topic-list-header-sortable-column",
-  "topic-list-class",
   "topic-list-item-class",
   "topic-list-item-expand-pinned",
   "topic-list-item-mobile-layout",

app/assets/javascripts/discourse/tests/integration/components/latest-topic-list-item-test.gjs

@@ -0,0 +1,36 @@
+import { render } from "@ember/test-helpers";
+import { module, test } from "qunit";
+import LatestTopicListItem from "discourse/components/topic-list/latest-topic-list-item";
+import { withPluginApi } from "discourse/lib/plugin-api";
+import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+
+module("Integration | Component | latest-topic-list-item", function (hooks) {
+  setupRenderingTest(hooks);
+
+  test("latest-topic-list-item-class value transformer", async function (assert) {
+    withPluginApi("1.39.0", (api) => {
+      api.registerValueTransformer(
+        "latest-topic-list-item-class",
+        ({ value, context }) => {
+          if (context.topic.get("foo")) {
+            value.push("bar");
+          }
+          return value;
+        }
+      );
+    });
+
+    const store = this.owner.lookup("service:store");
+    const topic = store.createRecord("topic", { id: 1234, foo: true });
+    const topic2 = store.createRecord("topic", { id: 1235, foo: false });
+    await render(<template>
+      <LatestTopicListItem @topic={{topic}} />
+      <LatestTopicListItem @topic={{topic2}} />
+    </template>);
+
+    assert.dom(".latest-topic-list-item[data-topic-id='1234']").hasClass("bar");
+    assert
+      .dom(".latest-topic-list-item[data-topic-id='1235']")
+      .doesNotHaveClass("bar");
+  });
+});