[IMP] mail: dynamic placeholder for text input

PURPOSE

The motive is to change dynamic placeholder by giving context to the user for
indicating whom he/she is writing.

SPECIFICATION

Changing placeholder "Write Something..." by "Message person/group..." for chat
and "Message #channel..." for channel.

LINKS

PR https://github.com/odoo/odoo/pull/60582
Task-2361155

closes odoo/odoo#60582

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

addons/mail/static/src/components/composer/composer_tests.js

@@ -126,7 +126,7 @@ QUnit.test('composer text input: basic rendering when logging note', async funct
 });
 
 QUnit.test('composer text input: basic rendering when linked thread is a mail.channel', async function (assert) {
-    assert.expect(5);
+    assert.expect(4);
 
     await this.start();
     const thread = this.env.models['mail.thread'].create({
@@ -153,10 +153,48 @@ QUnit.test('composer text input: basic rendering when linked thread is a mail.ch
         1,
         "should have editable part inside composer text input"
     );
+});
+
+QUnit.test('composer text input placeholder should contain channel name when thread does not have specific correspondent', async function (assert) {
+    assert.expect(1);
+
+    this.data['mail.channel'].records.push({
+        channel_type: 'channel',
+        id: 20,
+        name: 'General',
+    });
+    await this.start();
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel',
+    });
+    await this.createComposerComponent(thread.composer);
     assert.strictEqual(
         document.querySelector(`.o_ComposerTextInput_textarea`).placeholder,
-        "Write something...",
-        "should have 'Write something...' as placeholder in composer text input if composer is for a 'mail.channel'"
+        "Message #General...",
+        "should have 'Message #General...' as placeholder for composer text input when thread does not have specific correspondent"
+    );
+});
+
+QUnit.test('composer text input placeholder should contain correspondent name when thread has exactly one correspondent', async function (assert) {
+    assert.expect(1);
+
+    this.data['res.partner'].records.push({ id: 7, name: 'Marc Demo' });
+    this.data['mail.channel'].records.push({
+        channel_type: 'chat',
+        id: 20,
+        members: [this.data.currentPartnerId, 7],
+    });
+    await this.start();
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel',
+    });
+    await this.createComposerComponent(thread.composer);
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).placeholder,
+        "Message Marc Demo...",
+        "should have 'Message Marc Demo...' as placeholder for composer text input when thread has exactly one correspondent"
     );
 });
 

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

@@ -24,9 +24,13 @@ class ComposerTextInput extends Component {
         super(...args);
         useStore(props => {
             const composer = this.env.models['mail.composer'].get(props.composerLocalId);
+            const thread = composer && composer.thread;
+            const correspondent = thread ? thread.correspondent : undefined;
             return {
                 composer: composer ? composer.__state : undefined,
+                correspondent: correspondent ? correspondent.__state : undefined,
                 isDeviceMobile: this.env.messaging.device.isMobile,
+                thread: thread ? thread.__state : undefined,
             };
         });
         /**
@@ -63,13 +67,19 @@ class ComposerTextInput extends Component {
         if (!this.composer) {
             return "";
         }
-        if (this.composer.thread && this.composer.thread.model !== 'mail.channel') {
-            if (this.composer.isLog) {
-                return this.env._t("Log an internal note...");
-            }
-            return this.env._t("Send a message to followers...");
+        if (!this.composer.thread) {
+            return "";
         }
-        return this.env._t("Write something...");
+        if (this.composer.thread.model === 'mail.channel') {
+            if (this.composer.thread.correspondent) {
+                return _.str.sprintf("Message %s...", this.composer.thread.correspondent.nameOrDisplayName)
+            }
+            return _.str.sprintf("Message #%s...", this.composer.thread.displayName);
+        }
+        if (this.composer.isLog) {
+            return this.env._t("Log an internal note...");
+        }
+        return this.env._t("Send a message to followers...");
     }
 
     focus() {