[UI] Improve version display (#387)

Addresses #386 Addresses #384 Addresses #385
loic-sharma · Oct 16, 2019 · c4546e0 · c4546e0
1 parent be8caa6
commit c4546e0
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 14 deletions.
diff --git a/src/BaGet.UI/src/DisplayPackage/Dependencies.tsx b/src/BaGet.UI/src/DisplayPackage/Dependencies.tsx
@@ -14,10 +14,12 @@ interface IPackageDependenciesProps {
 
 class Dependencies extends React.Component<IDependenciesProps> {
 
-  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])*, \)$/;
+  static readonly netFrameworkRegex = /^net[0-9]{2,3}$/;
+  static readonly netCoreRegex = /^netcoreapp[0-9].[0-9]$/;
+  static readonly netStandardRegex = /^netstandard[0-9].[0-9]$/;
+  static readonly semVerRegex = '(0|[1-9]\\d*)\\.(0|[1-9]\\d*)\\.(0|[1-9]\\d*)(?:-((?:0|[1-9]\\d*|\\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\\.(?:0|[1-9]\\d*|\\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\\+([0-9a-zA-Z-]+(?:\\.[0-9a-zA-Z-]+)*))?';
+
+  static readonly versionRangeRegex : RegExp = new RegExp(`^\\[${Dependencies.semVerRegex}, \\)$`);
 
   constructor(props: IDependenciesProps) {
     super(props);

diff --git a/src/BaGet.UI/src/DisplayPackage/DisplayPackage.tsx b/src/BaGet.UI/src/DisplayPackage/DisplayPackage.tsx
@@ -126,14 +126,18 @@ class DisplayPackage extends React.Component<IDisplayPackageProps, IDisplayPacka
         if (!entry.catalogEntry.listed) continue;
 
         const normalizedVersion = this.normalizeVersion(entry.catalogEntry.version);
+        const isCurrent = !!this.version
+          ? normalizedVersion === this.version
+          : normalizedVersion === latestVersion;
+
         versions.push({
           date: new Date(entry.catalogEntry.published),
           downloads: entry.catalogEntry.downloads,
           version: normalizedVersion,
+          selected: isCurrent,
         });
 
-        if ((!currentItem && normalizedVersion === latestVersion) ||
-          (this.version && normalizedVersion === this.version)) {
+        if (isCurrent) {
           currentItem = entry;
         }
 

diff --git a/src/BaGet.UI/src/DisplayPackage/Versions.tsx b/src/BaGet.UI/src/DisplayPackage/Versions.tsx
@@ -8,6 +8,7 @@ export interface IPackageVersion {
   version: string;
   downloads: number;
   date: Date;
+  selected: boolean;
 }
 
 interface IVersionsProps {
@@ -59,8 +60,12 @@ export class Versions extends React.Component<IVersionsProps, IVersionsState> {
   }
 
   private renderVersion = (packageVersion: IPackageVersion) => {
+    const className = packageVersion.selected
+      ? "bg-info"
+      : "";
+
     return (
-      <tr key={packageVersion.version}>
+      <tr key={packageVersion.version} className={className}>
         <td><Link to={`/packages/${this.props.packageId}/${packageVersion.version}`}>{packageVersion.version}</Link></td>
         <td>{packageVersion.downloads}</td>
         <td>{this.dateToString(packageVersion.date)}</td>
@@ -69,7 +74,7 @@ export class Versions extends React.Component<IVersionsProps, IVersionsState> {
   }
 
   private renderShowAllOrLessButton = () => {
-    if (this.props.versions.length < Versions.defaultVisible) {
+    if (this.props.versions.length <= Versions.defaultVisible) {
       return null;
     }
 

diff --git a/src/BaGet.UI/src/SearchResults.tsx b/src/BaGet.UI/src/SearchResults.tsx
@@ -183,12 +183,14 @@ class SearchResults extends React.Component<ISearchResultsProps, ISearchResultsS
                     Latest version: {value.version}
                   </span>
                 </li>
-                <li>
-                  <span className="tags">
-                    <Icon iconName="Tag" className="ms-Icon" />
-                    {value.tags.join(' ')}
-                  </span>
-                </li>
+                {value.tags.length > 0 &&
+                  <li>
+                    <span className="tags">
+                      <Icon iconName="Tag" className="ms-Icon" />
+                      {value.tags.join(' ')}
+                    </span>
+                  </li>
+                }
               </ul>
               <div>
                 {value.description}