fix(ui): load all versions when semver range filter is entered (#1912)

Author: serhalp

app/components/Package/Versions.vue

@@ -115,6 +115,22 @@ const effectiveCurrentVersion = computed(
 
 // Semver range filter
 const semverFilter = ref('')
+
+// 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
+  }
+})
 // Collect all known versions: initial props + dynamically loaded ones
 const allKnownVersions = computed(() => {
   const versions = new Set(Object.keys(props.versions))
@@ -196,8 +212,10 @@ const visibleTagRows = computed(() => {
     ? allTagRows.value
     : allTagRows.value.filter(row => !row.primaryVersion.deprecated)
   const rows = isFilterActive.value
-    ? rowsMaybeFilteredForDeprecation.filter(row =>
-        filteredVersionSet.value.has(row.primaryVersion.version),
+    ? rowsMaybeFilteredForDeprecation.filter(
+        row =>
+          filteredVersionSet.value.has(row.primaryVersion.version) ||
+          getTagVersions(row.tag).some(v => filteredVersionSet.value.has(v.version)),
       )
     : rowsMaybeFilteredForDeprecation
   const first = rows.slice(0, MAX_VISIBLE_TAGS)
@@ -215,7 +233,11 @@ const visibleTagRows = computed(() => {
 const hiddenTagRows = computed(() => {
   const hiddenRows = allTagRows.value.filter(row => !visibleTagRows.value.includes(row))
   const rows = isFilterActive.value
-    ? hiddenRows.filter(row => filteredVersionSet.value.has(row.primaryVersion.version))
+    ? hiddenRows.filter(
+        row =>
+          filteredVersionSet.value.has(row.primaryVersion.version) ||
+          getTagVersions(row.tag).some(v => filteredVersionSet.value.has(v.version)),
+      )
     : hiddenRows
   return rows
 })
@@ -435,6 +457,14 @@ function getExpandedTagVersions(tag: string, primaryVersion: string): VersionDis
   return versions.filter(v => filteredVersionSet.value.has(v.version))
 }
 
+// Check if a tag row's children are expanded (manually or via active filter)
+function isTagExpanded(tag: string, primaryVersion: string): boolean {
+  return (
+    expandedTags.value.has(tag) ||
+    (isFilterActive.value && getExpandedTagVersions(tag, primaryVersion).length > 0)
+  )
+}
+
 function findClaimingTag(version: string): string | null {
   const versionChannel = getPrereleaseChannel(version)
 
@@ -583,7 +613,7 @@ function majorGroupContainsCurrent(group: (typeof otherMajorGroups.value)[0]): b
             v-if="getTagVersions(row.tag).length > 1 || !hasLoadedAll"
             type="button"
             class="size-5 -me-1 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors rounded-sm relative z-10"
-            :aria-expanded="expandedTags.has(row.tag)"
+            :aria-expanded="isTagExpanded(row.tag, row.primaryVersion.version)"
             :aria-label="
               expandedTags.has(row.tag)
                 ? $t('package.versions.collapse', { tag: row.tag })
@@ -602,7 +632,9 @@ function majorGroupContainsCurrent(group: (typeof otherMajorGroups.value)[0]): b
               v-else
               class="size-3 transition-transform duration-200 rtl-flip"
               :class="
-                expandedTags.has(row.tag) ? 'i-lucide:chevron-down' : 'i-lucide:chevron-right'
+                isTagExpanded(row.tag, row.primaryVersion.version)
+                  ? 'i-lucide:chevron-down'
+                  : 'i-lucide:chevron-right'
               "
               aria-hidden="true"
             />
@@ -671,10 +703,7 @@ function majorGroupContainsCurrent(group: (typeof otherMajorGroups.value)[0]): b
 
         <!-- Expanded versions -->
         <div
-          v-if="
-            expandedTags.has(row.tag) &&
-            getExpandedTagVersions(row.tag, row.primaryVersion.version).length
-          "
+          v-if="isTagExpanded(row.tag, row.primaryVersion.version)"
           class="ms-4 ps-2 border-is border-border space-y-0.5 pe-2"
         >
           <div

test/nuxt/components/PackageVersions.spec.ts

@@ -1127,6 +1127,101 @@ describe('PackageVersions', () => {
       })
     })
 
+    it('loads all versions when a valid semver filter is entered', async () => {
+      mockFetchAllPackageVersions.mockResolvedValue([
+        { version: '3.5.0', time: '2024-04-01T00:00:00.000Z', hasProvenance: false },
+        { version: '3.4.0', time: '2024-03-01T00:00:00.000Z', hasProvenance: false },
+        { version: '3.3.0', time: '2024-02-01T00:00:00.000Z', hasProvenance: false },
+        { version: '2.0.0', time: '2024-01-15T00:00:00.000Z', hasProvenance: false },
+        { version: '1.0.0', time: '2024-01-01T00:00:00.000Z', hasProvenance: false },
+      ])
+
+      // Only provide latest in props (simulating initial SSR payload)
+      const component = await mountSuspended(PackageVersions, {
+        props: {
+          packageName: 'test-package',
+          versions: {
+            '3.5.0': createVersion('3.5.0'),
+          },
+          distTags: { latest: '3.5.0' },
+          time: { '3.5.0': '2024-04-01T00:00:00.000Z' },
+        },
+      })
+
+      // Filter for a version in the SAME major group as latest (claimed by the tag)
+      const input = component.find('input[type="text"]')
+      await input.setValue('~3.4.0')
+
+      // Should trigger loading all versions
+      await vi.waitFor(() => {
+        expect(mockFetchAllPackageVersions).toHaveBeenCalledWith('test-package')
+      })
+
+      // After loading, 3.4.0 should appear as an auto-expanded child of the latest tag
+      await vi.waitFor(() => {
+        const versionLinks = component
+          .findAll('a')
+          .filter(
+            a => !a.attributes('href')?.startsWith('#') && a.attributes('target') !== '_blank',
+          )
+        const versions = versionLinks.map(l => l.text())
+        expect(versions).toContain('3.4.0')
+      })
+    })
+
+    it('does not load all versions for invalid semver filter', async () => {
+      const component = await mountSuspended(PackageVersions, {
+        props: {
+          packageName: 'test-package',
+          versions: {
+            '3.0.0': createVersion('3.0.0'),
+          },
+          distTags: { latest: '3.0.0' },
+          time: { '3.0.0': '2024-04-01T00:00:00.000Z' },
+        },
+      })
+
+      const input = component.find('input[type="text"]')
+      await input.setValue('not-a-range!!!')
+
+      // Should NOT trigger loading
+      expect(mockFetchAllPackageVersions).not.toHaveBeenCalled()
+    })
+
+    it('only fetches versions once across multiple filter changes', async () => {
+      mockFetchAllPackageVersions.mockResolvedValue([
+        { version: '3.0.0', time: '2024-04-01T00:00:00.000Z', hasProvenance: false },
+        { version: '2.0.0', time: '2024-02-01T00:00:00.000Z', hasProvenance: false },
+        { version: '1.0.0', time: '2024-01-01T00:00:00.000Z', hasProvenance: false },
+      ])
+
+      const component = await mountSuspended(PackageVersions, {
+        props: {
+          packageName: 'test-package',
+          versions: {
+            '3.0.0': createVersion('3.0.0'),
+          },
+          distTags: { latest: '3.0.0' },
+          time: { '3.0.0': '2024-04-01T00:00:00.000Z' },
+        },
+      })
+
+      const input = component.find('input[type="text"]')
+
+      // First valid filter triggers fetch
+      await input.setValue('^1.0.0')
+      await vi.waitFor(() => {
+        expect(mockFetchAllPackageVersions).toHaveBeenCalledTimes(1)
+      })
+
+      // Subsequent filter changes should NOT fetch again
+      await input.setValue('^2.0.0')
+      await input.setValue('~3.0.0')
+      await input.setValue('>=1.0.0')
+
+      expect(mockFetchAllPackageVersions).toHaveBeenCalledTimes(1)
+    })
+
     it('filters other major version groups', async () => {
       mockFetchAllPackageVersions.mockResolvedValue([
         { version: '3.0.0', time: '2024-04-01T00:00:00.000Z', hasProvenance: false },