Programming exercises: Add custom themes for the Monaco editor

[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 strictly followed the client 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. (see Allow CSS variables in themes microsoft/monaco-editor#2427)
• I added multiple integration tests (Jest) related to the features (with a high test coverage), while following the test guidelines.
• I documented the TypeScript code using JSDoc style.
• 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).

Motivation and Context

We would like to have more control over the styling of the Monaco editor. Currently, we only use the default themes.

Description

• Introduced interfaces for theme definitions, consisting of
  • an ID and a base theme
  • an interface for the colors of the editor
  • rules for the language tokens (-> syntax highlighting) that can be applied globally or to just one language
• Adjusted the colors of the editor; particularly, the diff editor now has a theme that is much closer to what you would see on GitHub

Steps for Testing

Prerequisites:

• 1 Instructor
• 1 Programming exercise

1. Log in to Artemis
2. Navigate to course management > your course > exercise and click the title of the exercise.
3. Scroll down to and click "Review Changes" and ensure the new diff theme loads (you can compare it to the old design using the screenshots below)
4. Close the modal
5. Change your Artemis theme
6. Click "Review Changes" again. As before, ensure the new diff theme loads

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

Class/File	Line Coverage	Confirmation (assert/expect)
monaco-dark.theme.ts	100%	✅
monaco-editor-theme.model.ts	100%	✅
monaco-light.theme.ts	100%	✅
monaco-editor.service.ts	100%	✅

Screenshots

Before

After

Summary by CodeRabbit

• New Features

  • Introduced custom dark and light themes for the Monaco editor.
  • Added styling configurations for editor colors and language tokens.

• Bug Fixes

  • Disabled the focus border around the editor for a cleaner appearance.

• Tests

  • Added unit tests to ensure proper theme registration functionality.

[SimonEntholzer]

Code lgtm

[BBesrour]

code lgtm

[az108]

Tested on TS4, works as expected also after theme change 👍 I like the new custom theme a lot :)

[raffifasaro]

Tested on TS1, new theme looks like in screenshots and all changes seem to work

[krusche]

The new theme looks much better 👍