Merge branch 'feat-new-detail-page' into fix-1013

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,12 +52,13 @@ module.exports = function(config, auth, storage) {
     });
   });
 
+
   function renderHTML(req, res) {
     const base = combineBaseUrl(getWebProtocol(req.get(HEADERS.FORWARDED_PROTO), req.protocol), req.get('host'), config.url_prefix);
-
     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 Loading from './components/Loading';
@@ -24,7 +23,7 @@ export const AppContextConsumer = AppContext.Consumer;
 export default class App extends Component {
   state = {
     error: {},
-    logoUrl: '',
+    logoUrl: window.VERDACCIO_LOGO,
     user: {},
     scope: (window.VERDACCIO_SCOPE) ? `${window.VERDACCIO_SCOPE}:` : '',
     showLoginModal: false,
@@ -62,10 +61,8 @@ export default class App extends Component {
 
   loadOnHandler = async () => {
     try {
-      const logoUrl = await logo();
       this.req = await API.request('packages', 'GET');
       this.setState({
-        logoUrl,
         packages: this.req,
         isLoading: false,
       });

src/webui/components/Header/index.js

@@ -113,7 +113,7 @@ class Header extends Component<IProps, IState> {
     return (
       <LeftSide>
         <Link style={{ marginRight: '1em' }} to={'/'}>
-          <Logo />
+          {this.renderLogo()}
         </Link>
         {!withoutSearch && (
           <SearchWrapper>
@@ -124,6 +124,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/components/header.spec.js

@@ -18,6 +18,7 @@ describe('<Header /> component with logged in state', () => {
     props = {
       username: 'test user',
       handleLogout: jest.fn(),
+      logo: '',
       onToggleLoginModal: jest.fn(),
       scope: 'test scope',
       withoutSearch: true,
@@ -69,6 +70,7 @@ describe('<Header /> component with logged out state', () => {
       handleLogout: jest.fn(),
       onToggleLoginModal: jest.fn(),
       scope: 'test scope',
+      logo: '',
       withoutSearch: true,
     };
     routerWrapper = shallow(

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