UX: groups deleted messages (#21411)

Any continuous series of deleted messages will now be grouped into one single expand button.

plugins/chat/spec/system/deleted_message_spec.rb

@@ -4,7 +4,7 @@ RSpec.describe "Deleted message", type: :system, js: true do
   let(:chat_page) { PageObjects::Pages::Chat.new }
   let(:channel_page) { PageObjects::Pages::ChatChannel.new }
 
-  fab!(:current_user) { Fabricate(:user) }
+  fab!(:current_user) { Fabricate(:admin) }
   fab!(:channel_1) { Fabricate(:category_channel) }
 
   before do
@@ -21,7 +21,33 @@ RSpec.describe "Deleted message", type: :system, js: true do
       last_message = find(".chat-message-container:last-child")
       channel_page.delete_message(OpenStruct.new(id: last_message["data-id"]))
 
-      expect(page).to have_content(I18n.t("js.chat.deleted"))
+      expect(channel_page).to have_deleted_message(
+        OpenStruct.new(id: last_message["data-id"]),
+        count: 1,
+      )
+    end
+  end
+
+  context "when deleting multiple messages" do
+    fab!(:message_1) { Fabricate(:chat_message, chat_channel: channel_1) }
+    fab!(:message_2) { Fabricate(:chat_message, chat_channel: channel_1) }
+    fab!(:message_3) { Fabricate(:chat_message, chat_channel: channel_1) }
+    fab!(:message_4) { Fabricate(:chat_message, chat_channel: channel_1) }
+    fab!(:message_5) { Fabricate(:chat_message, chat_channel: channel_1) }
+    fab!(:message_6) { Fabricate(:chat_message, chat_channel: channel_1) }
+
+    it "groups them" do
+      chat_page.visit_channel(channel_1)
+
+      channel_page.delete_message(message_1)
+      channel_page.delete_message(message_3)
+      channel_page.delete_message(message_4)
+      channel_page.delete_message(message_6)
+
+      expect(channel_page).to have_deleted_message(message_1)
+      expect(channel_page).to have_deleted_message(message_4, count: 2)
+      expect(channel_page).to have_deleted_message(message_6)
+      expect(channel_page).to have_no_message(id: message_3.id)
     end
   end
 
@@ -65,9 +91,9 @@ RSpec.describe "Deleted message", type: :system, js: true do
       )
 
       expect(channel_page).to have_no_message(id: message_1.id)
-      expect(channel_page).to have_no_message(id: message_2.id)
+      expect(channel_page).to have_deleted_message(message_2, count: 2)
       expect(open_thread).to have_no_message(thread_id: thread.id, id: message_4.id)
-      expect(open_thread).to have_no_message(thread_id: thread.id, id: message_5.id)
+      expect(open_thread).to have_deleted_message(message_5, count: 2)
     end
   end
 end

plugins/chat/spec/system/move_message_to_channel_spec.rb

@@ -87,8 +87,7 @@ RSpec.describe "Move message to channel", type: :system, js: true do
 
         chat.visit_channel(channel_1)
 
-        expect(page).to have_no_content(message_1.message)
-        expect(page).to have_content(I18n.t("js.chat.deleted"))
+        expect(channel).to have_deleted_message(message_1)
       end
     end
   end

plugins/chat/spec/system/page_objects/chat/chat_channel.rb

@@ -172,6 +172,13 @@ module PageObjects
         check_message_presence(exists: false, text: text, id: id)
       end
 
+      def has_deleted_message?(message, count: 1)
+        has_css?(
+          ".chat-channel .chat-message-container[data-id=\"#{message.id}\"] .chat-message-deleted",
+          text: I18n.t("js.chat.deleted", count: count),
+        )
+      end
+
       def check_message_presence(exists: true, text: nil, id: nil)
         css_method = exists ? :has_css? : :has_no_css?
         if text

plugins/chat/spec/system/page_objects/chat/chat_thread.rb

@@ -77,6 +77,13 @@ module PageObjects
       def message_by_id_selector(id)
         ".chat-thread .chat-messages-container .chat-message-container[data-id=\"#{id}\"]"
       end
+
+      def has_deleted_message?(message, count: 1)
+        has_css?(
+          ".chat-thread .chat-message-container[data-id=\"#{message.id}\"] .chat-message-deleted",
+          text: I18n.t("js.chat.deleted", count: count),
+        )
+      end
     end
   end
 end