From 4f4720dafb35bdd3f0b773bf86e8760b780508ad Mon Sep 17 00:00:00 2001
From: "Juan Picado @jotadeveloper" <juanpicado19@gmail.com>
Date: Sat, 12 Jan 2019 10:08:24 +0100
Subject: [PATCH] feat: add dist-tags on ui

---
 .eslintignore                                 |  1 +
 src/api/web/endpoint/package.js               |  4 +-
 src/lib/constants.js                          |  1 +
 src/webui/components/PackageSidebar/index.jsx |  8 ++-
 .../PackageSidebar/modules/DistTags/index.jsx | 50 +++++++++++++++++++
 .../modules/DistTags/style.scss               | 13 +++++
 6 files changed, 74 insertions(+), 3 deletions(-)
 create mode 100644 src/webui/components/PackageSidebar/modules/DistTags/index.jsx
 create mode 100644 src/webui/components/PackageSidebar/modules/DistTags/style.scss

diff --git a/.eslintignore b/.eslintignore
index 471e068bf..974108d5e 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -10,3 +10,4 @@ build/
 *.yaml
 Dockerfile
 *.rpi
+*.scss
diff --git a/src/api/web/endpoint/package.js b/src/api/web/endpoint/package.js
index 0d3c85fdb..07745566e 100644
--- a/src/api/web/endpoint/package.js
+++ b/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));
       },
     });
diff --git a/src/lib/constants.js b/src/lib/constants.js
index e93404677..c81c5fb26 100644
--- a/src/lib/constants.js
+++ b/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',
diff --git a/src/webui/components/PackageSidebar/index.jsx b/src/webui/components/PackageSidebar/index.jsx
index 2936f2137..19db61715 100644
--- a/src/webui/components/PackageSidebar/index.jsx
+++ b/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);
@@ -70,7 +75,7 @@ export default class PackageSidebar extends React.Component {
       const peerDependencies = get(packageMeta, 'latest.peerDependencies', {});
 
       // Maintainers component
-      return (  
+      return (
         <aside className={'sidebar-info'}>
           {time && (
             <LastSync
@@ -78,6 +83,7 @@ export default class PackageSidebar extends React.Component {
               recentReleases={recentReleases}
             />
           )}
+          <DistTags distTags={distTags} />
           <Infos
             homepage={homepage}
             license={license}
diff --git a/src/webui/components/PackageSidebar/modules/DistTags/index.jsx b/src/webui/components/PackageSidebar/modules/DistTags/index.jsx
new file mode 100644
index 000000000..b3c90437e
--- /dev/null
+++ b/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;
diff --git a/src/webui/components/PackageSidebar/modules/DistTags/style.scss b/src/webui/components/PackageSidebar/modules/DistTags/style.scss
new file mode 100644
index 000000000..f7823ccd5
--- /dev/null
+++ b/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;
+    }
+  }
+}