[TFM Display] Badges and Table UI. (#8885)

* Partials for badges and table added, along with styles.

* NuGetFrameworkExtensions tests added.

* nit.

* refactor compatibilityFactory.

* nit.

* Update factory to create an ordered dictionary.

* Fixed GetBadgeVersion bug.

* Accessibility changes.

* table information icons added.

* Fix PackagesControllerFacts.

* Added more tests.

* a11y fix for screenreader, no supported frameworks.

* Address comments for ux phrases and color.

* Added learn more link.

* nit.

* Deprecated and unused frameworks removed.

* removed unofficial frameworks from supported frameworks list.

* learn more about link added if no TFM.

* Added margin top to learn more link.

Author: Daniel Jacinto

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

@@ -6,6 +6,7 @@
 @import "common-list-packages.less";
 @import "common-multi-select-dropdown.less";
 @import "common-readme.less";
+@import "common-supported-frameworks.less";
 @import "common-user-package-list.less";
 @import "page-about.less";
 @import "page-account-settings.less";

src/Bootstrap/less/theme/all.less

@@ -0,0 +1,94 @@
+@badge-dark: #0078d4;
+@badge-dark-opaque: rgba(0, 183, 195, 0.1);
+@table-product-width: 232px;
+
+.framework {
+  font-family: Segoe UI;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.framework-badges {
+  .framework;
+  margin-bottom: 14px;
+}
+
+.framework-badge {
+  padding: 1px 8px;
+  border-radius: 2px;
+  justify-content: center;
+  display: inline-block;
+}
+
+.framework-badge:not(:last-child) {
+  margin-right: 8px;
+}
+
+.framework-badge-asset {
+  .framework-badge;
+  background: @badge-dark;
+  color: white;
+}
+
+.framework-badge-computed {
+  .framework-badge;
+  border: 1px solid @badge-dark;
+  background: @badge-dark-opaque
+}
+
+.framework-table {
+  margin-bottom: 30px;
+
+  .framework;
+  width: 100%;
+
+  tr {
+    min-height: 43px;
+  }
+
+  .framework-table-title {
+    padding: 11px 0px 12px 12px;
+  }
+
+  .framework-table-product {
+    width: @table-product-width;
+    padding: 11px 0px 12px 12px;
+  }
+
+  .framework-table-margin {
+    margin: 0px 8px 8px 0px;
+  }
+
+  .framework-table-frameworks {
+    width: calc(100% - @table-product-width);
+    padding: 11px 0px 4px 12px;
+  }
+}
+
+.frameworktableinfo {
+  padding: 3px 8px 5px;
+  width: 35px;
+  height: 10px;
+  box-sizing: border-box;
+  border-radius: 2px;
+  margin-right: 10px;
+}
+.frameworktableinfo-computed-icon{
+  .frameworktableinfo;
+  border: 1px solid @badge-dark;
+}
+
+.frameworktableinfo-asset-icon{
+  .frameworktableinfo;
+  background-color: @badge-dark;
+}
+
+.frameworktableinfo-text {
+  font-size: 14px;
+  line-height: 16px;
+}
+
+p.frameworktableinfo-text {
+  .frameworktableinfo-text;
+  margin-top: 10px;
+}

src/Bootstrap/less/theme/common-supported-frameworks.less

@@ -16,7 +16,7 @@
   }
 
   .package-title {
-    margin-bottom: 30px;
+    margin-bottom: 16px;
 
     h1 {
 

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

@@ -0,0 +1,13 @@
+// Copyright (c) .NET Foundation. All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+
+using NuGet.Services.Entities;
+using System.Collections.Generic;
+
+namespace NuGetGallery.Frameworks
+{
+    public interface IPackageFrameworkCompatibilityFactory
+    {
+        PackageFrameworkCompatibility Create(ICollection<PackageFramework> packageFrameworks);
+    }
+}

src/NuGetGallery.Core/Frameworks/IPackageFrameworkCompatibilityFactory.cs

@@ -0,0 +1,39 @@
+// Copyright (c) .NET Foundation. All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+
+using NuGet.Frameworks;
+using System.Runtime.CompilerServices;
+using System.Text;
+
+namespace NuGetGallery.Frameworks
+{
+    public static class NuGetFrameworkExtensions
+    {
+        public static string GetBadgeVersion(this NuGetFramework framework)
+        {
+            var builder = new StringBuilder();
+            builder.Append(framework.Version.Major);
+            builder.Append(".");
+            builder.Append(framework.Version.Minor);
+
+            if (framework.Version.Build != 0)
+            {
+                builder.Append(".");
+                builder.Append(framework.Version.Build);
+
+                if (framework.Version.Revision != 0)
+                {
+                    builder.Append(".");
+                    builder.Append(framework.Version.Revision);
+                }
+            }
+            else if (framework.Version.Revision != 0)
+            {
+                builder.Append(".0.");
+                builder.Append(framework.Version.Revision);
+            }
+
+            return builder.ToString();
+        }
+    }
+}

src/NuGetGallery.Core/Frameworks/NuGetFrameworkExtensions.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, ICollection<PackageFrameworkCompatibilityTableData>> Table { get; set; }
+        public IReadOnlyDictionary<string, IReadOnlyCollection<PackageFrameworkCompatibilityTableData>> Table { get; set; }
     }
 }

src/NuGetGallery.Core/Frameworks/PackageFrameworkCompatibility.cs

@@ -9,10 +9,16 @@
 
 namespace NuGetGallery.Frameworks
 {
-    public class PackageFrameworkCompatibilityFactory
+    public class PackageFrameworkCompatibilityFactory : IPackageFrameworkCompatibilityFactory
     {
         private readonly ISet<Version> WindowsStoreNetCoreVersions = new HashSet<Version> { FrameworkConstants.EmptyVersion, Version.Parse("4.5.0.0"), Version.Parse("4.5.1.0") };
         private readonly ISet<Version> WindowsStoreWindowsVersions = new HashSet<Version> { FrameworkConstants.EmptyVersion, Version.Parse("8.0.0.0"), Version.Parse("8.1.0.0") };
+        private readonly ISet<string> TableFirstFrameworks = new HashSet<string> {
+            FrameworkProductNames.Net,
+            FrameworkProductNames.NetCore,
+            FrameworkProductNames.NetStandard,
+            FrameworkProductNames.NetFramework
+        };
         private readonly NuGetFrameworkSorter Sorter = new NuGetFrameworkSorter();
         private readonly int NetStartingMajorVersion = 5;
 
@@ -45,11 +51,11 @@ public PackageFrameworkCompatibility Create(ICollection<PackageFramework> packag
             };
         }
 
-        private IReadOnlyDictionary<string, ICollection<PackageFrameworkCompatibilityTableData>> CreateFrameworkCompatibilityTable(ICollection<NuGetFramework> filteredPackageFrameworks)
+        private IReadOnlyDictionary<string, IReadOnlyCollection<PackageFrameworkCompatibilityTableData>> CreateFrameworkCompatibilityTable(ICollection<NuGetFramework> filteredPackageFrameworks)
         {
             var compatibleFrameworks = _compatibilityService.GetCompatibleFrameworks(filteredPackageFrameworks);
 
-            var table = new Dictionary<string, ICollection<PackageFrameworkCompatibilityTableData>>();
+            var table = new Dictionary<string, SortedSet<PackageFrameworkCompatibilityTableData>>();
 
             foreach (var compatibleFramework in compatibleFrameworks)
             {
@@ -74,7 +80,7 @@ private IReadOnlyDictionary<string, ICollection<PackageFrameworkCompatibilityTab
                 }
             }
 
-            return table;
+            return OrderDictionaryKeys(table);
         }
 
         private string ResolveFrameworkProductName(NuGetFramework framework)
@@ -119,7 +125,36 @@ private string ResolveFrameworkProductName(NuGetFramework framework)
             return framework.Framework;
         }
 
-        private PackageFrameworkCompatibilityBadges CreateFrameworkCompatibilityBadges(IReadOnlyDictionary<string, ICollection<PackageFrameworkCompatibilityTableData>> table)
+        private IReadOnlyDictionary<string, IReadOnlyCollection<PackageFrameworkCompatibilityTableData>> OrderDictionaryKeys(Dictionary<string, SortedSet<PackageFrameworkCompatibilityTableData>> table)
+        {
+            var orderedTable = new Dictionary<string, IReadOnlyCollection<PackageFrameworkCompatibilityTableData>>();
+
+            AddOrderedKey(table, orderedTable, FrameworkProductNames.Net);
+            AddOrderedKey(table, orderedTable, FrameworkProductNames.NetCore);
+            AddOrderedKey(table, orderedTable, FrameworkProductNames.NetStandard);
+            AddOrderedKey(table, orderedTable, FrameworkProductNames.NetFramework);
+
+            foreach (var orderedKey in table.Keys.OrderBy(k => k))
+            {
+                if (!TableFirstFrameworks.Contains(orderedKey))
+                {
+                    table.TryGetValue(orderedKey, out var compatibleFrameworks);
+                    orderedTable.Add(orderedKey, compatibleFrameworks);
+                }
+            }
+
+            return orderedTable;
+        }
+
+        private void AddOrderedKey(Dictionary<string, SortedSet<PackageFrameworkCompatibilityTableData>> table, Dictionary<string, IReadOnlyCollection<PackageFrameworkCompatibilityTableData>> orderedTable, string framework)
+        {
+            if (table.TryGetValue(framework, out var compatibleFrameworks))
+            {
+                orderedTable.Add(framework, compatibleFrameworks);
+            }
+        }
+
+        private PackageFrameworkCompatibilityBadges CreateFrameworkCompatibilityBadges(IReadOnlyDictionary<string, IReadOnlyCollection<PackageFrameworkCompatibilityTableData>> table)
         {
             var net = GetBadgeFramework(table, FrameworkProductNames.Net);
             var netCore = GetBadgeFramework(table, FrameworkProductNames.NetCore);
@@ -135,7 +170,7 @@ private PackageFrameworkCompatibilityBadges CreateFrameworkCompatibilityBadges(I
             };
         }
 
-        private NuGetFramework GetBadgeFramework(IReadOnlyDictionary<string, ICollection<PackageFrameworkCompatibilityTableData>> table, string productName)
+        private NuGetFramework GetBadgeFramework(IReadOnlyDictionary<string, IReadOnlyCollection<PackageFrameworkCompatibilityTableData>> table, string productName)
         {
             if (table.TryGetValue(productName, out var data))
             {