Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

General: Improve exercise view when using LTI #9329

Merged
merged 45 commits into from
Oct 12, 2024

Conversation

raffifasaro
Copy link
Contributor

@raffifasaro raffifasaro commented Sep 18, 2024

Checklist

General

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.
image

Description

image

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

image
image

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 github-actions bot added server Pull requests that update Java code. (Added Automatically!) client Pull requests that update TypeScript code. (Added Automatically!) labels Sep 18, 2024
@raffifasaro raffifasaro temporarily deployed to artemis-test1.artemis.cit.tum.de September 18, 2024 14:49 — with GitHub Actions Inactive
Copy link

⚠️ Unable to deploy to test servers ⚠️

The docker build needs to run through before deploying.

@github-actions github-actions bot added the deployment-error Added by deployment workflows if an error occured label Sep 18, 2024
@raffifasaro raffifasaro added deploy:artemis-test1 and removed deployment-error Added by deployment workflows if an error occured labels Sep 18, 2024
@raffifasaro raffifasaro temporarily deployed to artemis-test1.artemis.cit.tum.de September 18, 2024 16:00 — with GitHub Actions Inactive
Copy link

⚠️ Unable to deploy to test servers ⚠️

The docker build needs to run through before deploying.

@github-actions github-actions bot added the deployment-error Added by deployment workflows if an error occured label Sep 19, 2024
@raffifasaro raffifasaro removed the deployment-error Added by deployment workflows if an error occured label Sep 19, 2024
Copy link
Contributor

@az108 az108 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

image

@raffifasaro
Copy link
Contributor Author

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

image

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

Copy link
Contributor

@az108 az108 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for clarifying, still works 👍

Copy link
Contributor

@pzdr7 pzdr7 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested on TS1.

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

image

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

image

Copy link
Contributor

@iyannsch iyannsch left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

this.updateVisibleNavbarItems(window.innerHeight);
if (!this.anyItemHidden) this.itemsDrop.close();
if (this.itemsDrop) {
this.updateVisibleNavbarItems(window.innerHeight);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@krusche krusche changed the title Improve-LTI-exercise-UI General: Improve exercise view when using LTI Oct 12, 2024
@krusche krusche added this to the 7.6.0 milestone Oct 12, 2024
Copy link
Member

@krusche krusche left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@krusche krusche merged commit 4dacc21 into develop Oct 12, 2024
63 of 69 checks passed
@krusche krusche deleted the chore/improve-lti-exercise-ui branch October 12, 2024 11:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
chore client Pull requests that update TypeScript code. (Added Automatically!) component:LTI ready for review tests
Projects
Status: Merged
Development

Successfully merging this pull request may close these issues.

5 participants