Merge pull request #1196 from verdaccio/fix-logo-link

fix: logo on header

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');

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,
     });

src/webui/components/Header/index.js

@@ -112,7 +112,7 @@ class Header extends Component<IProps, IState> {
     return (
       <LeftSide>
         <Link style={{ marginRight: '1em' }} to={'/'}>
-          <Logo />
+          {this.renderLogo()}
         </Link>
         {!withoutSearch && (
           <SearchWrapper>
@@ -123,6 +123,16 @@ class Header extends Component<IProps, IState> {
     );
   };
 
+  renderLogo = (): Node => {
+    const { logo } = this.props;
+
+    if (logo) {
+      return <img alt={'logo'} height={'40px'} src={logo} />;
+    } else {
+      return <Logo />;
+    }
+  };
+
   renderToolTipIcon = (title: string, type: ToolTipType) => {
     let content;
     switch (type) {

src/webui/components/Header/types.js

@@ -4,6 +4,7 @@
  */
 
 export interface IProps {
+  logo: string;
   username?: string;
   onLogout?: Function;
   onToggleLoginModal: Function;

src/webui/template/index.html

@@ -11,6 +11,7 @@
     <script>
         window.VERDACCIO_API_URL = '<%= htmlWebpackPlugin.options.verdaccioURL %>/-/verdaccio/';
         window.VERDACCIO_SCOPE = '<%= htmlWebpackPlugin.options.scope %>';
+        window.VERDACCIO_LOGO = '<%= htmlWebpackPlugin.options.logo %>';
     </script>
 </head>
 

src/webui/utils/logo.js

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

test/unit/webui/app.spec.js

@@ -37,13 +37,6 @@ describe('App', () => {
   beforeEach(() => {
     wrapper = mount(<App />);
   });
-  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();

test/unit/webui/components/header.spec.js

@@ -15,6 +15,7 @@ describe('<Header /> 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('<Header /> component with logged out state', () => {
       handleLogout: jest.fn(),
       onToggleLoginModal: jest.fn(),
       scope: 'test scope',
+      logo: '',
       withoutSearch: true,
     };
     wrapper = mount(<Header {...props} />);

test/unit/webui/utils/logo.spec.js

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

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://verdaccio.org/img/logo/symbol/svg/verdaccio-tiny.svg',
       filename: 'index.html',
       verdaccioURL: '//localhost:4873',
       template: `${env.SRC_ROOT}/webui/template/index.html`,

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',