Text exercises: Highlight selected result in result history timeline

[EneaGore]

Checklist

General

• 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.

Server

No Server Changes

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.
• 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 screenshots/screencasts of my UI changes.

Changes affecting Programming Exercises

No Changes

Motivation and Context

When using the result history timeline on the result view, it is unclear which submission has been selected by the student (apart from the id on the link).

Description

This PR addresses this issue by highlighting the chosen submission. The selected submission is passed on by the text editor component and is checked on the timeline componented whether the highlighted color for the icon is shown. (primary blue to not interfere with green/red/grey)

Also migrates text-editor.component.ts / text-editor.component.ts and result-history.component.ts / result-history.component.ts to using signals

Steps for Testing

Deploy to TS1 to create multiple AI Feedback

Prerequisites:

• 1 Instructor
• 1 Student
• 1 Text Exercise with AI Feedback enabled

1. Create multiple submissions and request AI Feedback
2. Check that everything still works
3. Select one of the last 5 results to view in the timeline (does not work for older)
4. Confirm that the correct result is highleted in the timeline

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

• I (as a reviewer) confirm that the client changes (in particular related to REST calls and UI responsiveness) are implemented with a very good performance even for very large courses with more than 2000 students.
• I (as a reviewer) confirm that the server changes (in particular related to database calls) are implemented with a very good performance even for very large courses with more than 2000 students.

Code Review

• Code Review 1
• Code Review 2

Manual Tests

• Test 1
• Test 2

Test Coverage

Screenshots

Summary by CodeRabbit

Release Notes

• New Features

  • Enhanced dynamic behavior in the text editor and result history components with function-based property access.
  • Introduced new input binding for the latest result ID in the result history component.

• Bug Fixes

  • Improved visibility and state management for UI elements based on dynamic conditions.

• Tests

  • Updated test cases to align with new input handling methods, ensuring robust validation of component behavior.

[HawKhiem]

Tested on TS1. Everything works as described

[Cathy0123456789]

Tested on TS1. Works as expected, however I agree with @BBesrour's comment how it would be nice if the right side were clickable too