From f7734a001a89111472283ce4d12ab4b4818507cf Mon Sep 17 00:00:00 2001 From: Ayush Sharma Date: Mon, 18 Feb 2019 23:54:39 +0100 Subject: [PATCH 1/7] refactor: design / spacing improvements --- src/webui/components/Dependencies/index.js | 20 +++++--------- src/webui/components/Dependencies/styles.js | 8 +----- src/webui/components/DetailContainer/index.js | 27 ++++++++++--------- src/webui/components/DetailSidebar/index.js | 6 ++--- src/webui/components/DetailSidebar/styles.js | 9 +++++++ src/webui/components/Install/styles.js | 2 +- 6 files changed, 35 insertions(+), 37 deletions(-) diff --git a/src/webui/components/Dependencies/index.js b/src/webui/components/Dependencies/index.js index cded3e7f4..5e22623ac 100644 --- a/src/webui/components/Dependencies/index.js +++ b/src/webui/components/Dependencies/index.js @@ -11,7 +11,7 @@ import CardContent from '@material-ui/core/CardContent/index'; import { DetailContextConsumer } from '../../pages/version'; -import { Content, CardWrap, Heading, Tags, Tag } from './styles'; +import { CardWrap, Heading, Tags, Tag } from './styles'; import NoItems from '../NoItems'; class DepDetail extends Component { @@ -94,20 +94,14 @@ class Dependencies extends Component { if (dependencies || devDependencies || peerDependencies) { return ( - - - {dependencies && } - {devDependencies && } - {peerDependencies && } - - + + {dependencies && } + {devDependencies && } + {peerDependencies && } + ); } - return ( - - - - ); + return ; } } diff --git a/src/webui/components/Dependencies/styles.js b/src/webui/components/Dependencies/styles.js index 69c346efb..b3cc38c55 100644 --- a/src/webui/components/Dependencies/styles.js +++ b/src/webui/components/Dependencies/styles.js @@ -8,15 +8,9 @@ import Card from '@material-ui/core/Card/index'; import Typography from '@material-ui/core/Typography/index'; import Chip from '@material-ui/core/Chip/index'; -export const Content = styled.div` - && { - padding: 20px; - } -`; - export const CardWrap = styled(Card)` && { - margin: 0 0 25px; + margin: 0 0 16px; } `; diff --git a/src/webui/components/DetailContainer/index.js b/src/webui/components/DetailContainer/index.js index 708d4e3ce..308530c9c 100644 --- a/src/webui/components/DetailContainer/index.js +++ b/src/webui/components/DetailContainer/index.js @@ -30,25 +30,31 @@ class DetailContainer extends Component { ); } + handleChange = (event: any, tabPosition: number) => { + event.preventDefault(); + this.setState({ tabPosition }); + }; + // $FlowFixMe renderTabs = ({ readMe }) => { const { tabPosition } = this.state; return ( - - - - - - - + <> + + + + + + +
{tabPosition === 0 && this.renderReadme(readMe)} {tabPosition === 1 && } {tabPosition === 2 && } {tabPosition === 3 && } - + ); }; @@ -57,11 +63,6 @@ class DetailContainer extends Component { return ; }; - - handleChange = (event: any, tabPosition: number) => { - event.preventDefault(); - this.setState({ tabPosition }); - }; } export default DetailContainer; diff --git a/src/webui/components/DetailSidebar/index.js b/src/webui/components/DetailSidebar/index.js index 3409e27c4..d7dce7bb5 100644 --- a/src/webui/components/DetailSidebar/index.js +++ b/src/webui/components/DetailSidebar/index.js @@ -3,7 +3,7 @@ import React, {Component} from 'react'; import Card from '@material-ui/core/Card/index'; import CardContent from '@material-ui/core/CardContent/index'; import List from '@material-ui/core/List/index'; -import ListItemText from '@material-ui/core/ListItemText/index'; +// import ListItemText from '@material-ui/core/ListItemText/index'; import ActtionBar from '../ActionBar'; import Author from '../Author'; @@ -16,7 +16,7 @@ import Repository from '../Repository'; import { DetailContextConsumer } from '../../pages/version/index'; -import { TitleListItem } from './styles'; +import { TitleListItem, TitleListItemText } from './styles'; class DetailSidebar extends Component { render() { @@ -51,7 +51,7 @@ class DetailSidebar extends Component { return ( - {packageName}} secondary={packageMeta.latest.description} /> diff --git a/src/webui/components/DetailSidebar/styles.js b/src/webui/components/DetailSidebar/styles.js index 2d1cde8e2..bda5accd4 100644 --- a/src/webui/components/DetailSidebar/styles.js +++ b/src/webui/components/DetailSidebar/styles.js @@ -6,6 +6,7 @@ import styled from 'react-emotion'; import Avatar from '@material-ui/core/Avatar/index'; import ListItem from '@material-ui/core/ListItem/index'; +import ListItemText from '@material-ui/core/ListItemText/index'; import colors from '../../utils/styles/colors'; @@ -17,6 +18,14 @@ export const TitleListItem = styled(ListItem)` } `; +export const TitleListItemText = styled(ListItemText)` + && { + padding-left: 0; + padding-right: 0; + padding-top: 8px; + } +`; + export const TitleAvatar = styled(Avatar)` && { color: ${colors.greySuperLight}; diff --git a/src/webui/components/Install/styles.js b/src/webui/components/Install/styles.js index 654368d1b..88588c275 100644 --- a/src/webui/components/Install/styles.js +++ b/src/webui/components/Install/styles.js @@ -17,7 +17,7 @@ export const Heading = styled(Typography)` export const InstallItem = styled(ListItem)` && { - padding: 0; + padding: 0 0 0 0; } `; From 7db5b93806627a5175e058dc92c216fde6b795e4 Mon Sep 17 00:00:00 2001 From: "Juan Picado @jotadeveloper" Date: Mon, 18 Feb 2019 23:58:07 +0100 Subject: [PATCH 2/7] chore: fix logo 404 error --- src/api/web/index.js | 2 +- src/webui/components/Header/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/api/web/index.js b/src/api/web/index.js index 71bbfe863..05ee3c877 100644 --- a/src/api/web/index.js +++ b/src/api/web/index.js @@ -58,7 +58,7 @@ module.exports = function(config, auth, storage) { const webPage = template .replace(/ToReplaceByVerdaccio/g, base) .replace(/ToReplaceByTitle/g, _.get(config, 'web.title') ? config.web.title : WEB_TITLE) - .replace(/ToReplaceByLogo/g, _.get(config, 'web.logo') ? config.web.logo : null) + .replace(/ToReplaceByLogo/g, _.get(config, 'web.logo') ? config.web.logo : '') .replace(/ToReplaceByScope/g, _.get(config, 'web.scope') ? config.web.scope : ''); res.setHeader('Content-Type', 'text/html'); diff --git a/src/webui/components/Header/index.js b/src/webui/components/Header/index.js index 1b8c8bf6d..f1f1248d7 100644 --- a/src/webui/components/Header/index.js +++ b/src/webui/components/Header/index.js @@ -127,7 +127,7 @@ class Header extends Component { renderLogo = (): Node => { const { logo } = this.props; - if (logo) { + if (logo !== '') { return {'logo'}; } else { return ; From fde90351bc8ddff8ead50f84b93bd5975a834ccc Mon Sep 17 00:00:00 2001 From: Ayush Sharma Date: Tue, 19 Feb 2019 00:01:29 +0100 Subject: [PATCH 3/7] refactor: updares repo component --- src/webui/components/DetailSidebar/index.js | 1 - src/webui/components/Repository/index.js | 11 +++++++---- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/webui/components/DetailSidebar/index.js b/src/webui/components/DetailSidebar/index.js index d7dce7bb5..eb7e42a70 100644 --- a/src/webui/components/DetailSidebar/index.js +++ b/src/webui/components/DetailSidebar/index.js @@ -3,7 +3,6 @@ import React, {Component} from 'react'; import Card from '@material-ui/core/Card/index'; import CardContent from '@material-ui/core/CardContent/index'; import List from '@material-ui/core/List/index'; -// import ListItemText from '@material-ui/core/ListItemText/index'; import ActtionBar from '../ActionBar'; import Author from '../Author'; diff --git a/src/webui/components/Repository/index.js b/src/webui/components/Repository/index.js index 636489e72..68c2239a0 100644 --- a/src/webui/components/Repository/index.js +++ b/src/webui/components/Repository/index.js @@ -27,13 +27,16 @@ class Repository extends Component { } renderRepository = ({packageMeta}) => { - const { repository, homepage } = packageMeta.latest; - if (!repository) { + const { + repository: { + url, + } = {}, + } = packageMeta.latest; + + if (!url) { return null; } - // we prefer homepage first, because it's more cleaner - const url = homepage || repository.url; return ( <> {'Repository'}}> From 28a50bfe081ceedd6aac0a94f93a098eba2ae2bb Mon Sep 17 00:00:00 2001 From: "Juan Picado @jotadeveloper" Date: Tue, 19 Feb 2019 07:04:39 +0100 Subject: [PATCH 4/7] chore: fix router issue --- src/api/web/index.js | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/src/api/web/index.js b/src/api/web/index.js index 05ee3c877..559cdda8c 100644 --- a/src/api/web/index.js +++ b/src/api/web/index.js @@ -12,7 +12,6 @@ import express from 'express'; import { combineBaseUrl, getWebProtocol } from '../../lib/utils'; import Search from '../../lib/search'; import { HEADERS, HTTP_STATUS, WEB_TITLE } from '../../lib/constants'; -import { spliceURL } from '../../utils/string'; const { securityIframe } = require('../middleware'); /* eslint new-cap:off */ @@ -66,16 +65,10 @@ module.exports = function(config, auth, storage) { res.send(webPage); } - router.get('/-/web/:pkg', function(req, res) { + router.get('/-/web/:section/*', function(req, res) { renderHTML(req, res); }); - router.get('/-/verdaccio/logo', function(req, res) { - const installPath = _.get(config, 'url_prefix', ''); - - res.send(_.get(config, 'web.logo') || spliceURL(installPath, '/-/static/logo.png')); - }); - router.get('/', function(req, res) { renderHTML(req, res); }); From 01e0634c407581f20a6d058b5a2ce59bc710cc7e Mon Sep 17 00:00:00 2001 From: Ayush Sharma Date: Tue, 19 Feb 2019 21:45:13 +0100 Subject: [PATCH 5/7] refactor: removes country without contributions --- src/webui/components/Footer/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/webui/components/Footer/index.js b/src/webui/components/Footer/index.js index 331c835ca..b8ad369bf 100644 --- a/src/webui/components/Footer/index.js +++ b/src/webui/components/Footer/index.js @@ -18,7 +18,6 @@ const renderTooltip = () => ( - From 811bd81d07a9edf6a0e940308c34fccf63679fe0 Mon Sep 17 00:00:00 2001 From: Ayush Sharma Date: Tue, 19 Feb 2019 21:46:08 +0100 Subject: [PATCH 6/7] refactor: adds subject options to mail link --- src/webui/components/Author/index.js | 11 ++++++----- src/webui/components/Dependencies/index.js | 10 +++++++--- src/webui/components/Developers/index.js | 23 +++++++++++++--------- 3 files changed, 27 insertions(+), 17 deletions(-) diff --git a/src/webui/components/Author/index.js b/src/webui/components/Author/index.js index 73f49bad1..5f26c708e 100644 --- a/src/webui/components/Author/index.js +++ b/src/webui/components/Author/index.js @@ -4,12 +4,13 @@ import React, { Component } from 'react'; -import { DetailContextConsumer } from '../../pages/version/index'; import Avatar from '@material-ui/core/Avatar/index'; import List from '@material-ui/core/List/index'; import ListItemText from '@material-ui/core/ListItemText/index'; +import { DetailContextConsumer } from '../../pages/version/index'; import { Heading, AuthorListItem } from './styles'; + class Authors extends Component { render() { return ( @@ -21,19 +22,19 @@ class Authors extends Component { ); } - renderLinkForMail(email, avatarComponent) { + renderLinkForMail(email, avatarComponent, packageName, version) { if (!email) { return avatarComponent; } return ( - + {avatarComponent} ); } renderAuthor = ({ packageMeta }) => { - const { author } = packageMeta.latest; + const { author, name: packageName, version } = packageMeta.latest; if (!author) { return null; @@ -43,7 +44,7 @@ class Authors extends Component { return ( {'Author'}}> - {this.renderLinkForMail(author.email, avatarComponent)} + {this.renderLinkForMail(author.email, avatarComponent, packageName, version)} diff --git a/src/webui/components/Dependencies/index.js b/src/webui/components/Dependencies/index.js index 5e22623ac..4fd07c7db 100644 --- a/src/webui/components/Dependencies/index.js +++ b/src/webui/components/Dependencies/index.js @@ -87,6 +87,10 @@ class Dependencies extends Component { ); } + checkDependencyLength(dependency: Object = {}) { + return Object.keys(dependency).length > 0; + } + // $FlowFixMe renderDependencies({ packageMeta }) { const { latest } = packageMeta; @@ -95,9 +99,9 @@ class Dependencies extends Component { if (dependencies || devDependencies || peerDependencies) { return ( - {dependencies && } - {devDependencies && } - {peerDependencies && } + {this.checkDependencyLength(dependencies) && } + {this.checkDependencyLength(devDependencies) && } + {this.checkDependencyLength(peerDependencies) && } ); } diff --git a/src/webui/components/Developers/index.js b/src/webui/components/Developers/index.js index 001c002f3..31aad5fd4 100644 --- a/src/webui/components/Developers/index.js +++ b/src/webui/components/Developers/index.js @@ -24,7 +24,7 @@ class Developers extends Component { const { type } = this.props; const developerType = packageMeta.latest[type]; if (!developerType || developerType.length === 0) return null; - return this.renderDevelopers(developerType); + return this.renderDevelopers(developerType, packageMeta); }} ); @@ -34,7 +34,7 @@ class Developers extends Component { this.setState((prev) => ({ visibleDevs: prev.visibleDevs + 6 })); } - renderDevelopers = (developers) => { + renderDevelopers = (developers, packageMeta) => { const { type } = this.props; const { visibleDevs } = this.state; return ( @@ -42,7 +42,7 @@ class Developers extends Component { {type} {developers.slice(0, visibleDevs).map(developer => ( -
{this.renderDeveloperDetails(developer)}
+
{this.renderDeveloperDetails(developer, packageMeta)}
))} {visibleDevs < developers.length && @@ -52,22 +52,27 @@ class Developers extends Component { ); } - renderLinkForMail(email, avatar) { + renderLinkForMail(email, avatarComponent, packageName, version) { if(!email) { - return avatar; + return avatarComponent; } return ( - - {avatar} + + {avatarComponent} ); } - renderDeveloperDetails = ({ name, avatar, email }) => { + renderDeveloperDetails = ({ name, avatar, email }, packageMeta) => { + const { + name: packageName, + version, + } = packageMeta.latest; + const avatarComponent = ; return ( - {this.renderLinkForMail(email, avatarComponent)} + {this.renderLinkForMail(email, avatarComponent, packageName, version)} ); } From 31860540e17065c072ec8aa86666d143967114b8 Mon Sep 17 00:00:00 2001 From: Ayush Sharma Date: Tue, 19 Feb 2019 22:24:43 +0100 Subject: [PATCH 7/7] refactor: versions and footer snapshot --- src/webui/components/Dependencies/index.js | 20 ++++++---- src/webui/components/Dependencies/styles.js | 1 + src/webui/components/Install/styles.js | 2 +- src/webui/components/UpLinks/index.js | 1 - src/webui/components/Versions/index.js | 38 ++++++++++--------- .../__snapshots__/footer.spec.js.snap | 2 +- 6 files changed, 36 insertions(+), 28 deletions(-) diff --git a/src/webui/components/Dependencies/index.js b/src/webui/components/Dependencies/index.js index 4fd07c7db..8b56d8bb0 100644 --- a/src/webui/components/Dependencies/index.js +++ b/src/webui/components/Dependencies/index.js @@ -96,14 +96,18 @@ class Dependencies extends Component { const { latest } = packageMeta; const { dependencies, devDependencies, peerDependencies, name } = latest; - if (dependencies || devDependencies || peerDependencies) { - return ( - - {this.checkDependencyLength(dependencies) && } - {this.checkDependencyLength(devDependencies) && } - {this.checkDependencyLength(peerDependencies) && } - - ); + const dependencyMap = { dependencies, devDependencies, peerDependencies }; + + const dependencyList = Object.keys(dependencyMap).reduce((result, value, key) => { + const selectedDepndency = dependencyMap[value]; + if (selectedDepndency && this.checkDependencyLength(selectedDepndency)) { + result.push(); + } + return result; + }, []); + + if (dependencyList.length) { + return {dependencyList}; } return ; } diff --git a/src/webui/components/Dependencies/styles.js b/src/webui/components/Dependencies/styles.js index b3cc38c55..3a55ed84b 100644 --- a/src/webui/components/Dependencies/styles.js +++ b/src/webui/components/Dependencies/styles.js @@ -17,6 +17,7 @@ export const CardWrap = styled(Card)` export const Heading = styled(Typography)` && { font-weight: 700; + text-transform: capitalize; } `; diff --git a/src/webui/components/Install/styles.js b/src/webui/components/Install/styles.js index 88588c275..654368d1b 100644 --- a/src/webui/components/Install/styles.js +++ b/src/webui/components/Install/styles.js @@ -17,7 +17,7 @@ export const Heading = styled(Typography)` export const InstallItem = styled(ListItem)` && { - padding: 0 0 0 0; + padding: 0; } `; diff --git a/src/webui/components/UpLinks/index.js b/src/webui/components/UpLinks/index.js index 180fec359..8756a07c0 100644 --- a/src/webui/components/UpLinks/index.js +++ b/src/webui/components/UpLinks/index.js @@ -38,7 +38,6 @@ class UpLinks extends React.PureComponent { ); renderContent(uplinks, { name }) { - console.log(uplinks); if (Object.keys(uplinks).length > 0) { return ( uplinks && ( diff --git a/src/webui/components/Versions/index.js b/src/webui/components/Versions/index.js index 7dfe7112f..b7f04abc4 100644 --- a/src/webui/components/Versions/index.js +++ b/src/webui/components/Versions/index.js @@ -17,40 +17,44 @@ class Versions extends React.PureComponent { // $FlowFixMe {({ packageMeta }) => { - return this.renderContent(packageMeta[DIST_TAGS], packageMeta.versions); + return this.renderContent(packageMeta); }} ); } - renderPackageList = (packages: any, isVersion: boolean = false) => ( - - {Object.keys(packages) - .reverse() - .map(version => ( - - {version} - - {isVersion ? `${formatDateDistance('2017-10-26T09:03:15.044Z')} ago` : packages[version]} - - ))} - - ); + renderPackageList = (packages: any, isVersion: boolean = false, timeMap: Object = {}) => { + return ( + + {Object.keys(packages) + .reverse() + .map(version => ( + + {version} + + {isVersion && timeMap[version] ? `${formatDateDistance(timeMap[version])} ago` : packages[version]} + + ))} + + ); + }; // $FlowFixMe - renderContent(distTags: object, versions: object) { + renderContent(packageMeta) { + const { versions = {}, time: timeMap = {}, [DIST_TAGS]: distTags = {} } = packageMeta; + return ( <> {distTags && ( <> {'Current Tags'} - {this.renderPackageList(distTags)} + {this.renderPackageList(distTags, false, timeMap)} )} {versions && ( <> {'Version History'} - {this.renderPackageList(versions, true)} + {this.renderPackageList(versions, true, timeMap)} )} diff --git a/test/unit/webui/components/__snapshots__/footer.spec.js.snap b/test/unit/webui/components/__snapshots__/footer.spec.js.snap index 31b258d3c..24b38c194 100644 --- a/test/unit/webui/components/__snapshots__/footer.spec.js.snap +++ b/test/unit/webui/components/__snapshots__/footer.spec.js.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`