From 4859340b2d5db687bf26b72e03f37f363a9d40e9 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Mon, 30 Oct 2023 21:06:31 +0100
Subject: [PATCH] FIX: correctly display escaped thread titles (#24159)

Prior to this fix, titles with a quote `'` for example, would be rendered as: `&#x27`
---
 .../components/chat/thread-list/item.hbs      |  4 ++--
 .../components/chat/thread-list/item.js       |  4 ----
 .../components/chat/thread/header.hbs         |  2 +-
 .../components/chat/thread/header.js          |  4 ----
 .../javascripts/discourse/lib/fabricators.js  |  1 +
 .../discourse/models/chat-thread.js           |  5 ----
 .../components/chat-thread-header-test.js     | 24 +++++++++++++++++++
 .../components/chat-thread-list-item-test.js  | 24 +++++++++++++++++++
 8 files changed, 52 insertions(+), 16 deletions(-)
 create mode 100644 plugins/chat/test/javascripts/components/chat-thread-header-test.js
 create mode 100644 plugins/chat/test/javascripts/components/chat-thread-list-item-test.js

diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/thread-list/item.hbs b/plugins/chat/assets/javascripts/discourse/components/chat/thread-list/item.hbs
index 07c18da2323..5dec5aaaf25 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/thread-list/item.hbs
+++ b/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}}
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/thread-list/item.js b/plugins/chat/assets/javascripts/discourse/components/chat/thread-list/item.js
index 1aabe2fd945..ce39fa1f464 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/thread-list/item.js
+++ b/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);
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/thread/header.hbs b/plugins/chat/assets/javascripts/discourse/components/chat/thread/header.hbs
index c461e8b6367..652d585e98b 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/thread/header.hbs
+++ b/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
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/thread/header.js b/plugins/chat/assets/javascripts/discourse/components/chat/thread/header.js
index d38a683cd7e..e7619c62ae2 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/thread/header.js
+++ b/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;
diff --git a/plugins/chat/assets/javascripts/discourse/lib/fabricators.js b/plugins/chat/assets/javascripts/discourse/lib/fabricators.js
index 021c0c585df..41e6bea0a56 100644
--- a/plugins/chat/assets/javascripts/discourse/lib/fabricators.js
+++ b/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 }),
   });
diff --git a/plugins/chat/assets/javascripts/discourse/models/chat-thread.js b/plugins/chat/assets/javascripts/discourse/models/chat-thread.js
index 86cf1e637c7..095b82ebd1d 100644
--- a/plugins/chat/assets/javascripts/discourse/models/chat-thread.js
+++ b/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);
-  }
 }
diff --git a/plugins/chat/test/javascripts/components/chat-thread-header-test.js b/plugins/chat/test/javascripts/components/chat-thread-header-test.js
new file mode 100644
index 00000000000..c884dc67a23
--- /dev/null
+++ b/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;"
+    );
+  });
+});
diff --git a/plugins/chat/test/javascripts/components/chat-thread-list-item-test.js b/plugins/chat/test/javascripts/components/chat-thread-list-item-test.js
new file mode 100644
index 00000000000..18b7bdae4f7
--- /dev/null
+++ b/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;"
+    );
+  });
+});