From 479c0a3051210da82b127c31088926c4f2a1074a Mon Sep 17 00:00:00 2001 From: Joffrey JAFFEUX Date: Thu, 16 Feb 2023 17:17:16 +0100 Subject: [PATCH] DEV: adds is-new-user and primary group class (#20322) This commit also refactors chat-message-info to use glimmer. --- .../components/chat-message-info.hbs | 19 ++- .../discourse/components/chat-message-info.js | 91 +++++++------- .../components/chat-message-info-test.js | 116 +++++++++++++----- 3 files changed, 152 insertions(+), 74 deletions(-) diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-message-info.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-message-info.hbs index efea5081cd5..2520c2186bb 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat-message-info.hbs +++ b/plugins/chat/assets/javascripts/discourse/components/chat-message-info.hbs @@ -1,7 +1,16 @@ -
+
{{#if @message.chat_webhook_event}} {{#if @message.chat_webhook_event.username}} - + {{@message.chat_webhook_event.username}} {{/if}} @@ -12,7 +21,11 @@ {{else}} {{this.name}} diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-message-info.js b/plugins/chat/assets/javascripts/discourse/components/chat-message-info.js index 9bb31d6f4ce..c33af19bca0 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat-message-info.js +++ b/plugins/chat/assets/javascripts/discourse/components/chat-message-info.js @@ -1,57 +1,27 @@ -import { computed } from "@ember/object"; -import Component from "@ember/component"; +import Component from "@glimmer/component"; import { prioritizeNameInUx } from "discourse/lib/settings"; +import { inject as service } from "@ember/service"; +import { bind } from "discourse-common/utils/decorators"; export default class ChatMessageInfo extends Component { - tagName = ""; - message = null; - details = null; + @service siteSettings; - didInsertElement() { - this._super(...arguments); - this.message.user?.trackStatus?.(); + @bind + trackStatus() { + this.#user?.trackStatus?.(); } - willDestroyElement() { - this._super(...arguments); - this.message.user?.stopTrackingStatus?.(); + @bind + stopTrackingStatus() { + this.#user?.stopTrackingStatus?.(); } - @computed("message.user") - get name() { - return this.prioritizeName - ? this.message.user.name - : this.message.user.username; - } - - @computed("message.reviewable_id", "message.user_flag_status") - get isFlagged() { - return this.message?.reviewable_id || this.message?.user_flag_status === 0; - } - - @computed("message.user.name") - get prioritizeName() { - return ( - this.siteSettings.display_name_on_posts && - prioritizeNameInUx(this.message?.user?.name) - ); - } - - @computed("message.user.status") - get showStatus() { - return !!this.message.user?.status; - } - - @computed("message.user") get usernameClasses() { - const user = this.message?.user; - + const user = this.#user; const classes = this.prioritizeName ? ["is-full-name"] : ["is-username"]; - if (!user) { return classes; } - if (user.staff) { classes.push("is-staff"); } @@ -64,7 +34,44 @@ export default class ChatMessageInfo extends Component { if (user.groupModerator) { classes.push("is-category-moderator"); } - + if (user.new_user) { + classes.push("is-new-user"); + } + if (user.primary_group_name) { + classes.push("group--" + user.primary_group_name); + } return classes.join(" "); } + + get name() { + return this.prioritizeName + ? this.#user?.get("name") + : this.#user?.get("username"); + } + + get isFlagged() { + return ( + this.#message?.get("reviewable_id") || + this.#message?.get("user_flag_status") === 0 + ); + } + + get prioritizeName() { + return ( + this.siteSettings.display_name_on_posts && + prioritizeNameInUx(this.#user?.get("name")) + ); + } + + get showStatus() { + return !!this.#user?.get("status"); + } + + get #user() { + return this.#message?.get("user"); + } + + get #message() { + return this.args.message; + } } diff --git a/plugins/chat/test/javascripts/components/chat-message-info-test.js b/plugins/chat/test/javascripts/components/chat-message-info-test.js index 4fea2ebd07e..989656e8033 100644 --- a/plugins/chat/test/javascripts/components/chat-message-info-test.js +++ b/plugins/chat/test/javascripts/components/chat-message-info-test.js @@ -4,14 +4,17 @@ import hbs from "htmlbars-inline-precompile"; import { exists, query } from "discourse/tests/helpers/qunit-helpers"; import I18n from "I18n"; import { module, test } from "qunit"; -import User from "discourse/models/user"; import { render } from "@ember/test-helpers"; +import ChatMessage from "discourse/plugins/chat/discourse/models/chat-message"; module("Discourse Chat | Component | chat-message-info", function (hooks) { setupRenderingTest(hooks); test("chat_webhook_event", async function (assert) { - this.set("message", { chat_webhook_event: { username: "discobot" } }); + this.set( + "message", + ChatMessage.create({ chat_webhook_event: { username: "discobot" } }) + ); await render(hbs``); @@ -26,7 +29,7 @@ module("Discourse Chat | Component | chat-message-info", function (hooks) { }); test("user", async function (assert) { - this.set("message", { user: { username: "discobot" } }); + this.set("message", ChatMessage.create({ user: { username: "discobot" } })); await render(hbs``); @@ -37,10 +40,13 @@ module("Discourse Chat | Component | chat-message-info", function (hooks) { }); test("date", async function (assert) { - this.set("message", { - user: { username: "discobot" }, - created_at: moment(), - }); + this.set( + "message", + ChatMessage.create({ + user: { username: "discobot" }, + created_at: moment(), + }) + ); await render(hbs``); @@ -48,13 +54,16 @@ module("Discourse Chat | Component | chat-message-info", function (hooks) { }); test("bookmark (with reminder)", async function (assert) { - this.set("message", { - user: { username: "discobot" }, - bookmark: Bookmark.create({ - reminder_at: moment(), - name: "some name", - }), - }); + this.set( + "message", + ChatMessage.create({ + user: { username: "discobot" }, + bookmark: Bookmark.create({ + reminder_at: moment(), + name: "some name", + }), + }) + ); await render(hbs``); @@ -64,12 +73,15 @@ module("Discourse Chat | Component | chat-message-info", function (hooks) { }); test("bookmark (no reminder)", async function (assert) { - this.set("message", { - user: { username: "discobot" }, - bookmark: Bookmark.create({ - name: "some name", - }), - }); + this.set( + "message", + ChatMessage.create({ + user: { username: "discobot" }, + bookmark: Bookmark.create({ + name: "some name", + }), + }) + ); await render(hbs``); @@ -78,7 +90,7 @@ module("Discourse Chat | Component | chat-message-info", function (hooks) { test("user status", async function (assert) { const status = { description: "off to dentist", emoji: "tooth" }; - this.set("message", { user: User.create({ status }) }); + this.set("message", ChatMessage.create({ user: { status } })); await render(hbs``); @@ -86,10 +98,13 @@ module("Discourse Chat | Component | chat-message-info", function (hooks) { }); test("reviewable", async function (assert) { - this.set("message", { - user: { username: "discobot" }, - user_flag_status: 0, - }); + this.set( + "message", + ChatMessage.create({ + user: { username: "discobot" }, + user_flag_status: 0, + }) + ); await render(hbs``); @@ -98,14 +113,57 @@ module("Discourse Chat | Component | chat-message-info", function (hooks) { I18n.t("chat.you_flagged") ); - this.set("message", { - user: { username: "discobot" }, - reviewable_id: 1, - }); + this.set( + "message", + ChatMessage.create({ + user: { username: "discobot" }, + reviewable_id: 1, + }) + ); assert.strictEqual( query(".chat-message-info__flag a .svg-icon-title").title, I18n.t("chat.flagged") ); }); + + test("with username classes", async function (assert) { + this.set( + "message", + ChatMessage.create({ + user: { + username: "discobot", + admin: true, + moderator: true, + groupModerator: true, + new_user: true, + primary_group_name: "foo", + }, + }) + ); + + await render(hbs``); + + assert.dom(".chat-message-info__username.is-staff").exists(); + assert.dom(".chat-message-info__username.is-admin").exists(); + assert.dom(".chat-message-info__username.is-moderator").exists(); + assert.dom(".chat-message-info__username.is-category-moderator ").exists(); + assert.dom(".chat-message-info__username.is-new-user").exists(); + assert.dom(".chat-message-info__username.group--foo").exists(); + }); + + test("without username classes", async function (assert) { + this.set("message", ChatMessage.create({ user: { username: "discobot" } })); + + await render(hbs``); + + assert.dom(".chat-message-info__username.is-staff").doesNotExist(); + assert.dom(".chat-message-info__username.is-admin").doesNotExist(); + assert.dom(".chat-message-info__username.is-moderator").doesNotExist(); + assert + .dom(".chat-message-info__username.is-category-moderator ") + .doesNotExist(); + assert.dom(".chat-message-info__username.is-new-user").doesNotExist(); + assert.dom(".chat-message-info__username.group--foo").doesNotExist(); + }); });