From 2ddc7348f2c3660b1659614e7e620a3a4cdb4d43 Mon Sep 17 00:00:00 2001
From: Bruno Boi <boi@odoo.com>
Date: Tue, 9 May 2023 13:23:28 +0000
Subject: [PATCH] [FIX] web: optional viewMode in x2m field

Before this commit, when having a x2many field invisible in a view, and displaying
it anyway in studio, there was a crash because some variable was undefined.

This originated from commit f22961a, which did not account
for the fact that viewMode is an optional props.

After this commit, the util function used by the x2m field and where the
crash occur has been refactored.
Moreover, the x2m field template has also been slightly refactored.

closes odoo/odoo#120918

Taskid: 3305808
Related: odoo/enterprise#40852
Signed-off-by: Lucas Perais (lpe) <lpe@odoo.com>
---
 .../src/views/fields/x2many/x2many_field.js   |  5 ++-
 .../src/views/fields/x2many/x2many_field.xml  |  4 +--
 addons/web/static/src/views/utils.js          | 34 ++++++++++++++-----
 3 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/addons/web/static/src/views/fields/x2many/x2many_field.js b/addons/web/static/src/views/fields/x2many/x2many_field.js
index 74025398626..6d34eed63ee 100644
--- a/addons/web/static/src/views/fields/x2many/x2many_field.js
+++ b/addons/web/static/src/views/fields/x2many/x2many_field.js
@@ -44,7 +44,10 @@ export class X2ManyField extends Component {
         );
 
         this.archInfo = this.props.views?.[this.props.viewMode] || {};
-        this.className = computeViewClassName(this.props.viewMode, this.archInfo.xmlDoc);
+        const classes = this.props.viewMode
+            ? ["o_field_x2many", `o_field_x2many_${this.props.viewMode}`]
+            : ["o_field_x2many"];
+        this.className = computeViewClassName(this.props.viewMode, this.archInfo.xmlDoc, classes);
 
         const { activeActions, creates } = this.archInfo;
         if (this.props.viewMode === "kanban") {
diff --git a/addons/web/static/src/views/fields/x2many/x2many_field.xml b/addons/web/static/src/views/fields/x2many/x2many_field.xml
index 2702bd856ee..2d0f243ce40 100644
--- a/addons/web/static/src/views/fields/x2many/x2many_field.xml
+++ b/addons/web/static/src/views/fields/x2many/x2many_field.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="web.X2ManyField" owl="1">
-        <div t-att-class="className" t-attf-class="o_field_x2many o_field_x2many_{{props.viewMode}}">
+        <div t-att-class="className">
             <div class="o_x2m_control_panel">
                 <t t-if="displayControlPanelButtons">
                     <div class="o_cp_buttons" role="toolbar" aria-label="Control panel buttons" t-ref="buttons">
@@ -15,7 +15,7 @@
                                 t-on-click.stop.prevent="() => this.onAdd({ context: create.context })"
                             >
                                 <t t-esc="create.string"/>
-                            </a>
+                            </button>
                             <ViewButton
                                 t-if="create.type === 'button'"
                                 className="`${create.className}`"
diff --git a/addons/web/static/src/views/utils.js b/addons/web/static/src/views/utils.js
index 84d5fdc41de..c5101fe3df7 100644
--- a/addons/web/static/src/views/utils.js
+++ b/addons/web/static/src/views/utils.js
@@ -83,17 +83,33 @@ export function archParseBoolean(str, trueIfEmpty = false) {
     return str ? !/^false|0$/i.test(str) : trueIfEmpty;
 }
 
+/**
+ * @param {string?} type
+ * @returns {string | false}
+ */
+function getViewClass(type) {
+    const isValidType = Boolean(type) && registry.category("views").contains(type);
+    return isValidType && `o_${type}_view`;
+}
+
+/**
+ * @param {string?} viewType
+ * @param {Element?} rootNode
+ * @param {string[]} additionalClassList
+ * @returns {string}
+ */
 export function computeViewClassName(viewType, rootNode, additionalClassList = []) {
-    const subType = rootNode.getAttribute("js_class");
-    const isValidSubType = subType && registry.category("views").contains(subType);
-    const subTypeClass = isValidSubType ? `o_${subType}_view` : "";
-    const classList = [
-        `o_${viewType}_view`,
-        subTypeClass,
-        ...(rootNode.getAttribute("class") || "").split(" "),
+    const subType = rootNode?.getAttribute("js_class");
+    const classList = rootNode?.getAttribute("class")?.split(" ") || [];
+    const uniqueClasses = new Set([
+        getViewClass(viewType),
+        getViewClass(subType),
+        ...classList,
         ...additionalClassList,
-    ];
-    return [...new Set(classList)].filter((c) => c).join(" ");
+    ]);
+    return Array.from(uniqueClasses)
+        .filter((c) => c) // remove falsy values
+        .join(" ");
 }
 
 /**