From 828c646aab99586966134d951a5817eace8caf45 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9rgio=20Saquetim?=
 <1108771+megothss@users.noreply.github.com>
Date: Mon, 13 Jan 2025 15:39:00 -0300
Subject: [PATCH] DEV: Add `latest-topic-list-item-class` value transformer
 (#30718)

Add transformer to enable adding classes to the component `LatestTopicListItem`
---
 .../topic-list/latest-topic-list-item.gjs     |  8 +++++
 .../discourse/app/lib/transformer/registry.js |  7 ++--
 .../latest-topic-list-item-test.gjs           | 36 +++++++++++++++++++
 3 files changed, 48 insertions(+), 3 deletions(-)
 create mode 100644 app/assets/javascripts/discourse/tests/integration/components/latest-topic-list-item-test.gjs

diff --git a/app/assets/javascripts/discourse/app/components/topic-list/latest-topic-list-item.gjs b/app/assets/javascripts/discourse/app/components/topic-list/latest-topic-list-item.gjs
index 040eedd471c..87a388c95e5 100644
--- a/app/assets/javascripts/discourse/app/components/topic-list/latest-topic-list-item.gjs
+++ b/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
diff --git a/app/assets/javascripts/discourse/app/lib/transformer/registry.js b/app/assets/javascripts/discourse/app/lib/transformer/registry.js
index 219b23db263..356ae390ae4 100644
--- a/app/assets/javascripts/discourse/app/lib/transformer/registry.js
+++ b/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",
diff --git a/app/assets/javascripts/discourse/tests/integration/components/latest-topic-list-item-test.gjs b/app/assets/javascripts/discourse/tests/integration/components/latest-topic-list-item-test.gjs
new file mode 100644
index 00000000000..15ab9ada6e4
--- /dev/null
+++ b/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");
+  });
+});