Programming exercises: Improve error messages for connection issues in online code editor

[JohannesStoehr]

Checklist

General

• This is a small issue that I tested locally and was confirmed by another developer 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

• 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 followed the coding and design guidelines.
• 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.
• I translated all newly inserted strings into English and German.

Motivation and Context

Students should not be confused when the connection issues to the Artemis server cause the online editor to malfunction. So the error messages should be improved.

Description

Whenever an action is not possible in the code editor due to a connection issue an error is displayed at the top right telling the student about this problem.
Additionally when trying to load a file without an internet connection a blank file is shown instead of the last loaded file as before this PR. This blank file is read only.

Steps for Testing

Prerequisites:

• 1 Instructor
• 1 Student
• 1 Programming Exercise with online editor enabled

1. Log in to Artemis
2. Participate using the online editor
3. Loose internet connection by turning of wifi or stopping the server when testing locally
4. Interact with the code editor and check that all actions (submitting, loading an unloaded file, ...) cause an error message at the top right
5. Loading and editing existing files that were loaded before the connection loss should still be possible
6. Reconnect to the server
7. Check that any changes during the connection loss can now be successfully submitted

Exam Mode Testing

Prerequisites:

• 1 Instructor
• 1 Student
• 1 Exam with a Programming Exercise

1. Same as for normal exercises but within an exam

Review Progress

Performance Review

• I 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

Exam Mode Test

• Test 1
• Test 2

Test Coverage

Client

Class/File	Line Coverage	Confirmation (assert/expect)
code-editor-ace.component.ts	80.83%	✅
code-editor-container.component.ts	85.29%	✅

Screenshots

[rriyaldhi]

Code looks good.

[YeetTheFirst21]

Tested on TS1, all seems to be working as expected

checked both normal coding exercises and exam mode.

[MaximilianAnzinger]

Code LGTM

[RY997]

Tested on ts4, worked well.

[Strohgelaender]

code looks good to me

[DominikRemo]

Code LGTM

[pal03377]

Offline mode and errors are working for me after some delay (see video). TS5, exam mode testing session.

I get errors for all operations except for deletion, where I get no feedback at all:
https://github.com/ls1intum/Artemis/assets/9006596/f36a3a46-c431-418a-903f-efcbfe18eb6c

I would be fine with this being solved in a follow-up though => approve ✅
Note: The deletion errors were visible for @aplr in Firefox, but not for me in Chrome.

[tobias-lippert]

Other than the issues @pal03377 mentioned, the improvements worked.

[FelixTJDietrich]

Tested on ts5 during the exam testing session. I got errors when not connected to wifi for all operations except the deletion of the file on both Safari and Chrome.

Note that rename and adding a file does explicitly state that the internet connection is bad.

[basak-akan]

Tested on TS5 during exam mode testing session. Loading and editing existing files works as described.
However, I don't receive any error for deletion while offline as @pal03377 mentioned.