Improve the pdependents UI (loic-sharma#572)

Addresses loic-sharma#570

Author: davidackroyd99

src/BaGet.Azure/Search/AzureSearchService.cs

@@ -163,7 +163,12 @@ public async Task<DependentsResponse> FindDependentsAsync(
 
             var response = await _searchClient.Documents.SearchAsync<PackageDocument>(query, parameters, cancellationToken: cancellationToken);
             var results = response.Results
-                .Select(r => r.Document.Id)
+                .Select(r => new DependentResult
+                {
+                    Id = r.Document.Id,
+                    Description = r.Document.Description,
+                    TotalDownloads = r.Document.TotalDownloads
+                })
                 .ToList()
                 .AsReadOnly();
 

src/BaGet.Azure/Table/TableSearchService.cs

@@ -21,7 +21,7 @@ public class TableSearchService : ISearchService
             Task.FromResult(new DependentsResponse
             {
                 TotalHits = 0,
-                Data = EmptyStringList
+                Data = new List<DependentResult>()
             });
 
         private readonly CloudTable _table;

src/BaGet.Core/Search/DatabaseSearchService.cs

@@ -125,7 +125,12 @@ public async Task<DependentsResponse> FindDependentsAsync(string packageId, Canc
                 .OrderByDescending(p => p.Downloads)
                 .Where(p => p.Dependencies.Any(d => d.Id == packageId))
                 .Take(20)
-                .Select(p => p.Id)
+                .Select(r => new DependentResult
+                {
+                    Id = r.Id,
+                    Description = r.Description,
+                    TotalDownloads = r.Downloads
+                })
                 .Distinct()
                 .ToListAsync(cancellationToken);
 

src/BaGet.Core/Search/DependentsResponse.cs

@@ -19,6 +19,30 @@ public class DependentsResponse
         /// The package IDs matched by the dependent query.
         /// </summary>
         [JsonPropertyName("data")]
-        public IReadOnlyList<string> Data { get; set; }
+        public IReadOnlyList<DependentResult> Data { get; set; }
+    }
+
+    /// <summary>
+    /// A package that depends on the queried package.
+    /// </summary>
+    public class DependentResult
+    {
+        /// <summary>
+        /// The dependent package id.
+        /// </summary>
+        [JsonPropertyName("id")]
+        public string Id { get; set; }
+
+        /// <summary>
+        /// The description of the dependent package.
+        /// </summary>
+        [JsonPropertyName("description")]
+        public string Description { get; set; }
+
+        /// <summary>
+        /// The total downloads for the dependent package.
+        /// </summary>
+        [JsonPropertyName("totalDownloads")]
+        public long TotalDownloads { get; set; }
     }
 }

src/BaGet.Core/Search/NullSearchService.cs

@@ -24,7 +24,7 @@ public class NullSearchService : ISearchService
             Task.FromResult(new DependentsResponse
             {
                 TotalHits = 0,
-                Data = EmptyStringList
+                Data = new List<DependentResult>()
             });
 
         private static readonly Task<SearchResponse> EmptySearchResponseTask =

src/BaGet.UI/src/DisplayPackage/Dependents.css

@@ -0,0 +1,19 @@
+td, th {
+    padding: 8px 8px 8px 15px;
+}
+
+thead tr {
+    border-bottom: 2px solid #d3d3d3;
+}
+
+tbody tr {
+    border-bottom: 1px solid #d3d3d3;
+}
+
+td div {
+    margin-top: 4px;
+}
+
+td span {
+    margin-left: 3px;
+}

src/BaGet.UI/src/DisplayPackage/Dependents.tsx

@@ -1,13 +1,23 @@
+import { Icon } from 'office-ui-fabric-react/lib/Icon';
+import { Link } from 'office-ui-fabric-react';
 import { config } from '../config';
 import * as React from 'react';
 
+import './Dependents.css'
+
 interface IDependentsProps {
   packageId: string;
 }
 
 interface IDependentsState {
   totalHits: number | undefined;
-  data: string[] | undefined;
+  data: IDependentState[] | undefined;
+}
+
+interface IDependentState {
+  id: string | undefined;
+  description: string | undefined;
+  totalDownloads: number | undefined;
 }
 
 class Dependents extends React.Component<IDependentsProps, IDependentsState> {
@@ -40,6 +50,21 @@ class Dependents extends React.Component<IDependentsProps, IDependentsState> {
     }).catch((e) => console.log("Failed to load dependents.", e));
   }
 
+  private getDependentsMessage() {
+    const hits = this.state.totalHits ?? -1;
+    const packageId = this.props.packageId;
+
+    if (hits < 0) {
+      return ""
+    }
+
+    if (hits === 0) {
+      return `No packages depend on ${packageId}.`;
+    }
+
+    return `Showing the top 20 packages that depend on ${packageId}.`;
+  }
+
   public render() {
     if (!this.state.data) {
       return (
@@ -49,19 +74,37 @@ class Dependents extends React.Component<IDependentsProps, IDependentsState> {
 
     if (this.state.totalHits === 0) {
       return (
-        <div>No packages depend on {this.props.packageId}.</div>
+      <div>{this.getDependentsMessage()}</div>
       );
     }
 
     return (
         <div>
-          <p>{this.state.totalHits} {this.state.totalHits === 1 ? 'package depends' : 'packages depend' } on {this.props.packageId}:</p>
+          <p>{this.getDependentsMessage()}</p>
           <div>
-            <ul>
-              {this.state.data.map(dependent => (
-                <li key={dependent}>{dependent}</li>
-              ))}
-            </ul>
+            <table>
+              <thead>
+                <tr>
+                  <th className="col-sm-10">Package</th>
+                  <th className="col-sm-2">Downloads</th>
+                </tr>
+              </thead>
+              <tbody>
+                {this.state.data.map(dependent => (
+                  <tr key={dependent.id}>
+                    <td>
+                      <Link to={`/packages/${dependent.id}`}>{dependent.id}</Link>
+                      <div>{dependent.description}</div>
+                    </td>
+                    <td>
+                      <Icon iconName="Download" className="ms-Icon" />
+                      <span>{dependent.totalDownloads?.toLocaleString()}</span>
+                    </td>
+                  </tr>
+
+                ))}
+              </tbody>
+            </table>
           </div>
         </div>
     );

src/BaGet.UI/src/DisplayPackage/DisplayPackage.tsx

@@ -251,7 +251,7 @@ class DisplayPackage extends React.Component<IDisplayPackageProps, IDisplayPacka
               }
             })()}
 
-            <ExpandableSection title="Dependents" expanded={false}>
+            <ExpandableSection title="Used By" expanded={false}>
               <Dependents packageId={this.state.package.id} />
             </ExpandableSection>