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

This commit also refactors chat-message-info to use glimmer.

plugins/chat/assets/javascripts/discourse/components/chat-message-info.hbs

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

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

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`<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", {
+    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", {
+    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", {
+    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", {
+    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", {
+    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();
+  });
 });