From f984d478e5079bb9daebf82fd15c26f5f118882c Mon Sep 17 00:00:00 2001
From: Benoit Socias <bso@odoo.com>
Date: Mon, 13 Feb 2023 12:10:12 +0000
Subject: [PATCH] [IMP] *: make the shape option available only on custom
 buttons

*: web_editor, website_mass_mailing

Because the shape is now also part of the theme options for primary and
secondary button, it does not make sense to select it when the button
is either primary or secondary.

This commit makes the Shape option shown only for Custom buttons, and
therefore also nests it under the Style option.

task-3140991

Part-of: odoo/odoo#111621
---
 .../static/src/js/wysiwyg/widgets/link_tools.js | 17 +++++++++++------
 addons/web_editor/static/src/xml/wysiwyg.xml    |  4 ++--
 .../tours/snippet_newsletter_block_with_edit.js | 16 +++++++++++++++-
 3 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/link_tools.js b/addons/web_editor/static/src/js/wysiwyg/widgets/link_tools.js
index 3a535596171..6b281b9a34e 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/link_tools.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/link_tools.js
@@ -73,8 +73,9 @@ const LinkTools = Link.extend({
             this.colorpickers[cssProperty].$el.appendTo(locationEl);
         }
         const customStyleProps = ['color', 'background-color', 'background-image', 'border-width', 'border-style', 'border-color'];
-        if (customStyleProps.some(s => link.style[s])) {
-            // Force custom style if style exists on the link.
+        const shapeClasses = ['btn-outline-primary', 'btn-outline-secondary', 'btn-fill-primary', 'btn-fill-secondary', 'rounded-circle', 'flat'];
+        if (customStyleProps.some(s => link.style[s]) || shapeClasses.some(c => link.classList.contains(c))) {
+            // Force custom style if style or shape exists on the link.
             const customOption = this.el.querySelector('[name="link_style_color"] we-button[data-value="custom"]');
             this._setSelectOption($(customOption), true);
             this._updateOptionsUI();
@@ -254,10 +255,14 @@ const LinkTools = Link.extend({
         const el = this.el.querySelector('[name="link_style_color"] we-button.active');
         if (el) {
             this.colorCombinationClass = el.dataset.value;
-            // Hide the size and shape options if the link is an unstyled anchor.
-            this.$('.link-size-row, .link-shape-row').toggleClass('d-none', !this.colorCombinationClass);
-            // Show custom colors only for Custom style.
-            this.$('.link-custom-color').toggleClass('d-none', el.dataset.value !== 'custom');
+            // Hide the size option if the link is an unstyled anchor.
+            for (const rowEl of this.el.querySelectorAll('.link-size-row')) {
+                rowEl.classList.toggle('d-none', !this.colorCombinationClass);
+            }
+            // Show custom colors and shape only for Custom style.
+            for (const rowEl of this.el.querySelectorAll('.link-custom-color, .link-shape-row')) {
+                rowEl.classList.toggle('d-none', el.dataset.value !== 'custom');
+            }
 
             // Note: the _updateColorpicker method is supposedly async but can
             // be used synchronously given the fact that _addColorPicker was
diff --git a/addons/web_editor/static/src/xml/wysiwyg.xml b/addons/web_editor/static/src/xml/wysiwyg.xml
index 6fc7f89a951..6f28d31b206 100644
--- a/addons/web_editor/static/src/xml/wysiwyg.xml
+++ b/addons/web_editor/static/src/xml/wysiwyg.xml
@@ -277,7 +277,7 @@
             </div>
         </we-row>
         <we-row class="link-size-row">
-            <we-select class="o_we_user_value_widget o_we_sublevel_1">
+            <we-select class="o_we_user_value_widget o_we_sublevel_2">
                 <we-title>Size</we-title>
                 <div>
                     <div class="dropdown">
@@ -303,7 +303,7 @@
             </we-select>
         </we-row>
         <we-row class="link-shape-row">
-            <we-select class="o_we_user_value_widget o_we_sublevel_1">
+            <we-select class="o_we_user_value_widget o_we_sublevel_2">
                 <we-title>Shape</we-title>
                 <div>
                     <div class="dropdown">
diff --git a/addons/website_mass_mailing/static/tests/tours/snippet_newsletter_block_with_edit.js b/addons/website_mass_mailing/static/tests/tours/snippet_newsletter_block_with_edit.js
index c5f1d652dcb..02f42b61c59 100644
--- a/addons/website_mass_mailing/static/tests/tours/snippet_newsletter_block_with_edit.js
+++ b/addons/website_mass_mailing/static/tests/tours/snippet_newsletter_block_with_edit.js
@@ -46,6 +46,20 @@ wTourUtils.registerWebsitePreviewTour('snippet_newsletter_block_with_edit', {
         content: 'Click on the primary style button',
         trigger: '[data-value="primary"]',
     },
+    {
+        content: 'Verify that the shape option is not available for primary while the size option appeared',
+        trigger: 'we-customizeblock-option:not(:has([name="link_style_shape"]))',
+        extra_trigger: 'we-customizeblock-option:has([name="link_style_size"])',
+        isCheck: true,
+    },
+    {
+        content: 'Click on the link style button',
+        trigger: '.dropdown:has([name="link_style_color"]) > button',
+    },
+    {
+        content: 'Click on the custom style button',
+        trigger: '[data-value="custom"]',
+    },
     {
         content: 'Change the shape of the button',
         trigger: '.dropdown:has([name="link_style_shape"]) > button',
@@ -60,6 +74,6 @@ wTourUtils.registerWebsitePreviewTour('snippet_newsletter_block_with_edit', {
     // prevent to edit the button).
     {
         content: 'Check that the link style is correct',
-        trigger: 'iframe .s_newsletter_block .js_subscribed_btn.btn.btn-primary.flat:not(.btn-success)',
+        trigger: 'iframe .s_newsletter_block .js_subscribed_btn.btn.btn-custom.flat:not(.btn-success)',
     },
 ]);