Programming exercises: Allow tutors to assess submissions in the new code 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.
• 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.
• 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

This should be the final view we have to replace until we can remove Ace from the online code editor.

Description

• Introduces two new types of editor elements:
  • Line highlights
  • Glyph margin hover button (follows the mouse)
• Makes it possible to manually assess submissions using the new code editor

Known issue:

• around 70 lines of gradlew.bat in the java template are falsely highlighted as new. I suspect this has something to do with line endings, but the problem occurs with Ace as well.

Steps for Testing

Prerequisites:

• 1 Instructor
• 1 Student
• 1 Programming Exercise
  • with a submission by the student and
  • with the online code editor enabled and
  • with manual assessment on (set the due date accordingly)

As the student

1. If you haven't done so already, make a submission to the programming exercise.

As the instructor

2. Sign in
3. Go to course management > your course > assessment > your programming exercise > exercise dashboard
4. Assess a new submission. Ensure that you can:

• Add a new line feedback item
• Remove an existing line feedback item
• Edit an existing line feedback item
• Save your assessment.
• Override your assessment.

5. Make sure to set the assessment due date so the students can see the results

As the student

6. Sign in.
7. View the assessment in the online code editor.
8. Ensure you can see all of the feedback you left.

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

Code Review

• Code Review 1
• Code Review 2

Manual Tests

• Test 1
• Test 2

Test Coverage

Client

Client

Class/File	Line Coverage	Confirmation (assert/expect)
code-editor-monaco.component.ts	91.44%	✅
monaco-editor-glyph-margin-hover-button.model.ts	90.62%	✅
monaco-editor-line-highlight.model.ts	100%	✅
monaco-editor.component.ts	97.84%	✅

Screenshots

Summary by CodeRabbit

Summary by CodeRabbit

• New Features
  • Enhanced code editor with new feedback suggestion system, allowing users to accept or discard suggestions.
  • Added highlighting of changed lines in the code editor for better visibility of modifications.
  • Implemented new user interface elements for feedback in the Monaco editor, including hover buttons and customizable line highlighting.
• Improvements
  • Updated code editor components to use Monaco editor consistently, improving performance and user interaction.
  • Added new styling options for Monaco editor to support both dark and default themes.
• Bug Fixes
  • Fixed issues related to file loading and event handling in the code editor.
• Documentation
  • Updated documentation to reflect new features and modifications in the code editor assessment process.
• Tests
  • Enhanced testing suite with new scenarios for feedback handling and editor interactions.
  • Adjusted existing tests to accommodate changes in editor components and assessment pages.

[coolchock]

re-tested on ts1, mentioned issues were resolved

[coolchock]

re-approve

[BaumiCoder]

Re-tested on my local machine