[WEB-4302] - Prompt to scroll in Data Donation dialog if consent not fully read#1850
[WEB-4302] - Prompt to scroll in Data Donation dialog if consent not fully read#1850
Conversation
henry-tp
changed the title
henry-tp
changed the title
henry-tp
changed the title
henry-tp
changed the title
There was a problem hiding this comment.
Pull request overview
This PR enhances the Data Donation Consent Dialog by adding a visual prompt that instructs users to scroll to the bottom of the consent form before they can agree to it. The prompt is displayed when the consent has not been fully read and automatically disappears once the user scrolls to the bottom.
Changes:
- Added a Pill component that displays a scroll prompt when consent hasn't been fully read
- Extracted consent read state into a reusable variable for better code clarity
- Added test coverage to verify the prompt appears initially and disappears after scrolling
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| app/pages/patient/DataDonationConsentDialog.js | Adds informational prompt message to guide users to scroll through consent form, with conditional rendering based on scroll state |
| tests/unit/app/pages/patient/DataDonationConsentDialog.test.js | Adds test assertions to verify the scroll prompt appears before scrolling and disappears after scrolling to bottom |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <Pill | ||
| id="consentReviewRequiredMessage" | ||
| mb={3} | ||
| sx={{ fontSize: 1, margin: '0 auto 0 0' }} |
There was a problem hiding this comment.
The margin property value '0 auto 0 0' is unusual and likely not having the intended effect. The 'auto' value for the right margin doesn't center or position the element as it might in a flex container. Consider using just 'margin: 0' or removing this property entirely since the Pill component already has mb={3} (margin-bottom) defined, and the container has default alignment.
| sx={{ fontSize: 1, margin: '0 auto 0 0' }} | |
| sx={{ fontSize: 1 }} |
There was a problem hiding this comment.
This should be addressed
clintonium-119
left a comment
clintonium-119
left a comment
There was a problem hiding this comment.
Just a small CSS cleanup issue (see comments)
henry-tp
added
the
Needs Release Target
|
Feedback addressed @clintonium-119 |
|
/deploy qa1 |
|
henry-tp updated values.yaml file in qa1 |
|
henry-tp updated flux policies file in qa1 |
|
henry-tp deployed blip WEB-4302-consent-infobox branch to qa1 namespace |
|
/deploy qa2 |
|
henry-tp updated values.yaml file in qa2 |
|
henry-tp updated flux policies file in qa2 |
|
henry-tp deployed blip WEB-4302-consent-infobox branch to qa2 namespace |
|
/deploy qa2 |
|
henry-tp updated values.yaml file in qa2 |
|
henry-tp updated flux policies file in qa2 |
|
henry-tp deployed blip WEB-4302-consent-infobox branch to qa2 namespace |
WEB-4302