add version filter in the version tab (#10543)

Author: Varorbc

src/Bootstrap/dist/css/bootstrap-theme.css

@@ -1,6 +1,6 @@
 /*!
  * Bootstrap v3.4.1 (https://getbootstrap.com/)
- * Copyright 2011-2025 Twitter, Inc.
+ * Copyright 2011-2026 Twitter, Inc.
  * Licensed under the MIT license
  */
 

src/Bootstrap/dist/js/bootstrap.js

@@ -815,4 +815,19 @@
       padding: 1.25rem;
     }
   }
+
+  .version-filter-container {
+    margin-bottom: 2rem;
+    display: flex;
+    flex-wrap: wrap;
+
+    .form-group {
+        margin-right: 2rem;
+        margin-bottom: 0;
+    }
+
+    input[type="checkbox"] {
+        margin-right: 0.5rem;
+    }
+  }
 }

src/Bootstrap/less/theme/page-display-package.less

@@ -222,6 +222,7 @@ private DisplayPackageViewModel SetupCommon(
                 && packageKeyToVulnerabilities.TryGetValue(package.Key, out var vulnerabilities)
                 && vulnerabilities != null && vulnerabilities.Any())
             {
+                viewModel.IsVulnerable = true;
                 viewModel.Vulnerabilities = vulnerabilities.OrderByDescending(vul => vul.Severity).ToList().AsReadOnly();
                 maxVulnerabilitySeverity = viewModel.Vulnerabilities.Max(v => v.Severity); // cache for messaging
                 viewModel.MaxVulnerabilitySeverity = maxVulnerabilitySeverity.Value;

src/NuGetGallery/Content/gallery/css/bootstrap.min.css

@@ -158,6 +158,9 @@ $(function () {
     var storage = window['localStorage'];
     var packageManagerStorageKey = 'preferred_package_manager';
     var bodyStorageKey = 'preferred_body_tab';
+    var versionFilterPrereleaseKey = 'version_filter_include_prerelease';
+    var versionFilterVulnerableKey = 'version_filter_include_vulnerable';
+    var versionFilterDeprecatedKey = 'version_filter_include_deprecated';
     var restorePreferredBodyTab = true;
 
     var windowHash = window.location.hash;
@@ -190,6 +193,79 @@ $(function () {
         }
     }
 
+    function applyVersionFilters() {
+        var includePrerelease = $('#include-prerelease').is(':checked');
+        var includeVulnerable = $('#include-vulnerable').is(':checked');
+        var includeDeprecated = $('#include-deprecated').is(':checked');
+
+        if (storage) {
+            storage.setItem(versionFilterPrereleaseKey, includePrerelease);
+            storage.setItem(versionFilterVulnerableKey, includeVulnerable);
+            storage.setItem(versionFilterDeprecatedKey, includeDeprecated);
+        }
+
+        $('.version-row').each(function () {
+            var isCurrent = $(this).hasClass('bg-brand-info');
+            if (isCurrent) {
+                $(this).show();
+                return;
+            }
+
+            var isPrerelease = $(this).data('prerelease') === true;
+            var isVulnerable = $(this).data('vulnerable') === true;
+            var isDeprecated = $(this).data('deprecated') === true;
+            var showRow = true;
+            
+            if (!includePrerelease && isPrerelease) {
+                showRow = false;
+            }
+            if (!includeVulnerable && isVulnerable) {
+                showRow = false;
+            }
+            if (!includeDeprecated && isDeprecated) {
+                showRow = false;
+            }
+
+            if (showRow) {
+                $(this).show();
+            } else {
+                $(this).hide();
+            }
+        });
+    }
+
+    if (storage) {
+        var savedIncludePrerelease = storage.getItem(versionFilterPrereleaseKey);
+        if (savedIncludePrerelease !== null) {
+            $('#include-prerelease').prop('checked', savedIncludePrerelease === 'true');
+        } else {
+            $('#include-prerelease').prop('checked', true);
+        }
+
+        var savedIncludeVulnerable = storage.getItem(versionFilterVulnerableKey);
+        if (savedIncludeVulnerable !== null) {
+            $('#include-vulnerable').prop('checked', savedIncludeVulnerable === 'true');
+        } else {
+            $('#include-vulnerable').prop('checked', true);
+        }
+        
+        var savedIncludeDeprecated = storage.getItem(versionFilterDeprecatedKey);
+        if (savedIncludeDeprecated !== null) {
+            $('#include-deprecated').prop('checked', savedIncludeDeprecated === 'true');
+        } else {
+            $('#include-deprecated').prop('checked', true);
+        }
+    } else {
+        $('#include-prerelease').prop('checked', true);
+        $('#include-vulnerable').prop('checked', true);
+        $('#include-deprecated').prop('checked', true);
+    }
+
+    $('#include-prerelease').change(applyVersionFilters);
+    $('#include-vulnerable').change(applyVersionFilters);
+    $('#include-deprecated').change(applyVersionFilters);
+    applyVersionFilters();
+
     var usedByClamped = false;
     var usedByTab = $('#usedby-tab');
 

src/NuGetGallery/Helpers/ViewModelExtensions/DisplayPackageViewModelFactory.cs

@@ -1049,6 +1049,32 @@
                 </div>
                 <div role="tabpanel" class="tab-pane @(activeBodyTab == "versions" ? "active" : "")" id="versions-tab" aria-label="Versions tab content">
                     <div class="version-history" id="version-history">
+                        <div class="version-filter-container">
+                            <div class="form-group">
+                                <label class="brand-checkbox">
+                                    <input type="checkbox" id="include-prerelease">
+                                    <span>Include prerelease</span>
+                                </label>
+                            </div>
+                            @if (Model.IsPackageVulnerabilitiesEnabled)
+                            {
+                                <div class="form-group">
+                                    <label class="brand-checkbox">
+                                        <input type="checkbox" id="include-vulnerable">
+                                        <span>Include vulnerable</span>
+                                    </label>
+                                </div>
+                            }
+                            @if (Model.IsPackageDeprecationEnabled)
+                            {
+                                <div class="form-group">
+                                    <label class="brand-checkbox">
+                                        <input type="checkbox" id="include-deprecated">
+                                        <span>Include deprecated</span>
+                                    </label>
+                                </div>
+                            }
+                        </div>
                         <table aria-label="Version History of @Model.Id" class="table borderless">
                             <thead>
                                 <tr>
@@ -1092,7 +1118,10 @@
                                     if ((packageVersion.Available && packageVersion.Listed && Model.ShowDetailsAndLinks)
                                         || (!packageVersion.Deleted && Model.CanDisplayPrivateMetadata))
                                     {
-                                        <tr class="@(packageVersion.IsCurrent(Model) ? "bg-brand-info" : null)">
+                                        <tr class="@(packageVersion.IsCurrent(Model) ? "bg-brand-info" : null) version-row" 
+                                            data-prerelease="@packageVersion.Prerelease.ToString().ToLowerInvariant()" 
+                                            data-vulnerable="@packageVersion.IsVulnerable.ToString().ToLowerInvariant()"
+                                            data-deprecated="@((packageVersion.DeprecationStatus != PackageDeprecationStatus.NotDeprecated).ToString().ToLowerInvariant())">
                                             <td>
                                                 <a href="@Url.Package(packageVersion)" title="@packageVersion.Version">
                                                     @packageVersion.Version.Abbreviate(30)
@@ -1165,7 +1194,10 @@
                                     }
                                     else if (packageVersion.Deleted && packageVersion.CanDisplayPrivateMetadata)
                                     {
-                                        <tr class="deleted">
+                                        <tr class="deleted version-row" 
+                                            data-prerelease="@packageVersion.Prerelease.ToString().ToLowerInvariant()" 
+                                            data-vulnerable="@packageVersion.IsVulnerable.ToString().ToLowerInvariant()"
+                                            data-deprecated="@((packageVersion.DeprecationStatus != PackageDeprecationStatus.NotDeprecated).ToString().ToLowerInvariant())">
                                             <td class="version">
                                                 @packageVersion.Version
                                             </td>