[FIX] web: kanban: drag column with sample data

Before this commit, in a grouped kanban view with sample data (e.g.
crm.lead), one could toggle the 'settings' dropdown menu of a
group, and then drag&drop the group by clicking on the muted "Fold"
item in the dropdown.

After this commit, dragging a column is only possible by clicking
on the column title (but not on the 'config' or '+' icons, nor the
config dropdown).

Task 2290197

closes odoo/odoo#54179

X-original-commit: 58c38a024c96eba3469c142a8422b7bd0ab54ea4
Signed-off-by: Mathieu Duckerts-Antoine <Polymorphe57@users.noreply.github.com>
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>

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

@@ -29,7 +29,8 @@ var KanbanColumn = Widget.extend({
         'click .o_kanban_load_more': '_onLoadMore',
         'click .o_kanban_toggle_fold': '_onToggleFold',
         'click .o_column_archive_records': '_onArchiveRecords',
-        'click .o_column_unarchive_records': '_onUnarchiveRecords'
+        'click .o_column_unarchive_records': '_onUnarchiveRecords',
+        'click .o_kanban_config .dropdown-menu': '_onConfigDropdownClicked',
     },
     /**
      * @override
@@ -295,6 +296,15 @@ var KanbanColumn = Widget.extend({
     _onCancelQuickCreate: function () {
         this._cancelQuickCreate();
     },
+    /**
+     * Prevent from closing the config dropdown when the user clicks on a
+     * disabled item (e.g. 'Fold' in sample mode).
+     *
+     * @private
+     */
+    _onConfigDropdownClicked(ev) {
+        ev.stopPropagation();
+    },
     /**
      * @private
      * @param {MouseEvent} event

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

@@ -362,7 +362,7 @@ var KanbanRenderer = BasicRenderer.extend({
             this.$el.sortable({
                 axis: 'x',
                 items: '> .o_kanban_group',
-                handle: '.o_kanban_header_title',
+                handle: '.o_column_title',
                 cursor: 'move',
                 revert: 150,
                 delay: 100,

addons/web/static/src/scss/kanban_view.scss

@@ -459,6 +459,9 @@
             .o_kanban_config {
                 visibility: hidden;
 
+                > .dropdown-menu {
+                    cursor: default;
+                }
                 i {
                     @include o-kanban-icon;
                 }
@@ -488,7 +491,7 @@
         }
     }
 
-    &.ui-sortable .o_kanban_header_title {
+    &.ui-sortable .o_kanban_header_title .o_column_title {
         cursor: move;
     }
 

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

@@ -3346,8 +3346,8 @@ QUnit.module('Views', {
 
         // test column drag and drop having an 'Undefined' column
         await testUtils.dom.dragAndDrop(
-            kanban.$('.o_kanban_header_title:first'),
-            kanban.$('.o_kanban_header_title:last'), {position: 'right'}
+            kanban.$('.o_column_title:first'),
+            kanban.$('.o_column_title:last'), {position: 'right'}
         );
         assert.strictEqual(resequencedIDs, undefined,
             "resequencing require at least 2 not Undefined columns");
@@ -3356,14 +3356,14 @@ QUnit.module('Views', {
         await testUtils.dom.click(kanban.$('.o_column_quick_create button.o_kanban_add'));
         var newColumnID = kanban.$('.o_kanban_group:last').data('id');
         await testUtils.dom.dragAndDrop(
-            kanban.$('.o_kanban_header_title:first'),
-            kanban.$('.o_kanban_header_title:last'), {position: 'right'}
+            kanban.$('.o_column_title:first'),
+            kanban.$('.o_column_title:last'), {position: 'right'}
         );
         assert.deepEqual([3, newColumnID], resequencedIDs,
             "moving the Undefined column should not affect order of other columns");
         await testUtils.dom.dragAndDrop(
-            kanban.$('.o_kanban_header_title:first'),
-            kanban.$('.o_kanban_header_title:nth(1)'), {position: 'right'}
+            kanban.$('.o_column_title:first'),
+            kanban.$('.o_column_title:nth(1)'), {position: 'right'}
         );
         await nextTick(); // wait for resequence after drag and drop
         assert.deepEqual([newColumnID, 3], resequencedIDs,
@@ -4499,6 +4499,48 @@ QUnit.module('Views', {
         kanban.destroy();
     });
 
+    QUnit.test('empty grouped kanban with sample data: cannot fold a column', async function (assert) {
+        // folding a column in grouped kanban with sample data is disabled, for the sake of simplicity
+        assert.expect(5);
+
+        const kanban = await createView({
+            arch: `
+                <kanban sample="1">
+                    <field name="product_id"/>
+                    <templates>
+                        <div t-name="kanban-box">
+                            <field name="foo"/>
+                        </div>
+                    </templates>
+                </kanban>`,
+            data: this.data,
+            groupBy: ['product_id'],
+            model: 'partner',
+            View: KanbanView,
+            async mockRPC(route, { kwargs, method }) {
+                const result = await this._super(...arguments);
+                if (method === 'web_read_group') {
+                    // override read_group to return a single, empty group
+                    result.groups = result.groups.slice(0, 1);
+                    result.groups[0][`${kwargs.groupby[0]}_count`] = 0;
+                    result.length = 1;
+                }
+                return result;
+            },
+        });
+
+        assert.hasClass(kanban, 'o_view_sample_data');
+        assert.containsOnce(kanban, '.o_kanban_group');
+        assert.ok(kanban.$('.o_kanban_record').length > 0, 'should contain sample records');
+
+        await testUtils.dom.click(kanban.el.querySelector('.o_kanban_config > a'));
+
+        assert.hasClass(kanban.el.querySelector('.o_kanban_config .o_kanban_toggle_fold'), 'o_sample_data_disabled');
+        assert.hasClass(kanban.el.querySelector('.o_kanban_config .o_kanban_toggle_fold'), 'disabled');
+
+        kanban.destroy();
+    });
+
     QUnit.skip('empty grouped kanban with sample data: fold/unfold a column', async function (assert) {
         // folding/unfolding of grouped kanban with sample data is currently disabled
         assert.expect(8);