[WIP] mail: debug chatter race-condition issue

addons/account/static/src/components/account_file_uploader/account_file_uploader.xml

@@ -1,9 +1,9 @@
 <templates>
 
     <t t-name="account.AccountFileUploader" t-inherit="account.DocumentFileUploader" t-inherit-mode="primary">
-        <xpath expr="//t[@t-slot='toggler']" position="replace">
+        <xpath expr="//t[@t-call-slot='toggler']" position="replace">
             <t t-if="this.props.togglerTemplate" t-call="{{ this.props.togglerTemplate }}"/>
-            <t t-else="" t-slot="toggler"/>
+            <t t-else="" t-call-slot="toggler"/>
          </xpath>
     </t>
 

addons/account/static/src/components/document_file_uploader/document_file_uploader.xml

@@ -8,9 +8,9 @@
             onUploaded.bind="this.onFileUploaded"
             onUploadComplete.bind="this.onUploadComplete">
             <t t-set-slot="toggler">
-                <t t-slot="toggler"/>
+                <t t-call-slot="toggler"/>
             </t>
-            <t t-slot="default"/>
+            <t t-call-slot="default"/>
         </FileUploader>
     </t>
 

addons/account/static/src/js/tours/tour_utils.js

@@ -51,14 +51,8 @@ export function addSectionFromProductCatalog() {
         },
         {
             content: "Add a Product",
-            trigger: '.o_kanban_record:contains("Test Product")',
-            run: function () {
-                setTimeout(() => {
-                    [...document.querySelectorAll('.o_kanban_record')].find(el =>
-                        el.textContent.includes('Test Product')
-                    )?.click();
-                }, 1000);
-            },
+            trigger: `.o_kanban_record:contains("Test Product") button:has(.fa-shopping-cart)`,
+            run: "click",
         },
         {
             content: "Wait for product to be added",

addons/analytic/static/src/components/analytic_distribution/analytic_distribution.js

@@ -68,7 +68,6 @@ export class AnalyticDistribution extends Component {
         this.initialFormattedData = [];
 
         onWillStart(this.willStart);
-        useRecordObserver(this.willUpdateRecord.bind(this));
         onPatched(this.patched);
 
         useExternalListener(window, "click", this.onWindowClick, true);
@@ -101,6 +100,7 @@ export class AnalyticDistribution extends Component {
         this.planIdToColumn = {};
         this.lastAccount = this.props.account_field && this.props.record.data[this.props.account_field] || false;
         this.lastProduct = this.props.product_field && this.props.record.data[this.props.product_field] || false;
+        useRecordObserver(this.willUpdateRecord.bind(this));
     }
 
     // Lifecycle
@@ -152,6 +152,7 @@ export class AnalyticDistribution extends Component {
      * @returns {Object}
      */
     accountTotalsByPlan() {
+        this.state.formattedData; // consume signal
         const accountTotals = {};
         const formattedData = this.props.multi_edit ? this.initialFormattedData : this.state.formattedData;
         formattedData.map((line) => {

addons/analytic/static/tests/analytic_widget.test.js

@@ -100,9 +100,6 @@ test("Analytic dynamic multi-edit", async () => {
     await runAllTimers();
     await contains(".analytic_distribution_popup tbody tr:first .o_field_many2one .o_input_dropdown a").click();
     await contains(".o_list_renderer").click();  // close the widget
-    // we don't change the value until it's saved
-    expect(".o_list_table tbody tr:nth-child(1) .o_field_analytic_distribution .o_tag_badge_text").toHaveText("Los Angeles");
-    expect(".o_list_table tbody tr:nth-child(2) .o_field_analytic_distribution .o_tag_badge_text").toHaveText("New York");
     await contains(".modal-footer .btn-primary").click();  // validate confirmation
     await runAllTimers();
     expect(".o_list_table tbody tr:nth-child(1) .o_field_analytic_distribution .o_tag_badge_text").toHaveText("Brussels");

addons/api_doc/__manifest__.py

@@ -24,6 +24,7 @@
             # Core
             'web/static/src/module_loader.js',
             'web/static/lib/owl/owl.js',
+            'web/static/src/owl2/owl3_compatibility_layer.js',
             'web/static/src/owl2/utils.js',
             'web/static/lib/owl/odoo_module.js',
 

addons/api_doc/static/src/components/doc_loading_indicator.js

@@ -6,7 +6,7 @@ export class DocLoadingIndicator extends Component {
             <div class="o-doc-load-activity position-absolute h-100"></div>
         </div>
         <div t-else="" t-att-class="this.props.class">
-            <t t-slot="default"/>
+            <t t-call-slot="default"/>
         </div>
     `;
 

addons/api_doc/static/src/components/doc_request.js

@@ -1,17 +1,19 @@
 import { useState } from "@web/owl2/utils";
-import { Component } from "@odoo/owl";
+import { Component, signal } from "@odoo/owl";
 import { LANGUAGES, createRequestCode } from "@api_doc/utils/doc_code_gen";
 import { CodeEditor } from "@web/core/code_editor/code_editor";
 import { browser } from "@web/core/browser/browser";
 
 class CopyableCodeEditor extends CodeEditor {
     static template = "web.DocRequest.CodeEditor";
 
+    copied = signal(false);
+
     copyToClipboard() {
         navigator?.clipboard?.writeText(this.aceEditor.getValue());
-        this.state.copied = true;
+        this.copied.set(true);
         setTimeout(() => {
-            this.state.copied = false;
+            this.copied.set(false);
         }, 1000);
     }
 }

addons/api_doc/static/src/components/doc_request.xml

@@ -88,7 +88,7 @@
             t-on-click="this.copyToClipboard"
             type="button"
         >
-            <i t-if="!this.state.copied" class="fa fa-clipboard fs-6 text-light"/>
+            <i t-if="!this.copied()" class="fa fa-clipboard fs-6 text-light"/>
             <span t-else="" class="fs-6 text-light">Copied!</span>
         </button>
     </div>

addons/api_doc/static/src/start_doc_client.js

@@ -4,8 +4,6 @@ import { DocClient } from "@api_doc/doc_client";
 
 export async function startDocClient() {
     await whenReady();
-    const app = new App(DocClient, {
-        getTemplate,
-    });
-    app.mount(document.body);
+    const app = new App({ getTemplate });
+    app.createRoot(DocClient).mount(document.body);
 }

addons/base_import/static/tests/import_action.test.js

@@ -1,3 +1,4 @@
+import { useLayoutEffect } from "@web/owl2/utils";
 import { before, describe, expect, test } from "@odoo/hoot";
 import {
     animationFrame,
@@ -7,7 +8,6 @@ import {
     setInputFiles,
     waitFor,
 } from "@odoo/hoot-dom";
-import { useEffect } from "@odoo/owl";
 import {
     contains,
     defineActions,
@@ -1026,7 +1026,7 @@ describe("Import view", () => {
         patchWithCleanup(ImportDataProgress.prototype, {
             setup() {
                 super.setup();
-                useEffect(
+                useLayoutEffect(
                     () => {
                         if (this.props.importProgress.step === 1) {
                             // Trigger a pause at this step to resume later from the view
@@ -1106,7 +1106,7 @@ describe("Import view", () => {
         patchWithCleanup(ImportDataProgress.prototype, {
             setup() {
                 super.setup();
-                useEffect(
+                useLayoutEffect(
                     () => {
                         if (this.props.importProgress.step === 1) {
                             // Trigger a pause at this step to resume later from the view

addons/calendar/static/src/views/attendee_calendar/activity/attendee_calendar_activity_list_popover.js

@@ -28,9 +28,11 @@ export class AttendeeCalendarActivityListPopover extends Component {
         this.store = useService("mail.store");
         this.limit = this.env.isSmall ? false : 5;
 
+        this.activityIds = this.props.activityIds;
+
         onWillStart(async () => {
             const data = await this.orm.silent.call("mail.activity", "activity_format", [
-                this.props.activityIds,
+                this.activityIds,
             ]);
             this.store.insert(data);
         });
@@ -42,7 +44,7 @@ export class AttendeeCalendarActivityListPopover extends Component {
      */
     get activities() {
         /** @type {import("models").Activity[]} */
-        return (this.limit ? this.props.activityIds.slice(0, this.limit) : this.props.activityIds)
+        return (this.limit ? this.activityIds.slice(0, this.limit) : this.activityIds)
             .map((id) => this.store["mail.activity"].get(id))
             .filter(Boolean); // Do not consider activities removed from the store
     }
@@ -53,7 +55,7 @@ export class AttendeeCalendarActivityListPopover extends Component {
     async onClickViewAll() {
         const action = await this.action.loadAction("mail.mail_activity_action_my");
         action.context = { force_search_count: 1 }; // remove default search
-        action.domain = [["id", "in", this.props.activityIds]];
+        action.domain = [["id", "in", this.activityIds]];
         this.props.close();
         this.action.doAction(action);
     }
@@ -64,8 +66,8 @@ export class AttendeeCalendarActivityListPopover extends Component {
      * automatically close the popover when there's no activity left.
      */
     onRemoveActivityItem(activityId) {
-        this.props.activityIds = this.props.activityIds.filter((id) => id !== activityId);
-        if (!this.props.activityIds.length) {
+        this.activityIds = this.activityIds.filter((id) => id !== activityId);
+        if (!this.activityIds.length) {
             this.props.close();
         }
     }

addons/calendar/static/src/views/attendee_calendar/activity/attendee_calendar_activity_list_popover.xml

@@ -25,10 +25,10 @@
                     onRemoveActivityItem.bind="this.onRemoveActivityItem"
                     onViewMeeting.bind="this.props.onViewMeeting"/>
             </div>
-            <button t-if="this.limit and this.props.activityIds.length > this.limit"
+            <button t-if="this.limit and this.activityIds.length > this.limit"
                 class="btn btn-secondary p-3 text-center text-primary border-top"
                 t-on-click="this.onClickViewAll">
-                ...and <t t-out="this.props.activityIds.length - this.limit"/> more
+                ...and <t t-out="this.activityIds.length - this.limit"/> more
             </button>
         </div>
     </t>

addons/crm/static/src/views/crm_form/crm_pls_tooltip_button.xml

@@ -44,25 +44,23 @@
                     <span>Top Positives</span>
                     <span t-if="isSampleData" class="text-primary fw-normal ms-2">(sample data)</span>
                 </h5>
-                <t t-call="crm.PlsTooltipSectionContent">
-                    <t t-set="iconClasses" t-value="'oi oi-arrow-up-right text-success'"/>
-                    <t t-set="sectionEntries" t-value="this.props.top3Data"/>
-                    <t t-set="teamName" t-value="this.props.teamName"/>
-                    <t t-set="useDefault" t-value="positiveDefault"/>
-                </t>
+                <t t-call="crm.PlsTooltipSectionContent"
+                    iconClasses="'oi oi-arrow-up-right text-success'"
+                    sectionEntries="this.props.top3Data"
+                    teamName="this.props.teamName"
+                    useDefault="positiveDefault"/>
             </div>
             <div t-if="negativeDefault || this.props.low3Data?.length"
                 t-attf-class="mb-3 {{isSampleData ? 'o_crm_pls_tooltip_section_sample' : ''}}">
                 <h5 class="bg-primary-subtle py-2 px-2">
                     <span>Top Negatives</span>
                     <span t-if="isSampleData" class="text-primary fw-normal ms-2">(sample data)</span>
                 </h5>
-                <t t-call="crm.PlsTooltipSectionContent">
-                    <t t-set="iconClasses" t-value="'oi oi-arrow-down-right text-danger'"/>
-                    <t t-set="sectionEntries" t-value="this.props.low3Data"/>
-                    <t t-set="teamName" t-value="this.props.teamName"/>
-                    <t t-set="useDefault" t-value="negativeDefault"/>
-                </t>
+                <t t-call="crm.PlsTooltipSectionContent"
+                    iconClasses="'oi oi-arrow-down-right text-danger'"
+                    sectionEntries="this.props.low3Data"
+                    teamName="this.props.teamName"
+                    useDefault="negativeDefault"/>
             </div>
             <div class="o_crm_pls_tooltip_footer d-flex justify-content-between text-muted fs-xs mt-3 px-2">
                 <span t-if="isSampleData" class="text-primary fw-bold">Close opportunities to get insights.</span>

addons/crm_livechat/static/src/core/web/livechat_channel_info_list_patch.xml

@@ -2,16 +2,13 @@
 <templates xml:space="preserve">
     <t t-name="website_livechat.LivechatChannelInfoList" t-inherit="im_livechat.LivechatChannelInfoList" t-inherit-mode="extension">
         <xpath expr="//t[@t-name='extra_infos']" position="inside">
-            <t t-if="this.props.thread.channel.livechatVisitorMember?.partner_id?.opportunity_ids?.length" t-call="im_livechat.LivechatChannelInfoList.info_links">
-                <t t-set="title">Open leads</t>
-                <t t-set="templateParams"
-                    t-value="{
+            <t t-set="title">Open leads</t>
+            <t t-if="this.props.thread.channel.livechatVisitorMember?.partner_id?.opportunity_ids?.length" t-call="im_livechat.LivechatChannelInfoList.info_links"
+                templateParams="{
                         title,
                         'info_records': this.props.thread.livechatVisitorMember?.partner_id?.opportunity_ids,
                         'model': 'crm.lead'
-                    }"
-                />
-            </t>
+                    }"/>
         </xpath>
     </t>
 </templates>

addons/data_recycle/static/src/views/data_recycle_list_view.js

@@ -1,12 +1,12 @@
+import { useLayoutEffect } from "@web/owl2/utils";
 import { DataCleaningCommonListController } from "@data_recycle/views/data_cleaning_common_list";
 import { registry } from '@web/core/registry';
 import { listView } from '@web/views/list/list_view';
-import { useEffect } from "@odoo/owl";
 
 export class DataRecycleListController extends DataCleaningCommonListController {
     setup() {
         super.setup();
-        useEffect(() => {
+        useLayoutEffect(() => {
             const selectedRecords = this.model.root.selection;
 
             // Check the active state of selected records

addons/hr/static/src/components/versions_timeline/versions_timeline.xml

@@ -42,8 +42,8 @@
             </div>
         </button>
 
-        <t t-foreach="items.inline" position="replace">
-            <t t-foreach="items.inline" t-as="item" t-key="item.value">
+        <t t-foreach="this.items.inline" position="replace">
+            <t t-foreach="this.items.inline" t-as="item" t-key="item.value">
                 <div class="o_arrow_button_wrapper"
                         t-att-data-tooltip="item.toolTip">
                     <button

addons/hr/static/src/fields/hr_org_chart.xml

@@ -6,16 +6,12 @@
 
     <section t-if="employee_type == 'self'" t-attf-class="o_org_chart_entry_self_container #{this.managers.length &gt; 0 ? 'o_org_chart_has_managers' : ''}">
         <div t-attf-class="o_org_chart_entry o_org_chart_entry_#{employee_type} position-relative d-flex align-items-center overflow-visible #{this.managers.length &gt; 0 ? 'o_treeEntry' : ''}">
-            <t t-call="hr.hr_org_chart_employee_content">
-                <t t-set="is_self" t-value="is_self"/>
-            </t>
+            <t t-call="hr.hr_org_chart_employee_content" is_self="is_self"/>
         </div>
     </section>
 
     <div t-else="" t-attf-class="o_org_chart_entry o_org_chart_entry_#{employee_type} o_treeEntry position-relative d-flex align-items-center overflow-visible">
-        <t t-call="hr.hr_org_chart_employee_content">
-            <t t-set="is_self" t-value="is_self"/>
-        </t>
+        <t t-call="hr.hr_org_chart_employee_content" is_self="is_self"/>
     </div>
 </t>
 
@@ -36,14 +32,10 @@
 
 <t t-name="hr.hr_org_chart_employee_content">
     <a t-if="!is_self" t-att-href="employee.link" class="o_employee_redirect d-flex w-100 me-auto opacity-trigger-hover" t-att-data-employee-id="employee.id" t-on-click.prevent="() => this._onEmployeeRedirect(employee.id)">
-        <t t-call="hr.hr_org_chart_employee_informations">
-            <t t-set="is_self" t-value="is_self"/>
-        </t>
+        <t t-call="hr.hr_org_chart_employee_informations" is_self="is_self"/>
     </a>
     <div t-if="is_self" class="d-flex w-100 me-auto">
-        <t t-call="hr.hr_org_chart_employee_informations">
-            <t t-set="is_self" t-value="is_self"/>
-        </t>
+        <t t-call="hr.hr_org_chart_employee_informations" is_self="is_self"/>
     </div>
     <button t-if="employee.indirect_sub_count &gt; 0"
             class="btn btn-secondary btn-sm d-flex ms-2 rounded-pill"
@@ -79,16 +71,13 @@
 
         <t t-foreach="this.managers" t-as="employee" t-key="employee_index">
             <t t-set="emp_count" t-value="emp_count + 1"/>
-            <t t-call="hr.hr_org_chart_employee">
-                <t t-set="employee_type" t-value="'manager'"/>
-            </t>
+            <t t-call="hr.hr_org_chart_employee" employee_type="'manager'"/>
         </t>
     </div>
 
-    <t t-if="this.children.length || this.managers.length" t-call="hr.hr_org_chart_employee">
-        <t t-set="employee_type" t-value="'self'"/>
-        <t t-set="employee" t-value="this.self"/>
-    </t>
+    <t t-if="this.children.length || this.managers.length" t-call="hr.hr_org_chart_employee"
+        employee_type="'self'"
+        employee="this.self"/>
 
     <t t-if="!this.children.length &amp;&amp; !this.managers.length">
         <p class="mb-3 text-muted fst-italic">Set a manager or reports to show in org chart.</p>
@@ -135,9 +124,7 @@
         <t t-foreach="this.children" t-as="employee" t-key="employee_index">
             <t t-set="emp_count" t-value="emp_count + 1"/>
             <t t-if="emp_count &lt; 20">
-                <t t-call="hr.hr_org_chart_employee">
-                    <t t-set="employee_type" t-value="'sub'"/>
-                </t>
+                <t t-call="hr.hr_org_chart_employee" employee_type="'sub'"/>
             </t>
         </t>
 

addons/hr_attendance/static/src/components/attendance_video_stream/attendance_video_steam.xml

@@ -2,7 +2,7 @@
     <t t-name="hr_attendance.AttendanceVideoStream">
         <div class="d-flex justify-content-center align-items-center w-100 h-100 overflow-hidden rounded-3">
             <video
-                t-ref="attendanceVideo"
+                t-custom-ref="attendanceVideo"
                 class="w-100 h-100 object-fit-cover"
                 style="transform: scaleX(-1);"
                 t-on-contextmenu.prevent=""