[FIX] website_form, *: allow to update buttons using link dialog

*: web_editor, website_mass_mailing

When we double click a link/button, a link dialog appears
to update the target properties, and since the current link dialog
can only handle anchor targets, using it on buttons leads to some
inconsistencies :

- visible href options for button & url required to save changes.
- missing preview when button style changed.
...

The goal of this commit is to add a fix (with minimum of code) on
summernote linkdialog to handle button elements using the same logic as
anchor nodes.

Also, update website form test tour to test those new changes.

Part of https://github.com/odoo/odoo/pull/62206
task-2381305

1 files changed, 13 insertions, 7 deletions

diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/link_dialog.js b/addons/web_editor/static/src/js/wysiwyg/widgets/link_dialog.js
index ed17127c55a..cf2fa9dd04a 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/link_dialog.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/link_dialog.js
@@ -26,6 +26,7 @@ var LinkDialog = Dialog.extend({
 
     /**
      * @constructor
+     * @param {Boolean} linkInfo.isButton - whether if the target is a button element.
      */
     init: function (parent, options, editable, linkInfo) {
         this.options = options || {};
@@ -40,8 +41,11 @@ var LinkDialog = Dialog.extend({
             },
         });
 
+        this.data = linkInfo || {};
+        this.isButton = this.data.isButton;
+        // Using explicit type 'link' to preserve style when the target is <button class="...btn-link"/>.
         this.colorsData = [
-            {type: '', label: _t("Link"), btnPreview: 'link'},
+            {type: this.isButton ? 'link' : '', label: _t("Link"), btnPreview: 'link'},
             {type: 'primary', label: _t("Primary"), btnPreview: 'primary'},
             {type: 'secondary', label: _t("Secondary"), btnPreview: 'secondary'},
             // Note: by compatibility the dialog should be able to remove old
@@ -51,8 +55,6 @@ var LinkDialog = Dialog.extend({
         ];
 
         this.editable = editable;
-        this.data = linkInfo || {};
-
         this.data.className = "";
         this.data.iniClassName = "";
 
@@ -60,10 +62,10 @@ var LinkDialog = Dialog.extend({
         this.needLabel = !r || (r.sc === r.ec && r.so === r.eo);
 
         if (this.data.range) {
-            const $link = $(this.data.range.sc).filter("a");
-            this.data.iniClassName = $link.attr("class") || "";
+            const $el = $(this.data.range.sc).filter(this.isButton ? "button" : "a");
+            this.data.iniClassName = $el.attr("class") || "";
             this.colorCombinationClass = false;
-            let $node = $link;
+            let $node = $el;
             while ($node.length && !$node.is('body')) {
                 const className = $node.attr('class') || '';
                 const m = className.match(/\b(o_cc\d+)\b/g);
@@ -156,6 +158,10 @@ var LinkDialog = Dialog.extend({
         this.data.className = this.data.iniClassName
             .replace(allBtnClassSuffixes, ' ')
             .replace(allBtnShapes, ' ');
+        // 'o_submit' class will force anchor to be handled as a button in linkdialog.
+        if (/(?:s_website_form_send|o_submit)/.test(this.data.className)) {
+            this.isButton = true;
+        }
     },
     /**
      * @override
@@ -263,7 +269,7 @@ var LinkDialog = Dialog.extend({
             }
         }
 
-        if ($url.prop('required') && (!url || !$url[0].checkValidity())) {
+        if (!this.isButton && $url.prop('required') && (!url || !$url[0].checkValidity())) {
             return null;
         }