fix(ui): load all versions when semver range filter is entered#1912
fix(ui): load all versions when semver range filter is entered#1912
Conversation
The semver filter only searched against the ~10 versions from the initial SSR payload, so filtering for versions outside that set returned no results. Now, entering a valid semver range triggers loading all versions and auto-expands the "Other versions" section. A guard prevents redundant fetches across subsequent filter changes.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
2 Skipped Deployments
|
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
Tag rows were hidden when their primary version didn't match the filter, even if child versions did. For example, filtering for `~3.4.0` on vue hid the `latest` row (pointing to 3.5.13), making 3.4.0 invisible since it was claimed by that tag and not in "Other versions". Now tag rows stay visible when any child version matches, and matching children are auto-expanded when a filter is active. Also fixes the test to exercise the real bug scenario (same-major child version).
📝 WalkthroughWalkthroughThis PR updates the Package/Versions component to load and process all package versions when a valid semver filter is entered, auto-expanding tag groups whose primary or child versions match the filter. It adds helpers to map and retrieve tag-associated versions, caches loaded results to avoid repeated fetches, and integrates expansion state with ARIA and chevron UI. Rendering and visibility logic for tag rows and the "Other versions" section now consider both manual expansion and semver-driven expansion. Tests were added to validate valid/invalid semver handling and single-fetch behaviour. Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 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: 105ccd8e-df56-4a1e-b2a2-fa1147299317
📒 Files selected for processing (2)
app/components/Package/Versions.vuetest/nuxt/components/PackageVersions.spec.ts
|
is this ready for review/merge? @serhalp |
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
app/components/Package/Versions.vue (1)
616-621:⚠️ Potential issue | 🟡 MinorKeep the expand/collapse ARIA label in sync with effective expanded state.
Line 616 uses
isTagExpanded(...)foraria-expanded, but Line 618 usesexpandedTags.has(...)for the label. Under filter-driven expansion these can diverge, so assistive text can announce the wrong action.Suggested patch
:aria-label=" - expandedTags.has(row.tag) + isTagExpanded(row.tag, row.primaryVersion.version) ? $t('package.versions.collapse', { tag: row.tag }) : $t('package.versions.expand', { tag: row.tag }) "
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: e257437a-4f56-47ce-9961-fdeee5e01478
📒 Files selected for processing (1)
app/components/Package/Versions.vue
| // Load all versions when a valid semver filter is entered | ||
| watch(semverFilter, async newFilter => { | ||
| const trimmed = newFilter.trim() | ||
| if (trimmed === '' || hasLoadedAll.value) return | ||
| if (!validRange(trimmed)) return | ||
|
|
||
| try { | ||
| const allVersions = await loadAllVersions() | ||
| processLoadedVersions(allVersions) | ||
| // Auto-expand "Other versions" so filtered results are visible | ||
| otherVersionsExpanded.value = true | ||
| } catch { | ||
| // Silently fail — user can still use the filter with already-known versions | ||
| } | ||
| }) |
There was a problem hiding this comment.
Prevent stale watcher results from mutating UI after the filter has changed.
At Line 129, otherVersionsExpanded.value = true runs after await loadAllVersions(), even if the user has already changed/cleared the input. This can reopen “Other versions” unexpectedly with stale state.
Suggested patch
watch(semverFilter, async newFilter => {
const trimmed = newFilter.trim()
if (trimmed === '' || hasLoadedAll.value) return
if (!validRange(trimmed)) return
try {
const allVersions = await loadAllVersions()
+ // Ignore stale async runs if input changed while loading
+ if (semverFilter.value.trim() !== trimmed) return
processLoadedVersions(allVersions)
// Auto-expand "Other versions" so filtered results are visible
otherVersionsExpanded.value = true
} catch {
// Silently fail — user can still use the filter with already-known versions
}
})
3 participants
🔗 Linked issue
Closes #1828
🧭 Context
See #1828 — in some deterministic cases matching versions aren't shown when filtering a package's versions by a semver range.
📚 Description
It turns out there were two layered causes here:
~3.4.0on vue hid thelatestrow (pointing to3.5.13), making3.4.0invisible since it was "claimed" by (nested under) that tag and not in "Other versions". This just needed a fix to the filtering logic to take this into account.The new integration test covers both.
Try it: https://npmx-g9g3y6w15-npmx.vercel.app/package/vue
(The new auto-expand behaviour is quite nicer, IMO!)