UX: Update Chat Group Name and Placeholder (#28703)

* UX: Update Chat Group Name and Placeholder

* update tests

* fix failing tests

* better checking of system user when setting dm title

plugins/chat/app/models/chat/direct_message.rb

@@ -34,7 +34,9 @@ module Chat
       return chat_channel.name if group && chat_channel.name.present?
 
       users =
-        (direct_message_users.map(&:user) - [acting_user]).map { |user| user || Chat::NullUser.new }
+        (direct_message_users.map(&:user) - [acting_user])
+          .map { |user| user || Chat::NullUser.new }
+          .reject { |u| u.is_system_user? }
 
       # direct message to self
       if users.empty?
@@ -45,13 +47,13 @@ module Chat
       return chat_channel.id if !users.first
 
       usernames_formatted = users.sort_by(&:username).map { |u| "@#{u.username}" }
-      if usernames_formatted.size > 5
+      if usernames_formatted.size > 7
         return(
           I18n.t(
             "chat.channel.dm_title.multi_user_truncated",
             comma_separated_usernames:
-              usernames_formatted[0..4].join(I18n.t("word_connector.comma")),
-            count: usernames_formatted.length - 5,
+              usernames_formatted[0..5].join(I18n.t("word_connector.comma")),
+            count: usernames_formatted.length - 6,
           )
         )
       end

plugins/chat/assets/javascripts/discourse/components/chat/composer/channel.js

@@ -81,10 +81,8 @@ export default class ChatComposerChannel extends ChatComposer {
 
   #messageRecipients(channel) {
     if (channel.isDirectMessageChannel) {
-      if (channel.chatable.group && channel.title) {
-        return I18n.t("chat.placeholder_channel", {
-          channelName: `#${channel.title}`,
-        });
+      if (channel.chatable.group) {
+        return I18n.t("chat.placeholder_group");
       } else {
         const directMessageRecipients = channel.chatable.users;
         if (

plugins/chat/config/locales/client.en.yml

@@ -251,6 +251,7 @@ en:
       placeholder_channel: "Chat in %{channelName}"
       placeholder_thread: "Chat in thread"
       placeholder_users: "Chat with %{commaSeparatedNames}"
+      placeholder_group: "Chat in group"
       placeholder_new_message_disallowed:
         archived: "Channel is archived, you cannot send new messages right now."
         closed: "Channel is closed, you cannot send new messages right now."

plugins/chat/spec/models/chat/direct_message_spec.rb

@@ -24,11 +24,11 @@ describe Chat::DirectMessage do
       )
     end
 
-    it "returns a nicely formatted truncated name if it's more than 5 users" do
+    it "returns a nicely formatted truncated name if it's more than 7 users" do
       user3 = Fabricate.build(:user, username: "chatdmregent")
 
       users = [user1, user2, user3].concat(
-        5.times.map { |i| Fabricate(:user, username: "chatdmuser#{i}") },
+        6.times.map { |i| Fabricate(:user, username: "chatdmuser#{i}") },
       )
       direct_message = Fabricate(:direct_message, users: users)
 
@@ -36,7 +36,7 @@ describe Chat::DirectMessage do
         I18n.t(
           "chat.channel.dm_title.multi_user_truncated",
           comma_separated_usernames:
-            users[1..5]
+            users[1..6]
               .sort_by(&:username)
               .map { |u| "@#{u.username}" }
               .join(I18n.t("word_connector.comma")),

plugins/chat/test/javascripts/components/chat-composer-placeholder-test.js

@@ -4,6 +4,7 @@ import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
 import pretender from "discourse/tests/helpers/create-pretender";
 import { query } from "discourse/tests/helpers/qunit-helpers";
+import I18n from "discourse-i18n";
 import ChatChannel from "discourse/plugins/chat/discourse/models/chat-channel";
 
 module(
@@ -30,13 +31,13 @@ module(
       );
     });
 
-    test("direct message to multiple folks shows their names", async function (assert) {
+    test("direct message to multiple folks shows their names when not a group", async function (assert) {
       pretender.get("/chat/emojis.json", () => [200, [], {}]);
 
       this.channel = ChatChannel.create({
         chatable_type: "DirectMessage",
         chatable: {
-          group: true,
+          group: false,
           users: [
             { name: "Tomtom" },
             { name: "Steaky" },
@@ -53,6 +54,30 @@ module(
       );
     });
 
+    test("direct message to group shows Chat in group", async function (assert) {
+      pretender.get("/chat/emojis.json", () => [200, [], {}]);
+
+      this.channel = ChatChannel.create({
+        chatable_type: "DirectMessage",
+        title: "Meetup Chat",
+        chatable: {
+          group: true,
+          users: [
+            { username: "user1" },
+            { username: "user2" },
+            { username: "user3" },
+          ],
+        },
+      });
+
+      await render(hbs`<Chat::Composer::Channel @channel={{this.channel}} />`);
+
+      assert.strictEqual(
+        query(".chat-composer__input").placeholder,
+        I18n.t("chat.placeholder_group")
+      );
+    });
+
     test("message to channel shows send message to channel name", async function (assert) {
       pretender.get("/chat/emojis.json", () => [200, [], {}]);