Learning path: Refactor learning path navigation overview

[JohannesStoehr]

Checklist (+900/-300)

General

• I tested all changes and their related features with all corresponding user types 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 strictly followed the server 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 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 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 navigation overview (where all the learning objects of the learning path are shown) should be grouped by competency.

Description

The navigation overview now shows a list of the competencies of the learning path. Each competency can be expanded to show its corresponding learning objects. These objects can be selected to navigate to that specific learning objects.
To achieve these client tests two additional endpoints have been added on the server.
Stacked on #8733

Testing this PR is straightforward on TS5 (Course Johannes Wiest) because the necessary competencies and other elements are already set up.

• one to fetch all competencies of a learning path
• one to fetch all learning objects of a competency

Steps for Testing

Prerequisites:

• 1 Student
• 1 Course
• at least 1 competency with linked learning objects (LectureUnit or Exercise)

1. Log in to Artemis
2. Navigate to Course
3. Navigate to Learning path
4. Navigate back and forth in learning path (Previous and Next-Button)
5. Open Competency overview dropdown
6. Open Competency learning objects accordion
7. Navigate to a learning object by clicking on an item

Info for code review

Due to merging develop into this branch the changes look more than there are from this PR. This PR includes more around (+900/-300) lines and changed the following files:

Server changes:
repository/CompetencyProgressRepository.java
repository/CompetencyRepository.java
repository/CourseCompetencyRepository.java
service/LearningObjectService.java
service/competency/CompetencyProgressService.java
service/learningpath/LearningPathNavigationService.java
service/learningpath/LearningPathRecommendationService.java
web/rest/LearningPathResource.java
web/rest/dto/competency/LearningPathNavigationObjectDTO.java

Server tests:
src/test/java/de/tum/in/www1/artemis/competency/LearningPathIntegrationTest.java

Client changes:
course/learning-paths/components/competency-graph-modal/competency-graph-modal.component.ts
course/learning-paths/components/competency-graph/competency-graph.component.ts
course/learning-paths/components/competency-node/competency-node.component.ts
course/learning-paths/components/learning-path-lecture-unit/learning-path-lecture-unit.component.ts
course/learning-paths/components/learning-path-nav-overview-learning-objects/learning-path-nav-overview-learning-objects.component.html
course/learning-paths/components/learning-path-nav-overview-learning-objects/learning-path-nav-overview-learning-objects.component.ts
course/learning-paths/components/learning-path-nav-overview-learning-objects/learning-path-nav-overview-learning-objects.component.scss
course/learning-paths/components/learning-path-nav-overview/learning-path-nav-overview.component.html
course/learning-paths/components/learning-path-nav-overview/learning-path-nav-overview.component.scss
course/learning-paths/components/learning-path-nav-overview/learning-path-nav-overview.component.ts
course/learning-paths/components/learning-path-student-nav/learning-path-student-nav.component.html
course/learning-paths/components/learning-path-student-nav/learning-path-student-nav.component.ts
course/learning-paths/pages/learning-path-student-page/learning-path-student-page.component.ts
course/learning-paths/services/base-api-http.service.ts
course/learning-paths/services/learning-path-api.service.ts
course/learning-paths/services/learning-path-navigation.service.ts
entities/competency/learning-path.model.ts

Client tests:
spec/component/learning-paths/components/learning-path-nav-overview-learning-objects.component.spec.ts
spec/component/learning-paths/components/learning-path-nav-overview.component.spec.ts
spec/component/learning-paths/components/learning-path-nav.component.spec.ts
spec/component/learning-paths/pages/learning-path-student-page.component.spec.ts
spec/service/learning-path/learning-path-api.service.spec.ts

Testserver States

Note

These badges show the state of the test servers.
Green = Currently available, Red = Currently locked

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)
competency-form.component.ts	87.77%	✅
competency-graph-modal.component.ts	90.9%	✅
competency-graph.component.ts	85.29%	✅
competency-node.component.ts	100%	✅
learning-path-lecture-unit.component.ts	81.48%	✅
learning-path-nav-overview-learning-objects.component.ts	90%	✅
learning-path-nav-overview.component.ts	90.62%	✅
learning-path-student-nav.component.ts	100%	✅
learning-path.service.ts	75%	✅
learning-path-student-page.component.ts	97.43%	✅
learning-path-container.component.ts	87%	✅
base-api-http.service.ts	72.22%	✅
learning-path-api.service.ts	100%	✅
learning-path-navigation.service.ts	100%	✅
learning-path.model.ts	96.15%	✅

Server

Class/File	Line Coverage	Confirmation (assert/expect)
Exercise.java	91%	✅
LectureUnit.java	100%	✅
LearningObjectService.java	89%	✅
CompetencyProgressService.java	94%	✅
LearningPathNavigationService.java	87%	✅
LearningPathNgxService.java	97%	✅
LearningPathRecommendationService.java	97%	✅
LearningPathService.java	97%	✅
LearningPathResource.java	100%	✅

Screenshots

[github-actions]

⚠️ Unable to deploy to test servers ⚠️

The docker build needs to run through before deploying.

[github-actions]

⚠️ Unable to deploy to test servers ⚠️

The docker build needs to run through before deploying.

[edkaya]

Tested on ts5, works as expected. Some UI sidenotes that can be done in a follow up PR:

• I see a scrollbar in content part, which can be hidden if you don't have an exceeding content.

- We might want to have the overview scrollbar in auto mode instead scroll

[JohannesWt]

Tested on ts5, works as expected. Some UI sidenotes that can be done in a follow up PR:

• I see a scrollbar in content part, which can be hidden if you don't have an exceeding content.

- We might want to have the overview scrollbar in auto mode instead scroll

Unfortunately we have to use scroll overview here. If we use "auto" the dropdown will grow indefinitely in size ignoring the max-height. The horizontal scroll in the content part is already documented in an issue and will be solved in a follow up PR.

[az108]

I like the changes, maybe in a future PR we could show somewhere which compentency one is at rn. Because right now I would have to click on the dropdown to see that i am in competency 2. 😄

[JohannesWt]

I like the changes, maybe in a future PR we could show somewhere which compentency one is at rn. Because right now I would have to click on the dropdown to see that i am in competency 2. 😄

That's exactly the plan. In the future the current competency should be marked and opened, as soon as you open the drop down.

[az108]

Tested on TS5, works with no problems and Code LGTM 👍