[FIX] mail: more friendly pin message dialog

Task-3347745

closes odoo/odoo#124032

X-original-commit: 860ce3a
Signed-off-by: Louis Wicket (wil) <wil@odoo.com>
Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>

addons/mail/static/src/core/thread_model.js

@@ -347,6 +347,10 @@ export class Thread {
         return this.messages.filter((message) => !message.isTransient);
     }
 
+    get prefix() {
+        return this.isChatChannel ? "@" : "#";
+    }
+
     get lastSelfMessageSeenByEveryone() {
         const otherSeenInfos = [...this.seenInfos].filter(
             (seenInfo) => seenInfo.partner.id !== this._store.self?.id

addons/mail/static/src/core_ui/message.xml

@@ -52,7 +52,7 @@
                                     on <a t-att-href="message.url"><t t-esc="message.originThread?.displayName"/></a>
                                 </t>
                                 <t t-if="message.resModel === 'discuss.channel'">
-                                    (from <a t-att-href="message.url">#<t t-esc="message.originThread?.displayName"/></a>)
+                                    (from <a t-att-href="message.url"><t t-esc="message.originThread?.prefix"/><t t-esc="message.originThread?.displayName"/></a>)
                                 </t>
                             </small>
                             <div t-if="props.message.scheduledDate" t-att-class="{ 'ms-2': props.isInChatWindow and isAlignedRight }" t-att-title="messageService.scheduledDateSimple(props.message)">

addons/mail/static/src/core_ui/message_confirm_dialog.js

@@ -8,13 +8,28 @@ import { useService } from "@web/core/utils/hooks";
 
 export class MessageConfirmDialog extends Component {
     static components = { Dialog };
-    static props = ["close", "message", "messageComponent", "prompt", "onConfirm"];
+    static props = [
+        "close",
+        "confirmColor?",
+        "confirmText?",
+        "message",
+        "messageComponent",
+        "prompt",
+        "size?",
+        "title?",
+        "onConfirm",
+    ];
+    static defaultProps = {
+        confirmColor: "btn-primary",
+        confirmText: _t("Confirm"),
+        size: "xl",
+        title: _t("Confirmation"),
+    };
     static template = "mail.MessageConfirmDialog";
 
     setup() {
         /** @type {import("@mail/core/message_service").MessageService} */
         this.messageService = useState(useService("mail.message"));
-        this.title = _t("Confirmation");
     }
 
     onClickConfirm() {

addons/mail/static/src/core_ui/message_confirm_dialog.xml

@@ -2,13 +2,13 @@
 <templates xml:space="preserve">
 
 <t t-name="mail.MessageConfirmDialog" owl="1">
-    <Dialog size="'xl'" title="title">
+    <Dialog size="props.size" title="props.title">
         <p class="mx-3 mb-3" t-esc="props.prompt"/>
         <blockquote class="mx-3 mb-3 fst-normal" style="pointer-events:none;">
             <t t-component="props.messageComponent" message="props.message" hasActions="false"/>
         </blockquote>
         <t t-set-slot="footer">
-            <button class="btn btn-primary me-2" t-on-click="onClickConfirm">Confirm</button>
+            <button class="btn me-2" t-att-class="props.confirmColor" t-on-click="onClickConfirm" t-out="props.confirmText"/>
             <button class="btn btn-secondary me-2" t-on-click="props.close">Cancel</button>
         </t>
     </Dialog>

addons/mail/static/src/discuss/message_pin/message_patch.js

@@ -5,6 +5,7 @@ import { MessageConfirmDialog } from "@mail/core_ui/message_confirm_dialog";
 import { useMessagePinService } from "@mail/discuss/message_pin/message_pin_service";
 import { _t } from "@web/core/l10n/translation";
 import { patch } from "@web/core/utils/patch";
+import { sprintf } from "@web/core/utils/strings";
 
 patch(Message, "discuss/message_pin", {
     components: { ...Message.components },
@@ -16,15 +17,21 @@ patch(Message.prototype, "discuss/message_pin", {
         this.messagePinService = useMessagePinService();
     },
     onClickPin() {
-        const prompt = this.messagePinService.getPinnedAt(this.message.id)
-            ? _t("Are you sure you want to remove this pinned message?")
-            : _t(
-                  "The following message will be pinned to the channel. Are you sure you want to continue?"
-              );
+        const pinnedAt = this.messagePinService.getPinnedAt(this.message.id);
+        const thread = this.message.originThread;
         this.env.services.dialog.add(MessageConfirmDialog, {
+            confirmColor: pinnedAt ? "btn-danger" : undefined,
+            confirmText: pinnedAt ? _t("Yes, remove it please") : _t("Yeah, pin it!"),
             message: this.message,
             messageComponent: Message,
-            prompt,
+            prompt: pinnedAt
+                ? _t("Well nothing lasts forever, but are you sure you want to unpin this message?")
+                : sprintf(
+                      _t("You sure want this message pinned to %(conversation)s forever and ever?"),
+                      { conversation: thread.prefix + thread.displayName }
+                  ),
+            size: "md",
+            title: pinnedAt ? _t("Unpin Message") : _t("Pin It"),
             onConfirm: () =>
                 this.messagePinService.setPin(
                     this.message,

addons/mail/static/tests/discuss/message_pin/pinned_messages_tests.js

@@ -22,7 +22,7 @@ QUnit.test("Pin message", async (assert) => {
     );
     await click(".o-mail-Message [title='Expand']");
     await click(".dropdown-item:contains(Pin)");
-    await click(".modal-footer button:contains(Confirm)");
+    await click(".modal-footer button:contains(pin it)");
     assert.containsOnce($, ".o-discuss-PinnedMessagesPanel .o-mail-Message:contains(Hello world)");
 });
 
@@ -41,7 +41,7 @@ QUnit.test("Unpin message", async (assert) => {
     assert.containsOnce($, ".o-discuss-PinnedMessagesPanel .o-mail-Message");
     await click(".o-mail-Message [title='Expand']");
     await click(".dropdown-item:contains(Unpin)");
-    await click(".modal-footer button:contains(Confirm)");
+    await click(".modal-footer button:contains(Yes)");
     assert.containsNone($, ".o-discuss-PinnedMessagesPanel .o-mail-Message");
 });
 
@@ -77,7 +77,7 @@ QUnit.test("Open pinned panel from notification", async (assert) => {
     await openDiscuss(channelId);
     await click(".o-mail-Message:eq(0) [title='Expand']");
     await click(".dropdown-item:contains(Pin)");
-    await click(".modal-footer button:contains(Confirm)");
+    await click(".modal-footer button:contains(pin it)");
     assert.containsNone($, ".o-discuss-PinnedMessagesPanel");
     await click(".o_mail_notification a:contains(See all pinned messages)");
     assert.containsOnce($, ".o-discuss-PinnedMessagesPanel");
@@ -140,7 +140,7 @@ QUnit.test("Jump to message from notification", async (assert) => {
     await openDiscuss(channelId);
     await click(".o-mail-Message:eq(0) [title='Expand']");
     await click(".dropdown-item:contains(Pin)");
-    await click(".modal-footer button:contains(Confirm)");
+    await click(".modal-footer button:contains(pin it)");
     await click(".o_mail_notification a:contains(message)");
     await nextTick();
     assert.isVisible($(".o-mail-Message:contains(Hello world!)"));