Frontend/privacy policy page#978
Conversation
WalkthroughA new Privacy Policy feature was introduced, including a dedicated Vue component and associated styles, test, and localized content in both English and Spanish. The router was updated to add a Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant PublicDashboard
participant Router
participant PrivacyPolicyPage
User->>PublicDashboard: Navigates to Public Dashboard
User->>PublicDashboard: Clicks "Privacy Policy" link
PublicDashboard->>Router: Navigates to /PrivacyPolicy
Router->>PrivacyPolicyPage: Loads PrivacyPolicy component
PrivacyPolicyPage->>User: Displays privacy policy content
User->>PrivacyPolicyPage: Clicks "Back" button
PrivacyPolicyPage->>Router: Navigates to DashboardPublic
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Assessment against linked issues
Assessment against linked issues: Out-of-scope changesNo out-of-scope changes found. Suggested reviewers
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
✨ Finishing Touches
🧪 Generate unit tests
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:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![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 (5)
webroot/src/router/routes.ts (1)
24-29: Use kebab-case paths for new public routesExisting public paths are a mixture of
/Dashboard,/Search,/styleguide, etc. Newer additions (e.g./styleguide) are lowercase; adding/PrivacyPolicyre-introduces a capitalised path. For consistency and predictable URLs, consider/privacy-policy(kebab-case, all lowercase). No functional change, but it keeps the public surface uniform and friendlier for SEO.webroot/src/pages/PublicDashboard/PublicDashboard.less (2)
16-32:min-height: 100vhmay cause iOS viewport jumpOn mobile Safari the dynamic address-bar hides/shows and can make 100vh taller than the visible viewport, producing a small white gap when the bar collapses. If this becomes noticeable, consider
min-height: 100dvh(supported in modern Safari/Chrome) with a fallback for older browsers.
158-165: Footer not pinned
.dashboard-footergetsmargin-bottom: 1rembut nomargin-topor flex-grow push, so on very tall screens the link may float close to the cards instead of at the page bottom. If the design calls for a bottom-pinned footer, you can addmargin-top: auto;to let flexbox push it down.webroot/src/pages/PublicDashboard/PublicDashboard.vue (1)
75-77: Add aria-label for the Privacy Policy link
router-linkrenders an anchor; screen-reader users will hear just the text. If design later shortens the visible text, an explicitaria-label="Privacy policy"keeps it accessible.-<router-link :to="{ name: 'PrivacyPolicy' }">{{ $t('privacyPolicy.title') }}</router-link> +<router-link + :to="{ name: 'PrivacyPolicy' }" + :aria-label="$t('privacyPolicy.title')" +> + {{ $t('privacyPolicy.title') }} +</router-link>webroot/src/pages/PrivacyPolicy/PrivacyPolicy.spec.ts (1)
12-19: Simplify redundant assertion.The test follows the team's preferred mount testing strategy well. However, the second assertion on Line 17 is redundant since
wrapperis already the mountedPrivacyPolicycomponent.Consider simplifying to:
describe('PrivacyPolicy page', async () => { it('should mount the page component', async () => { const wrapper = await mountShallow(PrivacyPolicy); expect(wrapper.exists()).to.equal(true); - expect(wrapper.findComponent(PrivacyPolicy).exists()).to.equal(true); }); });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
webroot/src/locales/en.json(1 hunks)webroot/src/locales/es.json(1 hunks)webroot/src/pages/PrivacyPolicy/PrivacyPolicy.less(1 hunks)webroot/src/pages/PrivacyPolicy/PrivacyPolicy.spec.ts(1 hunks)webroot/src/pages/PrivacyPolicy/PrivacyPolicy.ts(1 hunks)webroot/src/pages/PrivacyPolicy/PrivacyPolicy.vue(1 hunks)webroot/src/pages/PublicDashboard/PublicDashboard.less(2 hunks)webroot/src/pages/PublicDashboard/PublicDashboard.vue(2 hunks)webroot/src/router/routes.ts(1 hunks)
🧰 Additional context used
🧠 Learnings (7)
📓 Common learnings
Learnt from: landonshumway-ia
PR: csg-org/CompactConnect#848
File: backend/compact-connect/lambdas/python/provider-data-v1/handlers/registration.py:111-117
Timestamp: 2025-06-17T19:05:36.255Z
Learning: In CompactConnect PR #848, the user landonshumway-ia decided to leave timezone handling code in _should_allow_reregistration function as-is after testing in sandbox environment confirmed it works correctly. The user's reasoning was that reregistration is an edge case, the code has been tested and verified, and AWS is unlikely to change behavior that would break many clients. This represents a pragmatic engineering decision based on testing and risk assessment.
Learnt from: jsandoval81
PR: csg-org/CompactConnect#822
File: webroot/src/router/routes.ts:96-99
Timestamp: 2025-05-28T16:12:31.310Z
Learning: In webroot/src/router/routes.ts, the team prefers to keep router logic simple and handle route parameter validation (like state abbreviations) in the page components themselves based on user permissions, rather than adding validation at the router level.
📚 Learning: in the compactconnect frontend codebase, the team prefers to keep non-dynamic text directly in vue t...
Learnt from: rmolinares
PR: csg-org/CompactConnect#905
File: webroot/src/components/UpdateHomeJurisdiction/UpdateHomeJurisdiction.vue:32-41
Timestamp: 2025-07-03T15:35:57.893Z
Learning: In the CompactConnect frontend codebase, the team prefers to keep non-dynamic text directly in Vue templates rather than moving it to computed properties in TypeScript modules, as this approach prevents cluttering the TS files with template labels.
Applied to files:
webroot/src/pages/PublicDashboard/PublicDashboard.vuewebroot/src/pages/PrivacyPolicy/PrivacyPolicy.tswebroot/src/pages/PrivacyPolicy/PrivacyPolicy.vue
📚 Learning: the compactconnect app uses mount testing as their general component testing strategy, focusing more...
Learnt from: jsandoval81
PR: csg-org/CompactConnect#822
File: webroot/src/components/StateSettingsConfig/StateSettingsConfig.spec.ts:12-19
Timestamp: 2025-05-28T16:09:24.547Z
Learning: The CompactConnect app uses mount testing as their general component testing strategy, focusing more on testing the data layer (models and store) rather than comprehensive component testing. This meets their test coverage needs and is their preferred approach.
Applied to files:
webroot/src/pages/PrivacyPolicy/PrivacyPolicy.spec.ts
📚 Learning: the compactconnect application uses mount testing as the general component testing strategy. they fo...
Learnt from: jsandoval81
PR: csg-org/CompactConnect#822
File: webroot/src/components/Forms/InputEmailList/InputEmailList.spec.ts:12-19
Timestamp: 2025-05-28T16:09:12.906Z
Learning: The CompactConnect application uses mount testing as the general component testing strategy. They focus their testing efforts on the data layer (models and store) rather than extensive component testing, and mount tests meet their coverage needs.
Applied to files:
webroot/src/pages/PrivacyPolicy/PrivacyPolicy.spec.ts
📚 Learning: in webroot/src/router/routes.ts, the team prefers to keep router logic simple and handle route param...
Learnt from: jsandoval81
PR: csg-org/CompactConnect#822
File: webroot/src/router/routes.ts:96-99
Timestamp: 2025-05-28T16:12:31.310Z
Learning: In webroot/src/router/routes.ts, the team prefers to keep router logic simple and handle route parameter validation (like state abbreviations) in the page components themselves based on user permissions, rather than adding validation at the router level.
Applied to files:
webroot/src/router/routes.tswebroot/src/pages/PrivacyPolicy/PrivacyPolicy.ts
📚 Learning: in the compactconnect frontend codebase, the project prefers to avoid early returns in frontend code...
Learnt from: jsandoval81
PR: csg-org/CompactConnect#873
File: webroot/src/components/LicenseCard/LicenseCard.ts:509-528
Timestamp: 2025-06-24T00:07:10.463Z
Learning: In the CompactConnect frontend codebase, the project prefers to avoid early returns in frontend code when possible, as mentioned by jsandoval81 in webroot/src/components/LicenseCard/LicenseCard.ts.
Applied to files:
webroot/src/pages/PrivacyPolicy/PrivacyPolicy.tswebroot/src/pages/PrivacyPolicy/PrivacyPolicy.vue
📚 Learning: in the inputemaillist component (webroot/src/components/forms/inputemaillist/inputemaillist.vue), th...
Learnt from: jsandoval81
PR: csg-org/CompactConnect#822
File: webroot/src/components/Forms/InputEmailList/InputEmailList.vue:26-30
Timestamp: 2025-05-28T16:13:19.506Z
Learning: In the InputEmailList component (webroot/src/components/Forms/InputEmailList/InputEmailList.vue), the formInput.labelSubtext property rendered with v-html contains only developer-controlled content, not user-controlled content, so XSS concerns do not apply.
Applied to files:
webroot/src/pages/PrivacyPolicy/PrivacyPolicy.vue
🔇 Additional comments (6)
webroot/src/locales/en.json (1)
384-398: ✅ Privacy policy keys are in sync between en.json and es.jsonWe’ve extracted and compared the
privacyPolicykeys inwebroot/src/locales/en.jsonandwebroot/src/locales/es.json—both contain the same 13 entries with no differences.• If you have any other active locale files, please run the same check to ensure full key parity across all languages.
webroot/src/pages/PrivacyPolicy/PrivacyPolicy.less (1)
31-44: Typographic scale aligns with shared variables — LGTMHeadings and body copy leverage
@h1FontSize/@h2FontSizeand 1.7 rem paragraphs, keeping visual rhythm consistent with the rest of the app.webroot/src/pages/PublicDashboard/PublicDashboard.vue (1)
10-17: Good separation of content containerWrapping existing rows in
.dashboard-content-containersimplifies future layout tweaks and keeps the new footer logically separate—nice touch.webroot/src/pages/PrivacyPolicy/PrivacyPolicy.ts (1)
11-24: LGTM! Clean and focused component implementation.The component follows established patterns with proper decorator usage, correct component registration, and clean navigation logic using named routes.
webroot/src/locales/es.json (1)
854-868: LGTM! Comprehensive Spanish privacy policy translations.The translations are well-structured and cover all essential privacy policy sections including data collection, usage, protection, policy changes, and disclaimers. The content appears professionally translated and contextually appropriate.
webroot/src/pages/PrivacyPolicy/PrivacyPolicy.vue (1)
8-40: LGTM! Excellent template implementation with strong accessibility and i18n support.The template demonstrates excellent practices:
- Semantic HTML structure with proper heading hierarchy
- Comprehensive internationalization throughout
- Proper accessibility attributes on the back button
- Clean component structure with external TypeScript and styling
- Logical content organization for privacy policy sections
|
@jlkravitz This PR is now ready for review. |
jlkravitz
left a comment
jlkravitz
left a comment
There was a problem hiding this comment.
looks good! @isabeleliassen good to merge
4 participants
Requirements List
Description List
Testing List
yarn test:unit:allshould run without errors or warningsyarn serveshould run without errors or warningsyarn buildshould run without errors or warningsCloses #888
Summary by CodeRabbit
New Features
Bug Fixes
Tests
Chores