JS No Longer Works for Theme Component

Development

AI-generated summary

In a discussion titled ‘JS No Longer Works for Theme Component’ under the Dev category, Turtle reports that JavaScript code previously working to apply CSS selectors based on trust levels in Discourse chat messages has stopped functioning. The code involves modifying the chat/message/info component to conditionally add CSS classes based on user group membership (e.g., trust_level_4). jahan_gagan suggests importing the @service decorator from @ember/service to fix the issue, noting that the current import @service currentUser may be invalid without it. Turtle confirms trying the fix but still can’t get it to work. NateDhaliwal asks for browser console errors to help diagnose the problem. jahan_gagan then recommends replacing the existing CSS with a corrected selector: .chat-message-info__username.trust_level_4--group, and removing the current CSS to avoid conflicts. The issue appears to stem from outdated or incorrect syntax in the JS or CSS, possibly due to changes in Discourse’s API or Ember version. Further debugging via browser console logs is recommended to pinpoint the exact error.

1

Continuing the discussion from A little help with a CSS selector?:

Hi,

A little bit ago I made this topic and the JavaScript for making CSS selectors for trust levels worked. It doesn’t work anymore. This is the JS…


import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => { 
  const allowedGroups = ["trust_level_4"]; // Add the groups you want to target
  const includeUsersField = ["username"]; // Use either "id" or "username"

  api.modifyClass("component:chat/message/info", (SuperClass) => {
    return class extends SuperClass {
      @service currentUser;

      get usernameClasses() {
        if (!this.currentUser) {
          return super.usernameClasses;
        }
        const allowedGroupClasses = this.currentUser.groups
          .filter((g) => allowedGroups.includes(g.name))
          .map((g) => `group--${g.name}`);

        const extraClasses = [
          ...allowedGroupClasses,
          ...includeUsersField.map((f) => `user--${this.currentUser[f]}`),
        ]
          .filter(Boolean)
          .join(" ");

        return super.usernameClasses + " " + extraClasses;
      }
    };
  });
})

And this is the CSS I was using…

.chat-message-info__username.group–trust_level_4 {
.chat-message-info__username__name {
color: blue;
}
}

Any ideas on how I can fix this?

Specifically, is there some Discourse update that I should know about or does this have to do with tl4 not being a primary group or something?

Thanks!

2

Just import the service decorator and it should work:

import { service } from "@ember/service";

Once that’s added, your @service currentUser will load correctly again.

3

Edit: I put it in the script but I still can’t get it work.

4

Could you share any errors in the browser console? That may help.

5

Could you try adding the following CSS after removing your current one?

.chat-message-info__username.group--trust_level_4 .chat-message-info__username__name {
  color: blue !important;
}