Development: Replace deprecated before unload event with pending changes guard

[coolchock]

Checklist

General

• I tested all changes and their related features with all corresponding user types on a test server.
• I chose a title conforming to the naming conventions for pull requests.

Client

• I strictly followed the client coding and design guidelines.

Description

The beforeunload event, which is deprecated, was still in use in several parts of the codebase. This pull request replaces the deprecated event with the PendingChangesGuard approach, ensuring a more robust and Angular-friendly solution for handling unsaved changes.

Additionally, the beforeunload event has been completely removed from the code-editor-container.component.ts. Since file saving is now automatically triggered whenever the file content changes, there is no longer a need for the event in this context.

Steps for Testing

Prerequisites:

• 1 Admin
• 1 Test Server with admin account

The objective is to verify that the warning event, which alerts users about unsaved changes before leaving the page, still functions correctly in all places where the deprecated beforeunload event was replaced.

standardized-competency-management.component.ts

1. Go to Server Administration -> Standardized Competencies
2. Expand a category and select a competency
3. Click edit and try to leave the page

generate-competencies.component.ts

1. https://artemis-test3.artemis.cit.tum.de/course-management/15/competency-management/generate
2. Enter a course description, generate competencies
3. When competencies were generated, try to leave the page

course-import-standardized-course-competencies.component.ts

1. Go to Course Management -> Competency Management
2. Click Import Competencies -> Import Standardized Competencies
3. Select some competencies to import and try to leave the page

import-course-competencies.component.ts

1. Go to Course Management -> Competency Management
2. Click Import Competencies -> Import from other courses
3. Select some competencies to import and try to leave the page

exam-participation.component.ts

1. Participate in an exam
2. Try to leave the page

modeling-submission.component.ts

1. Participate in a modeling exercise
2. Make some changes
3. Try to leave the page

quiz-exercise-update.component.ts

1. Try to create/update a quiz exercise
2. Try to leave the page

text-editor.component.ts

1. Participate in a text exercise
2. Make some changes
3. Try to leave the page

Testserver States

Note

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

Review Progress

Code Review

• Code Review 1
• Code Review 2

Manual Tests

• Test 1
• Test 2

Summary by CodeRabbit

• New Features

  • Introduced PendingChangesGuard to prevent navigation away from certain components if there are unsaved changes.
  • Added similar guard for the TextEditorComponent to enhance user experience.

• Bug Fixes

  • Removed the @HostListener decorator and associated unsaved changes warning, simplifying component lifecycle management.

• Tests

  • Updated test suites to directly assert the canDeactivate method behavior, improving clarity and maintainability.
  • Enhanced tests for QuizExerciseUpdateComponent to validate quiz exercise states and error handling.

[HawKhiem]

Retested on TS3. Works as described

[github-actions]

⚠️ Unable to deploy to test servers ⚠️

Testserver "artemis-test2.artemis.cit.tum.de" is already in use by PR #9395.

[github-actions]

⚠️ Unable to deploy to test servers ⚠️

Testserver "artemis-test1.artemis.cit.tum.de" is already in use by PR #9395.