Programming exercises: Move the open repository buttons to the new code popup

[pzdr7]

Checklist

General

• I tested all changes and their related features with all corresponding user types on a test server.
• 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 strictly followed the client coding and design guidelines.
• 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).

Motivation and Context

• We want to have a more consistent experience when it comes to opening the repository in a readonly view
• We want to reduce the number of buttons displayed to students when they work on programming exercises.

Description

• Renamed the "Clone repository" button to "Code". In the future, we may move the online code editor / online IDE buttons into this popup as well (inspired by the GitHub "Code" button).
• Added a link (for LocalVC; others are unchanged) to the Code popup that opens the repository view

Steps for Testing

Prerequisites:

• 1 Instructor
• Test Server with LocalVC enabled
• 1 Programming exercise with 1 participation, manual assessment enabled, and both online editor and local IDE enabled

Student view (for easier testing, do this step as an instructor. you will need instructor access for the steps later)

1. Log in
2. Go to Courses > Your course > Your programming exercise
3. Start your participation (if you haven't yet)
4. Check that there is no "Open Repository" button
5. Click on the "Code" button
6. Verify that you can see the button and click it.
7. It should take you to a new tab with the repository view.

Instructor: Exercise participations:

8. Go back to the exercise
9. Go to Instructor actions: Participations
10. Verify that there is one column with the "Code" button
11. Check that the button that links to the repository works as expected

Instructor: Exercise scores

12. Go back to the exercise
13. Go to Instructor actions: Scores
14. Check that the Code button works as for the previous steps

Instructor: Template/Solution/Tests repos:

15. Go back to the exercise
16. Go to instructor actions: View
17. For each of the template/solution/tests repos, check if the Code button works as for the previous steps. Note that we currently do not support viewing the Auxiliary Repositories.

Instructor: Manual assessment example solution

18. Go to the Assessment Dashboard (important: do not continue past the initial page. if you do not see the "I have read and understood the instructions" button, use a different account)
19. Scroll down to
20. Check that the "Code" button works as expected.

Exam Mode Testing

Prerequisites:

• 1 Testserver with LocalVC enabled
• 1 Exam with a programming exercise (enable both the online editor and the local IDE)
• 1 Student
• 1 Instructor

Student participation and summary

1. Participate in the exam as a student. Make a submission using the online editor.
2. Check that you can use the "Code" button during the exam to open the repository in a new tab.
3. Hand in the exam and view the summary. Check that you can use the Code button there to open the repository this way.

Instructor: summary

4. As the instructor, go to course management > your course > your exam > student exams
5. View the student exam you submitted and go to its summary.
6. Verify that the Code button works as expected

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

Only non-trivial changes in .ts files; the rest of the changes are in either the playwright tests or HTML templates

Screenshots

Student view (regular)

Before

After

The repository view can now be accessed via the button in the popup:

Instructor: Exercise participations

Before

After

Instructor: Exercise scores

Before

After

Tutor/Instructor: Example solution (manual assessment)

Before

After

Exam participation / summary

Before

Participation

Summary

After

Participation

Summary

Summary by CodeRabbit

• New Features

  • Updated button labels and conditional rendering for SSH and local version control settings in code buttons.
  • Enhanced visibility and interaction options for repository management in both student and instructor views.

• Documentation

  • Refined exam conduction, exercise saving, and repository access instructions in user guides.

• Bug Fixes

  • Simplified and clarified repository link retrieval methods for better user experience.

• Localization

  • Removed outdated translations related to repository access in German and English localization files.

[az108]

The only trouble i faced was trying to test sumbit my code as this error came up on the test server. But this is unrelated to the PR as far as I am aware.

[az108]

Tested on TS1 all Steps for a normal programming Exercise and then created an exam with a programming exercise and tested it aswell. Everything works as expected and I like the changes 😄 . Code LGTM aswell 👍

[JohannesStoehr]

Reapprove code. Also looked at the documentation changes

[BBesrour]

re-approve, docs lgtm

[krusche]

Tested the changes, works well 👍