From 190b1b1609f520c590fc22dca0c2c53ca5f63888 Mon Sep 17 00:00:00 2001 From: xO-Tx Date: Fri, 3 Mar 2023 21:42:24 +0000 Subject: [PATCH] [FIX] web_editor: fix icon update on mediaDialog To reproduce the issue: - Website (edit mode) > Drop a snippet with icons (e.g. "Steps"). - Open mediaDialog to change an icon. - Select the same one (or click immediately on "ADD") > This will set an empty icon (without any "fa" specific class). The code on `MediaDialog` > `save()` adds CSS classes from the original icon to the new created one then removes the old 'fa' classes from it. (see `initialIconClasses`), as a consequence, the class will be deleted (not replaced) when the selected icon is the same as the old one. The goal of this commit is to fix this behaviour by simply closing the dialog if the selected icon remains the same as the old one. task-3210472 closes odoo/odoo#114345 X-original-commit: 0515e987b985622bc7b913dbbb37c0d0cd69eb4b Signed-off-by: Guillaume-gdi Signed-off-by: Outagant Mehdi (mou) --- .../components/media_dialog/icon_selector.js | 5 +++ .../components/media_dialog/media_dialog.js | 7 +++- .../static/tests/tours/media_dialog.js | 40 +++++++++++++++++++ addons/website/tests/test_ui.py | 3 ++ 4 files changed, 54 insertions(+), 1 deletion(-) diff --git a/addons/web_editor/static/src/components/media_dialog/icon_selector.js b/addons/web_editor/static/src/components/media_dialog/icon_selector.js index 0498e4eb60d..d56d0338ffd 100644 --- a/addons/web_editor/static/src/components/media_dialog/icon_selector.js +++ b/addons/web_editor/static/src/components/media_dialog/icon_selector.js @@ -35,6 +35,11 @@ export class IconSelector extends Component { this.props.selectMedia({ ...icon, fontBase: font.base, + // To check if the icon has changed, we only need to compare + // an alias of the icon with the class from the old media (some + // icons can have multiple classes e.g. "fa-gears" ~ "fa-cogs") + initialIconChanged: this.props.media + && !icon.names.some(name => this.props.media.classList.contains(name)), }); await this.props.save(); } 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 ddc640c5b37..af92f5c0b90 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 @@ -144,7 +144,12 @@ export class MediaDialog extends Component { async save() { const selectedMedia = this.selectedMedia[this.state.activeTab]; - if (selectedMedia.length) { + // TODO In master: clean the save method so it performs the specific + // adaptation before saving from the active media selector and find a + // way to simply close the dialog if the media element remains the same. + const saveSelectedMedia = selectedMedia.length + && (this.state.activeTab !== TABS.ICONS.id || selectedMedia[0].initialIconChanged); + if (saveSelectedMedia) { const elements = await TABS[this.state.activeTab].Component.createElements(selectedMedia, { rpc: this.rpc, orm: this.orm }); elements.forEach(element => { if (this.props.media) { diff --git a/addons/website/static/tests/tours/media_dialog.js b/addons/website/static/tests/tours/media_dialog.js index 13aa2ef5912..5c9e111299d 100644 --- a/addons/website/static/tests/tours/media_dialog.js +++ b/addons/website/static/tests/tours/media_dialog.js @@ -22,3 +22,43 @@ wTourUtils.dragNDrop({ trigger: '.o_select_media_dialog:has(.o_we_search_select option[value="media-library"])', }, ]}); + +wTourUtils.registerWebsitePreviewTour('website_media_dialog_icons', { + test: true, + url: '/', + edition: true, +}, [ + wTourUtils.dragNDrop({ + id: 's_process_steps', + name: 'Steps', + }), + { + content: "Open MediaDialog from a snippet icon", + trigger: 'iframe .s_process_steps .fa-unlock-alt', + run: "dblclick", + }, + { + content: "Pick the same icon", + trigger: '.o_select_media_dialog .o_we_attachment_selected.fa-unlock-alt', + }, + { + content: "Check if the icon remains the same", + trigger: 'iframe .s_process_steps .fa-unlock-alt', + run: () => null, // it's a check + }, + { + content: "Open MediaDialog again", + trigger: 'iframe .s_process_steps .fa-unlock-alt', + run: "dblclick", + }, + { + content: "Click on the ADD button", + trigger: '.o_select_media_dialog .btn:contains(Add)', + }, + { + content: "Check if the icon remains the same", + trigger: 'iframe .s_process_steps .fa-unlock-alt', + run: () => null, // it's a check + }, + ...wTourUtils.clickOnSave() +]); diff --git a/addons/website/tests/test_ui.py b/addons/website/tests/test_ui.py index 6c901fb685a..48b0eed761a 100644 --- a/addons/website/tests/test_ui.py +++ b/addons/website/tests/test_ui.py @@ -401,3 +401,6 @@ class TestUi(odoo.tests.HttpCase): def test_25_website_edit_discard(self): self.start_tour('/web', 'homepage_edit_discard', login='admin') + + def test_26_website_media_dialog_icons(self): + self.start_tour("/", 'website_media_dialog_icons', login='admin')