Exam mode: Fix navigation to exams list and add no-exam hint

[bassner]

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.
• 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 screenshots/screencasts of my UI changes.
• I translated all newly inserted strings into English and German.

Motivation and Context

This PR addresses two primary issues in the Artemis platform. First, there was a navigation problem in the course card component, particularly when trying to access the exams list. This bug was significant as it hindered efficient and intuitive navigation within the platform. Secondly, due to recent changes (PR #7826), users could navigate to the exam list even when no exams were present, which could lead to confusion. This PR aims to resolve these issues, thereby improving the user experience.

Description

The PR introduces a change in the navigation method from the course card to the exams list by replacing the nested router link with imperative navigation. This approach resolves the navigation issue. Additionally, a new UI element is added to the exams page, which displays a helpful message and a navigation button when no exams are available. This feature enhances user understanding and navigation in scenarios where the exam list is empty.

Steps for Testing

Prerequisites:

• 1 User with access to courses with exams

Steps:

1. Navigate to the courses overview.
2. In the course card, click on the 'Exams' link.
3. Ensure you are redirected to the exams view of the course.
4. In cases where no exams are present, verify that a message is shown indicating no available exams, along with a button to navigate to the exercise list.
5. Click on the button provided and confirm that it redirects to the exercise list of the course.

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

Exam Mode Test

• Test 1
• Test 2

Screenshots

Summary by CodeRabbit

• Bug Fixes

  • Improved the "Exams" link behavior to ensure proper navigation without unintended redirects.

• New Features

  • Enhanced the course card with a direct navigation method to the exam page.

• Style

  • Integrated new iconography for a more intuitive visual representation of exams sections.

[coderabbitai]

Walkthrough

The recent updates involve enhancing user interaction with a course overview component by changing how the "Exams" link functions. Instead of navigating via a router link, a click event now handles the transition to the exams page. Additionally, the display logic for exam sections has been refined, and a new icon has been introduced to the exams component for better visual representation.

Changes

File Path	Change Summary
.../course-card.component.html	Updated to use (click) for the "Exams" link event handling.
.../course-card.component.ts	Added navigateToExams method for handling exam page navigation and event propagation.
.../course-exams.component.html	Updated conditional display logic for exam sections.
.../course-exams.component.ts	Imported faListAlt icon and added it to the component's properties.

Poem

🐇 "In the land of code and byte,"
🌟 "Changes made, both small and bright."
📚 "Exams link now a click away,"
✨ "Icons gleam, as if to say, 'Hooray!'"

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 with CodeRabbit Bot (@coderabbitai)

• You can directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>.
  • Generate unit-tests for this file.
• You can tag CodeRabbit on specific lines of code or entire files in the PR by tagging @coderabbitai in a comment. Examples:
  • @coderabbitai generate unit tests for this file.
  • @coderabbitai modularize this function.
• You can tag @coderabbitai in a PR comment and ask questions about the PR and the codebase. Examples:
  • @coderabbitai generate interesting stats about this repository from git and render them as a table.
  • @coderabbitai show all the console.log statements in this repository.
  • @coderabbitai read src/utils.ts and generate unit tests.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid.
  • @coderabbitai read the files in the src/scheduler package and generate README in the markdown format.

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.

CodeRabbit Commands (invoked as PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• The JSON schema for the configuration file is available here.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/coderabbit-overrides.v2.json

CodeRabbit Discord Community

Join our Discord Community to get help, request features, and share feedback.

[coderabbitai]

Review Status

Actionable comments generated: 0

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between 25e6735 and 04d6104.

Files ignored due to filter (2)

• src/main/webapp/i18n/de/exam.json
• src/main/webapp/i18n/en/exam.json

Files selected for processing (4)

• src/main/webapp/app/overview/course-card.component.html (1 hunks)
• src/main/webapp/app/overview/course-card.component.ts (1 hunks)
• src/main/webapp/app/overview/course-exams/course-exams.component.html (2 hunks)
• src/main/webapp/app/overview/course-exams/course-exams.component.ts (2 hunks)

Additional comments: 6

src/main/webapp/app/overview/course-exams/course-exams.component.html (3)

• 1-10: The implementation for displaying a message when no exams are present is correct. It uses proper localization and conditional rendering based on the length of realExamsOfCourse and testExamsOfCourse. The navigation button is also correctly implemented with [routerLink].

• 1-15: > Note: This review was outside the patches, so it was mapped to the patch with the greatest overlap. Original lines [12-26]

The structure and logic for displaying the real exams and the beginning of the test exams section are consistent and follow Angular best practices. The conditions for rendering are clear and the separation of concerns is maintained.

• 24-30: > Note: This review was outside the patches, so it was mapped to the patch with the greatest overlap. Original lines [27-32]

The use of trackBy in ngFor is a performance optimization that helps Angular identify unique items for DOM updates. The expand/collapse functionality is implemented correctly with appropriate icons and click event binding. The visual separation using hr tags is also appropriate.

src/main/webapp/app/overview/course-card.component.html (1)

• 31-37: The change from [routerLink] to (click) for the "Exams" link is implemented correctly. It uses an event binding to call the navigateToExams method, which is expected to handle the navigation imperatively. This should resolve the navigation issue described in the PR objectives.

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

• 104-112: The navigateToExams method is implemented correctly. It uses Router to navigate to the exams page and calls event.stopPropagation() to prevent event bubbling, which is necessary due to the nested click events in the component.

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

• 7-13: > Note: This review was outside the patches, so it was mapped to the patch with the greatest overlap. Original lines [7-32]

The FontAwesome icons are imported and assigned to properties correctly. The addition of the faListAlt icon is consistent with its usage in the course-exams.component.html file for the no-exam state message.