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:
commit
f450149262
5 changed files with 125 additions and 0 deletions
|
@ -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! */}
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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>"`;
|
29
test/webui/components/PackageSidebar/infos.spec.js
Normal file
29
test/webui/components/PackageSidebar/infos.spec.js
Normal 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();
|
||||
});
|
||||
});
|
Loading…
Add table
Reference in a new issue