From 94697467afd49e760513a30304695f199095db54 Mon Sep 17 00:00:00 2001
From: Jarek Radosz <jradosz@gmail.com>
Date: Tue, 3 Dec 2024 14:22:13 +0100
Subject: [PATCH] DEV: Add `topic-list-item-class` transformer (#30008)

---
 .../app/components/topic-list/item.gjs        |  6 +-
 .../discourse/app/lib/transformer/registry.js |  1 +
 .../components/topic-list-item-test.gjs       | 61 +++++++++++++++++++
 .../components/topic-list-item-test.js        | 37 -----------
 4 files changed, 67 insertions(+), 38 deletions(-)
 create mode 100644 app/assets/javascripts/discourse/tests/integration/components/topic-list-item-test.gjs
 delete mode 100644 app/assets/javascripts/discourse/tests/integration/components/topic-list-item-test.js

diff --git a/app/assets/javascripts/discourse/app/components/topic-list/item.gjs b/app/assets/javascripts/discourse/app/components/topic-list/item.gjs
index 9efb65984c7..a5251c4594c 100644
--- a/app/assets/javascripts/discourse/app/components/topic-list/item.gjs
+++ b/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
diff --git a/app/assets/javascripts/discourse/app/lib/transformer/registry.js b/app/assets/javascripts/discourse/app/lib/transformer/registry.js
index fc8a3e9945d..f4d1803fd60 100644
--- a/app/assets/javascripts/discourse/app/lib/transformer/registry.js
+++ b/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",
 ]);
diff --git a/app/assets/javascripts/discourse/tests/integration/components/topic-list-item-test.gjs b/app/assets/javascripts/discourse/tests/integration/components/topic-list-item-test.gjs
new file mode 100644
index 00000000000..91dbb1eeb2d
--- /dev/null
+++ b/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");
+  });
+});
diff --git a/app/assets/javascripts/discourse/tests/integration/components/topic-list-item-test.js b/app/assets/javascripts/discourse/tests/integration/components/topic-list-item-test.js
deleted file mode 100644
index b2c71e41cf9..00000000000
--- a/app/assets/javascripts/discourse/tests/integration/components/topic-list-item-test.js
+++ /dev/null
@@ -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();
-  });
-});