From caf1ca67e9e6787382df486a4b9dcc1bcf58c8fa Mon Sep 17 00:00:00 2001
From: "Guillaume (gdi)" <gdi@odoo.com>
Date: Fri, 29 Jul 2022 09:44:53 +0000
Subject: [PATCH] [FIX] website: permit to open the image wall modal correctly

Since the bootstrap 5 merge at [1], when you click on an image in the
Image Wall block, the modal no longer opens. This commit restores that
and adds a test to make sure this problem does not happen again.

Steps to reproduce:
- Drop the "Image wall" block in a page
- Save
- Click on an image
-> The modal does not open

[1]: https://github.com/odoo/odoo/commit/971e5a91aab96d36129a823e03f1f9f1b1293968

task-2937538

closes odoo/odoo#97053

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 .../src/snippets/s_image_gallery/000.js       | 10 +++------
 .../src/snippets/s_image_gallery/000.xml      |  4 ++--
 .../src/snippets/s_image_gallery/001.scss     |  3 ---
 .../tests/tours/snippet_image_gallery.js      | 22 +++++++++++++++++++
 addons/website/tests/test_snippets.py         |  3 +++
 5 files changed, 30 insertions(+), 12 deletions(-)
 create mode 100644 addons/website/static/tests/tours/snippet_image_gallery.js

diff --git a/addons/website/static/src/snippets/s_image_gallery/000.js b/addons/website/static/src/snippets/s_image_gallery/000.js
index eff0a67371a..82b23d82864 100644
--- a/addons/website/static/src/snippets/s_image_gallery/000.js
+++ b/addons/website/static/src/snippets/s_image_gallery/000.js
@@ -50,24 +50,20 @@ const GalleryWidget = publicWidget.Widget.extend({
             interval: milliseconds || 0,
             id: _.uniqueId('slideshow_'),
         }));
-        $modal.modal({
-            keyboard: true,
-            backdrop: true,
-        });
         $modal.on('hidden.bs.modal', function () {
             $(this).hide();
             $(this).siblings().filter('.modal-backdrop').remove(); // bootstrap leaves a modal-backdrop
             $(this).remove();
         });
-        $modal.find('.modal-content, .modal-body.o_slideshow').css('height', '100%');
-        $modal.appendTo(document.body);
-
         $modal.one('shown.bs.modal', function () {
             self.trigger_up('widgets_start_request', {
                 editableMode: false,
                 $target: $modal.find('.modal-body.o_slideshow'),
             });
         });
+        $modal.appendTo(document.body);
+        const modalBS = new Modal($modal[0], {keyboard: true, backdrop: true});
+        modalBS.show();
     },
 });
 
diff --git a/addons/website/static/src/snippets/s_image_gallery/000.xml b/addons/website/static/src/snippets/s_image_gallery/000.xml
index 1fd8e861bc5..8ce19bf27c9 100644
--- a/addons/website/static/src/snippets/s_image_gallery/000.xml
+++ b/addons/website/static/src/snippets/s_image_gallery/000.xml
@@ -56,9 +56,9 @@
         <div role="dialog" class="modal o_technical_modal fade s_gallery_lightbox p-0" aria-labbelledby="Image Gallery Dialog">
             <div class="modal-dialog m-0" role="Picture Gallery"
                 t-attf-style="">
-                <div class="modal-content bg-transparent">
+                <div class="modal-content bg-transparent modal-fullscreen">
                     <main class="modal-body o_slideshow bg-transparent">
-                        <button type="button" class="close text-white" data-bs-dismiss="modal" style="position: absolute; right: 10px; top: 10px;"><span role="img" aria-label="Close">×</span><span class="visually-hidden">Close</span></button>
+                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close" style="position: absolute; right: 10px; top: 10px;"></button>
                         <t t-call="website.gallery.slideshow"></t>
                     </main>
                 </div>
diff --git a/addons/website/static/src/snippets/s_image_gallery/001.scss b/addons/website/static/src/snippets/s_image_gallery/001.scss
index 0028d8c9838..d4d66c11340 100644
--- a/addons/website/static/src/snippets/s_image_gallery/001.scss
+++ b/addons/website/static/src/snippets/s_image_gallery/001.scss
@@ -222,9 +222,6 @@
 }
 
 .s_gallery_lightbox {
-    .close {
-        font-size: 2rem;
-    }
     .modal-dialog {
         height: 100%;
         background-color: rgba(0,0,0,0.7);
diff --git a/addons/website/static/tests/tours/snippet_image_gallery.js b/addons/website/static/tests/tours/snippet_image_gallery.js
new file mode 100644
index 00000000000..3dc726d5f6d
--- /dev/null
+++ b/addons/website/static/tests/tours/snippet_image_gallery.js
@@ -0,0 +1,22 @@
+/** @odoo-module */
+
+import wTourUtils from 'website.tour_utils';
+
+wTourUtils.registerEditionTour('snippet_image_gallery', {
+    test: true,
+    url: '/',
+    edition: true,
+}, [
+    wTourUtils.dragNDrop({id: 's_image_gallery', name: 'Images Wall'}),
+    ...wTourUtils.clickOnSave(),
+    {
+        content: 'Click on an image of the Image Wall',
+        trigger: 'iframe .s_image_gallery img',
+        run: 'click',
+    },
+    {
+        content: 'Check that the modal has opened properly',
+        trigger: 'iframe .s_gallery_lightbox img',
+        run: () => {}, // This is a check.
+    },
+]);
diff --git a/addons/website/tests/test_snippets.py b/addons/website/tests/test_snippets.py
index 1c0f4bc98a0..3d8ce86189d 100644
--- a/addons/website/tests/test_snippets.py
+++ b/addons/website/tests/test_snippets.py
@@ -46,3 +46,6 @@ class TestSnippets(HttpCase):
 
     def test_06_snippet_popup_add_remove(self):
         self.start_tour(self.env['website'].get_client_action_url('/'), 'snippet_popup_add_remove', login='admin')
+
+    def test_07_image_gallery(self):
+        self.start_tour(self.env['website'].get_client_action_url('/'), 'snippet_image_gallery', login='admin')