Learning analytics: Add competency details to student course dashboard

[kaancayli]

Warning

This PR is stacked. Please first merge #8513 (contains database migration)

Checklist

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.

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

We plan to incorporate an accordion UI element on the newly proposed Student Analytics Dashboard page. This will display the competencies defined for the course.

Description

Implemented CompetencyAccordionComponent and StudentAnalyticsDashboardProgressBarComponent for the new accordion component on the new student analytics dashboard page.

Steps for Testing

Prerequisites:

• 1 Instructor
• 1 Course with following features:
  1. Student Analytics Dashboard enabled
  2. Learning Paths enabled
  3. has competencies

1. Log in to Artemis.
2. Navigate to the Student Analytics Dashboard page.
3. Verify the following functionalities for the new competency accordion:
   • 3.1. Clicking on a competency item should toggle its open/closed state.
   • 3.2. Ensure that opening one competency item collapses all others.
   • 3.3. Verify that each opened competency item displays two progress bars, one for lectures and another for exercises.
   • 3.4. Confirm that if a competency has an incomplete and not yet due exercise, it is presented as the next exercise.
   • 3.5. Check that clicking on the View Lectures and Exercises button within an opened competency item navigates to the detailed page of that competency.
   • 3.6. Ensure that when a competency item is collapsed, it displays mastery rings and small progress bars for lectures and exercises.
4. Verify that clicking on the Show Learning Path button navigates to the course's learning path page.
5. Verify that translations are correct.

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

Screenshots

• Competencies collapsed
  
• Competency opened