[FIX] web_editor, *: fix replacing an image with shape by another media

*: test_website, website

Steps to reproduce the bug:
- Drag and drop a text-image snippet onto the page.
- Add a shape to the image of the snippet by selecting the shape from
the options.
- Click on the "replace" button in the options of the image.
- In the media dialog, navigate to the "icons" tab.
- Choose an icon.
- Inspect the HTML code of the icon in the DOM.
- Bug: The 'data-shape' attribute with a value is still present.

After this commit, when replacing media, the transfer of element
attributes specific to "shape" elements only occurs towards an image and
no longer towards other media (e.g. icons).

We also prevent adding shapes to images that don't support it (e.g. SVG
files). Before this commit, when replacing a .jpeg image that had
a shape with a SVG image, the shape was not removed.

This commit also adds tests to prevent these bugs from reappearing.

task-3420533

closes odoo/odoo#129079

X-original-commit: 023b0b3124a7181fdf486df8c830bb16edd10aa6
Signed-off-by: Soukéina Bojabza (sobo) <sobo@odoo.com>

addons/test_website/static/tests/tours/replace_media.js

@@ -48,6 +48,8 @@ wTourUtils.registerWebsitePreviewTour('test_replace_media', {
         trigger: "#oe_snippets we-title:contains('Image') .o_we_image_weight:contains('kb')",
         run: function () {}, // check
     },
+    wTourUtils.changeOption("ImageTools", 'we-select[data-name="shape_img_opt"] we-toggler'),
+    wTourUtils.changeOption("ImageTools", "we-button[data-set-img-shape]"),
     {
         content: "replace image",
         trigger: "#oe_snippets we-button[data-replace-media]",
@@ -56,6 +58,11 @@ wTourUtils.registerWebsitePreviewTour('test_replace_media', {
         content: "select svg",
         trigger: ".o_select_media_dialog img[title='sample.svg']",
     },
+    {
+        content: "ensure the svg doesn't have a shape",
+        trigger: "iframe .s_picture figure img:not([data-shape])",
+        run: function () {}, // check
+    },
     {
         content: "ensure image size is not displayed",
         trigger: "#oe_snippets we-title:contains('Image'):not(:has(.o_we_image_weight:visible))",

addons/web_editor/static/src/components/media_dialog/media_dialog.js

@@ -166,11 +166,13 @@ export class MediaDialog extends Component {
                     if (style) {
                         element.setAttribute('style', style);
                     }
-                    if (this.props.media.dataset.shape) {
-                        element.dataset.shape = this.props.media.dataset.shape;
-                    }
-                    if (this.props.media.dataset.shapeColors) {
-                        element.dataset.shapeColors = this.props.media.dataset.shapeColors;
+                    if (this.state.activeTab === TABS.IMAGES.id) {
+                        if (this.props.media.dataset.shape) {
+                            element.dataset.shape = this.props.media.dataset.shape;
+                        }
+                        if (this.props.media.dataset.shapeColors) {
+                            element.dataset.shapeColors = this.props.media.dataset.shapeColors;
+                        }
                     }
                 }
                 for (const otherTab of Object.keys(TABS).filter(key => key !== this.state.activeTab)) {

addons/web_editor/static/src/js/editor/snippets.options.js

@@ -6537,8 +6537,10 @@ registry.ImageTools = ImageHandlerOption.extend({
     async _loadImageInfo() {
         await this._super(...arguments);
         const img = this._getImg();
-        if (img.dataset.shape && img.dataset.mimetype !== 'image/svg+xml') {
-            img.dataset.originalMimetype = img.dataset.mimetype;
+        if (img.dataset.shape) {
+            if (img.dataset.mimetype !== "image/svg+xml") {
+                img.dataset.originalMimetype = img.dataset.mimetype;
+            }
             if (!this._isImageSupportedForProcessing(img)) {
                 delete img.dataset.shape;
                 delete img.dataset.shapeColors;
@@ -6546,9 +6548,12 @@ registry.ImageTools = ImageHandlerOption.extend({
                 delete img.dataset.originalMimetype;
                 return;
             }
-            // Image data-mimetype should be changed to SVG since loadImageInfo()
-            // will set the original attachment mimetype on it.
-            img.dataset.mimetype = 'image/svg+xml';
+            if (img.dataset.mimetype !== "image/svg+xml") {
+                // Image data-mimetype should be changed to SVG since
+                // loadImageInfo() will set the original attachment mimetype on
+                // it.
+                img.dataset.mimetype = "image/svg+xml";
+            }
         }
     },
     /**

addons/website/static/tests/tours/media_dialog.js

@@ -59,3 +59,38 @@ wTourUtils.registerWebsitePreviewTour('website_media_dialog_icons', {
     },
     ...wTourUtils.clickOnSave()
 ]);
+
+wTourUtils.registerWebsitePreviewTour("website_media_dialog_image_shape", {
+    test: true,
+    url: "/",
+    edition: true,
+}, [
+    wTourUtils.dragNDrop({
+        id: "s_text_image",
+        name: "Text - Image",
+    }),
+    {
+        content: "Click on the image",
+        trigger: "iframe .s_text_image img",
+    },
+    wTourUtils.changeOption("ImageTools", 'we-select[data-name="shape_img_opt"] we-toggler'),
+    wTourUtils.changeOption("ImageTools", "we-button[data-set-img-shape]"),
+    {
+        content: "Open MediaDialog from an image",
+        trigger: "iframe .s_text_image img[data-shape]",
+        run: "dblclick",
+    },
+    {
+        content: "Click on the 'Icons' tab",
+        trigger: '.o_select_media_dialog .o_notebook_headers .nav-item a:contains("Icons")',
+    },
+    {
+        content: "Select an icon",
+        trigger: ".o_select_media_dialog:has(.nav-link.active:contains('Icons')) .tab-content span.fa-heart",
+    },
+    {
+        content: "Checks that the icon doesn't have a shape",
+        trigger: "iframe .s_text_image .fa-heart:not([data-shape])",
+        run: () => {}, //it's a check
+    },
+]);

addons/website/tests/test_ui.py

@@ -450,3 +450,6 @@ class TestUi(odoo.tests.HttpCase):
 
     def test_30_website_text_animations(self):
         self.start_tour("/", 'text_animations', login='admin')
+
+    def test_website_media_dialog_image_shape(self):
+        self.start_tour("/", 'website_media_dialog_image_shape', login='admin')