[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>

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();
     },
 });
 

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>

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);

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.
+    },
+]);

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')