From 158666f1639bad3da44616877a2c40fe694f47c6 Mon Sep 17 00:00:00 2001 From: "Juan Picado @jotadeveloper" Date: Sun, 20 Jan 2019 19:25:50 +0100 Subject: [PATCH 1/2] fix: logo on header Refactor, not need it endpoint for logo. --- src/api/web/index.js | 12 +++--------- src/webui/app.js | 5 ++--- src/webui/components/Header/index.js | 12 +++++++++++- src/webui/components/Header/types.js | 1 + src/webui/template/index.html | 1 + src/webui/utils/logo.js | 10 ---------- test/unit/webui/app.spec.js | 7 ------- test/unit/webui/components/header.spec.js | 2 ++ test/unit/webui/utils/logo.spec.js | 12 ------------ tools/webpack.dev.config.babel.js | 3 ++- tools/webpack.prod.config.babel.js | 1 + 11 files changed, 23 insertions(+), 43 deletions(-) delete mode 100644 src/webui/utils/logo.js delete mode 100644 test/unit/webui/utils/logo.spec.js diff --git a/src/api/web/index.js b/src/api/web/index.js index fac81799c..be76dec57 100644 --- a/src/api/web/index.js +++ b/src/api/web/index.js @@ -28,7 +28,6 @@ if (!existTemplate) { } const template = fs.readFileSync(templatePath).toString(); -const spliceURL = require('../../utils/string').spliceURL; module.exports = function(config, auth, storage) { Search.configureStorage(storage); @@ -53,18 +52,13 @@ module.exports = function(config, auth, storage) { }); }); - 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) { - const base = combineBaseUrl(getWebProtocol(req.get(HEADERS.FORWARDED_PROTO), req.protocol), req.get('host'), config.url_prefix); - + const installPath = _.get(config, 'url_prefix', ''); + const base = combineBaseUrl(getWebProtocol(req.get(HEADERS.FORWARDED_PROTO), req.protocol), req.get('host'), installPath); 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(/ToReplaceByScope/g, _.get(config, 'web.scope') ? config.web.scope : ''); res.setHeader('Content-Type', 'text/html'); diff --git a/src/webui/app.js b/src/webui/app.js index 0dfec0ce4..d5737a349 100644 --- a/src/webui/app.js +++ b/src/webui/app.js @@ -2,7 +2,6 @@ import React, { Component, Fragment } from 'react'; import isNil from 'lodash/isNil'; import storage from './utils/storage'; -import logo from './utils/logo'; import { makeLogin, isTokenExpire } from './utils/login'; import Footer from './components/Footer'; @@ -42,8 +41,8 @@ export default class App extends Component { } } - loadLogo = async () => { - const logoUrl = await logo(); + loadLogo = () => { + const logoUrl = window.VERDACCIO_LOGO; this.setState({ logoUrl, }); diff --git a/src/webui/components/Header/index.js b/src/webui/components/Header/index.js index 92404144f..cc1f9434b 100644 --- a/src/webui/components/Header/index.js +++ b/src/webui/components/Header/index.js @@ -112,7 +112,7 @@ class Header extends Component { return ( - + {this.renderLogo()} {!withoutSearch && ( @@ -123,6 +123,16 @@ class Header extends Component { ); }; + renderLogo = (): Node => { + const { logo } = this.props; + + if (logo) { + return {'logo'}; + } else { + return ; + } + }; + renderToolTipIcon = (title: string, type: ToolTipType) => { let content; switch (type) { diff --git a/src/webui/components/Header/types.js b/src/webui/components/Header/types.js index a19f09ccd..4d9a1825c 100644 --- a/src/webui/components/Header/types.js +++ b/src/webui/components/Header/types.js @@ -4,6 +4,7 @@ */ export interface IProps { + logo: string; username?: string; onLogout?: Function; onToggleLoginModal: Function; diff --git a/src/webui/template/index.html b/src/webui/template/index.html index 1ec99d844..4f3a5af72 100644 --- a/src/webui/template/index.html +++ b/src/webui/template/index.html @@ -11,6 +11,7 @@ diff --git a/src/webui/utils/logo.js b/src/webui/utils/logo.js deleted file mode 100644 index 92c9918c4..000000000 --- a/src/webui/utils/logo.js +++ /dev/null @@ -1,10 +0,0 @@ -import API from './api'; - -export default async function logo() { - try { - const logo = await API.request('logo'); - return logo; - } catch (error) { - throw new Error(error); - } -} diff --git a/test/unit/webui/app.spec.js b/test/unit/webui/app.spec.js index dcccf718d..d119f673b 100644 --- a/test/unit/webui/app.spec.js +++ b/test/unit/webui/app.spec.js @@ -37,13 +37,6 @@ describe('App', () => { beforeEach(() => { wrapper = mount(); }); - test('loadLogo: set logo url in state', async () => { - const { loadLogo } = wrapper.instance(); - await loadLogo(); - expect(wrapper.state().logoUrl).toEqual( - 'http://localhost/-/static/logo.png' - ); - }); test('toggleLoginModal: should toggle the value in state', () => { const { handleToggleLoginModal } = wrapper.instance(); diff --git a/test/unit/webui/components/header.spec.js b/test/unit/webui/components/header.spec.js index 8d1ee6eae..76fcc5154 100644 --- a/test/unit/webui/components/header.spec.js +++ b/test/unit/webui/components/header.spec.js @@ -15,6 +15,7 @@ describe('
component with logged in state', () => { props = { username: 'test user', handleLogout: jest.fn(), + logo: '', onToggleLoginModal: jest.fn(), scope: 'test scope', withoutSearch: true, @@ -59,6 +60,7 @@ describe('
component with logged out state', () => { handleLogout: jest.fn(), onToggleLoginModal: jest.fn(), scope: 'test scope', + logo: '', withoutSearch: true, }; wrapper = mount(
); diff --git a/test/unit/webui/utils/logo.spec.js b/test/unit/webui/utils/logo.spec.js deleted file mode 100644 index 92e2abc9e..000000000 --- a/test/unit/webui/utils/logo.spec.js +++ /dev/null @@ -1,12 +0,0 @@ -import logo from '../../../../src/webui/utils/logo'; - -jest.mock('../../../../src/webui/utils/api', () => ({ - request: require('../components/__mocks__/api').default.request -})); - -describe('logo', () => { - test('loadLogo - should load verdaccio logo', async () => { - const url = await logo(); - expect(url).toEqual('http://localhost/-/static/logo.png'); - }); -}); diff --git a/tools/webpack.dev.config.babel.js b/tools/webpack.dev.config.babel.js index 198412f03..571c17abe 100644 --- a/tools/webpack.dev.config.babel.js +++ b/tools/webpack.dev.config.babel.js @@ -34,8 +34,9 @@ export default { __APP_VERSION__: `"${getPackageJson('version')}"`, }), new HTMLWebpackPlugin({ - title: 'Verdaccio', + title: 'Verdaccio Dev UI', scope: '', + logo: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS3IX6-um7AlJXyt5gzkRIB0iO4Bn9QVRKcUHhilYJPs2mAfkkI', filename: 'index.html', verdaccioURL: '//localhost:4873', template: `${env.SRC_ROOT}/webui/template/index.html`, diff --git a/tools/webpack.prod.config.babel.js b/tools/webpack.prod.config.babel.js index 79fdb8748..0ef125c27 100644 --- a/tools/webpack.prod.config.babel.js +++ b/tools/webpack.prod.config.babel.js @@ -46,6 +46,7 @@ const prodConf = { new HTMLWebpackPlugin({ title: 'ToReplaceByTitle', scope: 'ToReplaceByScope', + logo: 'ToReplaceByLogo', filename: 'index.html', favicon: `${env.SRC_ROOT}/webui/template/favicon.ico`, verdaccioURL: 'ToReplaceByVerdaccio', From 50fc702281bf9fe2dc839c0291c47020f02026c6 Mon Sep 17 00:00:00 2001 From: "Juan Picado @jotadeveloper" Date: Sun, 20 Jan 2019 20:10:39 +0100 Subject: [PATCH 2/2] chore: use local resource for development --- tools/webpack.dev.config.babel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tools/webpack.dev.config.babel.js b/tools/webpack.dev.config.babel.js index 571c17abe..85ec0f238 100644 --- a/tools/webpack.dev.config.babel.js +++ b/tools/webpack.dev.config.babel.js @@ -36,7 +36,7 @@ export default { new HTMLWebpackPlugin({ title: 'Verdaccio Dev UI', scope: '', - logo: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS3IX6-um7AlJXyt5gzkRIB0iO4Bn9QVRKcUHhilYJPs2mAfkkI', + logo: 'https://verdaccio.org/img/logo/symbol/svg/verdaccio-tiny.svg', filename: 'index.html', verdaccioURL: '//localhost:4873', template: `${env.SRC_ROOT}/webui/template/index.html`,