DEV: adds is-new-user and primary group class (#20322)

This commit also refactors chat-message-info to use glimmer.
This commit is contained in:
Joffrey JAFFEUX 2023-02-16 17:17:16 +01:00 committed by GitHub
parent 75b81b6854
commit 479c0a3051
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 152 additions and 74 deletions

View File

@ -1,7 +1,16 @@
<div class="chat-message-info">
<div
class="chat-message-info"
{{did-insert this.trackStatus}}
{{will-destroy this.stopTrackingStatus}}
>
{{#if @message.chat_webhook_event}}
{{#if @message.chat_webhook_event.username}}
<span class="chat-message-info__username {{this.usernameClasses}}">
<span
class={{concat-class
"chat-message-info__username"
this.usernameClasses
}}
>
{{@message.chat_webhook_event.username}}
</span>
{{/if}}
@ -12,7 +21,11 @@
{{else}}
<span
role="button"
class="chat-message-info__username {{this.usernameClasses}} clickable"
class={{concat-class
"chat-message-info__username"
this.usernameClasses
"clickable"
}}
data-user-card={{@message.user.username}}
>
<span class="chat-message-info__username__name">{{this.name}}</span>

View File

@ -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;
}
}

View File

@ -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`<ChatMessageInfo @message={{this.message}} />`);
@ -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`<ChatMessageInfo @message={{this.message}} />`);
@ -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`<ChatMessageInfo @message={{this.message}} />`);
@ -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`<ChatMessageInfo @message={{this.message}} />`);
@ -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`<ChatMessageInfo @message={{this.message}} />`);
@ -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`<ChatMessageInfo @message={{this.message}} />`);
@ -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`<ChatMessageInfo @message={{this.message}} />`);
@ -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`<ChatMessageInfo @message={{this.message}} />`);
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`<ChatMessageInfo @message={{this.message}} />`);
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();
});
});