DEV: Add `topic-list-item-class` transformer (#30008)

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

@@ -1,5 +1,5 @@
 import Component from "@glimmer/component";
-import { concat, hash } from "@ember/helper";
+import { array, concat, hash } from "@ember/helper";
 import { on } from "@ember/modifier";
 import { action } from "@ember/object";
 import didInsert from "@ember/render-modifiers/modifiers/did-insert";
@@ -20,6 +20,7 @@ import discourseTags from "discourse/helpers/discourse-tags";
 import formatDate from "discourse/helpers/format-date";
 import topicFeaturedLink from "discourse/helpers/topic-featured-link";
 import { wantsNewWindow } from "discourse/lib/intercept-click";
+import { applyValueTransformer } from "discourse/lib/transformer";
 import DiscourseURL from "discourse/lib/url";
 import { i18n } from "discourse-i18n";
 
@@ -208,6 +209,9 @@ export default class Item extends Component {
         (if @topic.pinned "pinned")
         (if @topic.closed "closed")
         this.tagClassNames
+        (applyValueTransformer
+          "topic-list-item-class" (array) (hash topic=@topic)
+        )
       }}
     >
       <PluginOutlet

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

@@ -19,4 +19,5 @@ export const VALUE_TRANSFORMERS = Object.freeze([
   "small-user-attrs",
   "topic-list-columns",
   "topic-list-header-sortable-column",
+  "topic-list-item-class",
 ]);

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

@@ -0,0 +1,61 @@
+import { render } from "@ember/test-helpers";
+import { module, test } from "qunit";
+import TopicListItem from "discourse/components/topic-list/item";
+import HbrTopicListItem from "discourse/components/topic-list-item";
+import { withPluginApi } from "discourse/lib/plugin-api";
+import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+
+module("Integration | Component | topic-list-item", function (hooks) {
+  setupRenderingTest(hooks);
+
+  test("checkbox is rendered checked if topic is in selected array", async function (assert) {
+    const store = this.owner.lookup("service:store");
+    const topic = store.createRecord("topic", { id: 24234 });
+    const topic2 = store.createRecord("topic", { id: 24235 });
+    const selected = [topic];
+
+    await render(<template>
+      <HbrTopicListItem
+        @topic={{topic}}
+        @bulkSelectEnabled={{true}}
+        @selected={{selected}}
+      />
+      <HbrTopicListItem
+        @topic={{topic2}}
+        @bulkSelectEnabled={{true}}
+        @selected={{selected}}
+      />
+    </template>);
+
+    const checkboxes = [...document.querySelectorAll("input.bulk-select")];
+    assert.dom(checkboxes[0]).isChecked();
+    assert.dom(checkboxes[1]).isNotChecked();
+  });
+
+  test("topic-list-item-class value transformer", async function (assert) {
+    withPluginApi("1.39.0", (api) => {
+      api.registerValueTransformer(
+        "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>
+      <TopicListItem @topic={{topic}} />
+      <TopicListItem @topic={{topic2}} />
+    </template>);
+
+    assert.dom(".topic-list-item[data-topic-id='1234']").hasClass("bar");
+    assert
+      .dom(".topic-list-item[data-topic-id='1235']")
+      .doesNotHaveClass("bar");
+  });
+});

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

@@ -1,37 +0,0 @@
-import { getOwner } from "@ember/owner";
-import { render } from "@ember/test-helpers";
-import { hbs } from "ember-cli-htmlbars";
-import { module, test } from "qunit";
-import { setupRenderingTest } from "discourse/tests/helpers/component-test";
-
-module("Integration | Component | topic-list-item", function (hooks) {
-  setupRenderingTest(hooks);
-
-  test("checkbox is rendered checked if topic is in selected array", async function (assert) {
-    const store = getOwner(this).lookup("service:store");
-    const topic = store.createRecord("topic", { id: 24234 });
-    const topic2 = store.createRecord("topic", { id: 24235 });
-    this.setProperties({
-      topic,
-      topic2,
-      selected: [topic],
-    });
-
-    await render(hbs`
-      <TopicListItem
-        @topic={{this.topic}}
-        @bulkSelectEnabled={{true}}
-        @selected={{this.selected}}
-      />
-      <TopicListItem
-        @topic={{this.topic2}}
-        @bulkSelectEnabled={{true}}
-        @selected={{this.selected}}
-      />
-    `);
-
-    const checkboxes = [...document.querySelectorAll("input.bulk-select")];
-    assert.dom(checkboxes[0]).isChecked();
-    assert.dom(checkboxes[1]).isNotChecked();
-  });
-});