Skip to content

Commit

Permalink
DEV: glimmerify chat-channel-row (#19287)
Browse files Browse the repository at this point in the history
  • Loading branch information
jjaffeux committed Dec 2, 2022
1 parent 666fd43 commit add6c67
Show file tree
Hide file tree
Showing 8 changed files with 218 additions and 196 deletions.
@@ -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}}
Expand Down
@@ -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;
}
}
Expand Up @@ -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"]`));

Expand Down
8 changes: 6 additions & 2 deletions plugins/chat/test/javascripts/acceptance/chat-status-test.js
Expand Up @@ -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"
);

Expand All @@ -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"
);
});
Expand Down
16 changes: 8 additions & 8 deletions plugins/chat/test/javascripts/acceptance/chat-test.js
Expand Up @@ -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()));
Expand Down Expand Up @@ -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
Expand All @@ -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"));
});

Expand Down Expand Up @@ -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"));
});
Expand Down Expand Up @@ -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`);
});
Expand Down Expand Up @@ -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");
});
Expand Down
Expand Up @@ -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"));
});

Expand Down
Expand Up @@ -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"));
Expand Down

0 comments on commit add6c67

Please sign in to comment.