From cc6cf9ef1377d7ebe1eade0ad4e9387cc3513cbd Mon Sep 17 00:00:00 2001 From: Benjamin Vray Date: Tue, 11 Jul 2023 11:05:16 +0000 Subject: [PATCH] [FIX] web_editor, *: fix replacing an image with shape by another media MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit *: 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) --- .../static/tests/tours/replace_media.js | 7 ++++ .../components/media_dialog/media_dialog.js | 12 ++++--- .../static/src/js/editor/snippets.options.js | 15 +++++--- .../static/tests/tours/media_dialog.js | 35 +++++++++++++++++++ addons/website/tests/test_ui.py | 3 ++ 5 files changed, 62 insertions(+), 10 deletions(-) diff --git a/addons/test_website/static/tests/tours/replace_media.js b/addons/test_website/static/tests/tours/replace_media.js index 406e292cbd1..e1e66f8884b 100644 --- a/addons/test_website/static/tests/tours/replace_media.js +++ b/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))", diff --git a/addons/web_editor/static/src/components/media_dialog/media_dialog.js b/addons/web_editor/static/src/components/media_dialog/media_dialog.js index 9ca7649ad78..69753676f17 100644 --- a/addons/web_editor/static/src/components/media_dialog/media_dialog.js +++ b/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)) { diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js index 19bc4711649..a4e388b521e 100644 --- a/addons/web_editor/static/src/js/editor/snippets.options.js +++ b/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"; + } } }, /** diff --git a/addons/website/static/tests/tours/media_dialog.js b/addons/website/static/tests/tours/media_dialog.js index 372a3f01638..e3c837483ed 100644 --- a/addons/website/static/tests/tours/media_dialog.js +++ b/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 + }, +]); diff --git a/addons/website/tests/test_ui.py b/addons/website/tests/test_ui.py index e5413fbe5a0..33be21a7194 100644 --- a/addons/website/tests/test_ui.py +++ b/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')