[IMP] website: make required fields more obvious

When a user puts a form on his site, depending on the action of it, some
fields of the form become necessary. These fields cannot be deleted.
Unfortunately, some users do not understand this. This commit helps
users understand that these fields are required for the action by adding
an alert in the required fields options and by improving the tooltip
displayed when the delete button is hovered.

task-3302433

Part-of: odoo/odoo#120874

addons/website/static/src/snippets/s_website_form/options.js

@@ -12,6 +12,7 @@ import { unique } from "@web/core/utils/arrays";
 
 const qweb = core.qweb;
 const _t = core._t;
+let currentActionName;
 
 const FormEditor = options.Class.extend({
     //----------------------------------------------------------------------
@@ -335,6 +336,7 @@ options.registry.WebsiteFormEditor = FormEditor.extend({
         
         const targetModelName = this.$target[0].dataset.model_name || 'mail.mail';
         this.activeForm = this.models.find(m => m.model === targetModelName);
+        currentActionName = this.activeForm.website_form_label;
         // Create the Form Action select
         this.selectActionEl = document.createElement('we-select');
         this.selectActionEl.setAttribute('string', 'Action');
@@ -734,6 +736,7 @@ options.registry.WebsiteFormEditor = FormEditor.extend({
             }
             this.$target.find('.s_website_form_field').remove();
             this.activeForm = this.models.find(model => model.id === modelId);
+            currentActionName = this.activeForm.website_form_label;
         }
         const formKey = this.activeForm.website_form_key;
         const formInfo = FormEditorRegistry.get(formKey);
@@ -1536,9 +1539,28 @@ options.registry.WebsiteFormFieldModel = DisableOverlayButtonOption.extend({
 // Disable delete button for model required fields
 options.registry.WebsiteFormFieldRequired = DisableOverlayButtonOption.extend({
     start: function () {
-        this.disableButton('remove', _t('This field is mandatory for this Action. You cannot remove it.'));
+        this.disableButton("remove", _t(
+            "This field is mandatory for this action. You cannot remove it. Try hiding it with the"
+            + " 'Visibility' option instead and add it a default value."
+        ));
         return this._super.apply(this, arguments);
-    }
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    async _renderCustomXML(uiFragment) {
+        const fieldName = this.$target[0]
+            .querySelector("input.s_website_form_input").getAttribute("name");
+        const spanEl = document.createElement("span");
+        spanEl.innerText = sprintf(_t(
+            "The field '%s' is mandatory for the action '%s'."), fieldName, currentActionName);
+        uiFragment.querySelector("we-alert").appendChild(spanEl);
+    },
 });
 
 // Disable delete and duplicate button for submit

addons/website/views/snippets/s_website_form.xml

@@ -67,6 +67,12 @@
         </div>
 
         <!-- Field -->
+        <div data-js="WebsiteFormFieldRequired" data-selector=".s_website_form .s_website_form_model_required">
+            <!-- Disable the delete option of model required fields and show
+            alert and tooltip on delete buttons -->
+            <we-alert class="mt-2"></we-alert>
+        </div>
+
         <div data-js='WebsiteFieldEditor' data-selector=".s_website_form_field"
              data-exclude=".s_website_form_dnone" data-drop-near=".s_website_form_field">
             <we-select data-name="type_opt" string="Type" data-no-preview="true">
@@ -227,9 +233,6 @@
         <!-- Remove the duplicate option of model fields -->
         <div data-js="WebsiteFormFieldModel" data-selector=".s_website_form .s_website_form_field:not(.s_website_form_custom)"/>
 
-        <!-- Remove the delete option of model required fields -->
-        <div data-js="WebsiteFormFieldRequired" data-selector=".s_website_form .s_website_form_model_required"/>
-
         <!-- Remove the delete and duplicate option of the submit button -->
         <div data-js="WebsiteFormSubmitRequired" data-selector=".s_website_form .s_website_form_submit"/>
     </xpath>