feat: Add basic package infos and resource links to sidebar.

Shows homepage, repository url and license if available in meta data.
If no data is available the module isn't shown.

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

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import LastSync from './modules/LastSync';
 import Maintainers from './modules/Maintainers';
 import Dependencies from './modules/Dependencies';
+import Infos from './modules/Infos';
 
 import API from '../../../utils/api';
 
@@ -53,6 +54,7 @@ export default class PackageSidebar extends React.Component {
     return packageMeta ?
       (<aside className="sidebar-info">
         <LastSync packageMeta={packageMeta} />
+        <Infos packageMeta={packageMeta} />
         <Maintainers packageMeta={packageMeta} />
         <Dependencies packageMeta={packageMeta} />
         {/* Package management module? Help us implement it! */}

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

@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import get from 'lodash/get';
+import Module from '../../Module';
+
+import classes from './style.scss';
+
+export default class Infos extends React.Component {
+  static propTypes = {
+    packageMeta: PropTypes.object.isRequired
+  };
+
+  get infos() {
+    const homepage = this.normalizeInfo(get(this, 'props.packageMeta.latest.homepage', null));
+    const repo = this.normalizeInfo(get(this, 'props.packageMeta.latest.repository', null));
+    const license = get(this, 'props.packageMeta.latest.license', 'N/A');
+
+    return {homepage, repo, license};
+  }
+
+  normalizeInfo(infoObj) {
+    if (typeof infoObj === 'string') {
+      return {url: infoObj};
+    } else if (infoObj === null) {
+      return {url: ''};
+    }
+
+    infoObj.url = infoObj.url.replace(/^git\+/, '');
+
+    return infoObj;
+  }
+
+  render() {
+    const infos = this.infos;
+
+    if (!infos.homepage.url && !infos.repo.url && infos.license === 'N/A') {
+      return '';
+    }
+
+    return (
+      <Module
+        title="Infos"
+        className={classes.infosModule}
+      >
+        <ul>
+          {infos.homepage.url &&
+            <li><span>Homepage</span><a href={infos.homepage.url} target="_blank">{infos.homepage.url}</a></li>
+          }
+
+          {infos.repo.url &&
+            <li><span>Repository</span><a href={infos.repo.url} target="_blank">{infos.repo.url}</a></li>
+          }
+
+          {infos.license &&
+            <li><span>License</span><span>{infos.license}</span></li>
+          }
+        </ul>
+      </Module>
+    );
+  }
+}

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

@@ -0,0 +1,22 @@
+@import '../../../../styles/variable';
+
+.infosModule {
+  li {
+    display: flex;
+    font-size: 14px;
+    line-height: 2;
+
+    a {
+      color: inherit;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 150px;
+    }
+
+    a:last-child,
+    span:last-child {
+      margin-left: auto;
+    }
+  }
+}

test/webui/components/PackageSidebar/__snapshots__/infos.spec.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<PackageSidebar /> : <Infos /> should load the Info component and match snapshot 1`] = `"<div class=\\"module infosModule\\"><h2 class=\\"moduleTitle\\">Infos</h2><div><ul><li><span>Homepage</span><a href=\\"https://github.com/verdaccio/verdaccio#readme\\" target=\\"_blank\\">https://github.com/verdaccio/verdaccio#readme</a></li><li><span>Repository</span><a href=\\"git://github.com/verdaccio/verdaccio.git\\" target=\\"_blank\\">git://github.com/verdaccio/verdaccio.git</a></li><li><span>License</span><span>WTFPL</span></li></ul></div></div>"`;

test/webui/components/PackageSidebar/infos.spec.js

@@ -0,0 +1,29 @@
+/**
+ * LastSync component
+ */
+
+import React from 'react';
+import { mount, shallow } from 'enzyme';
+import Infos from '../../../../src/webui/src/components/PackageSidebar/modules/Infos';
+import { packageMeta } from '../store/packageMeta';
+
+console.error = jest.fn();
+
+describe('<PackageSidebar /> : <Infos />', () => {
+  it('should load the component and check getter: info with package data', () => {
+    const wrapper = mount(<Infos packageMeta={packageMeta} />);
+    const instance = wrapper.instance();
+    const result = {
+      repo: { type: 'git', url: 'git://github.com/verdaccio/verdaccio.git' },
+      homepage: { url: 'https://github.com/verdaccio/verdaccio#readme' },
+      license: 'WTFPL'
+    };
+
+    expect(instance.infos).toEqual(result);
+  });
+
+  it('should load the Info component and match snapshot', () => {
+    const wrapper = shallow(<Infos packageMeta={packageMeta} />);
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});