Skip to content
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.

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

Communication: Improve unread messages count view on sidebar #9522

Merged
merged 10 commits into from
Oct 20, 2024

Conversation

asliayk
Copy link
Contributor

@asliayk asliayk commented Oct 19, 2024

Checklist

General

Client

  • I strictly followed the client coding and design guidelines.
  • Following the theming guidelines, I specified colors only in the theming variable files and checked that the changes look consistent in both the light and the dark theme.
  • I added multiple integration tests (Jest) related to the features (with a high test coverage), while following the test guidelines.
  • I added multiple screenshots/screencasts of my UI changes.

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:

  • 2 Instructors/Students
  • 1 Course with communication enabled
  1. Log in to Artemis
  2. Navigate to Communication section of a course
  3. Send arbitrary number of messages to different channels
  4. Log in to Artemis with another account, navigate to the communication section of the same course
  5. Notice the new view of unread messages count next to the related conversation titles

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

Code Review

  • Code Review 1
  • Code Review 2

Manual Tests

  • Test 1
  • Test 2

Test Coverage

Class/File Line Coverage Confirmation (assert/expect)
sidebar-card-item.component.ts 100%

Screenshots

image
image

Summary by CodeRabbit

Release Notes

  • New Features

    • Enhanced sidebar rendering logic for 'exam' and 'exercise' types, improving visual cues for unread notifications.
    • Introduced a new CSS class for unread message indicators.
    • Added support for displaying unread message counts in sidebar cards across different components.
  • Bug Fixes

    • Improved handling of unread message counts to ensure accurate display.
  • Tests

    • Added unit tests for verifying the functionality of unread message formatting in the sidebar component.
  • Style

    • Updated dropdown toggle button styling for improved visual presentation.

@asliayk asliayk added client Pull requests that update TypeScript code. (Added Automatically!) small component:Communication labels Oct 19, 2024
@asliayk asliayk self-assigned this Oct 19, 2024
@asliayk asliayk requested a review from a team as a code owner October 19, 2024 10:12
@github-actions github-actions bot added the tests label Oct 19, 2024
Copy link

coderabbitai bot commented Oct 19, 2024

Walkthrough

The changes involve modifications to the sidebar-card-item component and related components to enhance rendering logic based on the sidebarType. The sidebar-card-item now conditionally displays unread message counts and updates its visual cues accordingly. New CSS styles are introduced for unread counts, and lifecycle methods are implemented to manage state changes. Additional properties are passed to child components to improve functionality, and unit tests are added to ensure proper behavior of the unread count formatting.

Changes

File Change Summary
src/main/webapp/app/shared/sidebar/sidebar-card-item/sidebar-card-item.component.html Updated HTML template to enhance rendering based on sidebarType, added conditional classes and new spans for unread counts.
src/main/webapp/app/shared/sidebar/sidebar-card-item/sidebar-card-item.component.scss Introduced new CSS class .unread-count for styling unread message indicators.
src/main/webapp/app/shared/sidebar/sidebar-card-item/sidebar-card-item.component.ts Implemented OnInit and OnChanges, added unreadCount input property, and created getFormattedUnreadCount method.
src/main/webapp/app/shared/sidebar/sidebar-card-medium/sidebar-card-medium.component.html Modified HTML to conditionally render based on sidebarType and added unreadCount to jhi-sidebar-card-item.
src/main/webapp/app/shared/sidebar/sidebar-card-small/sidebar-card-small.component.html Added unreadCount property to jhi-sidebar-card-item, bound to unread messages count with a default value.
src/test/javascript/spec/component/shared/sidebar/sidebar-card-item.component.spec.ts Introduced unit tests for formattedUnreadCount based on unreadCount values.
src/main/webapp/app/shared/sidebar/conversation-options/conversation-options.component.html Added padding to dropdown toggle button by introducing px-2 class.

Possibly related PRs

Suggested labels

ready to merge

Suggested reviewers

  • edkaya
  • rabeatwork
  • JohannesWt
  • az108
  • krusche

📜 Recent review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between 07c4f61 and 6aea2a2.

📒 Files selected for processing (3)
  • src/main/webapp/app/shared/sidebar/conversation-options/conversation-options.component.html (1 hunks)
  • 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)
🚧 Files skipped from review as they are similar to previous changes (2)
  • src/main/webapp/app/shared/sidebar/sidebar-card-item/sidebar-card-item.component.html
  • src/main/webapp/app/shared/sidebar/sidebar-card-item/sidebar-card-item.component.scss
🧰 Additional context used
📓 Path-based instructions (1)
src/main/webapp/app/shared/sidebar/conversation-options/conversation-options.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.

🔇 Additional comments (1)
src/main/webapp/app/shared/sidebar/conversation-options/conversation-options.component.html (1)

6-6: LGTM: Improved button padding

The addition of the px-2 class to the dropdown toggle button is a good improvement. This horizontal padding will likely enhance the button's appearance and make it easier to click, contributing to a better user experience.


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?

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

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)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai or @coderabbitai title anywhere in the PR title to generate the title automatically.

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 unreadCount input to the jhi-sidebar-card-item component aligns well with the PR objectives. The use of optional chaining for conversation?.unreadMessagesCount is a good practice to prevent potential errors.

Consider removing the this keyword from the template expression. In Angular templates, this is 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-count class is well-designed for displaying unread message counts. It uses appropriate styling for visibility, responsiveness, and layout. The use of CSS variables and the clamp() function for font sizing are particularly commendable.

Consider adding a min-width property 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 *ngIf directive to the new @if syntax. 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 updated

The non-exam mode section has been correctly updated to include the unreadCount property in the jhi-sidebar-card-item component, 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 formattedUnreadCount when unreadCount is 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 the formattedUnreadCount is 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 formattedUnreadCount property. To further enhance the test suite, consider the following suggestions:

  1. Test edge cases: Add tests for unreadCount values of 0, 1, 98, 99, and 100 to ensure correct behavior at boundary conditions.
  2. Test reactivity: Verify that changes to unreadCount after initialization are reflected in formattedUnreadCount.
  3. 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 @if statement

In line 63, the condition @if (unreadCount && unreadCount > 0) can be simplified by removing the redundant unreadCount check. Since unreadCount > 0 effectively handles the desired condition, you can simplify it to:

@if (unreadCount > 0) {
📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between 22b206e and ea36718.

📒 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)

Pattern src/main/webapp/**/*.ts: angular_style:https://angular.io/guide/styleguide;methods_in_html:false;lazy_loading:true;code_reuse:true;tests:meaningful;types:PascalCase;enums:PascalCase;funcs:camelCase;props:camelCase;no_priv_prefix:true;strings:single_quotes;localize:true;btns:functionality;links:navigation;icons_text:newline;labels:associate;code_style:arrow_funcs,curly_braces,open_braces_same_line,indent_4;memory_leak_prevention:true;routes:naming_schema;chart_framework:ngx-charts;responsive_layout:true

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-count and .bold-text classes 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:

  1. Can you confirm that the .unread-count class handles counts exceeding 99 with the special format (99+) as mentioned in the PR objectives?
  2. 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-text class 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 OnInit to 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 SidebarCardItemComponent now implements OnInit, 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 ngOnInit method is correctly implemented, initializing the formattedUnreadCount property. 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 SidebarCardItemComponent has 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:

  1. Consider a safer approach for the unreadCount input property to prevent potential runtime errors.
  2. The getFormattedUnreadCount method 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 unreadCount property to the jhi-sidebar-card-item component is well-implemented and aligns with the PR objectives. The use of optional chaining for this.sidebarItem.conversation?.unreadMessagesCount is a good practice for safe property access.

To ensure the unreadCount property is correctly implemented in the sidebar-card-item component, 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 implemented

The '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 formattedUnreadCount for 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 formattedUnreadCount for 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 formattedUnreadCount are well-structured and improve the overall coverage of the SidebarCardItemComponent. 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.

Copy link
Contributor

@rabeatwork rabeatwork left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have some remarks.

# Conflicts:
#	src/main/webapp/app/shared/sidebar/sidebar-card-item/sidebar-card-item.component.ts
#	src/main/webapp/app/shared/sidebar/sidebar-card-large/sidebar-card-large.component.html
#	src/main/webapp/app/shared/sidebar/sidebar-card-medium/sidebar-card-medium.component.html
#	src/main/webapp/app/shared/sidebar/sidebar-card-small/sidebar-card-small.component.html
coderabbitai[bot]
coderabbitai bot previously approved these changes Oct 19, 2024
Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Outside diff range and nitpick comments (2)
src/main/webapp/app/shared/sidebar/sidebar-card-item/sidebar-card-item.component.ts (2)

17-25: LGTM: Lifecycle hooks correctly implemented with a minor optimization suggestion.

The ngOnInit and ngOnChanges methods are correctly implemented to initialize and update the formattedUnreadCount. This addresses the previous concern about reacting to changes in unreadCount. The implementation follows Angular lifecycle hook best practices and adheres to the coding guidelines for indentation and bracing style.

Consider optimizing the ngOnChanges method to avoid unnecessary updates:

ngOnChanges(changes: SimpleChanges): void {
    if (changes['unreadCount'] && !changes['unreadCount'].firstChange) {
        this.formattedUnreadCount = this.getFormattedUnreadCount();
    }
}

This ensures that the formatted count is only updated when the unreadCount changes after the initial rendering.


27-32: LGTM: Formatting method correctly implemented with a minor readability suggestion.

The getFormattedUnreadCount method correctly formats the unread count as per requirements. It properly uses the function call syntax for the input signal unreadCount(). The implementation is concise and follows the coding guidelines.

Consider using a ternary operator for improved readability:

private getFormattedUnreadCount(): string {
    const count = this.unreadCount();
    return count > 99 ? '99+' : count.toString();
}

This maintains the same logic while slightly improving readability.

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between 8ab243c and 07c4f61.

📒 Files selected for processing (3)
  • 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.ts (1 hunks)
  • src/test/javascript/spec/component/shared/sidebar/sidebar-card-item.component.spec.ts (2 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
  • src/main/webapp/app/shared/sidebar/sidebar-card-item/sidebar-card-item.component.html
  • src/test/javascript/spec/component/shared/sidebar/sidebar-card-item.component.spec.ts
🧰 Additional context used
📓 Path-based instructions (1)
src/main/webapp/app/shared/sidebar/sidebar-card-item/sidebar-card-item.component.ts (1)

Pattern src/main/webapp/**/*.ts: angular_style:https://angular.io/guide/styleguide;methods_in_html:false;lazy_loading:true;code_reuse:true;tests:meaningful;types:PascalCase;enums:PascalCase;funcs:camelCase;props:camelCase;no_priv_prefix:true;strings:single_quotes;localize:true;btns:functionality;links:navigation;icons_text:newline;labels:associate;code_style:arrow_funcs,curly_braces,open_braces_same_line,indent_4;memory_leak_prevention:true;routes:naming_schema;chart_framework:ngx-charts;responsive_layout:true

🔇 Additional comments (4)
src/main/webapp/app/shared/sidebar/sidebar-card-item/sidebar-card-item.component.ts (4)

1-1: LGTM: Imports updated correctly.

The new imports (OnChanges, OnInit, SimpleChanges, input) are correctly added to support the implementation of lifecycle hooks and input signals. This aligns with Angular best practices and the suggestion to use input signals.


9-9: LGTM: Lifecycle interfaces correctly implemented.

The class now implements OnInit and OnChanges interfaces, which is necessary for the lifecycle hooks implemented in the component. This follows Angular best practices for component lifecycle management.


13-13: LGTM: Input property correctly implemented using signals.

The unreadCount input property is correctly implemented using input signals with a default value of 0. This addresses previous suggestions and follows the coding guidelines:

  • Uses input signals as recommended in Angular documentation.
  • Provides a default value to prevent potential runtime errors.
  • Follows the camelCase naming convention for properties.

1-32: Overall, the changes look good and address the PR objectives.

The implementation of the unread count display in the sidebar card item is well done. It addresses previous comments, follows Angular best practices, and adheres to the coding guidelines. The use of input signals, proper lifecycle management, and correct formatting of the unread count contribute to a robust and maintainable component.

A few minor suggestions for optimization and readability have been provided, but these are not critical and can be addressed at the developer's discretion.

Great job on implementing this feature!

Copy link
Contributor

@SimonEntholzer SimonEntholzer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works on Ts4, when adding new messages, the number of new messages shows up, nice improvement 👍
Two remarks:

  • should the number disappear after I clicked on the channel? I think at them moment there is some kind of timer?
  • also, when I add messages myself, should I see the new message count go up?

What would also be nice in a follow up, is to directly see new incoming messages, without needing to click somewhere to update the channels :D

@az108
Copy link
Contributor

az108 commented Oct 19, 2024

I also noticed the second point made by @SimonEntholzer . This only happens tho if the chat window is not fully at the bottom. If one scrolls fully down and then writes a message the counter does not go up. I think if we change the behaviour of the chat window opening to the latest message always then this should not be an issue anymore.

@krusche krusche changed the title Communication: Refactor unread messages count view on sidebar Communication: Improve unread messages count view on sidebar Oct 20, 2024
@krusche krusche merged commit 6e64f08 into develop Oct 20, 2024
55 of 61 checks passed
@krusche krusche deleted the feature/communication/unread-messages-view branch October 20, 2024 07:25
SimonEntholzer pushed a commit that referenced this pull request Oct 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
client Pull requests that update TypeScript code. (Added Automatically!) component:Communication ready to merge small tests
Projects
Status: Merged
Development

Successfully merging this pull request may close these issues.

8 participants