Programming exercises: Change the build plan editors to Monaco

[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.
• I strictly followed the client coding and design guidelines.
• I added multiple screenshots/screencasts of my UI changes.

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).
• I tested all changes and their related features with all corresponding user types on a test server configured with Gitlab and Jenkins.

Motivation and Context

We want to replace Ace with Monaco. As of now, all custom build plan/script editors in Artemis use Ace.

Description

• Replaced Ace with Monaco in three components:
  • Custom build plan editor
  • Custom Aeolus build plan editor
  • Build plan editor

Steps for Testing

Caution

One E2E test is failing because of the branch name...

Caution

Due to the issue #8980, you may encounter situations where the build script is not updated on the first attempt. Any subsequent attempts should work, though.

Prerequisites:

• 1 Instructor
• 1 Programming Exercise
• 1 Test Server with LocalVC/CI enabled (e.g. TS1-3)
• 1 Test Server with Gitlab/Jenkins (e.g. TS6)
• 1 Local setup with Aeolus and LocalVC/CI

Aeolus setup:

1. Start Aeolus:
   docker compose -f docker/aeolus.yml up -d

2. Add to application-local.yml

aeolus:
    url: http://localhost:8090

3. Adjust your server run config to include the following profiles:
   dev,localci,localvc,artemis,scheduling,buildagent,aeolus,core,ldap-only,local

4. Run the server and the client.

---

On your local setup (set up Aeolus as described above):

1. Navigate to course management > your course > exercises > click the title of your programming exercise.
2. Click "Edit"
3. Scroll down and tick the box "Customize build script"
4. Verify that you can add / remove actions and edit the corresponding build scripts.
5. Save the exercise and verify that the changes were saved.

---

On the Test Server with LocalVC

1. Navigate to course management > your course > exercises > click the title of your programming exercise.
2. Click "Edit"
3. Scroll down and tick the box "Customize build script"
4. Verify that you can edit the build script.
5. Save the exercise and verify that the changes were saved.

---

On the Test Server without LocalVC

1. Navigate to course management > your course > exercises > click the title of your programming exercise.
2. Click "Edit build plan"
3. Verify that you can edit the build plan
4. Click "Submit" and verify that the changes were saved.

Testserver States

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)
build-plan-editor.component.ts	100%	✅
programming-exercise-custom-aeolus-build-plan.component.ts	95.29%	✅
programming-exercise-custom-build-plan.component.ts	100%	✅

Screenshots

Build script editor

Build script editor (Aeolus)

Build plan editor

Summary by CodeRabbit

• New Features

  • Replaced Ace Editor with Monaco Editor across various programming exercise components for an enhanced editing experience.

• Improvements

  • Updated layouts and styling in script editing sections to improve user interaction and visual presentation.

• Bug Fixes

  • Adjusted editor configurations to ensure better performance and layout handling.

• Tests

  • Updated test configurations to include Monaco Editor and removed dependencies on Ace Editor.

[Jan-Thurner]

code

[JohannesStoehr]

Reapprove code with tab size settings

[sarpsahinalp]

Code lgtm

[Strohgelaender]

Is it intended that the checkbox "Customize Build Script" is also disabled if the script is already customized?

Yes this was intentional. The checkbox was not really meant as a setting but more as a 'hide details' button. I see why this is confusing, but in the future we want to move away from this position anyways (see #8994) so this is nothing we need to fix.

[egekurt123]

Tested on TS4(LocalVC/CI) and on TS6 (Gitlab) works as expected on both