`Development`: Web IDE integration #6706

daniels98it · 2023-06-13T21:18:34Z

Checklist

General

I tested all changes and their related features with all corresponding user types on a test server.
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.

Server

Important: I implemented the changes with a very good performance and prevented too many (unnecessary) database calls.
I followed the coding and design guidelines.
I added multiple integration tests (Spring) related to the features (with a high test coverage).
I added pre-authorization annotations according to the guidelines and checked the course groups for all new REST Calls (security).
I documented the Java code using JavaDoc style.

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.
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 added authorities to all new routes and checked the course groups for displaying navigation elements (links, buttons).
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.

Changes affecting Programming Exercises

I tested all changes and their related features with all corresponding user types on Test Server 1 (Atlassian Suite).
I tested all changes and their related features with all corresponding user types on Test Server 2 (Jenkins and Gitlab).

Motivation and Context

The currently used code editor was and still currently is an important functionality provided by Artemis to solve programming exercises. However, instructors and students expressed their willingness in having more features when coding with it.

Description

This pull request introduces an additional environment for solving programming exercise tasks. This new "webIDE" resembles the currently used code editor, but integrates a new set of features to it. Based on Monaco and leveraging the intellisense capabilities provided by LSP, supports the user during the coding tasks, while keeping the easy to use and familiar coding environment as in the current code editor.

In addition to the new integrated editor, the "webIDE" features a terminal like interface, providing the user with a sandboxed environment to test or run its code using custom commands. While being a more advanced way to run code, a sandboxed environment provides the user with a more flexible way to interact with the produced code, without relying on the predefined CI pipelines.

Currently supported programming languages:

Java (Maven/Gradle) ☕
Python 🐍
C / FACT 💻

Currently supported LSP features:

Syntax Highlighting
Syntax Error Highlighting
Autocompletion / Suggestions
Documentation on hover
Code lenses

IMPORTANT

Currently a Webpack plugin is used to load the Monaco editor resources. With Development: Update to Angular 16 and speedup the build process #6546 custom Webpack configurations have been removed, but still needed in this PR as for the time of writing. Some changes might still be necessary to make it compatible with Vite in the future.
The be functional, Artemis needs to communicate to an external LSP Integration Server managing the LSP and terminal sessions and providing the webIDE with the related functionalities.

Steps for Testing

Prerequisites:

1 Instructor
2 Students
1 Programming Exercise with Complaints enabled

Log in to Artemis
Navigate to Course Administration
...

Exam Mode Testing

Prerequisites:

1 Instructor
2 Students
1 Exam with a Programming Exercise

Log in to Artemis
Participate in the exam as a student
Make sure that the UI of the programming exercise in the exam mode stays unchanged. You can use the exam mode documentation as reference.
...

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
I confirm that the server changes (in particular related to database calls) 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

Screenshots

java_example.mp4

python_example.mp4

src/main/java/de/tum/in/www1/artemis/service/MonacoEditorService.java

# Conflicts: # src/main/webapp/app/exercises/programming/shared/code-editor/code-editor.module.ts # src/main/webapp/i18n/en/global.json

github-actions · 2023-06-24T12:04:09Z

There hasn't been any activity on this pull request recently. Therefore, this pull request has been automatically marked as stale and will be closed if no further activity occurs within seven days. Thank you for your contributions.

github-actions · 2023-07-05T12:04:58Z

There hasn't been any activity on this pull request recently. Therefore, this pull request has been automatically marked as stale and will be closed if no further activity occurs within seven days. Thank you for your contributions.

src/main/java/de/tum/in/www1/artemis/service/monaco/MonacoEditorService.java

+            terminalInitRequest.put("projectType", programmingParticipation.getProgrammingExercise().getProjectType().name());
+        }
+
+        HttpResponse response = this.sendRequest(new HttpPost(url), terminalInitRequest, true, false);


src/main/java/de/tum/in/www1/artemis/service/monaco/MonacoEditorService.java

+        filesUpdateRequest.put("changes", fileUpdates);
+
+        try {
+            this.sendRequest(new HttpPut(url), filesUpdateRequest, false, true);


src/main/java/de/tum/in/www1/artemis/service/monaco/MonacoEditorService.java

+        fileRenamingRequest.put("new", fileMove.newFilename());
+
+        try {
+            this.sendRequest(new HttpPut(url), fileRenamingRequest, false, true);


src/main/java/de/tum/in/www1/artemis/service/monaco/MonacoEditorService.java

+        fileRemovalRequest.put("filename", filename);
+
+        try {
+            this.sendRequest(new HttpPut(url), fileRemovalRequest, false, true);


src/main/java/de/tum/in/www1/artemis/service/monaco/MonacoEditorService.java

+     * @return the current server's status
+     */
+    private LspServerStatus checkLspServerHealth(LspServerStatus serverStatus) {
+        HttpGet request = new HttpGet(serverStatus.getUrl() + this.lspHealthEndpoint);


github-actions · 2023-07-16T12:04:00Z

There hasn't been any activity on this pull request recently. Therefore, this pull request has been automatically marked as stale and will be closed if no further activity occurs within seven days. Thank you for your contributions.

…ature/web-ide

github-actions · 2023-07-26T12:04:28Z

There hasn't been any activity on this pull request recently. Therefore, this pull request has been automatically marked as stale and will be closed if no further activity occurs within seven days. Thank you for your contributions.

github-actions · 2023-08-10T12:04:37Z

There hasn't been any activity on this pull request recently. Therefore, this pull request has been automatically marked as stale and will be closed if no further activity occurs within seven days. Thank you for your contributions.

github-actions · 2023-11-10T12:04:23Z

There hasn't been any activity on this pull request recently. Therefore, this pull request has been automatically marked as stale and will be closed if no further activity occurs within seven days. Thank you for your contributions.

Added monaco editor with terminal and LSP integration

b3d14e7

github-actions bot assigned daniels98it Jun 13, 2023

github-actions bot added client Pull requests that update TypeScript code. (Added Automatically!) config-change Pull requests that change the config in a way that they require a deployment via Ansible. server Pull requests that update Java code. (Added Automatically!) labels Jun 13, 2023

github-advanced-security bot found potential problems Jun 13, 2023

View reviewed changes

daniels98it added 4 commits June 14, 2023 21:36

Fixed code checks and added missing config

75b9487

Added missing JavaDoc

5fe564e

Fixed client tests

033852d

Merge branch 'develop' into feature/web-ide

53530ac

github-actions bot added the tests label Jun 14, 2023

daniels98it added 4 commits June 14, 2023 22:26

Other small fixes

1e64e33

Merge branch 'develop' into feature/web-ide

a5f3a18

# Conflicts: # src/main/webapp/app/exercises/programming/shared/code-editor/code-editor.module.ts # src/main/webapp/i18n/en/global.json

Teamscale fixes

4f46a9c

Added LSP profile

0179852

github-actions bot added the stale label Jun 24, 2023

daniels98it added 2 commits June 27, 2023 22:46

Merge branch 'develop' into feature/web-ide

63dd1a2

Refactorings

f07a8a8

github-actions bot removed the stale label Jun 28, 2023

github-actions bot added the stale label Jul 5, 2023

Merge branch 'develop' into feature/web-ide

4beed6c

github-advanced-security bot found potential problems Jul 9, 2023

View reviewed changes

Codacy fixes

d3acf44

github-actions bot removed the stale label Jul 9, 2023

github-actions bot added the stale label Jul 16, 2023

Merge branch 'develop' into feature/web-ide

670de6a

Merge branch 'feature/web-ide' of github.com:ls1intum/Artemis into fe…

bf3038c

…ature/web-ide

github-actions bot removed the stale label Jul 18, 2023

github-actions bot added the stale label Jul 26, 2023

daniels98it added 2 commits August 2, 2023 17:34

Refactored in separate services

08658eb

Added server tests

c94f956

github-actions bot removed the stale label Aug 3, 2023

github-actions bot added the stale label Aug 10, 2023

github-actions bot closed this Aug 25, 2023

krusche mentioned this pull request Oct 21, 2023

Programming exercises: Refactor online editor to use native ACE file sessions #7393

Closed

krusche reopened this Nov 3, 2023

github-actions bot removed the stale label Nov 3, 2023

github-actions bot added the stale label Nov 10, 2023

github-actions bot closed this Nov 24, 2023

krusche deleted the feature/web-ide branch April 22, 2024 09:28

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`Development`: Web IDE integration #6706

`Development`: Web IDE integration #6706

daniels98it commented Jun 13, 2023 •

edited

Loading

github-actions bot commented Jun 24, 2023

github-actions bot commented Jul 5, 2023

github-actions bot commented Jul 16, 2023

github-actions bot commented Jul 26, 2023

github-actions bot commented Aug 10, 2023

github-actions bot commented Nov 10, 2023

Development: Web IDE integration #6706

Development: Web IDE integration #6706

Conversation

daniels98it commented Jun 13, 2023 • edited Loading

Checklist

General

Server

Client

Changes affecting Programming Exercises

Motivation and Context

Description

Steps for Testing

Exam Mode Testing

Review Progress

Performance Review

Code Review

Manual Tests

Exam Mode Test

Test Coverage

Screenshots

github-actions bot commented Jun 24, 2023

github-actions bot commented Jul 5, 2023

github-actions bot commented Jul 16, 2023

github-actions bot commented Jul 26, 2023

github-actions bot commented Aug 10, 2023

github-actions bot commented Nov 10, 2023

`Development`: Web IDE integration #6706

`Development`: Web IDE integration #6706

daniels98it commented Jun 13, 2023 •

edited

Loading