Programming exercises: Add button to start online IDE from exercise details

[iyannsch]

Note: A special test server with the required theia profile and infrastructure is currently in creation.

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 strictly followed the server 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 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 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

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

Motivation and Context

Fixes #8639 .

The currently existing online code editor in Artemis is a great tool for beginners to jump into programming exercises. However, its functionality is limited for more advanced use cases. In my master's thesis, we implement the online IDE Theia as an alternative way to interact with the Artemis exercise workflow. Student do not have to set up an IDE locally anymore, saving them time and the struggle to configure it to fit their numerous courses. Currently, there is no entry point (or jump-off point) for students to start their Theia Instance from Artemis.

Description

I added a new spring profile theia to switch this feature on/off. Without the profile active, no changes are visible.
For configuring this (and following) feature, I created a new prefilled configuration file in resources/config/application-theia.yml. The values are read and offered to the Client via a new TheiaInfoContributor.
In the Client, all configuration values are read, sanitized, and used to create a extensible button action. In future, the startOnlineIDE() function will be enhanced by communication steps between Artemis and Theia.

Please note that the functionality described in this PR is not production-ready but is one-of-many PRs that form an overall greater feature.

Steps for Testing

Prerequisites:

• 1 Instructor
• 2 Students
• 1 Programming Exercise with Complaints enabled

1. Add the theia profile to your run configuration or use the provided Artemis (Server, LocalVC & LocalCI, Theia) config.
2. Login as a student and navigate to the running programming exercise.
3. Verify that the new button (see screenshot below) is visible.
4. Verify that a new tab is opened that opens the Theia landing page on click.
5. Try to break the button (resize browser window, change light/dark mode, change language) :)

Exam Mode Testing

The proposed changes should not affect the exam mode.

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
• I (as a reviewer) 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

Class/File	Line Coverage	Confirmation (assert/expect)
TheiaInfoContributor	100%	✅
app/overview/exercise-details	87.78%	✅
app/shared/layout/profiles	82.65%	✅

Screenshots

Button as visible for a student

Summary by CodeRabbit

• New Features

  • Introduced support for Theia as an external online IDE, allowing users to start Theia directly from the exercise details page.

• Enhancements

  • Added "Open online IDE" action in both English and German interfaces.
  • Updated user interface to conditionally display the Theia button based on profile settings.

• Tests

  • Added test cases for Theia functionality to ensure correct behavior for profile and URL configurations.
  • Included tests for TheiaInfoContributor to validate its contribution to actuator info endpoints.

[coderabbitai]

Walkthrough

The changes introduce Theia, an online IDE, to enhance the user interface, particularly for programming exercises. This includes new constants, profile settings, and related functionality in the backend, frontend, and test suites to support launching and integrating Theia as an additional IDE option within Artemis.

Changes

Files/Path	Change Summary
.idea/runConfigurations/Artemis__Server__LocalVC___LocalCI__Theia_.xml	Added run configuration for Spring Boot application with specific profiles and parameters.
src/main/java/de/tum/in/www1/artemis/config/Constants.java	Introduced new constants for Spring profiles related to Theia.
src/main/java/de/tum/in/www1/artemis/service/theia/TheiaInfoContributor.java	Defined TheiaInfoContributor class to contribute Theia portal URL to actuator info endpoints under Theia profile.
src/main/webapp/app/app.constants.ts	Added new constant for Theia profile.
src/main/webapp/app/overview/exercise-details/exercise-details-student-actions.component.html	Introduced a conditional block to render Theia button based on theiaEnabled.
src/main/webapp/app/overview/exercise-details/exercise-details-student-actions.component.ts	Added properties and logic for online IDE functionality and opening Theia portal URL.
src/main/webapp/app/shared/layouts/profiles/profile-info.model.ts	Added new property theiaPortalURL to ProfileInfo class.
src/main/webapp/app/shared/layouts/profiles/profile.service.ts	Enhanced ProfileService to include theiaPortalURL in profileInfo object.
src/main/webapp/i18n/de/exercise-actions.json	Added localization for opening online IDE in German.
src/main/webapp/i18n/en/exercise-actions.json	Added localization for opening online IDE in English.
src/test/javascript/spec/service/profile.service.spec.ts	Added test cases for theiaPortalURL property within ProfileInfo object.
src/test/javascript/spec/component/shared/clone-repo-button.component.spec.ts	Included tests for theiaPortalURL property.
src/test/java/de/tum/in/www1/artemis/theia/TheiaInfoContributorTest.java	Added test class for TheiaInfoContributor focusing on PROFILE_THEIA.
src/test/javascript/spec/component/overview/exercise-details/exercise-details-student-actions.component.spec.ts	Added tests verifying visibility and behavior of "start Theia" button based on profile and URL configurations.

Sequence Diagram(s)

Diagram: Opening Theia from Exercise Details

sequenceDiagram
    participant User
    participant Browser
    participant ArtemisFrontend
    participant ArtemisBackend

    User->>Browser: Navigate to Exercise Details
    Browser->>ArtemisFrontend: Fetch Exercise Details
    ArtemisFrontend->>ArtemisBackend: Retrieve Profile Info
    ArtemisBackend-->>ArtemisFrontend: Response with Profile Info (including Theia URL)
    ArtemisFrontend-->>User: Render Exercise Details with Theia Button

    User->>Browser: Click Theia Button
    Browser->>ArtemisFrontend: Request to Open Theia
    ArtemisFrontend-->>Browser: Open Theia URL in a New Tab

Loading

Assessment against linked issues

Objective (Issues)	Addressed	Explanation
Add "online IDE" button to Exercise Details (#8639)	✅
Implement a new Spring Profile named "Theia" (#8639, #8602)	✅
Add Theia configuration and integration (#8639, #8602)	✅
Create UI for launching Theia from exercise details (#8639)	✅

Possibly related issues

• Programming Exercises: Implement Online IDE Theia #8602: The changes include implementing Theia as an optional online IDE within Artemis, aligning with the requirements of adding Theia functionality.
• Programming Exercise: Add Exercise-Wide Online IDE Settings #8785: This issue involves adding course-wide online IDE settings, which could be linked with the changes introducing Theia configuration.

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

• X
• Mastodon
• Reddit
• LinkedIn

Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai generate interesting stats about this repository and render them as a table.
  • @coderabbitai show all the console.log statements in this repository.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (invoked as PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 11

Outside diff range and nitpick comments (1)

src/main/webapp/app/shared/layouts/profiles/profile.service.ts (1)

Line range hint 97-97: Use strict equality comparison in TypeScript.

- return this.profileInfo.pipe(filter((x) => x != undefined) as OperatorFunction<ProfileInfo | undefined, ProfileInfo>);
+ return this.profileInfo.pipe(filter((x) => x !== undefined) as OperatorFunction<ProfileInfo | undefined, ProfileInfo>);

Using !== instead of != avoids type coercion and is a best practice in TypeScript.

[az108]

You should check on the client tests, i think you are getting a build failed due to an error in following file and line src/test/javascript/spec/service/profile.service.spec.ts(150,11)

[az108]

I get following error when i try to create a programming exercise on TS6

[az108]

But good work on the rest of the code!

[BBesrour]

Tested locally, works as expected:

• button visible and points to theia ide (with theia profile)
• Behavior unchanged when theia profile not set

However, I think client tests are not compiling and server tests are failing due to the missed class criteria.

[iyannsch]

@krusche I removed the future work comments, good point 👍 There also have been some minor config changes proposed by @bassner.
I did not integrate with other PR in regards to the UI clutter due to two reasons:
1: Those are PRs as well, integrating with code subject to change and discussion makes VC so much more complicated as unnecessary dependencies occur.
2 (and most important): The open online IDE button does not fit semantically into the clone dropdown as it´s way more functionality than just getting some repo. It should stay at the top-level together with the regular code editor.

[coderabbitai]

Actionable comments posted: 2

[b-fein]

Code re-approve.

[BBesrour]

re-approve

[az108]

reapprove after changes on config file, LGTM

[krusche]

We want to rename the clone repository button to "Code" (like it is done on Github e.g.) and then include most buttons in there. We could potentially merge this PR in the mean time, because this button will only be available on test servers configured with the theia profile

[bassner]

I'll merge this so it is available for testing. @iyannsch, when we merge the buttons into the "Code" dropdown, please ensure to also move this button.