General: Fix selected exercise and lecture when switching courses

[rabeatwork]

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 strictly followed the client coding and design guidelines.

Motivation and Context

There was a bug where selecting an exercise or lecture in one course, then switching to another, resulted in the exercise or lecture from the previous course still being displayed.
#8421

Description

The SessionStorage Key also includes the courseId to avoid the bug, too.

Steps for Testing

Prerequisites:

• 1 Student
• 2 Courses with min. 1 Exercise each

Go to any course
Click on any exercise/lecture
Go to courses in the top left corner
Click on another course
Confirm that you don't see the exercise/lecture from the previous 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

Summary by CodeRabbit

• New Features

  • Enhanced sidebar functionality across course-related components by integrating courseId to improve user-specific navigation and state management.
  • Introduced a new sidebar event management service to handle interactions more efficiently.

• Refactor

  • Updated various methods to utilize the new sidebar event service, ensuring more robust and centralized event handling.

• Tests

  • Adjusted sidebar component tests to reflect changes in event handling methods.

[coderabbitai]

Walkthrough

The changes primarily focus on enhancing the sidebar functionality within an Angular application. Modifications include the addition of a courseId to various components for better session management, refactoring event handling in sidebar components, and simplifying bindings. This refactoring aims to streamline the sidebar's behavior and improve its interaction with course-specific data.

Changes

Files	Change Summary
.../course-exercises/course-exercises.component.[html|ts]	Added courseId, made it public, and included it in session storage keys.
.../course-lectures/course-lectures.component.[html|ts]	Similar changes as course-exercises: added courseId and updated session storage handling.
.../sidebar/sidebar-accordion/sidebar-accordion.component.[html|ts]	Added courseId input and updated session storage key handling in methods.
.../sidebar/sidebar-card/sidebar-card.component.[html|ts]	Changed event handling from direct storage manipulation to emitting events for sidebar interactions.
.../sidebar/sidebar.component.[html|ts]	Integrated courseId and updated to use SidebarEventService for managing sidebar events.
.../sidebar/sidebar-event.service.ts	Introduced a new service to manage sidebar-related events.
.../spec/component/shared/sidebar/sidebar-card.component.spec.ts	Updated test cases to reflect changes in event handling methods.

Possibly related issues

• Issue Development: Course access authorization alert sometimes appears twice #6382: The changes might impact how course-related data is managed in the session, potentially affecting the handling of authorization and error alerts by ensuring course-specific data is correctly managed.
• Issue General: Guided tour not highlighting exercises and statistics #7440: The refactoring of sidebar event handling and session management could influence how elements are highlighted and managed during the guided tour, possibly addressing issues with state management during tours.

The other issues listed do not appear to directly relate to the sidebar or session management enhancements made in this pull request and thus are not included here.

---

Recent Review Details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between d4a4a1a and 179cdc7.

Files selected for processing (12)

• src/main/webapp/app/overview/course-exercises/course-exercises.component.html (1 hunks)
• src/main/webapp/app/overview/course-exercises/course-exercises.component.ts (2 hunks)
• src/main/webapp/app/overview/course-lectures/course-lectures.component.html (1 hunks)
• src/main/webapp/app/overview/course-lectures/course-lectures.component.ts (2 hunks)
• src/main/webapp/app/shared/sidebar/sidebar-accordion/sidebar-accordion.component.html (1 hunks)
• src/main/webapp/app/shared/sidebar/sidebar-accordion/sidebar-accordion.component.ts (3 hunks)
• src/main/webapp/app/shared/sidebar/sidebar-card/sidebar-card.component.html (1 hunks)
• src/main/webapp/app/shared/sidebar/sidebar-card/sidebar-card.component.ts (2 hunks)
• src/main/webapp/app/shared/sidebar/sidebar-event.service.ts (1 hunks)
• src/main/webapp/app/shared/sidebar/sidebar.component.html (1 hunks)
• src/main/webapp/app/shared/sidebar/sidebar.component.ts (5 hunks)
• src/test/javascript/spec/component/shared/sidebar/sidebar-card.component.spec.ts (3 hunks)

Files skipped from review as they are similar to previous changes (11)

• src/main/webapp/app/overview/course-exercises/course-exercises.component.html
• src/main/webapp/app/overview/course-exercises/course-exercises.component.ts
• src/main/webapp/app/overview/course-lectures/course-lectures.component.html
• src/main/webapp/app/overview/course-lectures/course-lectures.component.ts
• src/main/webapp/app/shared/sidebar/sidebar-accordion/sidebar-accordion.component.html
• src/main/webapp/app/shared/sidebar/sidebar-accordion/sidebar-accordion.component.ts
• src/main/webapp/app/shared/sidebar/sidebar-card/sidebar-card.component.html
• src/main/webapp/app/shared/sidebar/sidebar-card/sidebar-card.component.ts
• src/main/webapp/app/shared/sidebar/sidebar-event.service.ts
• src/main/webapp/app/shared/sidebar/sidebar.component.html
• src/main/webapp/app/shared/sidebar/sidebar.component.ts

Additional Context Used

Path-based Instructions (1)

src/test/javascript/spec/component/shared/sidebar/sidebar-card.component.spec.ts (1)

Pattern src/test/javascript/spec/**/*.ts: jest: true; mock: NgMocks; bad_practices: avoid_full_module_import; perf_improvements: mock_irrelevant_deps; service_testing: mock_http_for_logic; no_schema: avoid_NO_ERRORS_SCHEMA; expectation_specificity: true; solutions: {boolean: toBeTrue/False, reference: toBe, existence: toBeNull/NotNull, undefined: toBeUndefined, class_obj: toContainEntries/toEqual, spy_calls: {not_called: not.toHaveBeenCalled, once: toHaveBeenCalledOnce, with_value: toHaveBeenCalledWith|toHaveBeenCalledExactlyOnceWith}}

Additional comments not posted (3)

src/test/javascript/spec/component/shared/sidebar/sidebar-card.component.spec.ts (3)

33-33: Set itemSelected to true before tests.

This ensures that the component behaves as if an item is selected, which is relevant for the context of these tests.

---

63-67: Ensure emitStoreLastSelectedItem is called with the correct argument.

This test verifies that emitStoreLastSelectedItem is called with the sidebar item's ID when the sidebar card is clicked. Please ensure that the implementation of emitStoreLastSelectedItem correctly handles the received ID.

---

84-96: Add test case for navigation when no item was selected before.

This test case checks the navigation behavior when no item was previously selected, ensuring that the component handles this scenario correctly. Please verify that the navigation logic in the component correctly interprets the itemSelected state to determine the correct navigation path.

---

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

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai generate interesting stats about this repository and render them as a table.
  • @coderabbitai show all the console.log statements in this repository.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a 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. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

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.
• Please see the configuration documentation for more information.
• 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/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[JohannesWt]

Tested on TS4 + locally : works as expected 👍

[az108]

Reviewed and Tested on T4, works completely fine!

[egekurt123]

Tested on ts4, works as expected