[REF] mail: move ChannelMemberList code to discuss folder

Part of task-3265211

Part-of: odoo/odoo#120314

addons/mail/static/src/discuss/channel_member_list.js

@@ -1,8 +1,8 @@
 /* @odoo-module */
 
-import { Component, onWillUpdateProps, onWillStart, useState } from "@odoo/owl";
 import { useMessaging, useStore } from "@mail/core/messaging_hook";
-import { ImStatus } from "./im_status";
+import { ImStatus } from "@mail/discuss_app/im_status";
+import { Component, onWillUpdateProps, onWillStart, useState } from "@odoo/owl";
 import { useService } from "@web/core/utils/hooks";
 
 export class ChannelMemberList extends Component {

addons/mail/static/src/discuss/channel_member_list.scss

@@ -1,8 +1,8 @@
-.o-mail-ChannelMember:hover {
+.o-discuss-ChannelMember:hover {
     @extend .bg-300;
 }
 
-.o-mail-ChannelMember-avatar {
+.o-discuss-ChannelMember-avatar {
     width: $o-mail-Avatar-size;
     height: $o-mail-Avatar-size;
 }

addons/mail/static/src/discuss/channel_member_list.xml

@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="discuss.ChannelMemberList" owl="1">
-        <div class="o-mail-ChannelMemberList d-flex flex-column overflow-auto bg-light" t-att-class="props.className">
+        <div class="o-discuss-ChannelMemberList d-flex flex-column overflow-auto bg-light" t-att-class="props.className">
             <t t-if="props.thread.onlineMembers.length > 0">
                 <h6 class="m-2">
                     Online -
@@ -26,8 +26,8 @@
     </t>
 
     <t t-name="discuss.channel_member" owl="1">
-        <div class="o-mail-ChannelMember d-flex align-items-center mx-2 p-2 bg-light" t-att-class="{ 'cursor-pointer': canOpenChatWith(member) }" t-on-click.stop="() => this.openChatAvatar(member)">
-            <div class="o-bg-inherit o-mail-ChannelMember-avatar position-relative d-flex ms-4 flex-shrink-0">
+        <div class="o-discuss-ChannelMember d-flex align-items-center mx-2 p-2 bg-light" t-att-class="{ 'cursor-pointer': canOpenChatWith(member) }" t-on-click.stop="() => this.openChatAvatar(member)">
+            <div class="o-bg-inherit o-discuss-ChannelMember-avatar position-relative d-flex ms-4 flex-shrink-0">
                 <img class="w-100 h-100 rounded-circle o_object_fit_cover o_redirect"
                      t-att-src="threadService.avatarUrl(member.persona, props.thread)"/>
                 <ImStatus className="'position-absolute bottom-0 end-0'" persona="member.persona"/>

addons/mail/static/src/discuss/discuss_patch.js

@@ -1,11 +1,16 @@
 /* @odoo-module */
 
 import { ChannelInvitation } from "@mail/discuss/channel_invitation";
+import { ChannelMemberList } from "@mail/discuss/channel_member_list";
 import { Discuss } from "@mail/discuss_app/discuss";
 import { useRef } from "@odoo/owl";
 import { usePopover } from "@web/core/popover/popover_hook";
 import { patch } from "@web/core/utils/patch";
 
+patch(Discuss, "discuss", {
+    components: { ...Discuss.components, ChannelMemberList },
+});
+
 patch(Discuss.prototype, "discuss", {
     setup() {
         this._super();
@@ -26,4 +31,10 @@ patch(Discuss.prototype, "discuss", {
             });
         }
     },
+    toggleMemberList() {
+        this.state.activeMode =
+            this.state.activeMode === this.MODES.MEMBER_LIST
+                ? this.MODES.NONE
+                : this.MODES.MEMBER_LIST;
+    },
 });

addons/mail/static/src/discuss/discuss_patch.scss

@@ -0,0 +1,3 @@
+.o-mail-Discuss-channelMemberList {
+    width: $o-mail-Discuss-inspector;
+}

addons/mail/static/src/discuss/discuss_patch.xml

@@ -5,6 +5,12 @@
             <button t-if="thread.model === 'discuss.channel'" class="btn rounded px-2 shadow-none" t-att-class="{ 'o-isActive': state.isAddingUsers }" title="Add Users" t-on-click.stop="toggleInviteForm" t-ref="addUsers">
                 <i class="fa fa-lg fa-user-plus text-700"/>
             </button>
+            <button t-if="thread.hasMemberList" class="btn rounded px-2 shadow-none" t-att-class="{ 'o-isActive': state.activeMode === MODES.MEMBER_LIST }" t-att-title="state.activeMode === MODES.MEMBER_LIST ? 'Hide Member List' : 'Show Member List'" t-on-click.stop="toggleMemberList">
+                <i class="fa fa-lg fa-users text-700"/>
+            </button>
+        </xpath>
+        <xpath expr="//PinnedMessagesPanel" position="after">
+            <ChannelMemberList t-if="thread.hasMemberList and state.activeMode === MODES.MEMBER_LIST" thread="thread" className="'o-mail-Discuss-channelMemberList flex-shrink-0 border-start'"/>
         </xpath>
     </t>
 </templates>

addons/mail/static/src/discuss/web/chat_window_patch.js

@@ -1,15 +1,19 @@
 /* @odoo-module */
 
 import { ChannelInvitation } from "@mail/discuss/channel_invitation";
+import { ChannelMemberList } from "@mail/discuss/channel_member_list";
 import { ChatWindow } from "@mail/web/chat_window/chat_window";
 import { patch } from "@web/core/utils/patch";
 
 patch(ChatWindow, "discuss", {
-    components: { ...ChatWindow.components, ChannelInvitation },
+    components: { ...ChatWindow.components, ChannelInvitation, ChannelMemberList },
 });
 
 patch(ChatWindow.prototype, "discuss", {
     toggleAddUsers() {
         this.state.activeMode = this.state.activeMode === "add-users" ? "" : "add-users";
     },
+    toggleMemberList() {
+        this.state.activeMode = this.state.activeMode === "member-list" ? "" : "member-list";
+    },
 });

addons/mail/static/src/discuss/web/chat_window_patch.xml

@@ -6,7 +6,13 @@
                 <i class="fa fa-lg fa-user-plus"/>
             </div>
         </xpath>
-        <xpath expr="//ChannelMemberList" position="after">
+        <xpath expr="//*[@t-ref='toggleSettings']" position="before">
+            <div t-if="thread and thread.hasMemberList and !props.chatWindow.hidden and !props.chatWindow.folded" class="o-mail-ChatWindow-command d-flex align-items-center h-100 px-3 py-0 m-0 opacity-50 opacity-100-hover" t-att-title="state.activeMode === 'member-list' ? 'Hide Member List' : 'Show Member List'" t-on-click.stop="toggleMemberList">
+                <i class="fa fa-users"/>
+            </div>
+        </xpath>
+        <xpath expr="//CallSettings" position="after">
+            <ChannelMemberList t-elif="state.activeMode === 'member-list'" thread="thread" className="'flex-shrink-0 border-start w-100 h-100'"/>
             <ChannelInvitation t-elif="state.activeMode === 'add-users'" thread="thread" chatState="state"/>
         </xpath>
     </t>

addons/mail/static/src/discuss_app/discuss.js

@@ -8,7 +8,6 @@ import { useRtc } from "../rtc/rtc_hook";
 import { useMessageEdition, useMessageHighlight, useMessageToReplyTo } from "@mail/utils/hooks";
 import { Composer } from "../composer/composer";
 import { Call } from "../rtc/call";
-import { ChannelMemberList } from "./channel_member_list";
 import {
     Component,
     onWillStart,
@@ -32,7 +31,6 @@ export class Discuss extends Component {
         Composer,
         Call,
         CallSettings,
-        ChannelMemberList,
         PinnedMessagesPanel,
     };
     static props = {
@@ -116,13 +114,6 @@ export class Discuss extends Component {
             this.state.activeMode === this.MODES.SETTINGS ? this.MODES.NONE : this.MODES.SETTINGS;
     }
 
-    toggleMemberList() {
-        this.state.activeMode =
-            this.state.activeMode === this.MODES.MEMBER_LIST
-                ? this.MODES.NONE
-                : this.MODES.MEMBER_LIST;
-    }
-
     async renameThread({ value: name }) {
         const newName = name.trim();
         if (

addons/mail/static/src/discuss_app/discuss.scss

@@ -12,10 +12,6 @@
     width: 300px;
 }
 
-.o-mail-Discuss-channelMemberList {
-    width: $o-mail-Discuss-inspector;
-}
-
 .o-mail-Discuss-selfAvatar {
     height: $o-mail-Avatar-sizeSmall;
     width: $o-mail-Avatar-sizeSmall;

addons/mail/static/src/discuss_app/discuss.xml

@@ -34,9 +34,6 @@
                     <button t-if="thread.allowCalls and thread.type !== 'mailbox' and thread !== rtc.state.channel" class="btn rounded px-2 shadow-none" title="Start a Call" t-on-click="() => this.rtc.toggleCall(this.thread)" t-ref="startCall">
                         <i class="fa fa-lg fa-phone text-700"/>
                     </button>
-                    <button t-if="thread.hasMemberList" class="btn rounded px-2 shadow-none" t-att-class="{ 'o-isActive': state.activeMode === MODES.MEMBER_LIST }" t-att-title="state.activeMode === MODES.MEMBER_LIST ? 'Hide Member List' : 'Show Member List'" t-on-click.stop="toggleMemberList">
-                        <i class="fa fa-lg fa-users text-700"/>
-                    </button>
                     <button t-if="thread.allowCalls" class="btn rounded px-2 shadow-none" t-att-class="{ 'o-isActive': state.activeMode === MODES.SETTINGS }" t-att-title="state.activeMode === MODES.SETTINGS ? 'Hide Call Settings' : 'Show Call Settings'" t-on-click="toggleSettings">
                         <i class="fa fa-lg fa-gear text-700"/>
                     </button>
@@ -61,7 +58,6 @@
                     <Composer t-if="thread.type !== 'mailbox' or messageToReplyTo.thread === thread" t-key="thread.localId" composer="thread.composer" autofocus="true" messageEdition="messageEdition" messageToReplyTo="messageToReplyTo" onDiscardCallback="() => messageToReplyTo.cancel()" dropzoneRef="contentRef"/>
                 </div>
                 <PinnedMessagesPanel t-if="state.activeMode === MODES.PINNED_MESSAGES and thread.model === 'discuss.channel'" thread="thread"/>
-                <ChannelMemberList t-if="thread.hasMemberList and state.activeMode === MODES.MEMBER_LIST" thread="thread" className="'o-mail-Discuss-channelMemberList flex-shrink-0 border-start'"/>
                 <CallSettings t-if="thread.allowCalls and state.activeMode === MODES.SETTINGS" thread="thread" className="'o-mail-Discuss-callSettings border-start'"/>
             </div>
         </div>

addons/mail/static/src/web/chat_window/chat_window.js

@@ -10,7 +10,6 @@ import { Component, useChildSubEnv, useRef, useState } from "@odoo/owl";
 import { useService } from "@web/core/utils/hooks";
 import { localization } from "@web/core/l10n/localization";
 import { CallSettings } from "@mail/rtc/call_settings";
-import { ChannelMemberList } from "@mail/discuss_app/channel_member_list";
 import { ThreadIcon } from "@mail/discuss_app/thread_icon";
 import { isEventHandled } from "@mail/utils/misc";
 import { ChannelSelector } from "@mail/discuss_app/channel_selector";
@@ -30,7 +29,6 @@ export class ChatWindow extends Component {
         ChannelSelector,
         Composer,
         CallSettings,
-        ChannelMemberList,
         ThreadIcon,
         PinnedMessagesPanel,
     };
@@ -134,10 +132,6 @@ export class ChatWindow extends Component {
         this.state.activeMode = this.state.activeMode === "in-settings" ? "" : "in-settings";
     }
 
-    toggleMemberList() {
-        this.state.activeMode = this.state.activeMode === "member-list" ? "" : "member-list";
-    }
-
     expand() {
         if (this.thread.type === "chatter") {
             this.action.doAction({

addons/mail/static/src/web/chat_window/chat_window.xml

@@ -33,10 +33,7 @@
                 <i class="fa fa-phone"/>
             </div>
             <t t-if="thread">
-                <div t-if="thread and thread.hasMemberList and !props.chatWindow.hidden and !props.chatWindow.folded" class="o-mail-ChatWindow-command d-flex align-items-center h-100 px-3 py-0 m-0 opacity-50 opacity-100-hover" t-att-title="state.activeMode === 'member-list' ? 'Hide Member List' : 'Show Member List'" t-on-click.stop="toggleMemberList">
-                    <i class="fa fa-users"/>
-                </div>
-                <div t-if="thread.allowCalls and !props.chatWindow.hidden and !props.chatWindow.folded" class="o-mail-ChatWindow-command d-flex align-items-center h-100 px-3 py-0 m-0 opacity-50 opacity-100-hover" title="Show Call Settings" t-on-click.stop="toggleSettings">
+                <div t-if="thread.allowCalls and !props.chatWindow.hidden and !props.chatWindow.folded" class="o-mail-ChatWindow-command d-flex align-items-center h-100 px-3 py-0 m-0 opacity-50 opacity-100-hover" title="Show Call Settings" t-on-click.stop="toggleSettings" t-ref="toggleSettings">
                     <i class="fa fa-gear"/>
                 </div>
                 <div t-if="!env.isSmall" class="o-mail-ChatWindow-command d-flex align-items-center h-100 px-3 py-0 m-0 opacity-50 opacity-100-hover" title="Open in Discuss" t-on-click.stop="expand">
@@ -51,7 +48,6 @@
             <t t-if="thread">
                 <PinnedMessagesPanel t-if="state.activeMode === 'pinned-messages'" thread="thread"/>
                 <CallSettings t-elif="state.activeMode === 'in-settings'" thread="thread" className="'flex-grow-1'"/>
-                <ChannelMemberList t-elif="state.activeMode === 'member-list'" thread="thread" className="'o-mail-Discuss-channelMemberList flex-shrink-0 border-start w-100 h-100'"/>
                 <t t-else="">
                     <Call t-if="Object.keys(thread.rtcSessions).length > 0" thread="thread" compact="true"/>
                     <Thread isInChatWindow="true" thread="thread" t-key="thread.localId" messageEdition="messageEdition" messageToReplyTo="messageToReplyTo"/>

addons/mail/static/tests/discuss/channel_member_list_tests.js

@@ -1,4 +1,4 @@
-/** @odoo-module **/
+/* @odoo-module */
 
 import { click, start, startServer } from "@mail/../tests/helpers/test_utils";
 import { createLocalId } from "@mail/utils/misc";
@@ -41,7 +41,7 @@ QUnit.test(
         const { openDiscuss } = await start();
         await openDiscuss(channelId);
         await click("button[title='Show Member List']");
-        assert.containsOnce($, ".o-mail-ChannelMemberList");
+        assert.containsOnce($, ".o-discuss-ChannelMemberList");
     }
 );
 
@@ -59,9 +59,9 @@ QUnit.test("should have correct members in member list", async (assert) => {
     const { openDiscuss } = await start();
     await openDiscuss(channelId);
     await click("button[title='Show Member List']");
-    assert.containsN($, ".o-mail-ChannelMember", 2);
-    assert.containsOnce($, `.o-mail-ChannelMember:contains("${pyEnv.currentPartner.name}")`);
-    assert.containsOnce($, ".o-mail-ChannelMember:contains('Demo')");
+    assert.containsN($, ".o-discuss-ChannelMember", 2);
+    assert.containsOnce($, `.o-discuss-ChannelMember:contains("${pyEnv.currentPartner.name}")`);
+    assert.containsOnce($, ".o-discuss-ChannelMember:contains('Demo')");
 });
 
 QUnit.test(
@@ -99,7 +99,7 @@ QUnit.test("chat with member should be opened after clicking on channel member",
     const { openDiscuss } = await start();
     await openDiscuss(channelId);
     await click("button[title='Show Member List']");
-    await click(".o-mail-ChannelMember.cursor-pointer");
+    await click(".o-discuss-ChannelMember.cursor-pointer");
     assert.containsOnce($, ".o-mail-AutoresizeInput[title='Demo']");
 });
 
@@ -142,7 +142,7 @@ QUnit.test("Load more button should load more members", async (assert) => {
     pyEnv["discuss.channel"].write([channelId], { channel_member_ids });
     await click("button[title='Show Member List']");
     await click("button[title='Load more']");
-    assert.containsN($, ".o-mail-ChannelMember", 102);
+    assert.containsN($, ".o-discuss-ChannelMember", 102);
 });
 
 QUnit.test("Channel member count update after user joined", async (assert) => {

addons/mail/static/tests/discuss/crosstab/crosstab_tests.js

@@ -12,11 +12,11 @@ QUnit.test("Add member to channel", async (assert) => {
     const { openDiscuss } = await start();
     await openDiscuss(channelId);
     await click("button[title='Show Member List']");
-    assert.containsOnce($, ".o-mail-ChannelMember:contains(Mitchell Admin)");
+    assert.containsOnce($, ".o-discuss-ChannelMember:contains(Mitchell Admin)");
     await click("button[title='Add Users']");
     await click(".o-discuss-ChannelInvitation-selectable:contains(Harry)");
     await click("button[title='Invite to Channel']");
-    assert.containsOnce($, ".o-mail-ChannelMember:contains(Harry)");
+    assert.containsOnce($, ".o-discuss-ChannelMember:contains(Harry)");
 });
 
 QUnit.test("Remove member from channel", async (assert) => {
@@ -36,7 +36,7 @@ QUnit.test("Remove member from channel", async (assert) => {
     const { env, openDiscuss } = await start();
     await openDiscuss(channelId);
     await click("button[title='Show Member List']");
-    assert.containsOnce($, ".o-mail-ChannelMember:contains(Harry)");
+    assert.containsOnce($, ".o-discuss-ChannelMember:contains(Harry)");
     env.services.orm.call("discuss.channel", "action_unfollow", [channelId], {
         context: { mockedUserId: userId },
     });

addons/mail/static/tests/discuss/discuss_tests.js

@@ -0,0 +1,17 @@
+/* @odoo-module */
+
+import { click, start, startServer } from "@mail/../tests/helpers/test_utils";
+
+QUnit.module("discuss");
+
+QUnit.test("Member list and settings menu are exclusive", async (assert) => {
+    const pyEnv = await startServer();
+    const channelId = pyEnv["discuss.channel"].create({ name: "General" });
+    const { openDiscuss } = await start();
+    await openDiscuss(channelId);
+    await click("button[title='Show Member List']");
+    assert.containsOnce($, ".o-discuss-ChannelMemberList");
+    await click("button[title='Show Call Settings']");
+    assert.containsOnce($, ".o-mail-CallSettings");
+    assert.containsNone($, ".o-discuss-ChannelMemberList");
+});

addons/mail/static/tests/discuss_app/discuss_tests.js

@@ -1921,18 +1921,6 @@ QUnit.test("Create a direct message channel when clicking on start a meeting", a
     assert.containsOnce($, ".o-mail-Call");
 });
 
-QUnit.test("Member list and settings menu are exclusive", async (assert) => {
-    const pyEnv = await startServer();
-    const channelId = pyEnv["discuss.channel"].create({ name: "General" });
-    const { openDiscuss } = await start();
-    await openDiscuss(channelId);
-    await click("button[title='Show Member List']");
-    assert.containsOnce($, ".o-mail-ChannelMemberList");
-    await click("button[title='Show Call Settings']");
-    assert.containsOnce($, ".o-mail-CallSettings");
-    assert.containsNone($, ".o-mail-ChannelMemberList");
-});
-
 QUnit.test(
     "Correct breadcrumb when open discuss from chat window then see settings",
     async (assert) => {