[IMP] mail, knowledge: mark Emoji(List) component as Legacy

This commit duplicates the components Emoji and EmojiList into
other components called "LegacyEmoji" "LegacyEmojiList".

We do this so that we can implement the new EmojiPicker in Discuss
code, without affecting the code of `knowledge` during development.

When the Emoji Picker is in a good state with just the scope of
feature of Discuss, then we can integrate this new Emoji Picker
in other modules, like `knowledge`.

Task-2890268

closes odoo/odoo#94254

Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>

addons/knowledge/static/src/components/emoji_picker/emoji_list.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
-    <t t-name="knowledge.EmojiList" t-inherit="mail.EmojiList" t-inherit-mode="primary" owl="1">
-        <xpath expr="//div[hasclass('o_EmojiList')]" position="before">
+    <t t-name="knowledge.LegacyEmojiList" t-inherit="mail.LegacyEmojiList" t-inherit-mode="primary" owl="1">
+        <xpath expr="//div[hasclass('o_LegacyEmojiList')]" position="before">
             <div class="d-flex justify-content-end p-2">
                 <button class="btn btn-outline-danger w-100" t-on-click="onRemoveEmoji" title="Remove Icon">
                     <i class="fa fa-times-circle"/> Remove Icon

addons/knowledge/static/src/components/emoji_picker/emoji_picker.js

@@ -3,7 +3,7 @@
 import emojis from '@mail/js/emojis';
 const { Component } = owl;
 
-class Emoji extends Component {
+class LegacyEmoji extends Component {
     /**
      * @override
      */
@@ -14,8 +14,8 @@ class Emoji extends Component {
     }
 }
 
-Emoji.template = 'mail.Emoji';
-Emoji.props = {
+LegacyEmoji.template = 'mail.LegacyEmoji';
+LegacyEmoji.props = {
     emojiView: Object
 };
 
@@ -53,8 +53,8 @@ class EmojiPicker extends Component {
     }
 }
 
-EmojiPicker.template = 'knowledge.EmojiList';
+EmojiPicker.template = 'knowledge.LegacyEmojiList';
 EmojiPicker.props = ['onClickEmoji'];
-EmojiPicker.components = { Emoji };
+EmojiPicker.components = { LegacyEmoji };
 
 export default EmojiPicker;

addons/mail/static/src/components/legacy_emoji/legacy_emoji.js

@@ -0,0 +1,16 @@
+/** @odoo-module **/
+
+import { registerMessagingComponent } from '@mail/utils/messaging_component';
+
+const { Component } = owl;
+
+export class LegacyEmoji extends Component {}
+
+Object.assign(LegacyEmoji, {
+    props: {
+        emojiView: Object,
+    },
+    template: 'mail.LegacyEmoji',
+});
+
+registerMessagingComponent(LegacyEmoji);

addons/mail/static/src/components/legacy_emoji/legacy_emoji.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.LegacyEmoji" owl="1">
+        <span class="o_LegacyEmoji p-1 fs-5 o_cursor_pointer" t-on-click="props.emojiView.emojiListView.onClickEmoji" t-att-title="props.emojiView.emoji.description" t-att-data-source="props.emojiView.emoji.sources[0]" t-att-data-unicode="props.emojiView.emoji.unicode" t-attf-class="{{ className }}" t-ref="root">
+            <t t-esc="props.emojiView.emoji.unicode"/>
+        </span>
+    </t>
+
+</templates>

addons/mail/static/src/components/legacy_emoji_list/legacy_emoji_list.js

@@ -0,0 +1,57 @@
+/** @odoo-module **/
+
+import { useUpdate } from '@mail/component_hooks/use_update';
+import { registerMessagingComponent } from '@mail/utils/messaging_component';
+import { LegacyComponent } from '@web/legacy/legacy_component';
+
+export class LegacyEmojiList extends LegacyComponent {
+
+    /**
+     * @override
+     */
+    setup() {
+        super.setup();
+        useUpdate({ func: () => this._update() });
+    }
+
+    get emojiListView() {
+        return this.props.record;
+    }
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _update() {
+        this.trigger('o-popover-compute');
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    close() {
+        this.trigger('o-popover-close');
+    }
+
+    /**
+     * Returns whether the given node is self or a children of self.
+     *
+     * @param {Node} node
+     * @returns {boolean}
+     */
+    contains(node) {
+        return Boolean(this.root.el && this.root.el.contains(node));
+    }
+
+}
+
+Object.assign(LegacyEmojiList, {
+    props: { record: Object },
+    template: 'mail.LegacyEmojiList',
+});
+
+registerMessagingComponent(LegacyEmojiList);

addons/mail/static/src/components/legacy_emoji_list/legacy_emoji_list.scss

@@ -0,0 +1,9 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_LegacyEmojiList {
+    // Could be replaced by "d-grid" class after migration to BS5
+    display: grid;
+    grid-template-columns: repeat(9, 1fr);
+}

addons/mail/static/src/components/legacy_emoji_list/legacy_emoji_list.xml

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.LegacyEmojiList" owl="1">
+        <div class="o_LegacyEmojiList px-1" t-attf-class="{{ className }}" t-ref="root">
+            <t t-if="emojiListView">
+                <t t-foreach="emojiListView.emojiViews" t-as="emojiView" t-key="emojiView.localId">
+                    <LegacyEmoji emojiView="emojiView"/>
+                </t>
+            </t>
+        </div>
+    </t>
+
+</templates>