From 4fd5fd4a97a6d93a3fb2e9561232f77743d6815f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=20De=20Caluw=C3=A9?= <tdc@odoo.com>
Date: Thu, 23 Sep 2021 09:54:15 +0000
Subject: [PATCH] [FIX] web_editor, website: fix removal of last item inside
 active slides

A bug currently makes the carousel snippet collapse/disappear when its
active contents are removed. This happens because after the removal,
the carousel no longer has an active item.

The solution that was chosen was to not allow the removal of slides
unless using the dedicated option which is there for that. This solution
has the advantage to also allow users to create empty slides (using a
background image for example) by simply removing the columns inside.

Note: Newly created carousels will include the oe_unremovable class on
their slides. As such they will no longer depend on isEmptyAndRemovable
checking them for having a carousel-item class on the parent.

task-2506165

closes odoo/odoo#79892

X-original-commit: 0cf36a227e7b90fb64b1bc8024de813894d10d14
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 .../static/src/js/editor/snippets.editor.js   |  1 +
 .../tests/tours/carousel_content_removal.js   | 27 +++++++++++++++++++
 addons/website/tests/test_ui.py               |  3 +++
 addons/website/views/snippets/s_carousel.xml  |  6 ++---
 4 files changed, 34 insertions(+), 3 deletions(-)
 create mode 100644 addons/website/static/tests/tours/carousel_content_removal.js

diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js
index ce61a023202..982d7d4b8f9 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -491,6 +491,7 @@ var SnippetEditor = Widget.extend({
                         return el.matches(this.layoutElementsSelector);
                     });
                 return isEmpty && !$el.hasClass('oe_structure') && !$el.hasClass('oe_unremovable')
+                    && !$el.parent().hasClass('carousel-item')
                     && (!editor || editor.isTargetParentEditable);
             };
 
diff --git a/addons/website/static/tests/tours/carousel_content_removal.js b/addons/website/static/tests/tours/carousel_content_removal.js
new file mode 100644
index 00000000000..1c7d3cff8a0
--- /dev/null
+++ b/addons/website/static/tests/tours/carousel_content_removal.js
@@ -0,0 +1,27 @@
+/** @odoo-module */
+
+import tour from 'web_tour.tour';
+
+tour.register("carousel_content_removal", {
+    url: "/",
+}, [{
+    trigger: "a[data-action=edit]",
+    content: "Click the Edit button.",
+    extra_trigger: ".homepage",
+}, {
+    trigger: "#snippet_structure .oe_snippet:has(span:contains('Carousel')) .oe_snippet_thumbnail",
+    content: "Drag the Carousel block and drop it in your page.",
+    run: "drag_and_drop #wrap",
+},
+{
+    trigger: ".carousel .carousel-item.active .carousel-content",
+    content: "Select the active carousel item.",
+}, {
+    trigger: ".oe_overlay.oe_active .oe_snippet_remove",
+    content: "Remove the active carousel item.",
+},
+{
+    trigger: ".carousel .carousel-item.active .container:not(:has(*))",
+    content: "Check for a carousel slide with an empty container tag",
+    run: function () {},
+}]);
diff --git a/addons/website/tests/test_ui.py b/addons/website/tests/test_ui.py
index ab5ad731e23..9d9f192d42f 100644
--- a/addons/website/tests/test_ui.py
+++ b/addons/website/tests/test_ui.py
@@ -272,3 +272,6 @@ class TestUi(odoo.tests.HttpCase):
         }])
 
         self.start_tour("/?enable_editor=1", "focus_blur_snippets", login="admin")
+
+    def test_14_carousel_snippet_content_removal(self):
+        self.start_tour("/", "carousel_content_removal", login='admin')
diff --git a/addons/website/views/snippets/s_carousel.xml b/addons/website/views/snippets/s_carousel.xml
index cc30313c4c8..be65e01c7f0 100644
--- a/addons/website/views/snippets/s_carousel.xml
+++ b/addons/website/views/snippets/s_carousel.xml
@@ -15,7 +15,7 @@
             <div class="carousel-inner">
                 <!-- #01 -->
                 <div class="carousel-item active oe_img_bg o_bg_img_center pt152 pb152" style="background-image: url('/web/image/website.s_carousel_default_image_1');" data-name="Slide">
-                    <div class="container">
+                    <div class="container oe_unremovable">
                         <div class="row content">
                             <div class="carousel-content col-lg-6">
                                  <h2><font style="font-size: 62px;">Slide Title</font></h2>
@@ -29,7 +29,7 @@
                 </div>
                 <!-- #02 -->
                 <div class="carousel-item oe_img_bg o_bg_img_center pt96 pb96" style="background-image: url('/web/image/website.s_carousel_default_image_2');" data-name="Slide">
-                    <div class="container">
+                    <div class="container oe_unremovable">
                         <div class="row content">
                             <div class="carousel-content col-lg-8 offset-lg-2 bg-black-50 text-center pt48 pb40">
                                 <h2 style="font-size: 62px;">Clever Slogan</h2>
@@ -44,7 +44,7 @@
                 </div>
                 <!-- #03 -->
                 <div class="carousel-item oe_img_bg o_bg_img_center pt128 pb128" style="background-image: url('/web/image/website.s_carousel_default_image_3');" data-name="Slide">
-                    <div class="container">
+                    <div class="container oe_unremovable">
                         <div class="row content">
                             <div class="carousel-content col-lg-6 offset-lg-6">
                                 <h2><font style="font-size: 62px; background-color: rgb(255, 255, 255);">Edit this title</font></h2>