Show TFM badges in package search results (#9764)

* things are happening

* added feature flag

* nit

* modified warning indicator placement to align better with badges

* badges link to frameworks tab

* use url helper method

* explicit paramater names in tests

* Aligned warning indicators and TFM badges, added borders

* Fixed badges on small screens

Author: advay26

src/AccountDeleter/EmptyFeatureFlagService.cs

@@ -306,7 +306,13 @@ public bool IsDisplayPackageReadmeWarningEnabled(User user)
             throw new NotImplementedException();
         }
 
-        public bool IsFrameworkFilteringEnabled(User user) {
+        public bool IsFrameworkFilteringEnabled(User user)
+        {
+            throw new NotImplementedException();
+        }
+
+        public bool IsDisplayTfmBadgesEnabled(User user)
+        {
             throw new NotImplementedException();
         }
     }

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

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

src/Bootstrap/dist/css/bootstrap.css

@@ -359,6 +359,39 @@ img.reserved-indicator-icon {
     }
   }
 
+  li.package-warning-indicators {
+    display: block;
+    overflow-y: visible;
+    margin-bottom: 5px;
+    font-size: 14px;
+  }
+
+  li.package-tfm-badges {
+    display: block;
+    overflow-y: visible;
+
+    .framework-badges {
+      margin-bottom: 2px;
+
+      span {
+        margin-right: 1px;
+      }
+
+      .framework-badge-computed {
+        color: #000;
+        border: 1px solid rgba(0,0,0,.15);
+      }
+
+      @media (max-width: @screen-sm-min) {
+        a + a {
+          span {
+            margin-bottom: 4px;
+          }
+        }
+      }
+    }
+  }
+
   @media (min-width: @screen-sm-min) {
     li {
       display: inline-block;

src/Bootstrap/dist/js/bootstrap.js

@@ -82,16 +82,16 @@
 @badge-border-radius: 2px;
 
 .package-warning {
-  padding-right: 8px;
-  padding-left: 8px;
+  padding: 1px 8px;
   border-radius: @badge-border-radius;
   margin-right: 5px;
-  color: @package-warning-color
+  color: @package-warning-color;
 }
 
 .package-warning--vulnerable {
   .package-warning;
   background-color: @severe-warning-background-color;
+  border: 1px solid darken(@severe-warning-background-color, 15%);
   i {
     color: @severe-warning-icon-color;
   }
@@ -100,4 +100,5 @@
 .package-warning--deprecated {
   .package-warning;
   background-color: @warning-background-color;
+  border: 1px solid darken(@warning-background-color, 35%);
 }

src/Bootstrap/less/theme/base.less

@@ -305,7 +305,13 @@ public bool IsNuGetAccountPasswordLoginEnabled()
             throw new NotImplementedException();
         }
 
-        public bool IsFrameworkFilteringEnabled(User user) {
+        public bool IsFrameworkFilteringEnabled(User user)
+        {
+            throw new NotImplementedException();
+        }
+
+        public bool IsDisplayTfmBadgesEnabled(User user)
+        {
             throw new NotImplementedException();
         }
     }

src/Bootstrap/less/theme/common-list-packages.less

@@ -8,6 +8,6 @@ namespace NuGetGallery.Frameworks
 {
     public interface IPackageFrameworkCompatibilityFactory
     {
-        PackageFrameworkCompatibility Create(ICollection<PackageFramework> packageFrameworks);
+        PackageFrameworkCompatibility Create(ICollection<PackageFramework> packageFrameworks, string packageId, bool includeComputedBadges = false);
     }
 }

src/GitHubVulnerabilities2Db/Fakes/FakeFeatureFlagService.cs

@@ -20,6 +20,6 @@ public class PackageFrameworkCompatibility
         /// Key: Is the <see cref="FrameworkProductNames"/> if resolved on (<seealso cref="PackageFrameworkCompatibilityFactory.ResolveFrameworkProductName(NuGetFramework)"/>) or the <see cref="NuGetFramework.Framework"/>.<br></br>
         /// Value: Is an ordered collection containing all the compatible frameworks.
         /// </remarks>
-        public IReadOnlyDictionary<string, IReadOnlyCollection<PackageFrameworkCompatibilityTableData>> Table { get; set; }
+        public IReadOnlyDictionary<string, IReadOnlyCollection<PackageFrameworkCompatibilityData>> Table { get; set; }
     }
 }

src/NuGetGallery.Core/Frameworks/IPackageFrameworkCompatibilityFactory.cs

@@ -10,14 +10,15 @@ namespace NuGetGallery.Frameworks
     /// </summary>
     /// <remarks>
     /// All these properties are retrieved from the <see cref="PackageFrameworkCompatibility.Table"/>, one for each .NET product.<br></br>
-    /// Only package asset frameworks are considered. i.e. <see cref="PackageFrameworkCompatibilityTableData.IsComputed"/> <c>= false</c>.<br></br>
+    /// Only package asset frameworks are considered. i.e. <see cref="PackageFrameworkCompatibilityData.IsComputed"/> <c>= false</c>.<br></br>
     /// If there are no package asset frameworks for a particular .NET product, then the value will be <c>null</c>.
     /// </remarks>
     public class PackageFrameworkCompatibilityBadges
     {
-        public NuGetFramework Net { get; set; }
-        public NuGetFramework NetCore { get; set; }
-        public NuGetFramework NetStandard { get; set; }
-        public NuGetFramework NetFramework { get; set; }
+        public string PackageId { get; set; }
+        public PackageFrameworkCompatibilityData Net { get; set; }
+        public PackageFrameworkCompatibilityData NetCore { get; set; }
+        public PackageFrameworkCompatibilityData NetStandard { get; set; }
+        public PackageFrameworkCompatibilityData NetFramework { get; set; }
     }
 }