Communication: Resolve an issues when displaying replies to a post

[PaRangger]

Checklist

General

• I tested all changes and their related features with all corresponding user types on a test server.
• This is a small issue that I tested locally and was confirmed by another developer on a test server.
• Language: I followed the guidelines for inclusive, diversity-sensitive, and appreciative language.
• I chose a title conforming to the naming conventions for pull requests.

Client

• Important: I implemented the changes with a very good performance, prevented too many (unnecessary) REST calls and made sure the UI is responsive, even with large data (e.g. using paging).
• I strictly followed the client coding and design guidelines.
• I added multiple screenshots/screencasts of my UI changes.

Motivation and Context

Currently, when opening a thread using either the "Reply in thread" or "Show X Replies" option, the content of the main post and its associated replies are displayed correctly. However, if a different thread is opened while the initial thread remains active, the main post content fails to update and retains the content of the previously opened post.

Description

I implemented function calls to compute the posting content within the onChanges lifecycle hook. This ensures that the post content is properly updated whenever changes occur.

Addresses #9754 and #9803, Closes #10071

Steps for Testing

Prerequisites:

• 1 Student/Tutor/Instructor
• 1 Course with communication enabled

1. Log in to Artemis
2. Navigate to course
3. Navigate to the communication tab
4. Select a channel with atleast 2 posts or go to a channel and create 2 posts
5. Select "Reply in thread"/"Show X Replies" of one post
6. Without closing the thread, select "Reply in thread"/"Show X Replies" of the other post
7. Check if the thread displays the newly selected post properly

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

Manual Tests

• Test 1
• Test 2

Test Coverage

Client

Class/File	Line Coverage	Confirmation (assert/expect)
course-conversations.component.ts	90.55%	✅
posting-content-part.components.ts	94.23%	✅
posting-content.components.ts	91.39%	✅

Screenshots

Summary by CodeRabbit

• New Features

  • Enhanced thread opening mechanism in conversation messages.
  • Improved content part tracking and processing in posting content components.

• Refactor

  • Updated event handling for conversation threads.
  • Implemented more responsive content change detection.

• Bug Fixes

  • Improved tracking of content parts to optimize rendering performance.

[coderabbitai]

Walkthrough

The pull request introduces modifications to the communication and conversation components in the Artemis application. The primary changes involve updating the event handling mechanism for thread interactions in the jhi-conversation-messages component, implementing the OnChanges lifecycle hook in the PostingContentPartComponent, and adding a custom tracking method for content parts. These modifications enhance the responsiveness and performance of the conversation and thread display functionality.

Changes

File	Change Summary
src/main/webapp/app/overview/course-conversations/course-conversations.component.html	Updated event binding for jhi-conversation-messages from (openThread)="postInThread = $event" to (openThread)="openThread($event)"
src/main/webapp/app/overview/course-conversations/course-conversations.component.ts	Added `openThread(postToOpen: Post
src/main/webapp/app/shared/metis/posting-content/posting-content-part/posting-content-part.components.ts	Implemented OnChanges interface and added ngOnChanges() method to process input changes
src/main/webapp/app/shared/metis/posting-content/posting-content.component.html	Modified tracking mechanism for postingContentPart items from track $index to track contentPartTrack($index)
src/main/webapp/app/shared/metis/posting-content/posting-content.components.ts	Added contentPartTrack(index: number) method and enhanced ngOnChanges() to compute posting content parts

Assessment against linked issues

Objective	Addressed	Explanation
Update thread when switching reply context [#10071]	✅
Improve component responsiveness	✅
Prevent unnecessary REST calls	✅

Possibly related PRs

• Communication: Improve sidebar user interface design #9356: Sidebar UI design modifications related to conversation components.
• Communication: Fix user interface reload on channel selection #9464: Changes to CourseConversationsComponent class affecting event handling.
• Communication: Add recents section to sidebar #10033: Addition of "Recents" section in sidebar impacting conversation management.
• Communication: Fix scrolling error for long messages #9997: Fix for scrolling errors in long messages, enhancing user experience in conversations.

Suggested labels

tests, ready to merge

Suggested reviewers

• HawKhiem
• SimonEntholzer
• krusche
• eylulnc
• ahbitaqu
• rabeatwork

---

📜 Recent review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ca29b78 and 96a8af9.

📒 Files selected for processing (1)

• src/main/webapp/app/overview/course-conversations/course-conversations.component.ts (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• src/main/webapp/app/overview/course-conversations/course-conversations.component.ts

⏰ Context from checks skipped due to timeout of 90000ms (9)

• GitHub Check: Codacy Static Code Analysis
• GitHub Check: server-tests
• GitHub Check: server-style
• GitHub Check: client-tests-selected
• GitHub Check: client-tests
• GitHub Check: client-style
• GitHub Check: Build and Push Docker Image
• GitHub Check: Analyse
• GitHub Check: Build .war artifact

---

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

• X
• Mastodon
• Reddit
• LinkedIn

🪧 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 generate docstrings to generate docstrings for this PR. (Beta)
• @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.

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (3)

src/main/webapp/app/shared/metis/posting-content/posting-content-part/posting-content-part.components.ts (1)

63-65: Consider optimizing ngOnChanges implementation.

The current implementation processes content on every change. Consider checking which inputs have changed using SimpleChanges parameter to avoid unnecessary processing.

-    ngOnChanges(): void {
-        this.processContent();
+    ngOnChanges(changes: SimpleChanges): void {
+        if (changes['postingContentPart']) {
+            this.processContent();
+        }
     }

src/main/webapp/app/shared/metis/posting-content/posting-content.components.ts (1)

66-68: Consider optimizing ngOnChanges implementation.

The current implementation recomputes pattern matches and content parts on every change. Consider checking which inputs have changed to avoid unnecessary computations.

-        const patternMatches: PatternMatch[] = this.getPatternMatches();
-        this.computePostingContentParts(patternMatches);
+        if (changes['content']) {
+            const patternMatches: PatternMatch[] = this.getPatternMatches();
+            this.computePostingContentParts(patternMatches);
+        }

src/main/webapp/app/overview/course-conversations/course-conversations.component.ts (1)

568-570: Consider enhancing thread state management.

The implementation correctly addresses the reactivity issue by centralizing thread state updates. However, consider adding change detection triggers and null safety checks for more robust state management.

 openThread(e: Post | undefined) {
+    if (this.postInThread?.id === e?.id) {
+        return;
+    }
     this.postInThread = e;
+    this.changeDetector.detectChanges();
 }

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 599c92e and ca29b78.

📒 Files selected for processing (5)

• src/main/webapp/app/overview/course-conversations/course-conversations.component.html (1 hunks)
• src/main/webapp/app/overview/course-conversations/course-conversations.component.ts (1 hunks)
• src/main/webapp/app/shared/metis/posting-content/posting-content-part/posting-content-part.components.ts (3 hunks)
• src/main/webapp/app/shared/metis/posting-content/posting-content.component.html (2 hunks)
• src/main/webapp/app/shared/metis/posting-content/posting-content.components.ts (2 hunks)

🧰 Additional context used

📓 Path-based instructions (5)

src/main/webapp/app/overview/course-conversations/course-conversations.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/metis/posting-content/posting-content.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/overview/course-conversations/course-conversations.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/metis/posting-content/posting-content-part/posting-content-part.components.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/metis/posting-content/posting-content.components.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 (3)

src/main/webapp/app/shared/metis/posting-content/posting-content-part/posting-content-part.components.ts (1)

30-30: LGTM! Good implementation of OnChanges.

The addition of the OnChanges interface is appropriate for handling input property changes.

src/main/webapp/app/shared/metis/posting-content/posting-content.components.ts (1)

260-262: LGTM! Good implementation of track function.

The contentPartTrack method provides a unique identifier for content parts, which is a good practice for optimizing Angular's change detection.

src/main/webapp/app/shared/metis/posting-content/posting-content.component.html (1)

19-19: LGTM! Good optimization for list rendering.

The use of contentPartTrack for tracking items in the @for loops is a good practice. It provides stable, unique identifiers for each item, which helps Angular optimize the rendering of lists.

Also applies to: 36-36

[anian03]

Tested on TS2, works as expected

[FelberMartin]

Tested on TS2. Changing the thread now updates the thread base post correctly 👍

[julian-wls]

Tested functionality on TS2. Works as expected.

[FelberMartin]

Re-approve after change

[vinceclifford]

Tested on TS3, works as expected.

[julian-wls]

Re-approve after parameter renaming.

[HawKhiem]

Tested on TS3. Works as described