feat: improve "Current Tags" version list (#3401)

verdaccio · Sep 28, 2022 · d4019f6 · d4019f6
1 parent 2c0d5ce
commit d4019f6
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 7 deletions.
diff --git a/.changeset/sour-maps-live.md b/.changeset/sour-maps-live.md
@@ -0,0 +1,5 @@
+---
+'@verdaccio/ui-theme': patch
+---
+
+Add links to "Current Tags" and sort them in descending order
diff --git a/packages/plugins/ui-theme/src/i18n/crowdin/ui.json b/packages/plugins/ui-theme/src/i18n/crowdin/ui.json
@@ -52,7 +52,7 @@
   },
   "versions": {
     "current-tags": "Current Tags",
-    "version-history": "Version history",
+    "version-history": "Version History",
     "not-available": "Not available"
   },
   "package": {

diff --git a/packages/plugins/ui-theme/src/pages/Version/DetailContainer/Versions/Versions.tsx b/packages/plugins/ui-theme/src/pages/Version/DetailContainer/Versions/Versions.tsx
@@ -21,10 +21,10 @@ const Versions: React.FC = () => {
 
   return (
     <>
-      {distTags && Object.keys(distTags).length > 0 && (
+      {distTags && Object.keys(distTags).length > 0 && packageName && (
         <>
           <StyledText variant="subtitle1">{t('versions.current-tags')}</StyledText>
-          <VersionsTagList tags={distTags} />
+          <VersionsTagList packageName={packageName} tags={distTags} time={time} />
         </>
       )}
       {versions && Object.keys(versions).length > 0 && packageName && (

diff --git a/packages/plugins/ui-theme/src/pages/Version/DetailContainer/Versions/VersionsTagList.tsx b/packages/plugins/ui-theme/src/pages/Version/DetailContainer/Versions/VersionsTagList.tsx
@@ -3,19 +3,26 @@ import ListItem from '@mui/material/ListItem';
 import React from 'react';
 
 import { DistTags } from '../../../../../types/packageMeta';
-import { ListItemText, Spacer } from './styles';
+import { Time } from '../../../../../types/packageMeta';
+import { ListItemText, Spacer, StyledLink } from './styles';
 
 interface Props {
   tags: DistTags;
+  packageName: string;
+  time: Time;
 }
 
-const VersionsTagList: React.FC<Props> = ({ tags }) => (
+const VersionsTagList: React.FC<Props> = ({ tags, packageName, time }) => (
   <List dense={true}>
     {Object.keys(tags)
-      .reverse()
+      .sort((a, b) => {
+        return time[tags[a]] < time[tags[b]] ? 1 : time[tags[a]] > time[tags[b]] ? -1 : 0;
+      })
       .map((tag) => (
         <ListItem className="version-item" key={tag}>
-          <ListItemText>{tag}</ListItemText>
+          <StyledLink to={`/-/web/detail/${packageName}/v/${tags[tag]}`}>
+            <ListItemText>{tag}</ListItemText>
+          </StyledLink>
           <Spacer />
           <ListItemText>{tags[tag]}</ListItemText>
         </ListItem>