From 145fe958c212ddef9fab56a232c8b2d3db635c8e Mon Sep 17 00:00:00 2001
From: Florian Charlier <flch@odoo.com>
Date: Thu, 26 Jan 2023 16:28:22 +0000
Subject: [PATCH] [REF] survey: clean trigger icon rendering
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The specific classes used to render the trigger icon should be as
localized as possible (not used in js and xml if not necessary).
We also take the opportunity to simplify the widget `state` items.

At this occasion, we also eliminate the flicker that could occur
with the icon of a triggered question when deleting its trigger.

Task-3151916

closes odoo/odoo#113168

X-original-commit: 5ce6915e66673b7d88363676473154c3ec8fd3aa
Signed-off-by: Warnon Aurélien (awa) <awa@odoo.com>
---
 .../survey_question_trigger.js                | 30 +++++++++----------
 .../survey_question_trigger.xml               |  6 ++--
 2 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/addons/survey/static/src/views/widgets/survey_question_trigger/survey_question_trigger.js b/addons/survey/static/src/views/widgets/survey_question_trigger/survey_question_trigger.js
index 1ff39fa569a..4fd248e3808 100644
--- a/addons/survey/static/src/views/widgets/survey_question_trigger/survey_question_trigger.js
+++ b/addons/survey/static/src/views/widgets/survey_question_trigger/survey_question_trigger.js
@@ -3,7 +3,7 @@
 import { _lt } from "@web/core/l10n/translation";
 import { registry } from "@web/core/registry";
 import { sprintf } from '@web/core/utils/strings';
-import { standardWidgetProps} from "@web/views/widgets/standard_widget_props";
+import { standardWidgetProps } from "@web/views/widgets/standard_widget_props";
 
 const { Component, useEffect, useRef, useState } = owl;
 
@@ -12,36 +12,34 @@ export class SurveyQuestionTriggerWidget extends Component {
         super.setup();
         this.button = useRef('survey_question_trigger');
         this.state = useState({
-            triggeringQuestionTitle: this.props.record.data.triggering_question_id,
-            surveyQuestionTriggerTooltip: "",
-            surveyQuestionTriggerIconClass: "",
+            surveyIconWarning: false,
+            triggerTooltip: "",
         });
         useEffect(() => {
             if (this.button && this.button.el) {
-                this.state.triggeringQuestionTitle = this.props.record.data.triggering_question_id[1];
+                const triggeringQuestionTitle = this.props.record.data.triggering_question_id[1];
                 const triggerError = this.surveyQuestionTriggerError;
                 if (triggerError === "MISPLACED_TRIGGER_WARNING") {
-                    this.state.surveyQuestionTriggerTooltip = sprintf(
+                    this.state.surveyIconWarning = true;
+                    this.state.triggerTooltip = sprintf(
                         '⚠ ' + _lt('This question is positioned before its trigger ("%s") and will be skipped.'),
-                        this.state.triggeringQuestionTitle);
-                    this.state.surveyQuestionTriggerIconClass = 'fa-exclamation-triangle text-warning';
+                        triggeringQuestionTitle);
                 } else if (triggerError === "WRONG_QUESTIONS_SELECTION_WARNING") {
-                    this.state.surveyQuestionTriggerTooltip = '⚠ ' + _lt(
+                    this.state.surveyIconWarning = true;
+                    this.state.triggerTooltip = '⚠ ' + _lt(
                         'Conditional display is not available when questions are randomly picked.');
-                    this.state.surveyQuestionTriggerIconClass = 'fa-exclamation-triangle text-warning';
                 } else if (triggerError === "MISSING_TRIGGER_ERROR") {
                     // This case must be handled to not temporarily render the "normal" icon if previously
                     // on an error state, which would cause a flicker as the trigger itself will be removed
                     // at next save (auto on survey form and primary list view).
                 } else {
-                    this.state.surveyQuestionTriggerTooltip = sprintf(_lt('Displayed if "%s: %s"'),
-                        this.state.triggeringQuestionTitle, this.props.record.data.triggering_answer_id[1]);
-                    this.state.surveyQuestionTriggerIconClass = 'fa-code-fork';
+                    this.state.surveyIconWarning = false;
+                    this.state.triggerTooltip = sprintf(_lt('Displayed if "%s: %s"'),
+                        triggeringQuestionTitle, this.props.record.data.triggering_answer_id[1]);
                 }
             } else {
-                this.state.triggeringQuestionTitle = "";
-                this.state.surveyQuestionTriggerTooltip = "";
-                this.state.surveyQuestionTriggerIconClass = "";
+                this.state.surveyIconWarning = false;
+                this.state.triggerTooltip = "";
             }
         });
     }
diff --git a/addons/survey/static/src/views/widgets/survey_question_trigger/survey_question_trigger.xml b/addons/survey/static/src/views/widgets/survey_question_trigger/survey_question_trigger.xml
index 42ca868b041..961fa320d59 100644
--- a/addons/survey/static/src/views/widgets/survey_question_trigger/survey_question_trigger.xml
+++ b/addons/survey/static/src/views/widgets/survey_question_trigger/survey_question_trigger.xml
@@ -3,9 +3,9 @@
 
     <t t-name="survey.surveyQuestionTrigger" owl="1">
         <button t-if="this.props.record.data.triggering_question_id" disabled="disabled" t-ref="survey_question_trigger"
-                class="btn btn-link px-1 py-0 pe-auto" t-att-class="this.surveyQuestionTriggerError ? 'opacity-100 ' : 'icon_rotates'">
-            <i class="fa fa-fw o_button_icon " t-att-class="this.state.surveyQuestionTriggerIconClass"
-               t-att-data-tooltip="this.state.surveyQuestionTriggerTooltip"/>
+                class="btn btn-link px-1 py-0 pe-auto" t-att-class="this.state.surveyIconWarning ? 'opacity-100' : 'icon_rotates'">
+            <i class="fa fa-fw o_button_icon " t-att-class="this.state.surveyIconWarning ? 'fa-exclamation-triangle text-warning' : 'fa-code-fork'"
+               t-att-data-tooltip="this.state.triggerTooltip"/>
         </button>
     </t>