feat: add package access/collaborators page#2307
feat: add package access/collaborators page#2307thealxlabs wants to merge 1 commit intonpmx-dev:mainfrom
Conversation
Gives /package/<name>/access its own dedicated page instead of just being buried in the sidebar. Shows the existing AccessControls component when the npm connector is running, or a connect prompt otherwise. - New page at /package/[[org]]/[name]/access.vue - Access tab added to the package navigation header - i18n keys for the page title, subtitle, and connect prompt - README updated, removed /access from "Not yet supported" URL list
|
The latest updates on your projects. Learn more about Vercel for GitHub.
2 Skipped Deployments
|
Lunaria Status Overview🌕 This pull request will trigger status changes. Learn moreBy default, every PR changing files present in the Lunaria configuration's You can change this by adding one of the keywords present in the Tracked Files
Warnings reference
|
Codecov Report❌ Patch coverage is
📢 Thoughts on this report? Let us know! |
📝 WalkthroughWalkthroughThis PR introduces a new package access management feature to the npmx.dev platform. The README is updated to document this capability in the Features list and shift the "Package admin (access/owners)" status from unsupported to fully supported. The Package Header component is extended with a new Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 1✅ Passed checks (1 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 491dabab-dfd1-4b6e-abb7-3bf0781176a1
📒 Files selected for processing (5)
README.mdapp/components/Package/Header.vueapp/pages/package/[[org]]/[name]/access.vuei18n/locales/en.jsoni18n/schema.json
| useSeoMeta({ | ||
| title: () => `Access - ${packageName.value} - npmx`, | ||
| description: () => `Manage access and collaborators for ${packageName.value}`, | ||
| }) |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, check if the file exists and inspect lines 42-45
if [ -f "app/pages/package/[[org]]/[name]/access.vue" ]; then
echo "=== File exists ==="
wc -l "app/pages/package/[[org]]/[name]/access.vue"
echo "=== Lines 40-50 ==="
sed -n '40,50p' "app/pages/package/[[org]]/[name]/access.vue"
else
echo "File not found at literal path, searching for access.vue in package pages..."
find app/pages -name "access.vue" -type f
fiRepository: npmx-dev/npmx.dev
Length of output: 449
🏁 Script executed:
# Search for the translation keys in the locale files
echo "=== Searching for package.access.page_title ==="
rg "package\.access\.page_title" i18n/locales/
echo "=== Searching for package.access.page_subtitle ==="
rg "package\.access\.page_subtitle" i18n/locales/
echo "=== Checking what access-related keys exist ==="
rg "package\.access" i18n/locales/ -A 1Repository: npmx-dev/npmx.dev
Length of output: 207
🏁 Script executed:
# Check what page_title and page_subtitle keys exist
echo "=== Existing page_title keys ==="
rg '"[^"]*page_title' i18n/locales/en-US.json | head -20
echo "=== Existing page_subtitle keys ==="
rg '"[^"]*page_subtitle' i18n/locales/en-US.json | head -20
echo "=== Check if en-US.json exists ==="
ls -la i18n/locales/ | head -10Repository: npmx-dev/npmx.dev
Length of output: 704
🏁 Script executed:
# Search for "Access" in the locale files to see if there are any access-related translations
echo "=== Searching for 'Access' in locale files ==="
rg -i '"Access' i18n/locales/en-US.json
echo "=== Searching for collaborators translations ==="
rg -i 'collaborator' i18n/locales/en-US.jsonRepository: npmx-dev/npmx.dev
Length of output: 156
🏁 Script executed:
# Check how other package pages (like /details or /settings) handle useSeoMeta
echo "=== Checking details.vue for SEO metadata pattern ==="
find app/pages/package -name "*.vue" -type f | head -10
echo "=== Looking for useSeoMeta usage in package pages ==="
rg -l "useSeoMeta" app/pages/package/ -t vueRepository: npmx-dev/npmx.dev
Length of output: 432
🏁 Script executed:
# Find the correct English locale file
echo "=== List all locale files ==="
ls i18n/locales/ | grep -E "^en"
echo "=== Check size of en.json if it exists ==="
if [ -f "i18n/locales/en.json" ]; then
wc -l i18n/locales/en.json
fiRepository: npmx-dev/npmx.dev
Length of output: 189
🏁 Script executed:
# Search for useSeoMeta in all vue files in package pages
echo "=== Finding useSeoMeta usage in package pages ==="
grep -r "useSeoMeta" app/pages/package/ --include="*.vue"Repository: npmx-dev/npmx.dev
Length of output: 217
🏁 Script executed:
# Check the main package page to see SEO metadata pattern
echo "=== Check [name].vue for useSeoMeta pattern ==="
grep -A 3 "useSeoMeta" "app/pages/package/[[org]]/[name].vue"
echo "=== Check index.vue for useSeoMeta pattern ==="
grep -A 3 "useSeoMeta" "app/pages/package/[[org]]/[name]/index.vue"
echo "=== Check versions.vue for useSeoMeta pattern ==="
grep -A 3 "useSeoMeta" "app/pages/package/[[org]]/[name]/versions.vue"Repository: npmx-dev/npmx.dev
Length of output: 473
🏁 Script executed:
# Check what's in en.json - look for page-related keys
echo "=== en.json structure ==="
head -100 i18n/locales/en.json | cat -n
echo "=== Search for 'page' keys in en.json ==="
rg '"[^"]*page' i18n/locales/en.json | head -30Repository: npmx-dev/npmx.dev
Length of output: 6258
🏁 Script executed:
# Search for any use of $t() in useSeoMeta across the entire codebase
echo "=== Looking for $t() usage in useSeoMeta ==="
grep -r "useSeoMeta" app/ --include="*.vue" -A 10 | grep -E "(useSeoMeta|t\()" | head -20
# Also check if useSeoMeta is used with $t() anywhere
grep -r "\$t(" app/pages/ --include="*.vue" | head -10Repository: npmx-dev/npmx.dev
Length of output: 2094
🏁 Script executed:
# Check the en.json file to understand the structure and naming conventions
echo "=== Looking at en.json full content ==="
cat i18n/locales/en.jsonRepository: npmx-dev/npmx.dev
Length of output: 50373
Localise SEO metadata instead of hard-coding English copy.
useSeoMeta currently bypasses translations, so metadata stays English in non-English locales. Other pages like about.vue and accessibility.vue already follow this localisation pattern.
🌍 Suggested fix
useSeoMeta({
- title: () => `Access - ${packageName.value} - npmx`,
- description: () => `Manage access and collaborators for ${packageName.value}`,
+ title: () => `${$t('package.access.page_title')} - ${packageName.value} - npmx`,
+ description: () => $t('package.access.page_subtitle', { name: packageName.value }),
})📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| useSeoMeta({ | |
| title: () => `Access - ${packageName.value} - npmx`, | |
| description: () => `Manage access and collaborators for ${packageName.value}`, | |
| }) | |
| useSeoMeta({ | |
| title: () => `${$t('package.access.page_title')} - ${packageName.value} - npmx`, | |
| description: () => $t('package.access.page_subtitle', { name: packageName.value }), | |
| }) |
graphieros
added
the
automation
graphieros
left a comment
graphieros
left a comment
There was a problem hiding this comment.
While AI tools can be helpful for coding assistance, our project requires genuine human involvement. We've outlined this clearly in our contribution guidelines.
If you're genuinely interested in contributing to npmx.dev:
Engage with the community first (issues, discussions). A PR should be linked to an existing issue.
Understand the codebase and what we actually need
Submit thoughtful, individual PRs with your own descriptions
Follow up on feedback and participate in reviews
Use AI as a tool to assist you, not replace you
Mass-generated PRs like these won't be accepted. We welcome real contributions from developers who want to be part of our community.
Please acknowledge by answering this comment, in your own words.
2 participants
Adds a dedicated
/package/<name>/accesspage for managing team and collaborator access.Previously the
AccessControlscomponent was only reachable via the sidebar on the main package page. This gives it a proper URL, tab in the nav, and a connect prompt for users who haven't set up the local connector yet.What changed
app/pages/package/[[org]]/[name]/access.vuewrapping the existingPackageAccessControlscomponentTest
Visit
/package/@nuxt/kit/accesswith the local connector running — should show current collaborators and team access. Without the connector, shows a prompt to connect.