[IMP] web: kanban: highlight destination column on drag&drop

Before, the destination column while drag&drop was not highlighted.
Therefore it was not obvious for the user in which column the card
would be dropped. e.g. when the column header is not visible because
the user scrolled

Now, the destination column is highlighted when drag&dropping a card.

task-2459381

Part-of: odoo/odoo#98897

addons/web/static/src/views/kanban/kanban_controller.scss

@@ -484,6 +484,10 @@
                 }
             }
         }
+        &.o_kanban_hover {
+            background-color: #00a09d0d;
+            box-shadow: -1px 0px 0px 0px #00a09d inset, 1px 0px 0px 0px #00a09d inset;
+        }
     }
 
     .o_group_draggable .o_column_title {

addons/web/static/src/views/kanban/kanban_renderer.js

@@ -65,9 +65,13 @@ export class KanbanRenderer extends Component {
                 },
                 onGroupEnter: (group) => group.classList.add("o_kanban_hover"),
                 onGroupLeave: (group) => group.classList.remove("o_kanban_hover"),
-                onStop: (_group, element) => element.classList.remove("o_dragged", "shadow"),
+                onStop: (group, element) => {
+                    group && group.classList && group.classList.remove("o_kanban_hover");
+                    element.classList.remove("o_dragged", "shadow");
+                },
                 onDrop: async ({ element, previous, parent }) => {
                     element.classList.remove("o_record_draggable");
+                    parent && parent.classList && parent.classList.remove("o_kanban_hover");
                     const refId = previous ? previous.dataset.id : null;
                     const targetGroupId = parent && parent.dataset.id;
                     await this.props.list.moveRecord(

addons/web/static/tests/views/kanban_view_tests.js

@@ -3,6 +3,7 @@
 import { makeFakeDialogService } from "@web/../tests/helpers/mock_services";
 import {
     click,
+    drag,
     dragAndDrop,
     editInput,
     getFixture,
@@ -4041,6 +4042,34 @@ QUnit.module("Views", (hooks) => {
         assert.verifySteps(["resequence"]);
     });
 
+    QUnit.test("drag and drop highlight on hover", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban on_create="quick_create">
+                <field name="product_id"/>
+                <templates><t t-name="kanban-box">
+                <div class="oe_kanban_global_click"><field name="foo"/>
+                </div>
+                </t></templates>
+                </kanban>`,
+            groupBy: ["product_id"],
+        });
+        assert.containsN(target, ".o_kanban_group:first-child .o_kanban_record", 2);
+        assert.containsN(target, ".o_kanban_group:nth-child(2) .o_kanban_record", 2);
+
+        // first record of first column moved to the bottom of second column
+        const drop = drag(
+            ".o_kanban_group:first-child .o_kanban_record",
+            ".o_kanban_group:nth-child(2)"
+        );
+        assert.hasClass(target.querySelector(".o_kanban_group:nth-child(2)"), "o_kanban_hover");
+        await drop();
+        assert.containsNone(target, ".o_kanban_group:nth-child(2).o_kanban_hover");
+    });
+
     QUnit.test("drag and drop a record, grouped by selection", async (assert) => {
         assert.expect(7);