Added UI to reverse dependencies (#8017)

Progress on https://github.com/NuGet/Engineering/issues/3143

Author: dc7497-1576912

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

@@ -121,7 +121,7 @@
     }
   }
 
-  .gh-desc {
+  .used-by-desc {
     font-family: @font-family-base;
     font-size: 14px;
     color: #333333;
@@ -137,37 +137,58 @@
     -webkit-line-clamp: 2;
     /* number of lines to show */
     -webkit-box-orient: vertical;
-}
+  }
 
-.gh-link {
+  .used-by-link {
     font-family: @font-family-base;
     font-size: 16px;
     line-height: 19px;
     color: @brand-primary;
     width: auto;
-}
+  }
 
-.gh-star-count {
+  .gh-link, .ngp-link {
+    font-family: @font-family-base;
+    font-size: 16px;
+    line-height: 19px;
+    color: @brand-primary;
+    width: auto;
+  }
+
+  .used-by-download-icon {
+    font-size: 14px;
+    line-height: 12px;
+  }
+
+  .used-by-count {
     font-family: @font-family-base;
     font-size: 14px;
     line-height: 16px;
     font-weight: 400;
     color: #586069;
-}
+  }
 
-.gh-star {
+  .gh-star {
     font-size: 14px;
     line-height: 12px;
     color: @brand-warning;
-}
+  }
 
-.gh-repo-column {
-    width: 70%;
-}
+  .used-by {
+    h3 {
+      strong {
+        font-weight: 400;
+      }
+    }
+  }
 
-.gh-empty-column {
-    width: 15%;
-}
+  .used-by-adjust-table-head {
+    word-break: normal;
+  }
+
+  .used-by-desc-column {
+    width: 85%;
+  }
 
   .install-tabs {
     font-size: 0.8em;

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

@@ -9,7 +9,7 @@ namespace NuGetGallery
 {
     public class NuGetPackageGitHubInformation
     {
-        public const int ReposPerPackage = 10;
+        public const int ReposPerPackage = 5;
 
         public readonly static NuGetPackageGitHubInformation Empty = new NuGetPackageGitHubInformation(new List<RepositoryInformation>());
 

src/NuGetGallery.Core/GitHub/NuGetPackageGitHubInformation.cs

@@ -26,6 +26,7 @@ public class PackageService : CorePackageService, IPackageService
         private readonly ITelemetryService _telemetryService;
         private readonly ISecurityPolicyService _securityPolicyService;
         private readonly IEntitiesContext _entitiesContext;
+        private const int packagesDisplayed = 5;
 
         public PackageService(
             IEntityRepository<PackageRegistration> packageRegistrationRepository,
@@ -161,25 +162,16 @@ public PackageDependents GetPackageDependents(string id)
 
         private IReadOnlyCollection<PackageDependent> GetListOfDependents(string id)
         {
-            var packageDependentsList = new List<PackageDependent>();
             var listPackages = (from pd in _entitiesContext.PackageDependencies
                                 join p in _entitiesContext.Packages on pd.PackageKey equals p.Key
                                 join pr in _entitiesContext.PackageRegistrations on p.PackageRegistrationKey equals pr.Key
                                 where p.IsLatestSemVer2 && pd.Id == id
                                 group 1 by new { pr.Id, pr.DownloadCount, p.Description } into ng
                                 orderby ng.Key.DownloadCount descending
-                                select new { ng.Key.Id, ng.Key.DownloadCount, ng.Key.Description }
-                                ).Take(5).ToList();
+                                select new PackageDependent { Id = ng.Key.Id, DownloadCount = ng.Key.DownloadCount, Description = ng.Key.Description }
+                                ).Take(packagesDisplayed).ToList();
 
-            foreach(var pd in listPackages)
-            {
-                var packageDependent = new PackageDependent();
-                packageDependent.Description = pd.Description;
-                packageDependent.DownloadCount = pd.DownloadCount;
-                packageDependent.Id = pd.Id;
-                packageDependentsList.Add(packageDependent);
-            }
-            return packageDependentsList;
+            return listPackages;
         }
 
         private int GetDependentCount(string id)

src/NuGetGallery.Services/PackageManagement/PackageService.cs

@@ -960,7 +960,7 @@ private PackageDependents GetPackageDependents(string id)
                     cacheDependentsCacheKey,
                     dependents,
                     null,
-                    DateTime.UtcNow.AddMinutes(5),
+                    DateTime.UtcNow.AddMinutes(60),
                     Cache.NoSlidingExpiration,
                     CacheItemPriority.Default, null);
             }

src/NuGetGallery/Controllers/PackagesController.cs

@@ -64,7 +64,7 @@ $(function () {
 
     // Configure expanders
     window.nuget.configureExpanderHeading("dependency-groups");
-    window.nuget.configureExpanderHeading("github-usage");
+    window.nuget.configureExpanderHeading("used-by");
     window.nuget.configureExpanderHeading("version-history");
     window.nuget.configureExpander(
         "hidden-versions",
@@ -121,12 +121,12 @@ $(function () {
             ga('send', 'event', 'dependencies', e.type);
         });
 
-        // Emit a Google Analytics event when the user expands or collapses the GitHub Usage section.
-        $("#github-usage").on('hide.bs.collapse show.bs.collapse', function (e) {
-            ga('send', 'event', 'github-usage', e.type);
+        // Emit a Google Analytics event when the user expands or collapses the Used By section.
+        $("#used-by").on('hide.bs.collapse show.bs.collapse', function (e) {
+            ga('send', 'event', 'used-by', e.type);
         });
 
-        // Emit a Google Analytics event when the user clicks on a repo link in the GitHub Usage section.
+        // Emit a Google Analytics event when the user clicks on a repo link in the GitHub Repos area of the Used By section.
         $(".gh-link").on('click', function (elem) {
             if (!elem.delegateTarget.dataset.indexNumber) {
                 console.error("indexNumber property doesn't exist!");
@@ -135,28 +135,15 @@ $(function () {
                 ga('send', 'event', 'github-usage', 'link-click-' + linkIndex);
             }
         });
-    }
-
-    // Add smooth scrolling to dependent-repos-link
-    $("#dependent-repos-link").on('click', function (event) {
-        // Emit a Google Analytics event
-        if (window.nuget.isGaAvailable()) {
-            ga('send', 'event', 'github-usage', 'sidebar-link-click');
-        }
 
-        if (this.hash !== "") {
-            event.preventDefault();
-            var hash = this.hash;
-            var hashElem = $(hash);
-            if (hashElem.attr("aria-expanded") == "false") {
-                hashElem.click();
+        // Emit a Google Analytics event when the user clicks on a package link in the NuGet Packages area of the Used By section.
+        $(".ngp-link").on('click', function (elem) {
+            if (!elem.delegateTarget.dataset.indexNumber) {
+                console.error("indexNumber property doesn't exist!");
+            } else {
+                var linkIndex = elem.delegateTarget.dataset.indexNumber;
+                ga('send', 'event', 'used-by-packages', 'link-click-' + linkIndex);
             }
-            $('html, body').animate({
-                scrollTop: hashElem.offset().top
-            }, 400, function () {
-                // Add hash (#) to URL when done scrolling (default click behavior)
-                window.location.hash = hash;
-            });
-        }
-    });
+        });
+    }
 });