[REF] mail: move CallSettings code to discuss folder

Part of task-3265211

closes odoo/odoo#120314

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

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

@@ -1,13 +1,13 @@
 /* @odoo-module */
 
-import { Component, onWillStart, useExternalListener, useState } from "@odoo/owl";
 import { useRtc } from "@mail/rtc/rtc_hook";
-import { useService } from "@web/core/utils/hooks";
+import { Component, onWillStart, useExternalListener, useState } from "@odoo/owl";
 import { browser } from "@web/core/browser/browser";
 import { _t } from "@web/core/l10n/translation";
+import { useService } from "@web/core/utils/hooks";
 
 export class CallSettings extends Component {
-    static template = "mail.CallSettings";
+    static template = "discuss.CallSettings";
     static props = ["thread", "className?"];
 
     setup() {

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

@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates xml:space="preserve">
 
-    <t t-name="mail.CallSettings" owl="1">
-        <div class="o-mail-CallSettings py-2 user-select-none bg-light" t-attf-class="{{ props.className }}" t-ref="root">
+    <t t-name="discuss.CallSettings" owl="1">
+        <div class="o-discuss-CallSettings py-2 user-select-none bg-light" t-attf-class="{{ props.className }}" t-ref="root">
             <div class="d-flex flex-column px-3 overflow-auto">
                 <div class="py-2 fw-bolder text-700 text-truncate text-uppercase">Voice Settings</div>
                 <div class="mb-3 d-flex align-items-center flex-wrap">

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

@@ -1,5 +1,6 @@
 /* @odoo-module */
 
+import { CallSettings } from "@mail/discuss/call_settings";
 import { ChannelInvitation } from "@mail/discuss/channel_invitation";
 import { ChannelMemberList } from "@mail/discuss/channel_member_list";
 import { Discuss } from "@mail/discuss_app/discuss";
@@ -8,7 +9,7 @@ import { usePopover } from "@web/core/popover/popover_hook";
 import { patch } from "@web/core/utils/patch";
 
 patch(Discuss, "discuss", {
-    components: { ...Discuss.components, ChannelMemberList },
+    components: { ...Discuss.components, CallSettings, ChannelMemberList },
 });
 
 patch(Discuss.prototype, "discuss", {
@@ -37,4 +38,8 @@ patch(Discuss.prototype, "discuss", {
                 ? this.MODES.NONE
                 : this.MODES.MEMBER_LIST;
     },
+    toggleSettings() {
+        this.state.activeMode =
+            this.state.activeMode === this.MODES.SETTINGS ? this.MODES.NONE : this.MODES.SETTINGS;
+    },
 });

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

@@ -1,3 +1,7 @@
+.o-mail-Discuss-callSettings {
+    width: 300px;
+}
+
 .o-mail-Discuss-channelMemberList {
     width: $o-mail-Discuss-inspector;
 }

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

@@ -8,9 +8,13 @@
             <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>
         </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'"/>
+            <CallSettings t-if="thread.allowCalls and state.activeMode === MODES.SETTINGS" thread="thread" className="'o-mail-Discuss-callSettings border-start'"/>
         </xpath>
     </t>
 </templates>

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

@@ -1,12 +1,13 @@
 /* @odoo-module */
 
+import { CallSettings } from "@mail/discuss/call_settings";
 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, ChannelMemberList },
+    components: { ...ChatWindow.components, CallSettings, ChannelInvitation, ChannelMemberList },
 });
 
 patch(ChatWindow.prototype, "discuss", {
@@ -16,4 +17,7 @@ patch(ChatWindow.prototype, "discuss", {
     toggleMemberList() {
         this.state.activeMode = this.state.activeMode === "member-list" ? "" : "member-list";
     },
+    toggleSettings() {
+        this.state.activeMode = this.state.activeMode === "in-settings" ? "" : "in-settings";
+    },
 });

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

@@ -6,12 +6,16 @@
                 <i class="fa fa-lg fa-user-plus"/>
             </div>
         </xpath>
-        <xpath expr="//*[@t-ref='toggleSettings']" position="before">
+        <xpath expr="//*[@t-ref='expand']" 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>
+            <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">
+                <i class="fa fa-gear"/>
+            </div>
         </xpath>
-        <xpath expr="//CallSettings" position="after">
+        <xpath expr="//PinnedMessagesPanel" position="after">
+            <CallSettings t-elif="state.activeMode === 'in-settings'" thread="thread" className="'flex-grow-1'"/>
             <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>

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

@@ -18,7 +18,6 @@ import {
     useState,
     useEffect,
 } from "@odoo/owl";
-import { CallSettings } from "../rtc/call_settings";
 import { useService } from "@web/core/utils/hooks";
 import { _t } from "@web/core/l10n/translation";
 import { PinnedMessagesPanel } from "./pinned_messages_panel";
@@ -30,7 +29,6 @@ export class Discuss extends Component {
         ThreadIcon,
         Composer,
         Call,
-        CallSettings,
         PinnedMessagesPanel,
     };
     static props = {
@@ -109,11 +107,6 @@ export class Discuss extends Component {
                 : this.MODES.PINNED_MESSAGES;
     }
 
-    toggleSettings() {
-        this.state.activeMode =
-            this.state.activeMode === this.MODES.SETTINGS ? this.MODES.NONE : this.MODES.SETTINGS;
-    }
-
     async renameThread({ value: name }) {
         const newName = name.trim();
         if (

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

@@ -8,10 +8,6 @@
     }
 }
 
-.o-mail-Discuss-callSettings {
-    width: 300px;
-}
-
 .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.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>
                     <div t-if="props.public and !store.isSmall" class="d-flex align-items-center">
                         <img class="o-mail-Discuss-selfAvatar mx-1 rounded-circle o_object_fit_cover flex-shrink-0" alt="Avatar" t-att-src="threadService.avatarUrl(store.self, thread)"/>
                         <div class="lead fw-bold flex-shrink-1 text-dark">
@@ -58,7 +55,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"/>
-                <CallSettings t-if="thread.allowCalls and state.activeMode === MODES.SETTINGS" thread="thread" className="'o-mail-Discuss-callSettings border-start'"/>
             </div>
         </div>
         <div t-if="!thread and (!store.isSmall or store.discuss.activeTab === 'mailbox')" class="d-flex flex-grow-1 align-items-center justify-content-center w-100 bg-view">

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

@@ -9,7 +9,6 @@ import { useMessageEdition, useMessageHighlight, useMessageToReplyTo } from "@ma
 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 { ThreadIcon } from "@mail/discuss_app/thread_icon";
 import { isEventHandled } from "@mail/utils/misc";
 import { ChannelSelector } from "@mail/discuss_app/channel_selector";
@@ -28,7 +27,6 @@ export class ChatWindow extends Component {
         Thread,
         ChannelSelector,
         Composer,
-        CallSettings,
         ThreadIcon,
         PinnedMessagesPanel,
     };
@@ -128,10 +126,6 @@ export class ChatWindow extends Component {
             this.state.activeMode === "pinned-messages" ? "" : "pinned-messages";
     }
 
-    toggleSettings() {
-        this.state.activeMode = this.state.activeMode === "in-settings" ? "" : "in-settings";
-    }
-
     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.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">
+                <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" t-ref="expand">
                     <i class="fa fa-expand"/>
                 </div>
             </t>
@@ -47,7 +44,6 @@
         <div t-if="!props.chatWindow.folded" class="o-mail-ChatWindow-content bg-view d-flex flex-column h-100 overflow-auto border-start border-end" t-ref="content">
             <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'"/>
                 <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/call_settings_menu_tests.js

@@ -32,7 +32,7 @@ QUnit.test("Renders the call settings", async (assert) => {
     const { openDiscuss } = await start();
     await openDiscuss(channelId);
     await click(".o-mail-Discuss-header .fa-gear");
-    assert.containsOnce($, ".o-mail-CallSettings", "Should have a call settings menu");
+    assert.containsOnce($, ".o-discuss-CallSettings", "Should have a call settings menu");
     assert.containsOnce($, "label[aria-label='Input device']");
     assert.containsOnce($, "option[value=mockAudioDeviceId]");
     assert.containsNone($, "option[value=mockVideoDeviceId]");
@@ -106,6 +106,6 @@ QUnit.test(
         await click("button[title='Show Call Settings']");
         await click("button:contains(Inbox)");
         assert.containsNone($, "button[title='Hide Call Settings']");
-        assert.containsNone($, ".o-mail-CallSettings");
+        assert.containsNone($, ".o-discuss-CallSettings");
     }
 );

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

@@ -12,6 +12,6 @@ QUnit.test("Member list and settings menu are exclusive", async (assert) => {
     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.containsOnce($, ".o-discuss-CallSettings");
     assert.containsNone($, ".o-discuss-ChannelMemberList");
 });