Adaptive learning: Improve user interface and fix several bugs related to learning paths

[MaximilianAnzinger]

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.

Server

• Important: I implemented the changes with a very good performance and prevented too many (unnecessary) database calls.
• I followed the coding and design guidelines.
• I added multiple integration tests (Spring) related to the features (with a high test coverage).
• I added pre-authorization annotations according to the guidelines and checked the course groups for all new REST Calls (security).
• I documented the Java code using JavaDoc style.

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.
• I followed the 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 authorities to all new routes and checked the course groups for displaying navigation elements (links, buttons).
• I documented the TypeScript code using JSDoc style.
• I added multiple screenshots/screencasts of my UI changes.
• I translated all newly inserted strings into English and German.

Motivation and Context

The user experience for students participating in the learning path view is currently not polished enough. This PR fixes some styling issues and adds improvements to allow for a better experience.

Description

This PR:

• fixes missing tooltips
• introduces more intuitive icons for learning path graphs
• improves styling issues
• introduces the progress overview of a learning path for students
• allows users to proceed with the next recommended learning object via a simple button press
• highlights the current task they are working on in the path view

Steps for Testing

Prerequisites:

• 1 Students
• 2 Competency with linked lecture units and exercises

1. Log in to Artemis
2. Navigate to the learning path paticipation
3. make sure all buttons have helpful tooltips, also check their translation
4. click on the continue button to get the first recommended lecture unit or exercise
5. make sure the according node is highlighted
6. complete the task and continue to the next one (press the button multiple times to skip over the learning objects)
7. use the previous button to get back to the learning objects you have skipped through/worked on
8. click on the icon in the top right of the learning path (small eye) to open the progress modal
9. make sure the modal opens and you get the correct information displayed (name, login, progress, and graph representation)
10. Optional: Try to break learning paths! Any bugs you may find are appreciated :)

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
• I (as a reviewer) confirm that the server changes (in particular related to database calls) are implemented with a very good performance

Code Review

• Code Review 1
• Code Review 2

Manual Tests

• Test 1
• Test 2

Test Coverage

Client

Class/File	Line Coverage	Confirmation (assert/expect)
learning-path-graph-node.component.ts	100%	✅
learning-path-graph.component.ts	88.04%	✅
learning-path-management.component.ts	95.45%	✅
learning-path-paging.service.ts	90.9%	✅
learning-path.service.ts	71.42%	✅
learning-path-container.component.ts	92.94%	✅
learning-path-storage.service.ts	98.11%	✅
learning-path.model.ts	100%	✅

Server

Class/File	Line Coverage	Confirmation (assert/expect)
LearningPathRepository.java	58%	✅
LearningPathService.java	98%	✅
LearningPathResource.java	92%	✅

Screenshots

The base branch was changed.

[JohannesStoehr]

Reapprove code after base change

[lennart-keller]

Code still lgtm after recent changes and base branch change

[tobias-lippert]

Reapprove after base branch change

[dearjasmina]

reapprove