FIX: ensures chat-message is recomputed with model (#20312)

The message model is not yet using tracked properties and as a result we were not correctly recomputing on various cases.

plugins/chat/assets/javascripts/discourse/components/chat-message.js

@@ -72,15 +72,15 @@ export default class ChatMessage extends Component {
   }
 
   get deletedAndCollapsed() {
-    return this.args.message?.deleted_at && this.collapsed;
+    return this.args.message?.get("deleted_at") && this.collapsed;
   }
 
   get hiddenAndCollapsed() {
-    return this.args.message?.hidden && this.collapsed;
+    return this.args.message?.get("hidden") && this.collapsed;
   }
 
   get collapsed() {
-    return !this.args.message?.expanded;
+    return !this.args.message?.get("expanded");
   }
 
   @action
@@ -169,7 +169,7 @@ export default class ChatMessage extends Component {
   get showActions() {
     return (
       this.args.canInteractWithChat &&
-      !this.args.message?.staged &&
+      !this.args.message?.get("staged") &&
       this.args.isHovered
     );
   }
@@ -270,14 +270,15 @@ export default class ChatMessage extends Component {
 
   get hasThread() {
     return (
-      this.args.chatChannel.threading_enabled && this.args.message.thread_id
+      this.args.chatChannel?.get("threading_enabled") &&
+      this.args.message?.get("thread_id")
     );
   }
 
   get show() {
     return (
-      !this.args.message?.deleted_at ||
+      !this.args.message?.get("deleted_at") ||
-      this.currentUser.id === this.args.message?.user?.id ||
+      this.currentUser.id === this.args.message?.get("user.id") ||
       this.currentUser.staff ||
       this.args.details?.can_moderate
     );
@@ -330,43 +331,44 @@ export default class ChatMessage extends Component {
 
   get hideUserInfo() {
     return (
-      this.args.message?.hideUserInfo && !this.args.message?.chat_webhook_event
+      this.args.message?.get("hideUserInfo") &&
+      !this.args.message?.get("chat_webhook_event")
     );
   }
 
   get showEditButton() {
     return (
-      !this.args.message?.deleted_at &&
+      !this.args.message?.get("deleted_at") &&
-      this.currentUser?.id === this.args.message?.user?.id &&
+      this.currentUser?.id === this.args.message?.get("user.id") &&
       this.args.chatChannel?.canModifyMessages?.(this.currentUser)
     );
   }
   get canFlagMessage() {
     return (
-      this.currentUser?.id !== this.args.message?.user?.id &&
+      this.currentUser?.id !== this.args.message?.get("user.id") &&
-      this.args.message?.user_flag_status === undefined &&
+      this.args.message?.get("user_flag_status") === undefined &&
       this.args.details?.can_flag &&
-      !this.args.message?.chat_webhook_event &&
+      !this.args.message?.get("chat_webhook_event") &&
-      !this.args.message.deleted_at
+      !this.args.message?.get("deleted_at")
     );
   }
 
   get canManageDeletion() {
-    return this.currentUser?.id === this.args.message.user?.id
+    return this.currentUser?.id === this.args.message.get("user.id")
       ? this.args.details?.can_delete_self
       : this.args.details?.can_delete_others;
   }
 
   get canReply() {
     return (
-      !this.args.message?.deleted_at &&
+      !this.args.message?.get("deleted_at") &&
       this.args.chatChannel?.canModifyMessages?.(this.currentUser)
     );
   }
 
   get canReact() {
     return (
-      !this.args.message?.deleted_at &&
+      !this.args.message?.get("deleted_at") &&
       this.args.chatChannel?.canModifyMessages?.(this.currentUser)
     );
   }
@@ -374,7 +376,7 @@ export default class ChatMessage extends Component {
   get showDeleteButton() {
     return (
       this.canManageDeletion &&
-      !this.args.message?.deleted_at &&
+      !this.args.message?.get("deleted_at") &&
       this.args.chatChannel?.canModifyMessages?.(this.currentUser)
     );
   }
@@ -382,7 +384,7 @@ export default class ChatMessage extends Component {
   get showRestoreButton() {
     return (
       this.canManageDeletion &&
-      this.args.message?.deleted_at &&
+      this.args.message?.get("deleted_at") &&
       this.args.chatChannel?.canModifyMessages?.(this.currentUser)
     );
   }

plugins/chat/spec/system/chat_channel_spec.rb

@@ -13,21 +13,37 @@ RSpec.describe "Chat channel", type: :system, js: true do
   context "when sending a message" do
     before do
       channel_1.add(current_user)
-      50.times { Fabricate(:chat_message, chat_channel: channel_1) }
       sign_in(current_user)
     end
 
-    it "loads most recent messages" do
+    context "with lots of messages" do
-      unloaded_message = Fabricate(:chat_message, chat_channel: channel_1)
+      before { 50.times { Fabricate(:chat_message, chat_channel: channel_1) } }
-      visit("/chat/message/#{message_1.id}")
 
+      it "loads most recent messages" do
+        unloaded_message = Fabricate(:chat_message, chat_channel: channel_1)
+        visit("/chat/message/#{message_1.id}")
+
+        expect(channel).to have_no_loading_skeleton
+        expect(page).to have_no_css("[data-id='#{unloaded_message.id}']")
+
+        channel.send_message("test_message")
+
+        expect(channel).to have_no_loading_skeleton
+        expect(page).to have_css("[data-id='#{unloaded_message.id}']")
+      end
+    end
+
+    it "allows to edit this message once persisted" do
+      chat.visit_channel(channel_1)
       expect(channel).to have_no_loading_skeleton
-      expect(page).to have_no_css("[data-id='#{unloaded_message.id}']")
+      channel.send_message("aaaaaaaaaaaaaaaaaaaa")
+      expect(page).to have_no_css("[data-staged-id]")
+      last_message = find(".chat-message-container:last-child")
+      last_message.hover
 
-      channel.send_message("test_message")
+      expect(page).to have_css(
-
+        ".chat-message-actions-container[data-id='#{last_message["data-id"]}']",
-      expect(channel).to have_no_loading_skeleton
+      )
-      expect(page).to have_css("[data-id='#{unloaded_message.id}']")
     end
   end