General: Improve exercise view when using LTI

[raffifasaro]

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

• 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 (e.g. using paging).
• I strictly followed the principle of data economy for all client-server REST calls.
• 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.

Motivation and Context

The LTI iFrame was displaying footer, header and sidebars. Since moodle is already used to navigate the exercises we can omit most of these to get a more focused and cleaner look.

Description

The changes mainly concern the creation of a new Lti frontend service to track if the frontend is launched by LTI or not. This is used to remove unwanted elements from different components.

Steps for Testing

Prerequisites:

• Access to Moodle
• Testserver 1

1. Make sure you are logged in to Artemis with a test user (artemis_test_user_{1-5})
2. Navigate to Moodle and login with the same test user (artemis_test_user_{1-5}, same PW as for the Artemis Test Server)
3. Go to My Courses and open the course TS1 - Artemis Feature Demo Course
4. Click on one of the exercise
5. Artemis should open in an iFrame and display just the main exercise body as shown in the screenshots.
   (If Moodle throws an error in the iFrame, just refresh the page)

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

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 even for very large courses with more than 2000 students.
• I (as a reviewer) confirm that the server changes (in particular related to database calls) are implemented with a very good performance even for very large courses with more than 2000 students.

Code Review

• Code Review 1
• Code Review 2

Manual Tests

• Test 1
• Test 2

Test Coverage

Client

Client

Class/File	Line Coverage	Confirmation (assert/expect)
lti13-exercise-launch.component.ts	90%	✅
course-exercises.component.ts	89.7%	✅
course-overview.component.ts	86.39%	✅
main.component.ts	73.61%	✅
lti.service.ts	83.33%	✅

Screenshots

Summary by CodeRabbit

• New Features
  • Introduced LTI support with conditional rendering based on LTI context.
  • Added a new LtiService to manage LTI state across components.
  • Enhanced component responsiveness with conditional styling based on LTI state.
• Bug Fixes
  • Improved error handling in the onResize method to prevent potential issues.
• Tests
  • Enhanced test suite for CourseOverviewComponent with improved assertions and logic checks.

[github-actions]

⚠️ Unable to deploy to test servers ⚠️

The docker build needs to run through before deploying.

[github-actions]

⚠️ Unable to deploy to test servers ⚠️

The docker build needs to run through before deploying.

[raffifasaro]

after the recent changes, I sadly get following message and not the exercise anymore

This is a common issue with Moodle/LTI, refreshing the page should fix it.

[az108]

Thanks for clarifying, still works 👍

[pzdr7]

Tested on TS1.

The exercise loads and the sidebar, header, and footer are not shown.

While loading, the sidebar pops up for a moment. Maybe in a follow-up, you can reduce this delay.

[iyannsch]

Code looks good, thanks for the work! I've got 1 small question inline and would love some clarity there ;)

[iyannsch]

Is the updateNavbarItems functionality really strictly bound to the itemsDrop? I'm not 100% certain with that functionality, thus, the question.. :)

[krusche]

The changes look good to me 👍 We can implement additional improvements in follow-up PRs