FIX: correctly display escaped thread titles (#24159)

Prior to this fix, titles with a quote `'` for example, would be rendered as: `&#x27`

plugins/chat/assets/javascripts/discourse/components/chat/thread-list/item.hbs

@@ -15,8 +15,8 @@
     >
       <div class="chat-thread-list-item__header">
         <div class="chat-thread-list-item__title">
-          {{#if this.title}}
-            {{replace-emoji this.title}}
+          {{#if @thread.title}}
+            {{replace-emoji @thread.title}}
           {{else}}
             {{replace-emoji @thread.originalMessage.excerpt}}
           {{/if}}

plugins/chat/assets/javascripts/discourse/components/chat/thread-list/item.js

@@ -5,10 +5,6 @@ import { inject as service } from "@ember/service";
 export default class ChatThreadListItem extends Component {
   @service router;
 
-  get title() {
-    return this.args.thread.escapedTitle;
-  }
-
   @action
   openThread(thread) {
     this.router.transitionTo("chat.channel.thread", ...thread.routeModels);

plugins/chat/assets/javascripts/discourse/components/chat/thread/header.hbs

@@ -14,7 +14,7 @@
   </div>
 
   <span class="chat-thread-header__label overflow-ellipsis">
-    {{replace-emoji this.label}}
+    {{replace-emoji @thread.title}}
   </span>
 
   <div

plugins/chat/assets/javascripts/discourse/components/chat/thread/header.js

@@ -36,10 +36,6 @@ export default class ChatThreadHeader extends Component {
     };
   }
 
-  get label() {
-    return this.args.thread.escapedTitle;
-  }
-
   get canChangeThreadSettings() {
     if (!this.args.thread) {
       return false;

plugins/chat/assets/javascripts/discourse/lib/fabricators.js

@@ -127,6 +127,7 @@ function threadFabricator(args = {}) {
   const channel = args.channel || channelFabricator();
   return ChatThread.create(channel, {
     id: args.id || sequence++,
+    title: args.title,
     original_message: args.original_message || messageFabricator({ channel }),
     preview: args.preview || threadPreviewFabricator({ channel }),
   });

plugins/chat/assets/javascripts/discourse/models/chat-thread.js

@@ -1,6 +1,5 @@
 import { tracked } from "@glimmer/tracking";
 import guid from "pretty-text/guid";
-import { escapeExpression } from "discourse/lib/utilities";
 import { getOwnerWithFallback } from "discourse-common/lib/get-owner";
 import ChatMessagesManager from "discourse/plugins/chat/discourse/lib/chat-messages-manager";
 import ChatMessage from "discourse/plugins/chat/discourse/models/chat-message";
@@ -73,8 +72,4 @@ export default class ChatThread {
   get routeModels() {
     return [...this.channel.routeModels, this.id];
   }
-
-  get escapedTitle() {
-    return escapeExpression(this.title);
-  }
 }

plugins/chat/test/javascripts/components/chat-thread-header-test.js

@@ -0,0 +1,24 @@
+import { render } from "@ember/test-helpers";
+import hbs from "htmlbars-inline-precompile";
+import { module, test } from "qunit";
+import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+import { query } from "discourse/tests/helpers/qunit-helpers";
+import fabricators from "discourse/plugins/chat/discourse/lib/fabricators";
+
+module("Discourse Chat | Component | chat-thread-header", function (hooks) {
+  setupRenderingTest(hooks);
+
+  test("it safely renders title", async function (assert) {
+    const title = "<style>body { background: red;}</style>";
+    this.thread = fabricators.thread({ title });
+
+    await render(hbs`
+      <Chat::Thread::Header @thread={{this.thread}} @channel={{this.thread.channel}} />
+    `);
+
+    assert.equal(
+      query(".chat-thread-header__label").innerHTML.trim(),
+      "&lt;style&gt;body { background: red;}&lt;/style&gt;"
+    );
+  });
+});

plugins/chat/test/javascripts/components/chat-thread-list-item-test.js

@@ -0,0 +1,24 @@
+import { render } from "@ember/test-helpers";
+import hbs from "htmlbars-inline-precompile";
+import { module, test } from "qunit";
+import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+import { query } from "discourse/tests/helpers/qunit-helpers";
+import fabricators from "discourse/plugins/chat/discourse/lib/fabricators";
+
+module("Discourse Chat | Component | chat-thread-list-item", function (hooks) {
+  setupRenderingTest(hooks);
+
+  test("it safely renders title", async function (assert) {
+    const title = "<style>body { background: red;}</style>";
+    this.thread = fabricators.thread({ title });
+
+    await render(hbs`
+      <Chat::ThreadList::Item @thread={{this.thread}} />
+    `);
+
+    assert.equal(
+      query(".chat-thread-list-item__title").innerHTML.trim(),
+      "&lt;style&gt;body { background: red;}&lt;/style&gt;"
+    );
+  });
+});