Skip to content

[CLEAN] Synthetic Benchmark PR #36466 - FIX: Regression causing missing chat unread indicators #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ofir-frd wants to merge 1 commit into
base: base_pr_36466_20251212_7509
Choose a base branch
from
Open

[CLEAN] Synthetic Benchmark PR #36466 - FIX: Regression causing missing chat unread indicators #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions app/assets/stylesheets/common/base/sidebar-section-link.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,16 +89,16 @@
@include ellipsis;
padding-left: 0.5em;
padding-right: 0.1em; // avoids some overflow cropping
text-align: right;
color: var(--d-sidebar-link-badge-color);
font-size: var(--font-down-2);
font-weight: normal;
margin-left: auto;
flex-shrink: 0;
}

.sidebar-section-link-suffix {
margin-left: 1em;
font-size: var(--font-down-4);
flex-shrink: 0;

&.icon {
&.urgent svg {
Expand All @@ -113,6 +113,8 @@

.sidebar-section-link-content-text {
@include ellipsis;
min-width: 0;
flex: 0 1 auto;

.user-status-message {
vertical-align: -0.125em;
Expand Down
2 changes: 2 additions & 0 deletions frontend/discourse/app/components/sidebar/api-section.gjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,8 @@ const SidebarApiSection = <template>
link.contentComponent
status=link.contentComponentArgs
}}
@suffixComponent={{link.suffixComponent}}
@suffixArgs={{link.suffixArgs}}
@scrollIntoView={{and
@scrollActiveLinkIntoView
(eq link.name @section.activeLink.name)
Expand Down
12 changes: 12 additions & 0 deletions frontend/discourse/app/components/sidebar/section-link.gjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,14 @@ export function isHex(input) {
}
}

/**
* Sidebar section link component.
*
* @component SectionLink
* @param {Component} @contentComponent - Component to render inside the link text span (gets ellipsized)
* @param {Component} @suffixComponent - Component to render after the link text (stays visible, not ellipsized)
* @param {Object} @suffixArgs - Arguments to pass to the suffix component
*/
export default class SectionLink extends Component {
@service currentUser;

Expand Down Expand Up @@ -201,6 +209,10 @@ export default class SectionLink extends Component {
</span>
{{/if}}

{{#if @suffixComponent}}
<@suffixComponent @suffixArgs={{@suffixArgs}} />
{{/if}}

{{#if @suffixValue}}
<span
class={{concatClass
Expand Down
20 changes: 20 additions & 0 deletions frontend/discourse/app/lib/sidebar/base-custom-sidebar-section-link.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,16 @@ export default class BaseCustomSidebarSectionLink {
*/
get contentCSSClass() {}

/**
* @returns {Component} Component to render inside the link text span (gets ellipsized with text)
*/
get contentComponent() {}

/**
* @returns {Object} Arguments to pass to the content component
*/
get contentComponentArgs() {}

/**
* @returns {string} Prefix type for the link. Accepted value: icon, image, text
*/
Expand Down Expand Up @@ -105,6 +115,16 @@ export default class BaseCustomSidebarSectionLink {
*/
get suffixCSSClass() {}

/**
* @returns {Component} Component to render as suffix (outside text span, not ellipsized)
*/
get suffixComponent() {}

/**
* @returns {Object} Arguments to pass to the suffix component
*/
get suffixArgs() {}

/**
* @returns {string} Type of the hover button. Accepted value: icon
*/
Expand Down
34 changes: 17 additions & 17 deletions plugins/chat/assets/javascripts/discourse/components/chat-sidebar-indicators.gjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@ import icon from "discourse/helpers/d-icon";
* Displays unread indicators and user status for chat channels in the sidebar.
*
* @component ChatSidebarIndicators
* @param {Object} @status - Channel status object containing unread counts and user status
* @param {number} @status.unreadCount - Number of unread messages
* @param {number} @status.unreadThreadsCount - Number of unread threads
* @param {number} @status.mentionCount - Number of unread mentions
* @param {number} @status.watchedThreadsUnreadCount - Number of unread watched threads
* @param {boolean} @status.isDirectMessageChannel - Whether this is a DM channel
* @param {Object} @status.userStatus - User status object for DM channels
* @param {Object} @suffixArgs - Arguments object when used as @suffixComponent
* @param {number} @suffixArgs.unreadCount - Number of unread messages
* @param {number} @suffixArgs.unreadThreadsCount - Number of unread threads
* @param {number} @suffixArgs.mentionCount - Number of unread mentions
* @param {number} @suffixArgs.watchedThreadsUnreadCount - Number of unread watched threads
* @param {boolean} @suffixArgs.isDirectMessageChannel - Whether this is a DM channel
* @param {Object} @suffixArgs.userStatus - User status object for DM channels
*/
export default class ChatSidebarIndicators extends Component {
/**
Expand All @@ -22,10 +22,10 @@ export default class ChatSidebarIndicators extends Component {
*/
get hasUnread() {
return (
this.args.status?.unreadCount > 0 ||
this.args.status?.unreadThreadsCount > 0 ||
this.args.status?.mentionCount > 0 ||
this.args.status?.watchedThreadsUnreadCount > 0
this.args.suffixArgs?.unreadCount > 0 ||
this.args.suffixArgs?.unreadThreadsCount > 0 ||
this.args.suffixArgs?.mentionCount > 0 ||
this.args.suffixArgs?.watchedThreadsUnreadCount > 0
);
}

Expand All @@ -38,13 +38,13 @@ export default class ChatSidebarIndicators extends Component {
*/
get urgencyClass() {
const hasUrgent =
this.args.status?.mentionCount > 0 ||
this.args.status?.watchedThreadsUnreadCount > 0;
this.args.suffixArgs?.mentionCount > 0 ||
this.args.suffixArgs?.watchedThreadsUnreadCount > 0;

// For DMs, treat all unreads as urgent
const hasUnreadDM =
this.args.status?.isDirectMessageChannel &&
this.args.status?.unreadCount > 0;
this.args.suffixArgs?.isDirectMessageChannel &&
this.args.suffixArgs?.unreadCount > 0;

if (hasUrgent || hasUnreadDM) {
return "urgent";
Expand All @@ -53,8 +53,8 @@ export default class ChatSidebarIndicators extends Component {
}

<template>
{{#if @status.userStatus}}
<UserStatusMessage @status={{@status.userStatus}} />
{{#if @suffixArgs.userStatus}}
<UserStatusMessage @status={{@suffixArgs.userStatus}} />
{{/if}}
{{#if this.hasUnread}}
<span
Expand Down
12 changes: 6 additions & 6 deletions plugins/chat/assets/javascripts/discourse/initializers/chat-sidebar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,11 +189,11 @@ function createChannelLink(BaseCustomSidebarSectionLink, options = {}) {
return "";
}

get contentComponent() {
get suffixComponent() {
return ChatSidebarIndicators;
}

get contentComponentArgs() {
get suffixArgs() {
if (this.isDM) {
return {
userStatus: this.isOneOnOneDM
Expand Down Expand Up @@ -529,11 +529,11 @@ export default {
return this.channel.chatable.read_restricted ? "lock" : "";
}

get contentComponent() {
get suffixComponent() {
return ChatSidebarIndicators;
}

get contentComponentArgs() {
get suffixArgs() {
return {
unreadCount: this.channel.tracking.unreadCount,
// We want to do this so we don't show a blue dot if the user is inside
Expand Down Expand Up @@ -680,11 +680,11 @@ export default {
return this.channel.chatable.users.length === 1;
}

get contentComponent() {
get suffixComponent() {
return ChatSidebarIndicators;
}

get contentComponentArgs() {
get suffixArgs() {
return {
userStatus: this.oneOnOneMessage
? this.channel.chatable.users[0].get("status")
Expand Down
1 change: 1 addition & 0 deletions plugins/chat/assets/stylesheets/common/core-extensions.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@
display: inline-flex;
align-items: center;
margin-left: 0.5em;
flex-shrink: 0;

svg {
font-size: var(--font-down-2);
Expand Down
16 changes: 8 additions & 8 deletions plugins/chat/test/javascripts/components/chat-sidebar-indicators-test.gjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ module(
const status = { unreadCount: 1 };

await render(
<template><ChatSidebarIndicators @status={{status}} /></template>
<template><ChatSidebarIndicators @suffixArgs={{status}} /></template>
);

assert.dom(".sidebar-section-link-content-badge").exists();
Expand All @@ -22,7 +22,7 @@ module(
const status = { unreadThreadsCount: 1 };

await render(
<template><ChatSidebarIndicators @status={{status}} /></template>
<template><ChatSidebarIndicators @suffixArgs={{status}} /></template>
);

assert.dom(".sidebar-section-link-content-badge").exists();
Expand All @@ -32,7 +32,7 @@ module(
const status = { mentionCount: 1 };

await render(
<template><ChatSidebarIndicators @status={{status}} /></template>
<template><ChatSidebarIndicators @suffixArgs={{status}} /></template>
);

assert.dom(".sidebar-section-link-content-badge").exists();
Expand All @@ -43,7 +43,7 @@ module(
const status = { watchedThreadsUnreadCount: 1 };

await render(
<template><ChatSidebarIndicators @status={{status}} /></template>
<template><ChatSidebarIndicators @suffixArgs={{status}} /></template>
);

assert.dom(".sidebar-section-link-content-badge").exists();
Expand All @@ -59,7 +59,7 @@ module(
};

await render(
<template><ChatSidebarIndicators @status={{status}} /></template>
<template><ChatSidebarIndicators @suffixArgs={{status}} /></template>
);

assert.dom(".sidebar-section-link-content-badge").doesNotExist();
Expand All @@ -72,7 +72,7 @@ module(
};

await render(
<template><ChatSidebarIndicators @status={{status}} /></template>
<template><ChatSidebarIndicators @suffixArgs={{status}} /></template>
);

assert.dom(".sidebar-section-link-content-badge").hasClass("urgent");
Expand All @@ -85,7 +85,7 @@ module(
};

await render(
<template><ChatSidebarIndicators @status={{status}} /></template>
<template><ChatSidebarIndicators @suffixArgs={{status}} /></template>
);

assert.dom(".sidebar-section-link-content-badge").hasClass("unread");
Expand All @@ -101,7 +101,7 @@ module(
};

await render(
<template><ChatSidebarIndicators @status={{status}} /></template>
<template><ChatSidebarIndicators @suffixArgs={{status}} /></template>
);

assert.dom(".sidebar-section-link-content-badge").exists();
Expand Down
Loading