[IMP] mail: introduce 'ref' field attribute

Part-of: odoo/odoo#105099

addons/mail/static/src/model/model_manager.js

@@ -1,5 +1,6 @@
 /** @odoo-module **/
 
+import { useRefToModel } from '@mail/component_hooks/use_ref_to_model';
 import { IS_RECORD, patchesAppliedPromise, registry } from '@mail/model/model_core';
 import { ModelField } from '@mail/model/model_field';
 import { ModelIndexAnd } from '@mail/model/model_index_and';
@@ -172,6 +173,7 @@ export class ModelManager {
         this.messaging.delete();
         for (const model of Object.values(this.models)) {
             if (model.__messagingComponent) {
+                delete model.__fieldAndRefNames;
                 unregisterMessagingComponent(model.name);
                 delete model.__messagingComponent;
             }
@@ -395,17 +397,13 @@ export class ModelManager {
         const definition = registry.get(model.name);
         if (definition.get('template')) {
             const ModelComponent = { [model.name]: class extends Component {} }[model.name];
-            if (definition.get('componentSetup')) {
-                Object.assign(ModelComponent.prototype, { setup() {
-                    return definition.get('componentSetup').call(this);
-                } });
-            }
             Object.assign(ModelComponent, {
                 props: { record: Object },
                 template: definition.get('template'),
             });
             registerMessagingComponent(ModelComponent);
             model.__messagingComponent = ModelComponent;
+            model.__fieldAndRefNames = [];
         }
         Object.assign(model, Object.fromEntries(definition.get('modelMethods')));
         Object.assign(model.prototype, Object.fromEntries(definition.get('recordMethods')));
@@ -457,6 +455,7 @@ export class ModelManager {
                             'fieldType',
                             'identifying',
                             'readonly',
+                            'ref',
                             'related',
                             'required',
                             'sum',
@@ -567,6 +566,11 @@ export class ModelManager {
                         throw new Error(`Related field ${model}/${fieldName} has unnecessary "readonly" attribute (readonly is implicit for related fields).`);
                     }
                 }
+                if (field.ref) {
+                    if (!model.__messagingComponent) {
+                        throw new Error(`Field ${model}/${fieldName} has a 'ref' attribute but its model is not linked to any component.`);
+                    }
+                }
             }
         }
     }
@@ -1214,10 +1218,35 @@ export class ModelManager {
                         to: fieldName,
                     });
                 }
+                if (fieldData.ref) {
+                    model.__fieldAndRefNames.push([fieldName, fieldData.ref]);
+                }
             }
             for (const [fieldName, sumContributions] of sumContributionsByFieldName) {
                 model.fields[fieldName].sumContributions = sumContributions;
             }
+            if (model.__messagingComponent) {
+                const setupFunctions = [];
+                if (registry.get(model.name).has('componentSetup')) {
+                    setupFunctions.push(registry.get(model.name).get('componentSetup'));
+                }
+                if (model.__fieldAndRefNames.length > 0) {
+                    setupFunctions.push(function () {
+                        for (const [fieldName, refName] of model.__fieldAndRefNames) {
+                            useRefToModel({ fieldName, refName });
+                        }
+                    });
+                }
+                if (setupFunctions.length > 0) {
+                    Object.assign(model.__messagingComponent.prototype, {
+                        setup() {
+                            for (const fun of setupFunctions) {
+                                fun.call(this);
+                            }
+                        },
+                    });
+                }
+            }
         }
         /**
          * 2. Auto-generate definitions of undeclared inverse relations.

addons/mail/static/src/models/activity_button_view.js

@@ -1,6 +1,5 @@
 /** @odoo-module **/
 
-import { useRefToModel } from '@mail/component_hooks/use_ref_to_model';
 import { registerModel } from '@mail/model/model_core';
 import { attr, one } from '@mail/model/model_field';
 import { clear } from '@mail/model/model_field_command';
@@ -8,9 +7,6 @@ import { clear } from '@mail/model/model_field_command';
 registerModel({
     name: 'ActivityButtonView',
     template: 'mail.ActivityButtonView',
-    componentSetup() {
-        useRefToModel({ fieldName: 'buttonRef', refName: 'button' });
-    },
     identifyingMode: 'xor',
     recordMethods: {
         onClick(ev) {
@@ -65,7 +61,7 @@ registerModel({
                 return classes.join(' ');
             },
         }),
-        buttonRef: attr(),
+        buttonRef: attr({ ref: 'button' }),
         kanbanFieldActivityViewOwner: one('KanbanFieldActivityView', { identifying: true, inverse: 'activityButtonView' }),
         listFieldActivityViewOwner: one('ListFieldActivityView', { identifying: true, inverse: 'activityButtonView' }),
         thread: one('Thread', { required: true,

addons/mail/static/src/models/activity_mark_done_popover_content_view.js

@@ -1,6 +1,5 @@
 /** @odoo-module **/
 
-import { useRefToModel } from '@mail/component_hooks/use_ref_to_model';
 import { registerModel } from '@mail/model/model_core';
 import { attr, one } from '@mail/model/model_field';
 import { clear } from '@mail/model/model_field_command';
@@ -11,7 +10,6 @@ registerModel({
     name: 'ActivityMarkDonePopoverContentView',
     template: 'mail.ActivityMarkDonePopoverContentView',
     componentSetup() {
-        useRefToModel({ fieldName: 'feedbackTextareaRef', refName: 'feedbackTextarea' });
         onMounted(this.onMounted);
     },
     identifyingMode: 'xor',
@@ -135,7 +133,7 @@ registerModel({
                 return clear();
             },
         }),
-        feedbackTextareaRef: attr(),
+        feedbackTextareaRef: attr({ ref: 'feedbackTextarea' }),
         hasHeader: attr({
             compute() {
                 return Boolean(this.popoverViewOwner);

addons/mail/static/src/models/call_action_list_view.js

@@ -1,6 +1,5 @@
 /** @odoo-module **/
 
-import { useRefToModel } from '@mail/component_hooks/use_ref_to_model';
 import { registerModel } from '@mail/model/model_core';
 import { attr, one } from '@mail/model/model_field';
 import { clear } from '@mail/model/model_field_command';
@@ -8,9 +7,6 @@ import { clear } from '@mail/model/model_field_command';
 registerModel({
     name: 'CallActionListView',
     template: 'mail.CallActionListView',
-    componentSetup() {
-        useRefToModel({ fieldName: 'moreButtonRef', refName: 'moreButton' });
-    },
     recordMethods: {
         /**
          * @param {MouseEvent} ev
@@ -138,7 +134,7 @@ registerModel({
                 }
             },
         }),
-        moreButtonRef: attr(),
+        moreButtonRef: attr({ ref: 'moreButton' }),
         moreMenuPopoverView: one('PopoverView', { inverse: 'callActionListViewOwnerAsMoreMenu' }),
         screenSharingButtonTitle: attr({ default: '',
             compute() {

addons/mail/static/src/models/call_demo_view.js

@@ -1,16 +1,11 @@
 /** @odoo-module **/
 
-import { useRefToModel } from '@mail/component_hooks/use_ref_to_model';
 import { attr, one } from '@mail/model/model_field';
 import { registerModel } from '@mail/model/model_core';
 
 registerModel({
     name: 'CallDemoView',
     template: 'mail.CallDemoView',
-    componentSetup() {
-        useRefToModel({ fieldName: 'audioRef', refName: 'audio' });
-        useRefToModel({ fieldName: 'videoRef', refName: 'video' });
-    },
     recordMethods: {
         /**
          * Stops recording user's microphone.
@@ -108,7 +103,7 @@ registerModel({
         /**
          * Ref to the audio element used for the audio feedback.
          */
-        audioRef: attr(),
+        audioRef: attr({ ref: 'audio' }),
         /**
          * The MediaStream from the microphone.
          *
@@ -148,7 +143,7 @@ registerModel({
         /**
          * Ref to the video element used for the video feedback.
          */
-        videoRef: attr(),
+        videoRef: attr({ ref: 'video' }),
         /**
          * The MediaStream from the camera.
          *

addons/mail/static/src/models/call_main_view.js

@@ -2,7 +2,6 @@
 
 import { useComponentToModel } from '@mail/component_hooks/use_component_to_model';
 import { useUpdateToModel } from '@mail/component_hooks/use_update_to_model';
-import { useRefToModel } from '@mail/component_hooks/use_ref_to_model';
 import { registerModel } from '@mail/model/model_core';
 import { attr, many, one } from '@mail/model/model_field';
 import { clear } from '@mail/model/model_field_command';
@@ -16,7 +15,6 @@ registerModel({
     template: 'mail.CallMainView',
     componentSetup() {
         useComponentToModel({ fieldName: 'component' });
-        useRefToModel({ fieldName: 'tileContainerRef', refName: 'tileContainer', });
         useUpdateToModel({ methodName: 'onComponentUpdate' });
         onMounted(() => {
             this.resizeObserver = new ResizeObserver(() => this.onResize());
@@ -209,7 +207,7 @@ registerModel({
         showOverlay: attr({ default: true }),
         showOverlayTimer: one('Timer', { inverse: 'callMainViewAsShowOverlay' }),
         thread: one('Thread', { related: 'callView.thread', required: true }),
-        tileContainerRef: attr(),
+        tileContainerRef: attr({ ref: 'tileContainer' }),
         tileHeight: attr({ default: 0 }),
         tileWidth: attr({ default: 0 }),
     },

addons/mail/static/src/models/call_participant_card.js

@@ -1,6 +1,5 @@
 /** @odoo-module **/
 
-import { useRefToModel } from '@mail/component_hooks/use_ref_to_model';
 import { registerModel } from '@mail/model/model_core';
 import { attr, one } from '@mail/model/model_field';
 import { clear } from '@mail/model/model_field_command';
@@ -9,9 +8,6 @@ import { isEventHandled, markEventHandled } from '@mail/utils/utils';
 registerModel({
     name: 'CallParticipantCard',
     template: 'mail.CallParticipantCard',
-    componentSetup() {
-        useRefToModel({ fieldName: 'volumeMenuAnchorRef', refName: 'volumeMenuAnchor' });
-    },
     identifyingMode: 'xor',
     recordMethods: {
         /**
@@ -113,6 +109,6 @@ registerModel({
                 return clear();
             },
         }),
-        volumeMenuAnchorRef: attr(),
+        volumeMenuAnchorRef: attr({ ref: 'volumeMenuAnchor' }),
     },
 });

addons/mail/static/src/models/channel_invitation_form.js

@@ -1,7 +1,6 @@
 /** @odoo-module **/
 
 import { useComponentToModel } from '@mail/component_hooks/use_component_to_model';
-import { useRefToModel } from '@mail/component_hooks/use_ref_to_model';
 import { useUpdateToModel } from '@mail/component_hooks/use_update_to_model';
 import { registerModel } from '@mail/model/model_core';
 import { attr, many, one } from '@mail/model/model_field';
@@ -15,7 +14,6 @@ registerModel({
     template: 'mail.ChannelInvitationForm',
     componentSetup() {
         useComponentToModel({ fieldName: 'component' });
-        useRefToModel({ fieldName: 'searchInputRef', refName: 'searchInput' });
         useUpdateToModel({ methodName: 'onComponentUpdate' });
     },
     identifyingMode: 'xor',
@@ -227,7 +225,7 @@ registerModel({
          * States the OWL ref of the "search" input of this channel invitation
          * form. Useful to be able to focus it.
          */
-        searchInputRef: attr(),
+        searchInputRef: attr({ ref: 'searchInput' }),
         /**
          * States the number of results of the last search.
          */

addons/mail/static/src/models/channel_preview_view.js

@@ -1,6 +1,5 @@
 /** @odoo-module **/
 
-import { useRefToModel } from '@mail/component_hooks/use_ref_to_model';
 import { registerModel } from '@mail/model/model_core';
 import { attr, one } from '@mail/model/model_field';
 import { clear } from '@mail/model/model_field_command';
@@ -9,9 +8,6 @@ import { htmlToTextContentInline } from '@mail/js/utils';
 registerModel({
     name: 'ChannelPreviewView',
     template: 'mail.ChannelPreviewView',
-    componentSetup() {
-        useRefToModel({ fieldName: 'markAsReadRef', refName: 'markAsRead' });
-    },
     recordMethods: {
         /**
          * @param {MouseEvent} ev
@@ -74,7 +70,7 @@ registerModel({
          * Reference of the "mark as read" button. Useful to disable the
          * top-level click handler when clicking on this specific button.
          */
-        markAsReadRef: attr(),
+        markAsReadRef: attr({ ref: 'markAsRead' }),
         messageAuthorPrefixView: one('MessageAuthorPrefixView', { inverse: 'channelPreviewViewOwner',
             compute() {
                 if (

addons/mail/static/src/models/chat_window_hidden_menu_view.js

@@ -1,7 +1,6 @@
 /** @odoo-module **/
 
 import { useComponentToModel } from '@mail/component_hooks/use_component_to_model';
-import { useRefToModel } from '@mail/component_hooks/use_ref_to_model';
 import { useUpdateToModel } from '@mail/component_hooks/use_update_to_model';
 import { registerModel } from '@mail/model/model_core';
 import { attr, many, one } from '@mail/model/model_field';
@@ -12,7 +11,6 @@ registerModel({
     template: 'mail.ChatWindowHiddenMenuView',
     componentSetup() {
         useComponentToModel({ fieldName: 'component' });
-        useRefToModel({ fieldName: 'listRef', refName: 'list' });
         useUpdateToModel({ methodName: 'onComponentUpdate' });
     },
     lifecycleHooks: {
@@ -75,7 +73,7 @@ registerModel({
          * Reference of the dropup list. Useful to auto-set max height based on
          * browser screen height.
          */
-        listRef: attr(),
+        listRef: attr({ ref: 'list' }),
         owner: one('ChatWindowManager', { identifying: true, inverse: 'hiddenMenuView' }),
     },
 });

addons/mail/static/src/models/composer_text_input_view.js

@@ -1,7 +1,6 @@
 /** @odoo-module **/
 
 import { useComponentToModel } from '@mail/component_hooks/use_component_to_model';
-import { useRefToModel } from '@mail/component_hooks/use_ref_to_model';
 import { useUpdateToModel } from '@mail/component_hooks/use_update_to_model';
 import { registerModel } from '@mail/model/model_core';
 import { attr, one } from '@mail/model/model_field';
@@ -11,8 +10,6 @@ registerModel({
     template: 'mail.ComposerTextInputView',
     componentSetup() {
         useComponentToModel({ fieldName: 'component' });
-        useRefToModel({ fieldName: 'mirroredTextareaRef', refName: 'mirroredTextarea' });
-        useRefToModel({ fieldName: 'textareaRef', refName: 'textarea' });
         /**
          * Updates the composer text input content when composer is mounted
          * as textarea content can't be changed from the DOM.
@@ -52,12 +49,12 @@ registerModel({
          * based on the text content. We need it to downsize the textarea
          * properly without flicker.
          */
-        mirroredTextareaRef: attr(),
+        mirroredTextareaRef: attr({ ref: 'mirroredTextarea' }),
         owner: one('ComposerView', { identifying: true, inverse: 'textInput' }),
         /**
          * Reference of the textarea. Useful to set height, selection and
          * content.
          */
-        textareaRef: attr(),
+        textareaRef: attr({ ref: 'textarea' }),
     },
 });

addons/mail/static/src/models/composer_view.js

@@ -1,7 +1,6 @@
 /** @odoo-module **/
 
 import { useComponentToModel } from '@mail/component_hooks/use_component_to_model';
-import { useRefToModel } from '@mail/component_hooks/use_ref_to_model';
 import { registerModel } from '@mail/model/model_core';
 import { attr, many, one } from '@mail/model/model_field';
 import { clear, link } from '@mail/model/model_field_command';
@@ -16,7 +15,6 @@ registerModel({
     template: 'mail.ComposerView',
     componentSetup() {
         useComponentToModel({ fieldName: 'component' });
-        useRefToModel({ fieldName: 'buttonEmojisRef', refName: 'buttonEmojis' });
     },
     identifyingMode: 'xor',
     lifecycleHooks: {
@@ -1001,7 +999,7 @@ registerModel({
         /**
          * States the ref to the html node of the emojis button.
          */
-        buttonEmojisRef: attr(),
+        buttonEmojisRef: attr({ ref: 'buttonEmojis' }),
         /**
          * States the chatter which this composer allows editing (if any).
          */

addons/mail/static/src/models/discuss_sidebar_view.js

@@ -1,6 +1,5 @@
 /** @odoo-module **/
 
-import { useRefToModel } from '@mail/component_hooks/use_ref_to_model';
 import { useUpdateToModel } from '@mail/component_hooks/use_update_to_model';
 import { registerModel } from '@mail/model/model_core';
 import { attr, one } from '@mail/model/model_field';
@@ -9,7 +8,6 @@ registerModel({
     name: 'DiscussSidebarView',
     template: 'mail.DiscussSidebarView',
     componentSetup() {
-        useRefToModel({ fieldName: 'quickSearchInputRef', refName: 'quickSearchInput' });
         useUpdateToModel({ methodName: 'onComponentUpdate' });
     },
     recordMethods: {
@@ -25,6 +23,6 @@ registerModel({
          * Reference to the quick search input. Useful to filter channels and
          * chats based on the content of the input.
          */
-        quickSearchInputRef: attr(),
+        quickSearchInputRef: attr({ ref: 'quickSearchInput' }),
     },
 });

addons/mail/static/src/models/emoji_grid_view.js

@@ -1,6 +1,5 @@
 /** @odoo-module **/
 
-import { useRefToModel } from '@mail/component_hooks/use_ref_to_model';
 import { useUpdateToModel } from '@mail/component_hooks/use_update_to_model';
 import { registerModel } from '@mail/model/model_core';
 import { attr, many, one } from '@mail/model/model_field';
@@ -10,9 +9,6 @@ registerModel({
     name: 'EmojiGridView',
     template: 'mail.EmojiGridView',
     componentSetup() {
-        useRefToModel({ fieldName: 'containerRef', refName: 'containerRef'});
-        useRefToModel({ fieldName: 'listRef', refName: 'listRef'});
-        useRefToModel({ fieldName: 'viewBlockRef', refName: 'viewBlockRef'});
         useUpdateToModel({ methodName: 'onComponentUpdate' });
     },
     recordMethods: {
@@ -63,7 +59,7 @@ registerModel({
     fields: {
         amountOfItemsPerRow: attr({ default: 9 }),
         categorySelectedByUser: one('EmojiPickerView.Category'),
-        containerRef: attr(),
+        containerRef: attr({ ref: 'containerRef' }),
         /**
          * Distance of the rendered rows from top.
          * This is from the PoV of 1st rendered row, including extra rendered rows!
@@ -124,7 +120,7 @@ registerModel({
                 return this.rowHeight * this.rows.length;
             },
         }),
-        listRef: attr(),
+        listRef: attr({ ref: 'listRef' }),
         loadingScreenView: one('EmojiGridLoadingScreen', { inverse: 'emojiGridViewOwner',
             compute() {
                 if (!this.messaging.emojiRegistry.isLoaded) {
@@ -201,7 +197,7 @@ registerModel({
             },
         }),
         searchRowRegistry: one('EmojiGridViewRowRegistry', { default: {}, inverse: 'emojiGridViewOwnerAsSearch' }),
-        viewBlockRef: attr(),
+        viewBlockRef: attr({ ref: 'viewBlockRef' }),
         /**
          * Amount of emoji that are visibly rendered in emoji grid.
          * Decimal determines the partial visibility of the last emoji.

addons/mail/static/src/models/emoji_search_bar_view.js

@@ -1,6 +1,5 @@
 /** @odoo-module **/
 
-import { useRefToModel } from '@mail/component_hooks/use_ref_to_model';
 import { useUpdateToModel } from '@mail/component_hooks/use_update_to_model';
 import { registerModel } from '@mail/model/model_core';
 import { attr, one } from '@mail/model/model_field';
@@ -9,7 +8,6 @@ registerModel({
     name: 'EmojiSearchBarView',
     template: 'mail.EmojiSearchBarView',
     componentSetup() {
-        useRefToModel({ fieldName: 'inputRef', refName: 'input' });
         useUpdateToModel({ methodName: 'onComponentUpdate', modelName: 'EmojiSearchBarView' });
     },
     lifecycleHooks: {
@@ -72,7 +70,7 @@ registerModel({
     fields: {
         currentSearch: attr({ default: "" }),
         emojiPickerView: one("EmojiPickerView", { identifying: true, inverse: "emojiSearchBarView" }),
-        inputRef: attr(),
+        inputRef: attr({ ref: 'input' }),
         isDoFocus: attr({ default: false }),
         isFocused: attr({ default: false }),
         placeholder: attr({ required: true,

addons/mail/static/src/models/follower_list_menu_view.js

@@ -1,15 +1,11 @@
 /** @odoo-module **/
 
-import { useRefToModel } from '@mail/component_hooks/use_ref_to_model';
 import { registerModel } from '@mail/model/model_core';
 import { attr, many, one } from '@mail/model/model_field';
 
 registerModel({
     name: 'FollowerListMenuView',
     template: 'mail.FollowerListMenuView',
-    componentSetup() {
-        useRefToModel({ fieldName: 'dropdownRef', refName: 'dropdown' });
-    },
     lifecycleHooks: {
         _created() {
             document.addEventListener('click', this._onClickCaptureGlobal, true);
@@ -66,7 +62,7 @@ registerModel({
     },
     fields: {
         chatterOwner: one('Chatter', { identifying: true, inverse: 'followerListMenuView' }),
-        dropdownRef: attr(),
+        dropdownRef: attr({ ref: 'dropdown' }),
         followerViews: many('FollowerView', { inverse: 'followerListMenuViewOwner',
             compute() {
                 return this.chatterOwner.thread.followers.map(follower => ({ follower }));

addons/mail/static/src/models/message_action_view.js

@@ -1,6 +1,5 @@
 /** @odoo-module **/
 
-import { useRefToModel } from '@mail/component_hooks/use_ref_to_model';
 import { registerModel } from '@mail/model/model_core';
 import { attr, one } from '@mail/model/model_field';
 import { clear } from '@mail/model/model_field_command';
@@ -9,9 +8,6 @@ import { markEventHandled } from '@mail/utils/utils';
 registerModel({
     name: 'MessageActionView',
     template: "mail.MessageActionView",
-    componentSetup() {
-        useRefToModel({ fieldName: 'actionRef', refName: 'action' });
-    },
     recordMethods: {
         /**
          * @private
@@ -60,7 +56,7 @@ registerModel({
         /**
          * States the reference to the action in the component.
          */
-        actionRef: attr(),
+        actionRef: attr({ ref: 'action' }),
         actionViewCounterContribution: attr({ default: 1, readonly: true }),
         ariaPressedState: attr({
             compute() {

addons/mail/static/src/models/message_view.js

@@ -1,7 +1,6 @@
 /** @odoo-module **/
 
 import { useComponentToModel } from '@mail/component_hooks/use_component_to_model';
-import { useRefToModel } from '@mail/component_hooks/use_ref_to_model';
 import { useUpdateToModel } from '@mail/component_hooks/use_update_to_model';
 import { registerModel } from '@mail/model/model_core';
 import { attr, one } from '@mail/model/model_field';
@@ -13,9 +12,6 @@ registerModel({
     template: 'mail.MessageView',
     componentSetup() {
         useComponentToModel({ fieldName: 'component' });
-        useRefToModel({ fieldName: 'contentRef', refName: 'content' });
-        useRefToModel({ fieldName: 'notificationIconRef', refName: 'notificationIcon' });
-        useRefToModel({ fieldName: 'prettyBodyRef', refName: 'prettyBody' });
         useUpdateToModel({ methodName: 'onComponentUpdate' });
     },
     identifyingMode: 'xor',
@@ -343,7 +339,7 @@ registerModel({
         /**
          * Reference to the content of the message.
          */
-        contentRef: attr(),
+        contentRef: attr({ ref: 'content' }),
         /**
          * States the time elapsed since date up to now.
          */
@@ -644,7 +640,7 @@ registerModel({
                 return clear();
             },
         }),
-        notificationIconRef: attr(),
+        notificationIconRef: attr({ ref: 'notificationIcon' }),
         notificationPopoverView: one('PopoverView', { inverse: 'messageViewOwnerAsNotificationContent' }),
         personaImStatusIconView: one('PersonaImStatusIconView', { inverse: 'messageViewOwner',
             compute() {
@@ -658,7 +654,7 @@ registerModel({
          * Reference to element containing the prettyBody. Useful to be able to
          * replace prettyBody with new value in JS (which is faster than t-raw).
          */
-        prettyBodyRef: attr(),
+        prettyBodyRef: attr({ ref: 'prettyBody' }),
         readLessText: attr({
             compute() {
                 return this.env._t("Read Less");

addons/mail/static/src/models/notification_group_view.js

@@ -1,6 +1,5 @@
 /** @odoo-module **/
 
-import { useRefToModel } from '@mail/component_hooks/use_ref_to_model';
 import { registerModel } from '@mail/model/model_core';
 import { attr, one } from '@mail/model/model_field';
 import { clear } from '@mail/model/model_field_command';
@@ -8,9 +7,6 @@ import { clear } from '@mail/model/model_field_command';
 registerModel({
     name: 'NotificationGroupView',
     template: 'mail.NotificationGroupView',
-    componentSetup() {
-        useRefToModel({ fieldName: 'markAsReadRef', refName: 'markAsRead' });
-    },
     recordMethods: {
         /**
          * @param {MouseEvent} ev
@@ -50,7 +46,7 @@ registerModel({
          * Reference of the "mark as read" button. Useful to disable the
          * top-level click handler when clicking on this specific button.
          */
-        markAsReadRef: attr(),
+        markAsReadRef: attr({ ref: 'markAsRead' }),
         notificationGroup: one('NotificationGroup', { identifying: true, inverse: 'notificationGroupViews' }),
         notificationListViewOwner: one('NotificationListView', { identifying: true, inverse: 'notificationGroupViews' }),
     },

addons/mail/static/src/models/thread_view_topbar.js

@@ -1,6 +1,5 @@
 /** @odoo-module **/
 
-import { useRefToModel } from '@mail/component_hooks/use_ref_to_model';
 import { useUpdateToModel } from '@mail/component_hooks/use_update_to_model';
 import { registerModel } from '@mail/model/model_core';
 import { attr, one } from '@mail/model/model_field';
@@ -10,10 +9,6 @@ registerModel({
     name: 'ThreadViewTopbar',
     template: 'mail.ThreadViewTopbar',
     componentSetup() {
-        useRefToModel({ fieldName: 'guestNameInputRef', refName: 'guestNameInput' });
-        useRefToModel({ fieldName: 'inviteButtonRef', refName: 'inviteButton' });
-        useRefToModel({ fieldName: 'threadNameInputRef', refName: 'threadNameInput' });
-        useRefToModel({ fieldName: 'threadDescriptionInputRef', refName: 'threadDescriptionInput' });
         useUpdateToModel({ methodName: 'onComponentUpdate' });
     },
     lifecycleHooks: {
@@ -582,7 +577,7 @@ registerModel({
          * States the OWL ref of the "guest name" input of this top bar.
          * Useful to focus it, or to know when a click is done outside of it.
          */
-        guestNameInputRef: attr(),
+        guestNameInputRef: attr({ ref: 'guestNameInput' }),
         /**
          * Determines whether the guest's name has been updated.
          *
@@ -613,7 +608,7 @@ registerModel({
          * States the OWL ref of the invite button.
          * Useful to provide anchor for the invite popover positioning.
          */
-        inviteButtonRef: attr(),
+        inviteButtonRef: attr({ ref: 'inviteButton' }),
         /**
          * If set, this is the record of invite button popover that is currently
          * open in the topbar.
@@ -682,12 +677,12 @@ registerModel({
          * States the OWL ref of the "thread name" input of this top bar.
          * Useful to focus it, or to know when a click is done outside of it.
          */
-        threadNameInputRef: attr(),
+        threadNameInputRef: attr({ ref: 'threadNameInput' }),
         /**
          * States the OWL ref of the thread description input of this top bar.
          * Useful to focus it, or to know when a click is done outside of it.
          */
-        threadDescriptionInputRef: attr(),
+        threadDescriptionInputRef: attr({ ref: 'threadDescriptionInput' }),
         threadIconView: one('ThreadIconView', { inverse: 'threadViewTopbarOwner',
             compute() {
                 if (this.thread) {

addons/mail/static/src/models/welcome_view.js

@@ -1,6 +1,5 @@
 /** @odoo-module **/
 
-import { useRefToModel } from '@mail/component_hooks/use_ref_to_model';
 import { useUpdateToModel } from '@mail/component_hooks/use_update_to_model';
 import { registerModel } from '@mail/model/model_core';
 import { attr, one } from '@mail/model/model_field';
@@ -15,7 +14,6 @@ registerModel({
     name: 'WelcomeView',
     template: 'mail.WelcomeView',
     componentSetup() {
-        useRefToModel({ fieldName: 'guestNameInputRef', modelName: 'WelcomeView', refName: 'guestNameInput' });
         useUpdateToModel({ methodName: 'onComponentUpdate', modelName: 'WelcomeView' });
     },
     recordMethods: {
@@ -113,7 +111,7 @@ registerModel({
          * States the OWL ref the to input element containing the
          * 'pendingGuestName'.
          */
-        guestNameInputRef: attr(),
+        guestNameInputRef: attr({ ref: 'guestNameInput' }),
         /**
          * States the value to use for `id`, `for`, and `name` attributes of
          * the guest name input and its label.