fix: package comparison broken on org and user pages#2758
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
2 Skipped Deployments
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughSummary by CodeRabbit
WalkthroughAdds a provide/inject package-selection context and wires an optional ChangesPackage selection context and conditional UI
Suggested reviewers
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
app/pages/org/[org].vue (1)
278-279: ⚡ Quick winRemove inline
focus-visibleutility from the button class.Use the shared global button focus-visible styling instead of
focus-visible:outline-accent/70on this button.Suggested fix
- class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0" + class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded shrink-0"Based on learnings: "focus-visible styling for button and select elements is implemented globally in app/assets/main.css ... Do not apply per-element inline utility classes like focus-visible:outline-accent/70."
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@app/pages/org/`[org].vue around lines 278 - 279, Remove the per-element focus-visible utility from the clickable element that calls closeSelectionView: locate the element with `@click`="closeSelectionView" (the inline class string containing "focus-visible:outline-accent/70") and delete only the "focus-visible:outline-accent/70" token so the button relies on the shared global focus-visible styling in app/assets/main.css; do not add any new per-element focus classes.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@app/components/Package/Table.vue`:
- Around line 108-110: The loading skeleton row currently always renders a
leading skeleton cell which misaligns columns when the selection header is
omitted; update the template so the leading skeleton cell is wrapped with the
same conditional as the header (use the selectable prop) — i.e. make the
skeleton cell render only when selectable is true (the same condition used for
the <th> where getColumnLabel('selection') appears) so the loading row and
header columns stay aligned.
---
Nitpick comments:
In `@app/pages/org/`[org].vue:
- Around line 278-279: Remove the per-element focus-visible utility from the
clickable element that calls closeSelectionView: locate the element with
`@click`="closeSelectionView" (the inline class string containing
"focus-visible:outline-accent/70") and delete only the
"focus-visible:outline-accent/70" token so the button relies on the shared
global focus-visible styling in app/assets/main.css; do not add any new
per-element focus classes.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 12ff42fb-61fc-43cd-8883-7767a34e52c9
📒 Files selected for processing (8)
app/components/Package/Card.vueapp/components/Package/List.vueapp/components/Package/SelectionView.vueapp/components/Package/Table.vueapp/components/Package/TableRow.vueapp/composables/usePackageSelection.tsapp/pages/org/[org].vueapp/pages/search.vue
gameroman
left a comment
There was a problem hiding this comment.
Looks good overall ✅
Might make sense to add some tests to prevent future regressions
The coderabbit suggestions should be addressed probably too
🔗 Linked issue
closes #2746
🧭 Context
Selection in org and user pages was enabled, but neither an action bar nor the selected packages page was displayed.
📚 Description
The action bar and selection state are now correctly rendered on the org page, but on the user page, I chose to omit them entirely. The UI differs significantly, and adding the missing toolbar would have required a major refactor. The user page can also be seen as a different type of page, so I think that's not a bad idea. Let me know what you think.
I implemented a default hidden selection state and activated selection only where necessary.
Due to the complex component structure and to avoid excessive prop-drilling, I opted to use the provide/inject pattern for easy access to elements deeper in the component tree.