[FIX] web_tour: consume tip on kanban record drag&drop

This commit concerns tours executed in onboarding mode (the user
manually follows the steps and consumes the tips).

Commit [1] changed the default event type to consume a tip from
'mousedown' to 'click'. This caused an issue when a tip was
attached to an element that had to be dragged and dropped. The
issue has been fixed by [2]. This fix is based on the fact
that draggable elements have classname 'ui-draggable-handle'.

Kanban records are draggable, but their implementation uses the
'sortable' feature of jQuery instead of the 'draggable' one (the
records are also sorted in their column). So [2] isn't enough in
this case. For instance, in the crm tour, the tip telling to drag
and drop a record to another column can't be consumed.

This commit handles the case of sortable elements that have to be
dragged and dropped.

[1] e5bc2e7306251a55ce90adeef992840517c240e6
[2] 3f458fe06e6a629edc72428eab749068c2eba1ba

closes odoo/odoo#49072

X-original-commit: 67335bda1653f592011a57146fb750d7b69cfc27
Signed-off-by: Lucas Perais (lpe) <lpe@odoo.com>
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>

addons/web_tour/static/src/js/tip.js

@@ -179,7 +179,7 @@ var Tip = Widget.extend({
         this.$el.addClass("o_animated");
     },
     _bind_anchor_events: function () {
-        this.consume_event = Tip.getConsumeEventType(this.$anchor);
+        this.consume_event = Tip.getConsumeEventType(this.$anchor, this.info.run);
         this.$consumeEventAnchor = this.$anchor;
         // jQuery-ui draggable triggers 'drag' events on the .ui-draggable element,
         // but the tip is attached to the .ui-draggable-handle element which may
@@ -189,6 +189,11 @@ var Tip = Widget.extend({
         } else if (this.consume_event.includes('apply.daterangepicker')) {
             this.$consumeEventAnchor = this.$anchor.parent().children('.o_field_date_range');
         }
+        // when an element is dragged inside a sortable container (with classname
+        // 'ui-sortable'), jQuery triggers the 'sort' event on the container
+        if (this.consume_event === "sort") {
+            this.$consumeEventAnchor = this.$anchor.closest('.ui-sortable');
+        }
         this.$consumeEventAnchor.on(this.consume_event + ".anchor", (function (e) {
             if (e.type !== "mousedown" || e.which === 1) { // only left click
                 this.trigger("tip_consumed");
@@ -309,7 +314,12 @@ var Tip = Widget.extend({
     },
 });
 
-Tip.getConsumeEventType = function ($element) {
+/**
+ * @static
+ * @param {jQuery} $element
+ * @param {string} [run] the run parameter of the tip (only strings are useful)
+ */
+Tip.getConsumeEventType = function ($element, run) {
     if ($element.hasClass('o_field_many2one') || $element.hasClass('o_field_many2manytags')) {
         return 'autocompleteselect';
     } else if ($element.is("textarea") || $element.filter("input").is(function () {
@@ -327,6 +337,13 @@ Tip.getConsumeEventType = function ($element) {
         return "input";
     } else if ($element.hasClass('ui-draggable-handle')) {
         return "drag";
+    } else if (typeof run === 'string' && run.indexOf('drag_and_drop') === 0) {
+        // this is a heuristic: the element has to be dragged and dropped but it
+        // doesn't have class 'ui-draggable-handle', so we check if it has an
+        // ui-sortable parent, and if so, we conclude that its event type is 'sort'
+        if ($element.closest('.ui-sortable')) {
+            return 'sort';
+        }
     }
     return "click";
 };