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

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

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

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

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>