Development: Reimplement course icon file upload

[julian-christl]

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.

Server

• I followed the coding and design guidelines.
• I added multiple integration tests (Spring) related to the features (with a high test coverage).
• I added @PreAuthorize and checked the course groups for all new REST Calls (security).
• I implemented the changes with a good performance and prevented too many database calls.
• I documented the Java code using JavaDoc style.

Client

• I followed the coding and design guidelines and ensured that the layout is responsive.
• 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 documented the TypeScript code using JSDoc style.
• I added multiple screenshots/screencasts of my UI changes.

Motivation and Context

Follows #5427 to reimplement all file uploads in our system in a uniform and secure way.

Description

• Moved PUT /api/course to PUT /api/course/:id to reflect our standard. I, therefore, also removed the implementation to create a course with PUT. This is not used in our system and only complicates the implementation.
• Modified the create and update endpoints of the course to receive an optional file and save it as the course icon
• Removed the manual upload of the icon and replaced it with a streamlined upload when saving the course.
• Adapted the implementation of detecting changes in the user groups
• I implemented a workaround in the cypress tests because the response's body is an ArrayBuffer instead of an object. Such an issue is already documented (e.g. intercept() sometimes parses request or response body as ArrayBuffer cypress-io/cypress#17055 for intercept()). Therefore, I implemented a fix that will fail once this gets fixed by Cypress. We can then remove the workaround.

Steps for Testing

Prerequisites:

• 1 Admin
• 1 Instructor

1. Create Course A with an Admin with a custom image
2. Create Course B with an Admin without a custom image
3. Update a course with an admin adapting the image (expect image updated)
4. Update a course with an admin adapting the user groups (expect groups updated)
5. Update a course with an instructor adapting the image (expect image updated)
6. Update a course with an instructor adapting the image and the user group (you may have to use the API or enable the fields in the DOM. Expect error, no image update)

Review Progress

Code Review

• Review 1
• Review 2

Manual Tests

• Test 1
• Test 2

Test Coverage

Class/File	Branch	Line
CourseResource.java	72%	95.25%
course-management.service.ts	77.06%	90.21%
course-update.component.ts	70.24%	86.2%
file-uploader.service.ts	41.66%	53.84%
image-cropper.component.ts	33.5%	45.25%

Screenshots

Before

After

[ge65cer]

Tested on TS1 in the testing session.
When editing the course without uploading a new icon, I can click the save button, but the changes are not persisted (no request sent to the server).

[JohannesStoehr]

#5691 adds the possibility to delete the course icon. Maybe you could talk to the other developer and find a unified solution for your both PRs

[stefanwaldhauser]

Code lgtm. Gj!

[JohannesStoehr]

Checked the code changes again. Looks good to me

[stefanwaldhauser]

Reapprove

[rriyaldhi]

Reapprove