[FIX] web_editor, *: clean previously shown link in link popover

*: web_tour, test_website

Since [1] when the link popover was introduced, when the URL of a link
was made empty, an validation error appeared by the previously shown URL
did still appear inside the popover.

After this commit the previously shown link is replaced by a message
that indicates that no URL is specified.
The telephone and envelope icons are now also always removed when the
URL is change: they used to be only toggled, which made it possible to
make them appear and disappear by updating an email address or a phone
number.

Steps to reproduce:
- Add an image-text snippet to the page
- Select the image
- Add a link on the image
- Specify URL
- Click on image => link popup shows the entered URL
- Make the URL field empty
- Click on image
=> link popup still showed the previously entered URL

[1]: https://github.com/odoo/odoo/commit/8fcf930a6b6b7ffb0965b0a689c7a3117962ce7e

task-2765857

closes odoo/odoo#98845

X-original-commit: f212c56d73f5dad8eb5850b0b39cc92f55706ee2
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Signed-off-by: Benoit Socias (bso) <bso@odoo.com>

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

@@ -0,0 +1,79 @@
+/** @odoo-module **/
+
+import wTourUtils from 'website.tour_utils';
+
+/**
+ * The purpose of this tour is to check the link on image flow.
+ */
+
+wTourUtils.registerEditionTour('test_image_link', {
+    test: true,
+    url: '/',
+    edition: true,
+}, [
+    wTourUtils.dragNDrop({
+        id: 's_text_image',
+        name: 'Text - Image',
+    }), {
+        content: "select image",
+        trigger: "iframe #wrapwrap .s_text_image img",
+    }, {
+        content: "enable link",
+        trigger: "#oe_snippets we-customizeblock-options:has(we-title:contains('Image')) we-customizeblock-option:has(we-title:contains(Media)) we-button.fa-link",
+    }, {
+        content: "enter site URL",
+        trigger: "#oe_snippets we-customizeblock-options:has(we-title:contains('Image')) we-input:contains(Your URL) input",
+        run: "text odoo.com",
+    }, {
+        content: "select image",
+        trigger: "iframe #wrapwrap .s_text_image img",
+    }, {
+        content: "check popover content has site URL",
+        trigger: ".o_edit_menu_popover a.o_we_url_link[href='http://odoo.com/']:contains(http://odoo.com/)",
+        run: () => {}, // check
+    }, {
+        content: "remove URL",
+        trigger: "#oe_snippets we-customizeblock-options:has(we-title:contains('Image')) we-input:contains(Your URL) input",
+        run: "remove_text",
+    }, {
+        content: "select image",
+        trigger: "iframe #wrapwrap .s_text_image img",
+    }, {
+        content: "check popover content has no URL",
+        trigger: ".o_edit_menu_popover a.o_we_url_link:not([href]):contains(No URL specified)",
+        run: () => {}, // check
+    }, {
+        content: "enter email URL",
+        trigger: "#oe_snippets we-customizeblock-options:has(we-title:contains('Image')) we-input:contains(Your URL) input",
+        run: "text mailto:test@test.com",
+    }, {
+        content: "select image",
+        trigger: "iframe #wrapwrap .s_text_image img",
+    }, {
+        content: "check popover content has mail URL",
+        trigger: ".o_edit_menu_popover:has(.fa-envelope-o) a.o_we_url_link[href='mailto:test@test.com']:contains(mailto:test@test.com)",
+        run: () => {}, // check
+    }, {
+        content: "enter phone URL",
+        trigger: "#oe_snippets we-customizeblock-options:has(we-title:contains('Image')) we-input:contains(Your URL) input",
+        run: "text tel:555-2368",
+    }, {
+        content: "select image",
+        trigger: "iframe #wrapwrap .s_text_image img",
+    }, {
+        content: "check popover content has phone URL",
+        trigger: ".o_edit_menu_popover:has(.fa-phone) a.o_we_url_link[href='tel:555-2368']:contains(tel:555-2368)",
+        run: () => {}, // check
+    }, {
+        content: "remove URL",
+        trigger: "#oe_snippets we-customizeblock-options:has(we-title:contains('Image')) we-input:contains(Your URL) input",
+        run: "remove_text",
+    }, {
+        content: "select image",
+        trigger: "iframe #wrapwrap .s_text_image img",
+    }, {
+        content: "check popover content has no URL",
+        trigger: ".o_edit_menu_popover a.o_we_url_link:not([href]):contains(No URL specified)",
+        run: () => {}, // check
+    },
+]);

addons/test_website/tests/test_media.py

@@ -20,3 +20,6 @@ class TestMedia(odoo.tests.HttpCase):
             'datas': SVG,
         })
         self.start_tour("/", 'test_replace_media', login="admin")
+
+    def test_02_image_link(self):
+        self.start_tour("/", 'test_image_link', login="admin")

addons/web_editor/i18n/web_editor.pot

@@ -1626,6 +1626,13 @@ msgstr ""
 msgid "No"
 msgstr ""
 
+#. module: web_editor
+#. openerp-web
+#: code:addons/web_editor/static/src/js/wysiwyg/widgets/link_popover_widget.js:0
+#, python-format
+msgid "No URL specified"
+msgstr ""
+
 #. module: web_editor
 #. openerp-web
 #: code:addons/web_editor/static/src/xml/wysiwyg.xml:0

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

@@ -4839,6 +4839,7 @@ registry.ReplaceMedia = SnippetOptionWidget.extend({
         if (!url) {
             // As long as there is no URL, the image is not considered a link.
             linkEl.removeAttribute('href');
+            this.$target.trigger('href_changed');
             return;
         }
         if (!url.startsWith('/') && !url.startsWith('#')

addons/web_editor/static/src/js/wysiwyg/widgets/link_popover_widget.js

@@ -169,6 +169,11 @@ const LinkPopoverWidget = Widget.extend({
      */
     async _loadAsyncLinkPreview() {
         let url;
+        if (this.target.href === '') {
+            this._resetPreview('');
+            this.$previewFaviconFa.removeClass('fa-globe').addClass('fa-question-circle-o');
+            return;
+        }
         try {
             url = new URL(this.target.href); // relative to absolute
         } catch (_e) {
@@ -230,8 +235,8 @@ const LinkPopoverWidget = Widget.extend({
      */
     _resetPreview(url) {
         this.$previewFaviconImg.addClass('d-none');
-        this.$previewFaviconFa.removeClass('d-none').addClass('fa-globe');
-        this.$urlLink.text(url).attr('href', url);
+        this.$previewFaviconFa.removeClass('d-none fa-question-circle-o fa-envelope-o fa-phone').addClass('fa-globe');
+        this.$urlLink.text(url || _t('No URL specified')).attr('href', url || null);
         this.$fullUrl.text(url).addClass('d-none').removeClass('o_we_webkit_box');
     },
 

addons/web_tour/static/src/js/running_tour_action_helper.js

@@ -28,6 +28,9 @@ var RunningTourActionHelper = core.Class.extend({
     text: function (text, element) {
         this._text(this._get_action_values(element), text);
     },
+    remove_text(text, element) {
+        this._text(this._get_action_values(element), '\n');
+    },
     text_blur: function (text, element) {
         this._text_blur(this._get_action_values(element), text);
     },