Development: Migrate the online code editor to a standalone component

[pzdr7]

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

• 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 (e.g. using paging).
• I added multiple integration tests (Jest) related to the features (with a high test coverage), while following the test guidelines.

Changes affecting Programming Exercises

• High priority: I tested all changes and their related features with all corresponding user types on a test server configured with the integrated lifecycle setup (LocalVC and LocalCI).

Motivation and Context

Modernize the component to better follow the client coding guidelines.

Description

• Migrated the CodeEditorMonacoComponent and CodeEditorHeaderComponents to standalone
• Added OnPush change detection and signals

Steps for Testing

Prerequisites:

• 1 Student
• 1 Instructor
• 1 Programming exercise with the online code editor enabled. Set a due date and enable manual assessment.

Participation:

1. Log in as the student.
2. Navigate to the programming exercise and open the online code editor.
3. Ensure the online code editor still works by:

• Editing different files
• Creating files
• Deleting files
• Renaming files
• and submitting your solution. After submitting, refresh the page and check that your changes were submitted.

(Known issue: resizing the editor may be a bit slow. this is generally a bug in the code editor grid and not related to this PR)

Assessment:

4. Log in as the instructor. Navigate to Course management > Your course > Exercises.
5. If it hasn't already passed, set the due date of the programming exercise to now via the Edit view.
6. Go to the "Scores" view of the exercise and start the assessment of the submission.
7. Assess the submission by:

• Navigating through different files
• Adding feedback widgets in the editor, assigning different scores to each one
• Submitting your assessment.

8. As the student, navigate to the programming exercise again and check that you can see the feedback.

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

Test Coverage

Client

Class/File	Line Coverage	Confirmation (assert/expect)
code-editor-header.component.ts	100%	✅
code-editor-monaco.component.ts	93.33%	✅

Screenshots

No UI changes

Summary by CodeRabbit

• New Features

  • Enhanced CodeEditorHeaderComponent with improved input handling and event binding.
  • Introduced CodeEditorMonacoComponent with reactive programming features for better state management.

• Bug Fixes

  • Updated method calls and bindings in templates to ensure accurate data retrieval and rendering.

• Documentation

  • Added a new helper file for mocking components in tests.

• Tests

  • Refactored test cases to align with new component structures and reactive patterns.

[Cathy0123456789]

Tested on TS5. Works great.

[Feras797]

I tested on TS5. (tl;dr: everything works as described.)

• I was able to manipulate files, delete, edit, create new files with no problems.
• Assessing the submission as the instructor also worked fine.
• Finally I was able to see my result as the student.