[FIX] web: kanban groups t-foreach key is always unique

Currently, the keys passed through the t-foreach for looping over the
groups has a flaw. It comes from a method that works as below:
It checks the group has a value => provide a key as group_key_{value}
if not => group_key_{i} where i is the iteration index
But the {value} is acutally just an id of some model. So in some cases,
with low ids (empty DB, tests, ...), you can run into situations where
the keys are duplicates, making owl crash.

This comit fixes the function to make sure it has no duplicates.

closes odoo/odoo#101925

X-original-commit: aadb38e259c25cea69d54c3c62b21d8e747f9b87
Signed-off-by: Julien Mougenot (jum) <jum@odoo.com>

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

@@ -217,7 +217,7 @@ export class KanbanRenderer extends Component {
                 .sort((a, b) => (a.value && !b.value ? 1 : !a.value && b.value ? -1 : 0))
                 .map((group, i) => ({
                     group,
-                    key: `group_key_${isNull(group.value) ? i : String(group.value)}`,
+                    key: isNull(group.value) ? `group_key_${i}` : String(group.value),
                 }));
         } else {
             return list.records.map((record) => ({ record, key: record.id }));

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

@@ -12061,4 +12061,59 @@ QUnit.module("Views", (hooks) => {
 
         assert.deepEqual(getCardTexts(), ["1", "3", "4", "2"]);
     });
+
+    QUnit.test("group key in foreach cannot be a duplicate", async function (assert) {
+        serverData.models.product.records = [
+            {
+                id: 1,
+                name: "Product with id 1",
+            },
+        ];
+
+        serverData.models.partner.records = [
+            {
+                id: 1,
+                name: "Partner 1",
+                product_id: 1,
+            },
+        ];
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: /* xml */ `
+                <kanban>
+                    <templates>
+                        <div t-name="kanban-box">
+                            <field name="name" />
+                        </div>
+                    </templates>
+                </kanban>
+            `,
+            groupBy: ["product_id"],
+            async mockRPC(route, args, performRPC) {
+                if (args.method === "web_read_group") {
+                    const result = await performRPC(route, args);
+                    result.groups = [
+                        ...result.groups,
+                        {
+                            // Add an empty and valueless group, will result in foreach key group_key_0
+                            __domain: [["product_id", "=", null]],
+                            __fold: false,
+                        },
+                        {
+                            // Add an empty and valueless group, will result in foreach key group_key_1
+                            __domain: [["product_id", "=", null]],
+                            __fold: false,
+                        },
+                    ];
+                    result.length = 2;
+                    return result;
+                }
+            },
+        });
+        assert.strictEqual(target.querySelectorAll(".o_kanban_group").length, 3);
+        assert.strictEqual(target.querySelectorAll(".o_kanban_record").length, 1);
+    });
 });