feat: add dist-tags on ui

.eslintignore

@@ -10,3 +10,4 @@ build/
 *.yaml
 Dockerfile
 *.rpi
+*.scss

src/api/web/endpoint/package.js

@@ -6,7 +6,7 @@
 import _ from 'lodash';
 import { addScope, addGravatarSupport, deleteProperties, sortByName, parseReadme } from '../../../lib/utils';
 import { allow } from '../../middleware';
-import { DIST_TAGS, HTTP_STATUS } from '../../../lib/constants';
+import { DIST_TAGS, HEADER_TYPE, HEADERS, HTTP_STATUS } from '../../../lib/constants';
 import type { Router } from 'express';
 import type { IAuth, $ResponseExtend, $RequestExtend, $NextFunctionVer, IStorageHandler, $SidebarPackage } from '../../../../types';
 
@@ -67,7 +67,7 @@ function addPackageWebApi(route: Router, storage: IStorageHandler, auth: IAuth)
           return next(err);
         }
 
-        res.set('Content-Type', 'text/plain');
+        res.set(HEADER_TYPE.CONTENT_TYPE, HEADERS.TEXT_PLAIN);
         next(parseReadme(info.name, info.readme));
       },
     });

src/lib/constants.js

@@ -19,6 +19,7 @@ export const csrPem = 'verdaccio-csr.pem';
 export const HEADERS = {
   JSON: 'application/json',
   CONTENT_TYPE: 'Content-type',
+  TEXT_PLAIN: 'text/plain',
   FORWARDED_PROTO: 'X-Forwarded-Proto',
   ETAG: 'ETag',
   JSON_CHARSET: 'application/json; charset=utf-8',

src/webui/components/PackageSidebar/index.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
 import LastSync from './modules/LastSync';
+import DistTags from './modules/DistTags';
 import Maintainers from './modules/Maintainers';
 import Dependencies from './modules/Dependencies';
 import PeerDependencies from './modules/PeerDependencies';
@@ -14,6 +15,7 @@ import {
   getRecentReleases,
 } from '../../utils/package';
 import API from '../../utils/api';
+import {DIST_TAGS} from '../../../lib/constants';
 
 export default class PackageSidebar extends React.Component {
   state = {};
@@ -61,6 +63,9 @@ export default class PackageSidebar extends React.Component {
       );
       const homepage = get(packageMeta, 'latest.homepage', null);
 
+      // dist-tags
+      const distTags = packageMeta[DIST_TAGS];
+
       // Lastsync component
       const recentReleases = getRecentReleases(time);
       const lastUpdated = getLastUpdatedPackageTime(_uplinks);
@@ -78,6 +83,7 @@ export default class PackageSidebar extends React.Component {
               recentReleases={recentReleases}
             />
           )}
+          <DistTags distTags={distTags} />
           <Infos
             homepage={homepage}
             license={license}

src/webui/components/PackageSidebar/modules/DistTags/index.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import propTypes from 'prop-types';
+import Module from '../../Module';
+import ModuleContentPlaceholder from '../../ModuleContentPlaceholder';
+
+import classes from './style.scss';
+
+const renderDistTags = (distTags) => {
+
+  const tags = Object.entries(distTags);
+
+  return (
+    <ul>
+      {tags.map((tagItem) => {
+        const [tag, version] = tagItem;
+
+        return (
+          <li className={'dist-tag-item'} key={tag}>
+            <span>{tag}</span>
+            <span>{version}</span>
+          </li>
+        );
+      })}
+    </ul>
+  );
+};
+
+const DistTags = ({distTags = {}}) => {
+  const hasTags = Object.keys(distTags).length > 0;
+
+  return (
+    <Module
+      className={classes.releasesModule}
+      description={''}
+      title={'Dist-Tags'}
+    >
+      {hasTags ? (
+        renderDistTags(distTags)
+      ) : (
+        <ModuleContentPlaceholder text={'Not Available!'} />
+      )}
+    </Module>
+  );
+};
+
+DistTags.propTypes = {
+  distTags: propTypes.array,
+};
+
+export default DistTags;

src/webui/components/PackageSidebar/modules/DistTags/style.scss

@@ -0,0 +1,13 @@
+@import '../../../../styles/variables';
+
+.releasesModule {
+  li {
+    display: flex;
+    font-size: $font-size-sm;
+    line-height: $line-height-xs;
+
+    span:last-child {
+      margin-left: auto;
+    }
+  }
+}