General: Add conditional tooltip for edit button in exam exercise row
#10429
Conversation
github-actions
bot
added
the
client
helios-aet
bot
temporarily deployed
to
artemis-test1.artemis.cit.tum.de
|
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. |
WalkthroughThe changes update the exam exercise row buttons component by wrapping the edit button in a Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ExamComponent
User->>ExamComponent: Hover over edit button
ExamComponent->>ExamComponent: Call hasExamStarted()
alt Exam has started
ExamComponent->>User: Display tooltip with exam restriction message
else
ExamComponent->>User: Display normal edit button
end
Possibly related PRs
Suggested labels
Suggested reviewers
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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 using PR comments)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/main/webapp/app/exercises/shared/exam-exercise-row-buttons/exam-exercise-row-buttons.component.html (1)
111-120: Conditional Tooltip Implementation and Accessibility Enhancement
The added<span>wrapping the edit button with a conditional tooltip usingngbTooltipis clear and correctly leverages thehasExamStarted()function. This cleanly disables the edit function when the exam is running.To further improve accessibility, consider adding an
aria-disabledattribute on the anchor element so that assistive technologies understand the button’s disabled state.- <a - [class.disabled]="hasExamStarted()" - [routerLink]="['/course-management', course.id, 'exams', exam.id, 'exercise-groups', exerciseGroupId, exercise.type + '-exercises', exercise.id, 'edit']" - class="btn btn-warning btn-sm me-1" - > + <a + [class.disabled]="hasExamStarted()" + [attr.aria-disabled]="hasExamStarted()" + [routerLink]="['/course-management', course.id, 'exams', exam.id, 'exercise-groups', exerciseGroupId, exercise.type + '-exercises', exercise.id, 'edit']" + class="btn btn-warning btn-sm me-1" + >
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/main/webapp/app/exercises/shared/exam-exercise-row-buttons/exam-exercise-row-buttons.component.html(1 hunks)src/main/webapp/i18n/de/quizExercise.json(1 hunks)src/main/webapp/i18n/en/quizExercise.json(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
`src/main/webapp/**/*.html`: @if and @for are new and valid ...
src/main/webapp/**/*.html: @if and @for are new and valid Angular syntax replacing *ngIf and *ngFor. They should always be used over the old style.
src/main/webapp/app/exercises/shared/exam-exercise-row-buttons/exam-exercise-row-buttons.component.html
`src/main/webapp/i18n/de/**/*.json`: German language transla...
src/main/webapp/i18n/de/**/*.json: German language translations should be informal (dutzen) and should never be formal (sietzen). So the user should always be addressed with "du/dein" and never with "sie/ihr".
src/main/webapp/i18n/de/quizExercise.json
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Codacy Static Code Analysis
🔇 Additional comments (2)
src/main/webapp/i18n/en/quizExercise.json (1)
46-48: New Translation Key for Exam Edit Restriction (English)
The new key"examStartedNoEdit"has been added under the"edit"section with clear, concise messaging:
"examStartedNoEdit": "The exam has started. The quiz cannot be edited for the duration of the exam."This matches the UI requirement to inform users when editing is disabled during an exam.
src/main/webapp/i18n/de/quizExercise.json (1)
47-48: New Translation Key for Exam Edit Restriction (German)
The new key"examStartedNoEdit"is correctly added under the"edit"section with the translation:
"examStartedNoEdit": "Die Prüfung hat begonnen. Das Quiz kann für die Dauer der Prüfung nicht bearbeitet werden."This message is clear and consistent with the English version while adhering to the informal tone guidelines.
Opening this PR from a branch in the main repository to enable test server deployment, as it wasn't possible with the previous PR from a forked repository (see #9917), and reopened again because old PR was open for too long #10082.
Checklist
General
Client
Motivation and Context
The
Editbutton for quizzes in exams should not be clickable while the exam is running.As discussed in #9865, there was some confusion regarding the disabled
Editbutton.To make things clearer, I've added a tooltip for such cases.
Closes #9865.
Description
Added a conditional ngbTooltip and a translation key
examStartedNoEditfor the text.Steps for Testing
Prerequisites:
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
Code Review
Manual Tests
Exam Mode Test
Performance Tests
Test Coverage
Screenshots
Summary by CodeRabbit