Grading: Scroll down to complaint form after clicking on a complain button
#10072
Conversation
…github.com/badkeyy/Artemis into bugfix/scroll-down-after-clicking-complain
github-actions
bot
added
tests
client
WalkthroughThe pull request enhances the complaints student view component by introducing a more interactive and user-friendly approach to filing complaints. The changes modify the HTML template and TypeScript component to implement automatic scrolling and a more explicit method for opening complaint forms. The implementation addresses user experience issues by ensuring that clicking the complaint button triggers a visible response and smoothly scrolls to the complaint form. Changes
Sequence DiagramsequenceDiagram
participant User
participant Component
participant View
User->>Component: Click Complaint Button
Component->>Component: openComplaintForm(ComplaintType)
Component->>View: Trigger Change Detection
Component->>View: Scroll to Complaint Form
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
Tip CodeRabbit's docstrings feature is now available as part of our Early Access Program! Simply use the command 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? 🪧 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 (3)
src/main/webapp/app/complaints/complaints-for-students/complaints-student-view.component.ts (1)
165-170: Scroll behavior is concise and user-friendly.
Using scrollIntoView({ behavior: 'smooth', block: 'end' }) provides a nice user experience. Ensure that all browsers in your support matrix handle this smoothly, or consider a polyfill for older browsers.src/test/javascript/spec/component/complaints/complaint-student-view.component.spec.ts (1)
242-305: Tests for 'MORE_FEEDBACK' type and scroll behavior mirror the 'COMPLAINT' tests.
These tests provide solid coverage, ensuring that the correct complaint type is set and scrolling happens. Note that there's some duplication between the “COMPLAINT” and “MORE_FEEDBACK” tests. You could refactor common test setup into a helper function if desired.src/main/webapp/app/complaints/complaints-for-students/complaints-student-view.component.html (1)
39-39: Added button ID for 'more-feedback'.
Providing a unique ID for the “more feedback” button facilitates better automated testing and accessibility referencing.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/main/webapp/app/complaints/complaints-for-students/complaints-student-view.component.html(3 hunks)src/main/webapp/app/complaints/complaints-for-students/complaints-student-view.component.ts(4 hunks)src/test/javascript/spec/component/complaints/complaint-student-view.component.spec.ts(3 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
src/test/javascript/spec/component/complaints/complaint-student-view.component.spec.ts (1)
Pattern src/test/javascript/spec/**/*.ts: jest: true; mock: NgMocks; bad_practices: avoid_full_module_import; perf_improvements: mock_irrelevant_deps; service_testing: mock_http_for_logic; no_schema: avoid_NO_ERRORS_SCHEMA; expectation_specificity: true; solutions: {boolean: toBeTrue/False, reference: toBe, existence: toBeNull/NotNull, undefined: toBeUndefined, class_obj: toContainEntries/toEqual, spy_calls: {not_called: not.toHaveBeenCalled, once: toHaveBeenCalledOnce, with_value: toHaveBeenCalledWith|toHaveBeenCalledExactlyOnceWith}}
src/main/webapp/app/complaints/complaints-for-students/complaints-student-view.component.ts (1)
🔇 Additional comments (9)
src/main/webapp/app/complaints/complaints-for-students/complaints-student-view.component.ts (3)
31-32: Ensure @ViewChild property is initialized.
Declaring the @ViewChild property 'complaintScrollpoint' is good for referencing the DOM element. Just be mindful that it will be undefined until AfterViewInit.
56-56: Constructor injection looks good.
Injecting ChangeDetectorRef to manually trigger change detection is a valid approach, especially before scrolling. This aligns well with Angular guidelines.
155-164: Method to open complaint form is clear and consistent.
The openComplaintForm method properly sets the complaint type, triggers change detection, and proceeds to scroll. This is a clean approach and follows Angular best practices for user-initiated actions.
src/test/javascript/spec/component/complaints/complaint-student-view.component.spec.ts (2)
28-29: New imports are valid.
Imports of ElementRef and ComplaintType are necessary for the newly added fields and tests; no issues found.
151-182: Tests for 'COMPLAINT' type and scroll behavior are thorough.
The test ensures that the complaint type is correctly set and that scrolling is triggered. The mocking of scrollIntoView is a great way to confirm UI behavior. Consider using waitForAsync instead of fakeAsync + tick if you want to rely less on manual timing, but this is optional.
src/main/webapp/app/complaints/complaints-for-students/complaints-student-view.component.html (4)
19-19: Visibility condition is clear.
Conditionally displaying the complaint action only when the user is correct and no existing complaint is present improves user experience.
27-27: Updated click event for COMPLAINT type.
Replacing direct property assignment with openComplaintForm(ComplaintType.COMPLAINT) centralizes and streamlines logic. This aligns with Angular’s recommended best practices.
42-42: Updated click event for MORE_FEEDBACK type.
Invoking openComplaintForm(ComplaintType.MORE_FEEDBACK) is consistent with the approach for COMPLAINT. Thanks for maintaining this symmetry.
63-63: Div reference added for complaint form scroll.
The #complaintScrollpoint anchor, in conjunction with @ViewChild, is a neat solution for scrolling to the relevant form.
Checklist
General
Client
authoritiesto all new routes and checked the course groups for displaying navigation elements (links, buttons).Motivation and Context
Fixes #9735
Description
Sometimes students were not able to see that the complaint form opened after pressing the "Complain" button. With this PR the browser windows gets scrolled down to the end of the form (To after the submit button) after pressing the button.
Steps for Testing
Prerequisites:
Exam Mode 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
Screenshots
Summary by CodeRabbit
New Features
Bug Fixes
Tests