Programming exercises: Add simple mode to create and edit view

[florian-glombik]

Checklist

General

• I tested all changes and their related features with all corresponding user types on a test server.
• Language: I followed the guidelines for inclusive, diversity-sensitive, and appreciative language.
• I chose a title conforming to the naming conventions for pull requests.

Client

• I strictly followed the client coding and design guidelines.
• I added multiple integration tests (Jest) related to the features (with a high test coverage), while following the test guidelines. (added tests for the grading component)
• I documented the TypeScript code using JSDoc style.
• I added multiple screenshots/screencasts of my UI changes.
• I translated all newly inserted strings into English and German.

Motivation and Context

Programming exercises offer diverse configuration options and can be overwhelming to configure for new users (new instructors).
This PR should allow instructors to lower the learning curve for the configuration programming exercises, allowing new instructors to get started with creating basic programming exercises.
If advanced features are needed, it is easy to switch to the advanced mode for the respective configuration detail.
The current selection of configuration options is a starting point, as multiple different opinions are likely to be present, some which might not have been considered yet, it shall be simple to adjust the configuration option that are available in the simple mode (modification via a simple datastructure).

Description

• Added the new simple mode for the configuration of programming exercises that displays a reduced subset of configuration options
• Added a button to switch between the simple mode and the advanced mode
• Added a datastructure (see programming-exercise-update.helper.ts) to easily allow a modification of which fields are displayed in the simple mode/advanced mode (this also includes adding a bunch of if checks in the respective template parts)
• Added a folder structure for update components
• Unified touched components (made readonly variables protected and moved them to the top of the component)
• Fixed initialization of isEdit variable in programming-exercise-update.component.ts
• Save the isSimpleMode value in the localStorage to keep the mode after a page reload
• Introduced signals where possible with reasonable effort
• Fixed console error in category-selector.component.ts
• Added client validation for exerciseTitle (for all exercise types) and shortName

Note

• I am using Signals, e.g. for isSimpleMode, which are called in the template with isSimpleMode() to access the respective value. This is not a standard function call that would need to be prevented in the template.
• It is intended that the short name of a programming exercise cannot be edited after the creation. This has implications on the build system and would require a potentially expensive renaming of existing repositories or tracking of renamings.

Steps for Testing

Prerequisites:

• 1 Instructor

1. Create a new programming exercise in the simple mode
2. Verify that a valid Short Name was created
3. Verify the creation was successful without any problems
4. Verify that switching between the simple mode and the advanced mode works as expected
5. Edit an exercise
6. Verify editing and saving the respective changes works
7. Import an exercise
8. Verify there are no problems during the import
9. Verify there is no change in behaviour for other exercise types (text, modeling, file upload, quiz)

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

Link to E2E tests Playwright (MySQL, Local)

Client

Class/File	Line Coverage	Confirmation (assert/expect)
exam-update.component.ts	88.95%	✅
add-auxiliary-repository-button.component.ts	100%	✅
programming-exercise-update.component.ts	88.44%	✅
programming-exercise-update.helper.ts	100%	✅
switch-edit-mode-button.component.ts	100%	✅
programming-exercise-information.component.ts	91.05%	✅
programming-exercise-lifecycle.component.ts	95.23%	✅
exercise-title-channel-name.component.ts	96.77%	✅
form-footer.component.ts	100%	✅
form-status-bar.component.ts	84.61%	✅
title-channel-name.component.ts	100%	✅
utils.ts	96.72%	✅
custom-not-included-in-validator.directive.ts	30%	❌

Screenshots

New

New simple mode with option to switch to the advanced mode and back

Screencast:

Screenshots:

Old

Summary by CodeRabbit

Summary by CodeRabbit

• New Features

  • Introduced a toggle button for switching between simple and advanced edit modes for programming exercises.
  • Added new components for selecting difficulty levels in programming exercises.
  • Implemented a new ProgrammingExerciseInformationComponent for enhanced management of programming exercises.

• Enhancements

  • Improved user interface and conditional rendering for various components related to programming exercises.
  • Enhanced stability and error handling in the course detail component.
  • Refined the component structure and organization for better maintainability.
  • Integrated reactive programming concepts across multiple components for improved state management and responsiveness.
  • Enhanced encapsulation and access control for component properties.

• Localization

  • Updated user interface labels for programming exercise management in multiple languages.

• Tests

  • Enhanced test coverage for various components related to programming exercises, including lifecycle and update components.
  • Improved test initialization and setup for the ProgrammingExerciseInformationComponent.

Change requests were addressed

[pzdr7]

Reapprove code

[sachmii]

Tested on TS3, re-approve.

[zagemello]

Reapproved

[HawKhiem]

Tested on TS3. Reapprove

[BBesrour]

retested on TS3, lgtm

[cremertim]

Reapprove

[flbrgit]

Tested on TS3 and reapprove