[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 <gdi@odoo.com>
Signed-off-by: Outagant Mehdi (mou) <mou@odoo.com>

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

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

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

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