DEV: glimmerify chat-channel-row

plugins/chat/assets/javascripts/discourse/components/chat-channel-row.hbs

@@ -1,15 +1,34 @@
-<LinkTo @route="chat.channel" @models={{array this.channel.id (or this.channel.slug "-")}} class={{this.rowClassNames}} id={{concat "chat-channel-row-" this.channel.id}} tabindex="0" data-chat-channel-id={{this.channel.id}}>
-  <ChatChannelTitle @channel={{this.channel}} />
-  <ChatChannelMetadata @channel={{this.channel}} @unreadIndicator={{true}} />
+<LinkTo
+  @route="chat.channel"
+  @models={{array @channel.id (or @channel.slug "-")}}
+  class={{concat-class
+    "chat-channel-row"
+    (if @channel.focused "focused")
+    (if @channel.current_user_membership.muted "muted")
+    (if @options.leaveButton "can-leave")
+    (if (eq this.chat.activeChannel.id @channel.id) "active")
+    (if this.channelHasUnread "has-unread")
+  }}
+  tabindex="0"
+  data-chat-channel-id={{@channel.id}}
+  {{did-insert this.startTrackingStatus}}
+  {{will-destroy this.stopTrackingStatus}}
+>
+  <ChatChannelTitle @channel={{@channel}} />
+  <ChatChannelMetadata @channel={{@channel}} @unreadIndicator={{true}} />
 
-  {{#if (and this.options.leaveButton this.channel.isFollowing (not this.site.mobileView))}}
+  {{#if (and @options.leaveButton @channel.isFollowing this.site.desktopView)}}
     <ToggleChannelMembershipButton
-      @channel={{this.channel}}
+      @channel={{@channel}}
       @options={{hash
         leaveClass="btn-flat chat-channel-leave-btn"
         labelType="none"
         leaveIcon="times"
-        leaveTitle=this.leaveChatTitle
+        leaveTitle=(if
+          @channel.isDirectMessageChannel
+          (i18n "chat.direct_messages.leave")
+          (i18n "chat.channel_settings.leave_channel")
+        )
       }}
     />
   {{/if}}

plugins/chat/assets/javascripts/discourse/components/chat-channel-row.js

@@ -1,94 +1,32 @@
-import Component from "@ember/component";
-import I18n from "I18n";
-import discourseComputed from "discourse-common/utils/decorators";
-import { equal } from "@ember/object/computed";
 import { inject as service } from "@ember/service";
-import { CHATABLE_TYPES } from "discourse/plugins/chat/discourse/models/chat-channel";
-
-export default Component.extend({
-  tagName: "",
-  router: service(),
-  chat: service(),
-  channel: null,
-  isDirectMessageRow: equal(
-    "channel.chatable_type",
-    CHATABLE_TYPES.directMessageChannel
-  ),
-  options: null,
-
-  didInsertElement() {
-    this._super(...arguments);
-
-    if (this.isDirectMessageRow) {
-      this.channel.chatable.users[0].trackStatus();
-    }
-  },
-
-  willDestroyElement() {
-    this._super(...arguments);
-
-    if (this.isDirectMessageRow) {
-      this.channel.chatable.users[0].stopTrackingStatus();
-    }
-  },
-
-  @discourseComputed(
-    "channel.id",
-    "chat.activeChannel.id",
-    "router.currentRouteName"
-  )
-  active(channelId, activeChannelId, currentRouteName) {
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+
+export default class ChatChannelRow extends Component {
+  @service router;
+  @service chat;
+  @service currentUser;
+  @service site;
+
+  @action
+  startTrackingStatus() {
+    this.#firstDirectMessageUser?.trackStatus();
+  }
+
+  @action
+  stopTrackingStatus() {
+    this.#firstDirectMessageUser?.stopTrackingStatus();
+  }
+
+  get channelHasUnread() {
     return (
-      currentRouteName?.startsWith("chat.channel") &&
-      channelId === activeChannelId
-    );
-  },
-
-  @discourseComputed("active", "channel.{id,muted}", "channel.focused")
-  rowClassNames(active, channel, focused) {
-    const classes = ["chat-channel-row", `chat-channel-${channel.id}`];
-
-    if (active) {
-      classes.push("active");
-    }
-    if (focused) {
-      classes.push("focused");
-    }
-    if (channel.current_user_membership.muted) {
-      classes.push("muted");
-    }
-    if (this.options?.leaveButton) {
-      classes.push("can-leave");
-    }
-
-    const channelUnreadCount =
-      this.currentUser.chat_channel_tracking_state?.[channel.id]?.unread_count;
-    if (channelUnreadCount > 0) {
-      classes.push("has-unread");
-    }
-
-    return classes.join(" ");
-  },
-
-  @discourseComputed(
-    "isDirectMessageRow",
-    "channel.chatable.users.[]",
-    "channel.chatable.users.@each.status"
-  )
-  showUserStatus(isDirectMessageRow) {
-    return !!(
-      isDirectMessageRow &&
-      this.channel.chatable.users.length === 1 &&
-      this.channel.chatable.users[0].status
+      this.currentUser.get(
+        `chat_channel_tracking_state.${this.args.channel?.id}.unread_count`
+      ) > 0
     );
-  },
+  }
 
-  @discourseComputed("channel.chatable_type")
-  leaveChatTitle() {
-    if (this.channel.isDirectMessageChannel) {
-      return I18n.t("chat.direct_messages.leave");
-    } else {
-      return I18n.t("chat.channel_settings.leave_channel");
-    }
-  },
-});
+  get #firstDirectMessageUser() {
+    return this.args.channel?.chatable?.users?.firstObject;
+  }
+}

plugins/chat/test/javascripts/acceptance/chat-keyboard-shortcuts-test.js

@@ -165,7 +165,7 @@ acceptance("Discourse Chat - Keyboard shortcuts", function (needs) {
   test("switching channel with alt+arrow keys in float", async function (assert) {
     await visit("/latest");
     await click(".header-dropdown-toggle.open-chat");
-    await click("#chat-channel-row-4");
+    await click('.chat-channel-row[data-chat-channel-id="4"]');
 
     assert.ok(exists(`.chat-drawer.is-expanded[data-chat-channel-id="4"]`));
 

plugins/chat/test/javascripts/acceptance/chat-status-test.js

@@ -71,7 +71,9 @@ acceptance(
     test("it clears any unread messages in the sidebar for the archived channel", async function (assert) {
       await visit("/chat/channel/4/public-category");
       assert.ok(
-        exists("#chat-channel-row-4 .chat-channel-unread-indicator"),
+        exists(
+          '.chat-channel-row[data-chat-channel-id="4"] .chat-channel-unread-indicator'
+        ),
         "unread indicator shows for channel"
       );
 
@@ -80,7 +82,9 @@ acceptance(
         status: "archived",
       });
       assert.notOk(
-        exists("#chat-channel-row-4 .chat-channel-unread-indicator"),
+        exists(
+          '.chat-channel-row[data-chat-channel-id="4"] .chat-channel-unread-indicator'
+        ),
         "unread indicator should not show after archive status change"
       );
     });

plugins/chat/test/javascripts/acceptance/chat-test.js

@@ -206,7 +206,7 @@ acceptance("Discourse Chat - without unread", function (needs) {
   test("Unfollowing a direct message channel transitions to another channel", async function (assert) {
     await visit("/chat/channel/75/@hawk");
     await click(
-      ".chat-channel-row.chat-channel-75 .toggle-channel-membership-button.-leave"
+      '.chat-channel-row[data-chat-channel-id="75"] .toggle-channel-membership-button.-leave'
     );
 
     assert.ok(/^\/chat\/channel\/4/.test(currentURL()));
@@ -353,13 +353,13 @@ acceptance("Discourse Chat - without unread", function (needs) {
     await settled();
 
     await click(".chat-drawer-header__return-to-channels-btn");
-    await click(".chat-channel-row.chat-channel-9");
+    await click('.chat-channel-row[data-chat-channel-id="9"]');
     await triggerEvent(".chat-message-container[data-id='174']", "mouseenter");
     await click(".chat-message-actions-container[data-id='174'] .reply-btn");
     // Reply-to line is present
     assert.ok(exists(".chat-composer-message-details .chat-reply"));
     await click(".chat-drawer-header__return-to-channels-btn");
-    await click(".chat-channel-row.chat-channel-11");
+    await click('.chat-channel-row[data-chat-channel-id="11"]');
     // Reply-to line is gone since switching channels
     assert.notOk(exists(".chat-composer-message-details .chat-reply"));
     // Now click on reply btn and cancel it on channel 7
@@ -370,13 +370,13 @@ acceptance("Discourse Chat - without unread", function (needs) {
 
     // Go back to channel 9 and check that reply-to is present
     await click(".chat-drawer-header__return-to-channels-btn");
-    await click(".chat-channel-row.chat-channel-9");
+    await click('.chat-channel-row[data-chat-channel-id="9"]');
     // Now reply-to should be back and loaded from draft
     assert.ok(exists(".chat-composer-message-details .chat-reply"));
 
     // Go back one for time to channel 7 and make sure reply-to is gone
     await click(".chat-drawer-header__return-to-channels-btn");
-    await click(".chat-channel-row.chat-channel-11");
+    await click('.chat-channel-row[data-chat-channel-id="11"]');
     assert.notOk(exists(".chat-composer-message-details .chat-reply"));
   });
 
@@ -922,7 +922,7 @@ Widget.triangulate(arg: "test")
     await dropdown.expand();
     await dropdown.selectRowByValue("selectMessage");
     await click("#chat-copy-btn");
-    await click("#chat-channel-row-9");
+    await click('.chat-channel-row[data-chat-channel-id="9"]');
 
     assert.notOk(exists("#chat-copy-btn"));
   });
@@ -1065,7 +1065,7 @@ acceptance(
         visible(".chat-drawer-header__top-line--expanded"),
         "drawer is expanded"
       );
-      await click("#chat-channel-row-9");
+      await click('.chat-channel-row[data-chat-channel-id="9"]');
       await click(".chat-drawer-header__title");
       assert.equal(currentURL(), `/chat/channel/9/site/info/members`);
     });
@@ -1142,7 +1142,7 @@ acceptance(
     test("drawer open to DM channel with unread messages with sidebar off", async function (assert) {
       await visit("/t/internationalization-localization/280");
       await click(".header-dropdown-toggle.open-chat");
-      await click("#chat-channel-row-75");
+      await click('.chat-channel-row[data-chat-channel-id="75"]');
       const chatContainer = query(".chat-drawer");
       assert.strictEqual(chatContainer.dataset.chatChannelId, "75");
     });

plugins/chat/test/javascripts/acceptance/mobile-chat-test.js

@@ -39,7 +39,7 @@ acceptance("Discourse Chat - Mobile test", function (needs) {
     await click(".header-dropdown-toggle.open-chat");
     assert.equal(currentURL(), "/chat");
     assert.ok(exists(".channels-list"));
-    await click(".chat-channel-row.chat-channel-7");
+    await click('.chat-channel-row[data-chat-channel-id="7"]');
     assert.notOk(exists(".open-drawer-btn"));
   });
 

plugins/chat/test/javascripts/acceptance/user-card-chat-test.js

@@ -82,7 +82,7 @@ acceptance("Discourse Chat - User card test", function (needs) {
   test("user card has chat button that opens the correct channel", async function (assert) {
     await visit("/");
     await click(".header-dropdown-toggle.open-chat");
-    await click(".chat-channel-row.chat-channel-9");
+    await click('.chat-channel-row[data-chat-channel-id="9"]');
     await click("[data-user-card='hawk']");
 
     assert.ok(exists(".user-card-chat-btn"));