[UI] Prettify dependencies (loic-sharma#375)

Addresses loic-sharma#369

Author: loic-sharma

src/BaGet.UI/src/DisplayPackage/Dependencies.css

@@ -0,0 +1,12 @@
+.dependency-groups h4 {
+  line-height: 1.4;
+}
+
+.dependency-groups h4 > span {
+  border-bottom: 1px solid #d8d8d8;
+  margin-bottom: 3px;
+}
+
+.dependency-group li span {
+  color: #666;
+}

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

@@ -1,6 +1,9 @@
+import { Link } from 'react-router-dom';
 import * as React from 'react';
 import * as Registration from './Registration';
 
+import './Dependencies.css';
+
 interface IDependenciesProps {
   dependencyGroups: Registration.IDependencyGroup[];
 }
@@ -11,14 +14,60 @@ interface IPackageDependenciesProps {
 
 class Dependencies extends React.Component<IDependenciesProps> {
 
-  constructor(props: IDependenciesProps) {
-    props.dependencyGroups.forEach(group => {
-      if (!group.dependencies) {
-        group.dependencies = [];
-      }
-    });
+  static readonly netFrameworkRegex : RegExp = /net[0-9]{2,3}$/;
+  static readonly netCoreRegex : RegExp = /netcoreapp[0-9].[0-9]$/;
+  static readonly netStandardRegex : RegExp = /netstandard[0-9].[0-9]$/;
+  static readonly versionRangeRegex : RegExp = /\[[0-9](.[0-9])*, \)$/;
 
+  constructor(props: IDependenciesProps) {
     super(props);
+
+    props.dependencyGroups.forEach(Dependencies.prettifyDependencyGroup);
+  }
+
+  private static prettifyDependencyGroup(group: Registration.IDependencyGroup) {
+    if (!group.dependencies) {
+      group.dependencies = [];
+    }
+
+    Dependencies.prettifyTargetFramework(group);
+
+    if (group.dependencies !== undefined) {
+      group.dependencies.forEach(Dependencies.prettifyDepency);
+    }
+  }
+
+  private static prettifyTargetFramework(group: Registration.IDependencyGroup) {
+    // This uses heuristics and may produce incorrect results.
+    // This ignores portable class libraries.
+    if (Dependencies.netFrameworkRegex.test(group.targetFramework)) {
+      const version = group.targetFramework.substring("net".length);
+      const prettyVersion = version.length == 2
+        ? `${version[0]}.${version[1]}`
+        : `${version[0]}.${version[1]}.${version[2]}`;
+
+      group.targetFramework = `.NET Framework ${prettyVersion}`;
+      return;
+    }
+
+    if (Dependencies.netCoreRegex.test(group.targetFramework)) {
+      const version = group.targetFramework.substring("netcoreapp".length);
+      group.targetFramework = `.NET Core ${version}`;
+      return;
+    }
+
+    if (Dependencies.netStandardRegex.test(group.targetFramework)) {
+      const version = group.targetFramework.substring("netstandard".length);
+      group.targetFramework = `.NET Standard ${version}`;
+      return;
+    }
+  }
+
+  private static prettifyDepency(dependency: Registration.IDependency) {
+    // This uses heuristics and may produce incorrect results.
+    if (Dependencies.versionRangeRegex.test(dependency.range)) {
+      dependency.range = `(>= ${dependency.range.slice(1, -3)})`;
+    }
   }
 
   public render() {
@@ -36,10 +85,12 @@ class Dependencies extends React.Component<IDependenciesProps> {
         <div>
           <h3>Dependencies</h3>
 
-          <div>
+          <div className="dependency-groups">
             {this.props.dependencyGroups.map(group => (
               <div key={group.targetFramework}>
-                <h4>{group.targetFramework}</h4>
+                <h4>
+                  <span>{group.targetFramework}</span>
+                </h4>
 
                 <PackageDependencies dependencies={group.dependencies} />
               </div>
@@ -59,10 +110,12 @@ class PackageDependencies extends React.Component<IPackageDependenciesProps> {
     }
 
     return (
-      <ul>
+      <ul className="list-unstyled dependency-group">
         {this.props.dependencies.map(dependency => (
           <li key={dependency.id}>
-            {dependency.id} {dependency.range}
+            <Link to={`/packages/${dependency.id}`}>{dependency.id}</Link>
+
+            <span> {dependency.range}</span>
           </li>
         ))}
       </ul>

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

@@ -54,6 +54,7 @@ interface IPackageVersion {
 
 interface IDisplayPackageState {
   package?: IPackage;
+  loading: boolean;
 }
 
 class DisplayPackage extends React.Component<IDisplayPackageProps, IDisplayPackageState> {
@@ -79,7 +80,7 @@ class DisplayPackage extends React.Component<IDisplayPackageProps, IDisplayPacka
 
     this.id = props.match.params.id.toLowerCase();
     this.version = props.match.params.version;
-    this.state = {package: undefined};
+    this.state = {package: undefined, loading: true};
   }
 
   public componentWillUnmount() {
@@ -108,8 +109,16 @@ class DisplayPackage extends React.Component<IDisplayPackageProps, IDisplayPacka
     const url = `${config.apiUrl}/v3/registration/${this.id}/index.json`;
 
     fetch(url, {signal: this.registrationController.signal}).then(response => {
-      return response.json();
+      return (response.ok) ? response.json() : null;
     }).then(json => {
+      if (!json) {
+        this.setState(prevState => {
+          return { ...prevState, loading: false };
+        });
+
+        return;
+      }
+
       const results = json as Registration.IRegistrationIndex;
 
       const latestVersion = results.items[0].upper;
@@ -143,6 +152,7 @@ class DisplayPackage extends React.Component<IDisplayPackageProps, IDisplayPacka
           currentItem.catalogEntry.packageTypes.indexOf("DotnetTool") !== -1);
 
         this.setState({
+          loading: false,
           package: {
             ...currentItem.catalogEntry,
             downloadUrl: currentItem.packageContent,
@@ -178,10 +188,14 @@ class DisplayPackage extends React.Component<IDisplayPackageProps, IDisplayPacka
   }
 
   public render() {
-    if (!this.state.package) {
-        return (
-          <div>...</div>
-        );
+    if (this.state.loading) {
+      return (
+        <div>...</div>
+      );
+    } else if (!this.state.package) {
+      return (
+        <div>Could not find package '{this.id}'.</div>
+      );
     } else {
       return (
         <div className="row display-package">

src/BaGet.UI/src/index.css

@@ -24,6 +24,12 @@ h2, h3 {
   margin-top: 40px;
 }
 
+h4 {
+  margin-top: 11px;
+  margin-bottom: 11px;
+  font-size: 20px;
+}
+
 .img-responsive {
   display: block;
   max-width: 100%;