diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/thread-list/item.hbs b/plugins/chat/assets/javascripts/discourse/components/chat/thread-list/item.hbs index e2e1f47864f..1e4511897e2 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat/thread-list/item.hbs +++ b/plugins/chat/assets/javascripts/discourse/components/chat/thread-list/item.hbs @@ -41,6 +41,7 @@
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/thread/participants.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/thread/participants.gjs new file mode 100644 index 00000000000..bac8b3152c6 --- /dev/null +++ b/plugins/chat/assets/javascripts/discourse/components/chat/thread/participants.gjs @@ -0,0 +1,54 @@ +import Component from "@glimmer/component"; +import ChatUserAvatar from "discourse/plugins/chat/discourse/components/chat/user-avatar"; +import I18n from "I18n"; + +export default class ChatThreadParticipants extends Component { + + + get showParticipants() { + if (this.includeOriginalMessageUser) { + return this.participantsUsers.length > 1; + } + + return this.participantsUsers.length > 0; + } + + get includeOriginalMessageUser() { + return this.args.includeOriginalMessageUser ?? true; + } + + get participantsUsers() { + if (this.includeOriginalMessageUser) { + return this.args.thread.preview.participantUsers; + } + + return this.args.thread.preview.participantUsers.filter((user) => { + return user.id !== this.args.thread.originalMessage.user.id; + }); + } + + get otherCountLabel() { + return I18n.t("chat.thread.participants_other_count", { + count: this.args.thread.preview.otherParticipantCount, + }); + } +} diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/thread/participants.hbs b/plugins/chat/assets/javascripts/discourse/components/chat/thread/participants.hbs deleted file mode 100644 index 800c915c378..00000000000 --- a/plugins/chat/assets/javascripts/discourse/components/chat/thread/participants.hbs +++ /dev/null @@ -1,21 +0,0 @@ -{{#if (gt @thread.preview.participantUsers.length 1)}} -
-
- {{#each @thread.preview.participantUsers as |user|}} - - {{/each}} -
- {{#if @thread.preview.otherParticipantCount}} -
- {{i18n - "chat.thread.participants_other_count" - count=@thread.preview.otherParticipantCount - }} -
- {{/if}} -
-{{/if}} \ No newline at end of file diff --git a/plugins/chat/assets/javascripts/discourse/lib/fabricators.js b/plugins/chat/assets/javascripts/discourse/lib/fabricators.js index 2bf8cac53dd..6dd45bb6bb8 100644 --- a/plugins/chat/assets/javascripts/discourse/lib/fabricators.js +++ b/plugins/chat/assets/javascripts/discourse/lib/fabricators.js @@ -137,6 +137,8 @@ function threadPreviewFabricator(args = {}) { last_reply_id: args.last_reply_id || sequence++, last_reply_created_at: args.last_reply_created_at || Date.now(), last_reply_excerpt: args.last_reply_excerpt || "This is a reply", + participant_count: args.participant_count ?? 0, + participant_users: args.participant_users ?? [], }); } diff --git a/plugins/chat/test/javascripts/components/chat-thread-participants-test.js b/plugins/chat/test/javascripts/components/chat-thread-participants-test.js new file mode 100644 index 00000000000..a3632b1cb71 --- /dev/null +++ b/plugins/chat/test/javascripts/components/chat-thread-participants-test.js @@ -0,0 +1,59 @@ +import { setupRenderingTest } from "discourse/tests/helpers/component-test"; +import hbs from "htmlbars-inline-precompile"; +import fabricators from "discourse/plugins/chat/discourse/lib/fabricators"; +import { render } from "@ember/test-helpers"; +import { module, test } from "qunit"; + +module( + "Discourse Chat | Component | ", + function (hooks) { + setupRenderingTest(hooks); + + test("no participants", async function (assert) { + this.thread = fabricators.thread(); + await render(hbs``); + + assert.dom(".chat-thread-participants").doesNotExist(); + }); + + test("includeOriginalMessageUser=true", async function (assert) { + const orignalMessageUser = fabricators.user({ username: "bob" }); + this.thread = fabricators.thread({ + original_message: fabricators.message({ user: orignalMessageUser }), + preview: fabricators.threadPreview({ + channel: this.channel, + participant_users: [ + orignalMessageUser, + fabricators.user({ username: "alice" }), + ], + }), + }); + + await render(hbs``); + + assert.dom('.chat-user-avatar [data-user-card="bob"]').exists(); + assert.dom('.chat-user-avatar [data-user-card="alice"]').exists(); + }); + + test("includeOriginalMessageUser=false", async function (assert) { + const orignalMessageUser = fabricators.user({ username: "bob" }); + this.thread = fabricators.thread({ + original_message: fabricators.message({ user: orignalMessageUser }), + preview: fabricators.threadPreview({ + channel: this.channel, + participant_users: [ + orignalMessageUser, + fabricators.user({ username: "alice" }), + ], + }), + }); + + await render( + hbs`` + ); + + assert.dom('.chat-user-avatar [data-user-card="bob"]').doesNotExist(); + assert.dom('.chat-user-avatar [data-user-card="alice"]').exists(); + }); + } +);