From cfee0cfee99c9a3e587dd6f7a2b6d533c51d2e2e Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Fri, 17 Mar 2023 18:26:32 +0100
Subject: [PATCH] FIX: ensures lightbox is working after collapse/expand
 (#20724)

Prior to this fix, the upload was removed from DOM when collapsed and not decorated again on expand, which was causing lightbox to not get reapplied. The fix is reverting to previous state where content was not removed from DOM.
---
 .../components/chat-message-collapser.hbs     | 28 ++++---------
 .../system/channel_message_upload_spec.rb     | 39 +++++++++++++++++++
 2 files changed, 47 insertions(+), 20 deletions(-)
 create mode 100644 plugins/chat/spec/system/channel_message_upload_spec.rb

diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-message-collapser.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-message-collapser.hbs
index 206f343fc42..588df4baca7 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-message-collapser.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-message-collapser.hbs
@@ -2,30 +2,18 @@
   {{#if this.hasUploads}}
     {{html-safe @cooked}}
 
-    <Collapser
-      @header={{this.uploadsHeader}}
-      @onToggle={{@onToggleCollapse}}
-      as |collapsed|
-    >
-      {{#unless collapsed}}
-        <div class="chat-uploads">
-          {{#each @uploads as |upload|}}
-            <ChatUpload @upload={{upload}} />
-          {{/each}}
-        </div>
-      {{/unless}}
+    <Collapser @header={{this.uploadsHeader}} @onToggle={{@onToggleCollapse}}>
+      <div class="chat-uploads">
+        {{#each @uploads as |upload|}}
+          <ChatUpload @upload={{upload}} />
+        {{/each}}
+      </div>
     </Collapser>
   {{else}}
     {{#each this.cookedBodies as |cooked|}}
       {{#if cooked.needsCollapser}}
-        <Collapser
-          @header={{cooked.header}}
-          @onToggle={{@onToggleCollapse}}
-          as |collapsed|
-        >
-          {{#unless collapsed}}
-            {{cooked.body}}
-          {{/unless}}
+        <Collapser @header={{cooked.header}} @onToggle={{@onToggleCollapse}}>
+          {{cooked.body}}
         </Collapser>
       {{else}}
         {{cooked.body}}
diff --git a/plugins/chat/spec/system/channel_message_upload_spec.rb b/plugins/chat/spec/system/channel_message_upload_spec.rb
new file mode 100644
index 00000000000..4cc981b9c63
--- /dev/null
+++ b/plugins/chat/spec/system/channel_message_upload_spec.rb
@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+RSpec.describe "Channel message selection", type: :system, js: true do
+  fab!(:current_user) { Fabricate(:user) }
+  fab!(:channel_1) { Fabricate(:chat_channel) }
+  fab!(:message_1) { Fabricate(:chat_message, chat_channel: channel_1) }
+
+  let(:chat) { PageObjects::Pages::Chat.new }
+  let(:channel) { PageObjects::Pages::ChatChannel.new }
+  let(:image) do
+    Fabricate(
+      :upload,
+      original_filename: "test_image.jpg",
+      width: 400,
+      height: 300,
+      extension: "jpg",
+    )
+  end
+
+  before do
+    chat_system_bootstrap
+    channel_1.add(current_user)
+    sign_in(current_user)
+    message_1.attach_uploads([image])
+  end
+
+  it "can collapse/expand an image and still have lightbox working" do
+    chat.visit_channel(channel_1)
+
+    find(".chat-message-collapser-button").click
+    expect(page).to have_css(".chat-message-collapser-body.hidden", visible: :false)
+    find(".chat-message-collapser-button").click
+    expect(page).to have_no_css(".chat-message-collapser-body.hidden")
+    find(".chat-img-upload").click
+
+    # visible false is because the upload doesn’t exist but it's enough to know lightbox is working
+    expect(page).to have_css(".mfp-image-holder img[src*='#{image.url}']", visible: false)
+  end
+end