Communication: Refactor unread messages count view on sidebar
#9522
Conversation
asliayk
added
client
WalkthroughThe pull request introduces significant updates to the sidebar card components, specifically enhancing the Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Outside diff range and nitpick comments (8)
src/main/webapp/app/shared/sidebar/sidebar-card-large/sidebar-card-large.component.html (1)
8-8: LGTM! Consider a minor improvement.The addition of the
unreadCountinput to thejhi-sidebar-card-itemcomponent aligns well with the PR objectives. The use of optional chaining forconversation?.unreadMessagesCountis a good practice to prevent potential errors.Consider removing the
thiskeyword from the template expression. In Angular templates,thisis implicit and unnecessary. Here's the suggested change:- <jhi-sidebar-card-item [unreadCount]="this.sidebarItem.conversation?.unreadMessagesCount" [sidebarType]="sidebarType" [sidebarItem]="sidebarItem" /> + <jhi-sidebar-card-item [unreadCount]="sidebarItem.conversation?.unreadMessagesCount" [sidebarType]="sidebarType" [sidebarItem]="sidebarItem" />This change would make the code slightly cleaner and more idiomatic Angular.
src/main/webapp/app/shared/sidebar/sidebar-card-item/sidebar-card-item.component.scss (1)
9-23: LGTM! Well-implemented unread count badge.The
.unread-countclass is well-designed for displaying unread message counts. It uses appropriate styling for visibility, responsiveness, and layout. The use of CSS variables and theclamp()function for font sizing are particularly commendable.Consider adding a
min-widthproperty to ensure the badge maintains its circular shape even with single-digit numbers:.unread-count { /* ... existing properties ... */ + min-width: 1.5rem; }This will ensure consistency in the badge's appearance across different count values.
src/main/webapp/app/shared/sidebar/sidebar-card-small/sidebar-card-small.component.html (2)
Line range hint
1-2: Consider adding more specific information about the follow-up PR.The comment provides good context for the temporary workaround. To improve traceability, consider adding a reference to a specific issue or ticket number for the follow-up PR that will address this workaround.
Line range hint
17-21: Update to new Angular control flow syntax.As per the coding guidelines, please update the
*ngIfdirective to the new@ifsyntax. This change will align the code with the latest Angular best practices and the project's coding standards.Apply this change:
- @if (sidebarItem.conversation) { - <div> - <jhi-conversation-options [conversation]="sidebarItem.conversation!" (onUpdateSidebar)="onUpdateSidebar.emit()" /> - </div> - } + @if (sidebarItem.conversation) { + <div> + <jhi-conversation-options [conversation]="sidebarItem.conversation!" (onUpdateSidebar)="onUpdateSidebar.emit()" /> + </div> + }src/main/webapp/app/shared/sidebar/sidebar-card-medium/sidebar-card-medium.component.html (1)
Line range hint
10-24: LGTM with a minor suggestion: Non-exam mode section is correctly updatedThe non-exam mode section has been correctly updated to include the
unreadCountproperty in thejhi-sidebar-card-itemcomponent, which aligns with the PR objectives to display unread message counts. The use of @else also adheres to the new Angular syntax guidelines.Consider removing
this.from the template expression:- <jhi-sidebar-card-item [unreadCount]="this.sidebarItem.conversation?.unreadMessagesCount" [sidebarType]="sidebarType" [sidebarItem]="sidebarItem" /> + <jhi-sidebar-card-item [unreadCount]="sidebarItem.conversation?.unreadMessagesCount" [sidebarType]="sidebarType" [sidebarItem]="sidebarItem" />This change improves readability and follows Angular best practices for template expressions.
src/test/javascript/spec/component/shared/sidebar/sidebar-card-item.component.spec.ts (2)
53-57: LGTM with a minor suggestion: Consider testing initial state.This test case effectively verifies the behavior of
formattedUnreadCountwhenunreadCountis undefined. It follows the jest syntax and uses appropriate expectations.However, consider testing the initial state of the component before calling
ngOnInit(). This would ensure that theformattedUnreadCountis correctly initialized.Here's a suggested improvement:
it('should return an empty string if unreadCount is undefined', () => { component.unreadCount = undefined; expect(component.formattedUnreadCount).toBe(''); // Test initial state component.ngOnInit(); expect(component.formattedUnreadCount).toBe(''); // Test after initialization });
Line range hint
1-57: Consider enhancing test coverage with additional scenarios.The new test cases significantly improve the coverage for the
formattedUnreadCountproperty. To further enhance the test suite, consider the following suggestions:
- Test edge cases: Add tests for unreadCount values of 0, 1, 98, 99, and 100 to ensure correct behavior at boundary conditions.
- Test reactivity: Verify that changes to
unreadCountafter initialization are reflected informattedUnreadCount.- Test integration: Add a test to ensure the formatted count is correctly displayed in the component's template.
Here's an example of how you might implement the first suggestion:
it('should handle edge cases for unreadCount', () => { const testCases = [ { input: 0, expected: '0' }, { input: 1, expected: '1' }, { input: 98, expected: '98' }, { input: 99, expected: '99' }, { input: 100, expected: '99+' }, ]; testCases.forEach(({ input, expected }) => { component.unreadCount = input; component.ngOnInit(); expect(component.formattedUnreadCount).toBe(expected); }); });src/main/webapp/app/shared/sidebar/sidebar-card-item/sidebar-card-item.component.html (1)
Line range hint
63-63: Simplify the condition in@ifstatementIn line 63, the condition
@if (unreadCount && unreadCount > 0)can be simplified by removing the redundantunreadCountcheck. SinceunreadCount > 0effectively handles the desired condition, you can simplify it to:@if (unreadCount > 0) {
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (7)
- src/main/webapp/app/shared/sidebar/sidebar-card-item/sidebar-card-item.component.html (2 hunks)
- src/main/webapp/app/shared/sidebar/sidebar-card-item/sidebar-card-item.component.scss (1 hunks)
- src/main/webapp/app/shared/sidebar/sidebar-card-item/sidebar-card-item.component.ts (1 hunks)
- src/main/webapp/app/shared/sidebar/sidebar-card-large/sidebar-card-large.component.html (1 hunks)
- src/main/webapp/app/shared/sidebar/sidebar-card-medium/sidebar-card-medium.component.html (1 hunks)
- src/main/webapp/app/shared/sidebar/sidebar-card-small/sidebar-card-small.component.html (1 hunks)
- src/test/javascript/spec/component/shared/sidebar/sidebar-card-item.component.spec.ts (1 hunks)
🧰 Additional context used
📓 Path-based instructions (6)
src/main/webapp/app/shared/sidebar/sidebar-card-item/sidebar-card-item.component.html (1)
Pattern
src/main/webapp/**/*.html: @if and @for are new and valid Angular syntax replacing *ngIf and *ngFor. They should always be used over the old style.src/main/webapp/app/shared/sidebar/sidebar-card-item/sidebar-card-item.component.ts (1)
src/main/webapp/app/shared/sidebar/sidebar-card-large/sidebar-card-large.component.html (1)
Pattern
src/main/webapp/**/*.html: @if and @for are new and valid Angular syntax replacing *ngIf and *ngFor. They should always be used over the old style.src/main/webapp/app/shared/sidebar/sidebar-card-medium/sidebar-card-medium.component.html (1)
Pattern
src/main/webapp/**/*.html: @if and @for are new and valid Angular syntax replacing *ngIf and *ngFor. They should always be used over the old style.src/main/webapp/app/shared/sidebar/sidebar-card-small/sidebar-card-small.component.html (1)
Pattern
src/main/webapp/**/*.html: @if and @for are new and valid Angular syntax replacing *ngIf and *ngFor. They should always be used over the old style.src/test/javascript/spec/component/shared/sidebar/sidebar-card-item.component.spec.ts (1)
Pattern
src/test/javascript/spec/**/*.ts: jest: true; mock: NgMocks; bad_practices: avoid_full_module_import; perf_improvements: mock_irrelevant_deps; service_testing: mock_http_for_logic; no_schema: avoid_NO_ERRORS_SCHEMA; expectation_specificity: true; solutions: {boolean: toBeTrue/False, reference: toBe, existence: toBeNull/NotNull, undefined: toBeUndefined, class_obj: toContainEntries/toEqual, spy_calls: {not_called: not.toHaveBeenCalled, once: toHaveBeenCalledOnce, with_value: toHaveBeenCalledWith|toHaveBeenCalledExactlyOnceWith}}
🔇 Additional comments (12)
src/main/webapp/app/shared/sidebar/sidebar-card-item/sidebar-card-item.component.scss (2)
Line range hint
1-27: Changes align well with PR objectives and enhance UI functionality.The addition of the
.unread-countand.bold-textclasses effectively supports the PR's goal of enhancing the visibility of unread messages in the sidebar. These styles provide the necessary visual cues to draw users' attention to conversations with unread messages.The implementation appears to meet the requirements outlined in the PR objectives. However, to ensure full compliance with the design specifications:
- Can you confirm that the
.unread-countclass handles counts exceeding 99 with the special format (99+) as mentioned in the PR objectives?- Are there any accessibility considerations (e.g., color contrast) that need to be addressed for the unread count badge?
#!/bin/bash # Check for handling of large unread counts and accessibility considerations rg --type typescript "unreadCount" src/ rg --type html "unreadCount" src/ rg --type scss "color contrast|a11y|accessibility" src/This will help us verify the implementation of the count formatting and any existing accessibility measures.
25-27: Consider using a more standard font-weight value.The
.bold-textclass uses a font-weight of 850, which is unusually high. Standard bold typically uses a value of 700, and many fonts don't support weights above 900.Consider adjusting the font-weight to a more standard value:
.bold-text { - font-weight: 850; + font-weight: 700; // or 800 if extra emphasis is needed }Could you clarify the design decision behind using such a high font-weight? If this level of emphasis is crucial for the UI, we should ensure it renders consistently across different system fonts and browsers.
This will help us understand if this is a one-off decision or part of a broader design pattern.
src/main/webapp/app/shared/sidebar/sidebar-card-item/sidebar-card-item.component.ts (4)
1-1: LGTM: Import statement updated correctly.The addition of
OnInitto the import statement is appropriate given the class now implements this interface. The use of single quotes for the import path adheres to the coding guidelines.
9-9: LGTM: Class correctly implements OnInit.The
SidebarCardItemComponentnow implementsOnInit, which is a good practice for handling initialization logic. The class name follows PascalCase, adhering to the coding guidelines.
16-18: LGTM: ngOnInit implemented correctly.The
ngOnInitmethod is correctly implemented, initializing theformattedUnreadCountproperty. This follows Angular lifecycle hooks best practices and the method name adheres to camelCase convention as per guidelines.
1-25: Overall, the changes improve the component's functionality and mostly adhere to guidelines.The
SidebarCardItemComponenthas been successfully updated to handle and display unread message counts. The changes generally follow Angular best practices and project-specific guidelines. A few suggestions have been made to further improve the code:
- Consider a safer approach for the
unreadCountinput property to prevent potential runtime errors.- The
getFormattedUnreadCountmethod could be made more concise.These minor adjustments would enhance the robustness and readability of the component. Great job on implementing this new feature!
src/main/webapp/app/shared/sidebar/sidebar-card-small/sidebar-card-small.component.html (2)
Line range hint
8-9: Verify relative routing paths.The template uses relative paths for routing (
'../communication'and'./communication'). While this might be correct, it's important to ensure these paths resolve correctly in all scenarios.Please run the following verification script to check the routing configuration:
#!/bin/bash # Description: Verify the routing configuration for the communication module # Test: Check the routing configuration in the module file rg --type typescript -A 10 "RouterModule.forChild" src/main/webapp/app/communication # Test: Verify the parent route configuration rg --type typescript -A 10 "{ path: 'communication'" src/main/webapp/app/layouts
13-13: LGTM! Verify unread count implementation.The addition of the
unreadCountproperty to thejhi-sidebar-card-itemcomponent is well-implemented and aligns with the PR objectives. The use of optional chaining forthis.sidebarItem.conversation?.unreadMessagesCountis a good practice for safe property access.To ensure the
unreadCountproperty is correctly implemented in thesidebar-card-itemcomponent, please run the following verification script:src/main/webapp/app/shared/sidebar/sidebar-card-medium/sidebar-card-medium.component.html (1)
Line range hint
1-9: LGTM: Exam mode section is correctly implementedThe 'inExam' mode section is correctly implemented using the new Angular syntax @if, which aligns with the provided coding guidelines. The structure and functionality remain unchanged and appropriate for exam mode.
src/test/javascript/spec/component/shared/sidebar/sidebar-card-item.component.spec.ts (3)
41-45: LGTM: Well-structured test case for unreadCount formatting.This test case effectively verifies the behavior of
formattedUnreadCountfor values less than 99. It follows the jest syntax and uses appropriate expectations.
47-51: LGTM: Effective test for unreadCount exceeding 99.This test case properly verifies the behavior of
formattedUnreadCountfor values greater than 99. It adheres to the jest syntax and uses appropriate expectations.
Line range hint
1-57: Overall, good additions to the test suite with room for further enhancements.The new test cases for
formattedUnreadCountare well-structured and improve the overall coverage of theSidebarCardItemComponent. They follow jest syntax and adhere to the provided coding guidelines. The suggestions provided in the previous comments, if implemented, would further strengthen the test suite and ensure more comprehensive coverage of the component's behavior.
| @Input() sidebarItem: SidebarCardElement; | ||
| @Input() sidebarType?: SidebarTypes; | ||
| @Input() unreadCount!: number | undefined; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider a safer approach for handling the unreadCount input.
While the unreadCount property follows the camelCase naming convention as per guidelines, the use of the non-null assertion operator (!) might lead to runtime errors if the parent component doesn't provide a value.
Consider one of these alternatives:
- Make the property nullable and handle the undefined case in the component logic:
@Input() unreadCount?: number;
- Provide a default value:
@Input() unreadCount: number = 0;
This would make the component more robust and prevent potential runtime errors.
| private getFormattedUnreadCount(): string { | ||
| if (this.unreadCount !== undefined && this.unreadCount > 99) { | ||
| return '99+'; | ||
| } | ||
| return this.unreadCount?.toString() || ''; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider a more concise implementation for getFormattedUnreadCount.
The method correctly formats the unread count and follows the camelCase naming convention. However, it could be more concise using a ternary operator:
private getFormattedUnreadCount(): string {
return this.unreadCount === undefined ? '' : this.unreadCount > 99 ? '99+' : this.unreadCount.toString();
}This maintains the same logic while reducing the number of lines and potential for errors.
| class="small text-truncate me-2" | ||
| [title]="sidebarItem.title" | ||
| [class.muted]="sidebarItem.conversation?.isMuted" | ||
| [ngClass]="unreadCount && unreadCount > 0 ? 'bold-text' : 'fw-semibold'" |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Simplify the condition in [ngClass] binding
In line 55, the condition [ngClass]="unreadCount && unreadCount > 0 ? 'bold-text' : 'fw-semibold'" can be simplified. Since unreadCount > 0 already checks for a positive number, the additional unreadCount check is redundant. You can simplify the condition to:
[ngClass]="unreadCount > 0 ? 'bold-text' : 'fw-semibold'"🛠️ Refactor suggestion
Consider using Bootstrap's fw-bold class for consistency
In line 55, you're toggling between the classes 'bold-text' and 'fw-semibold'. For consistency with Bootstrap's standard font-weight classes, consider using 'fw-bold' instead of 'bold-text'. This would update the [ngClass] binding to:
[ngClass]="unreadCount > 0 ? 'fw-bold' : 'fw-semibold'"Using standard classes enhances maintainability and ensures consistent styling across the application.
src/main/webapp/app/shared/sidebar/sidebar-card-item/sidebar-card-item.component.ts
Show resolved
Hide resolved
src/main/webapp/app/shared/sidebar/sidebar-card-large/sidebar-card-large.component.html
Show resolved
Hide resolved
| @@ -21,6 +21,6 @@ | |||
| (click)="emitStoreAndRefresh(sidebarItem.id)" | |||
| [routerLinkActive]="'bg-selected border-selected'" | |||
| > | |||
| <jhi-sidebar-card-item [sidebarType]="sidebarType" [sidebarItem]="sidebarItem" /> | |||
| <jhi-sidebar-card-item [unreadCount]="this.sidebarItem.conversation?.unreadMessagesCount" [sidebarType]="sidebarType" [sidebarItem]="sidebarItem" /> | |||
There was a problem hiding this comment.
You don't need this here
src/main/webapp/app/shared/sidebar/sidebar-card-small/sidebar-card-small.component.html
Show resolved
Hide resolved
| class="small text-truncate me-2" | ||
| [title]="sidebarItem.title" | ||
| [class.muted]="sidebarItem.conversation?.isMuted" | ||
| [ngClass]="unreadCount && unreadCount > 0 ? 'bold-text' : 'fw-semibold'" |
There was a problem hiding this comment.
fw-bold should be enough. Rather change the "no-new-message-font-weight" from semibold to normal [ngClass]="unreadCount > 0 ? 'fw-bold' : 'fw-normal'"
src/main/webapp/app/shared/sidebar/sidebar-card-item/sidebar-card-item.component.scss
Show resolved
Hide resolved
| @@ -58,6 +64,9 @@ | |||
| <fa-icon [fixedWidth]="true" [icon]="sidebarItem.rightIcon" /> | |||
| } | |||
| </span> | |||
| @if (unreadCount && unreadCount > 0) { | |||
src/main/webapp/app/shared/sidebar/sidebar-card-item/sidebar-card-item.component.ts
Show resolved
Hide resolved
src/main/webapp/app/shared/sidebar/sidebar-card-item/sidebar-card-item.component.scss
Show resolved
Hide resolved
| @@ -58,6 +64,9 @@ | |||
| <fa-icon [fixedWidth]="true" [icon]="sidebarItem.rightIcon" /> | |||
| } | |||
| </span> | |||
| @if (unreadCount && unreadCount > 0) { | |||
| <span class="unread-count">{{ formattedUnreadCount }}</span> | |||
There was a problem hiding this comment.
I would decrease the spacing between the heart and the counter: me-n2
In addition I would also add px-2 to the button of the faEllipsisVertical icon in the conversation-options.component.html file
Checklist
General
Client
Motivation and Context
Previously, the sidebar did not display the unread message count for the relevant conversations. This update refactors the view to show the number of unread messages next to each conversation in the sidebar.
Description
The unread count is now displayed next to the conversation title, with a special format (99+) for counts exceeding 99. Additionally, the conversation title is now displayed in bold when there are unread messages, enhancing the visibility of conversations that require attention.
Steps for Testing
Prerequisites:
Testserver States
Note
These badges show the state of the test servers.
Green = Currently available, Red = Currently locked
Click on the badges to get to the test servers.
Review Progress
Performance Review
Code Review
Manual Tests
Performance Tests
Test Coverage
Screenshots
Summary by CodeRabbit
Release Notes
New Features
Bug Fixes
Tests