0
Fork 0
mirror of https://github.com/verdaccio/verdaccio.git synced 2025-03-11 02:15:57 -05:00

Merge pull request #757 from pkaske/feature-pkg-infos

feat: Add basic package infos and resource links to sidebar.
This commit is contained in:
Juan Picado @jotadeveloper 2018-06-14 08:54:28 +02:00 committed by GitHub
commit f450149262
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 125 additions and 0 deletions

View file

@ -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! */}

View file

@ -0,0 +1,69 @@
import React from 'react';
import PropTypes from 'prop-types';
import get from 'lodash/get';
import Module from '../../Module';
import isString from 'lodash/isString';
import isNil from 'lodash/isNil';
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 (isString(infoObj)) {
return {url: infoObj};
} else if (isNil(infoObj)) {
return {url: ''};
}
infoObj.url = this.normalizeGitUrl(infoObj);
return infoObj;
}
normalizeGitUrl(infoObj) {
return infoObj.url.replace(/^git\+/, '');
}
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 && this.renderSection('Homepage', infos.homepage.url)}
{infos.repo.url && this.renderSection('Repository', infos.repo.url)}
{infos.license &&
<li><span>License</span><span>{infos.license}</span></li>
}
</ul>
</Module>
);
}
renderSection(title, url) {
return (
<li><span>{title}</span><a href={url} target="_blank">{url}</a></li>
);
}
}

View file

@ -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;
}
}
}

View file

@ -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>"`;

View file

@ -0,0 +1,29 @@
/**
* Infos 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();
});
});