chore(release): 0.3.13

Co-authored-by: Juan Picado @jotadeveloper <juanpicado19@gmail.com>

.github/workflows/security.yml

@@ -0,0 +1,11 @@
+name: Security Flow
+on: push
+jobs:
+  security:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@master
+      - name: Run Snyk to check for vulnerabilities
+        uses: snyk/actions/node@0.1.0
+        env:
+          SNYK_TOKEN: ${{ secrets.SNYK_TOKEN }}

CHANGELOG.md

@@ -2,6 +2,32 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.3.13](https://github.com/verdaccio/ui/compare/v0.3.12...v0.3.13) (2020-02-02)
+
+
+### Bug Fixes
+
+* do not capitalize heading - closes [#428](https://github.com/verdaccio/ui/issues/428) ([#431](https://github.com/verdaccio/ui/issues/431)) ([d481f54](https://github.com/verdaccio/ui/commit/d481f549484361c1d1bc011e0858e8f99b8a2528))
+* package list refresh based on logged-in user ([#415](https://github.com/verdaccio/ui/issues/415)) ([222ffed](https://github.com/verdaccio/ui/commit/222ffed0226f5aaa62f2d5b91bb08717b2aa24ef)), closes [#414](https://github.com/verdaccio/ui/issues/414) [#414](https://github.com/verdaccio/ui/issues/414)
+* reload packages on log in ([#421](https://github.com/verdaccio/ui/issues/421)) ([1eca1f4](https://github.com/verdaccio/ui/commit/1eca1f40797790e87d9592204ca061527d09c4ae))
+* typo ([#423](https://github.com/verdaccio/ui/issues/423)) ([164cea6](https://github.com/verdaccio/ui/commit/164cea6c10804c1d2097c2a582eb3e1e51814d4a))
+* update dependencies ([#420](https://github.com/verdaccio/ui/issues/420)) ([ee1c3f0](https://github.com/verdaccio/ui/commit/ee1c3f08eb16da2313d8841cfab18358d7f4ea10))
+
+### [0.3.12](https://github.com/verdaccio/ui/compare/v0.3.11...v0.3.12) (2020-01-09)
+
+
+### Bug Fixes
+
+* generate correct registry URL ([#413](https://github.com/verdaccio/ui/issues/413)) ([6b322ad](https://github.com/verdaccio/ui/commit/6b322ad553e9fb3ee65b2968dcfe856ba42a0bfb)), closes [#300](https://github.com/verdaccio/ui/issues/300) [#311](https://github.com/verdaccio/ui/issues/311)
+
+### [0.3.11](https://github.com/verdaccio/ui/compare/v0.3.10...v0.3.11) (2020-01-08)
+
+
+### Bug Fixes
+
+* remove prevent default and use react context ([#411](https://github.com/verdaccio/ui/issues/411)) ([6bd38b8](https://github.com/verdaccio/ui/commit/6bd38b812032857bb19af8978d48f6f8969af6cf))
+* removed unused style file ([#406](https://github.com/verdaccio/ui/issues/406)) ([6eeae63](https://github.com/verdaccio/ui/commit/6eeae630ef441a871d06b888b6a21178e36e0db7))
+
 ### [0.3.10](https://github.com/verdaccio/ui/compare/v0.3.9...v0.3.10) (2019-12-30)
 
 

README.md

@@ -12,7 +12,7 @@
 [![stackshare](https://img.shields.io/badge/Follow%20on-StackShare-blue.svg?logo=stackshare&style=flat)](https://stackshare.io/verdaccio)
 [![discord](https://img.shields.io/discord/388674437219745793.svg)](http://chat.verdaccio.org/)
 [![node](https://img.shields.io/node/v/@verdaccio/ui-theme/latest.svg)](https://www.npmjs.com/package/@verdaccio/ui-theme)
-![MIT](https://img.shields.io/github/license/mashape/apistatus.svg)
+[![MIT](https://img.shields.io/github/license/mashape/apistatus.svg)](./LICENSE)
 [![Crowdin](https://d322cqt584bo4o.cloudfront.net/verdaccio/localized.svg)](https://crowdin.com/project/verdaccio)
 [![codecov](https://codecov.io/gh/verdaccio/ui/branch/master/graph/badge.svg)](https://codecov.io/gh/verdaccio/ui)
 

jest/jestEnvironment.js

@@ -1 +1 @@
-require.requireActual('babel/polyfill');
+jest.requireActual('babel/polyfill');

jest/setup.ts

@@ -8,14 +8,13 @@ import Adapter from 'enzyme-adapter-react-16';
 import { GlobalWithFetchMock } from 'jest-fetch-mock';
 import 'mutationobserver-shim';
 
-// @ts-ignore : Only a void function can be called with the 'new' keyword
 configure({ adapter: new Adapter() });
 
 // @ts-ignore : Property '__APP_VERSION__' does not exist on type 'Global'.
 global.__APP_VERSION__ = '1.0.0';
 // @ts-ignore : Property '__VERDACCIO_BASENAME_UI_OPTIONS' does not exist on type 'Global'.
-global.__VERDACCIO_BASENAME_UI_OPTIONS = {};
+global.__VERDACCIO_BASENAME_UI_OPTIONS = { base: 'http://localhost' };
-
+// @ts-ignore : Property 'VERDACCIO_API_URL' does not exist on type 'Global'.
 global.VERDACCIO_API_URL = 'https://verdaccio.tld';
 
 const customGlobal: GlobalWithFetchMock = global as GlobalWithFetchMock;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verdaccio/ui-theme",
-  "version": "0.3.10",
+  "version": "0.3.13",
   "description": "Verdaccio User Interface",
   "author": {
     "name": "Verdaccio Core Team",
@@ -13,10 +13,10 @@
   "homepage": "https://verdaccio.org",
   "main": "index.js",
   "devDependencies": {
-    "@babel/plugin-proposal-nullish-coalescing-operator": "7.7.4",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "7.8.0",
-    "@babel/plugin-proposal-optional-chaining": "7.7.5",
+    "@babel/plugin-proposal-optional-chaining": "7.8.0",
-    "@commitlint/cli": "8.2.0",
+    "@commitlint/cli": "8.3.4",
-    "@commitlint/config-conventional": "8.2.0",
+    "@commitlint/config-conventional": "8.3.4",
     "@emotion/core": "10.0.22",
     "@emotion/styled": "10.0.23",
     "@material-ui/core": "4.8.0",
@@ -29,33 +29,33 @@
     "@types/jest": "24.0.24",
     "@types/js-base64": "2.3.1",
     "@types/lodash": "4.14.149",
-    "@types/node": "12.12.21",
+    "@types/node": "13.1.6",
-    "@types/react": "16.9.16",
+    "@types/react": "16.9.17",
     "@types/react-autosuggest": "9.3.13",
     "@types/react-dom": "16.9.4",
     "@types/react-router-dom": "5.1.3",
     "@types/request": "2.48.4",
     "@types/validator": "12.0.1",
-    "@types/webpack-env": "1.14.1",
+    "@types/webpack-env": "1.15.0",
-    "@typescript-eslint/parser": "2.12.0",
+    "@typescript-eslint/parser": "2.18.0",
-    "@verdaccio/babel-preset": "8.4.2",
+    "@verdaccio/babel-preset": "9.0.0",
-    "@verdaccio/commons-api": "8.4.2",
+    "@verdaccio/commons-api": "9.0.0",
     "@verdaccio/eslint-config": "8.4.2",
-    "@verdaccio/types": "8.4.2",
+    "@verdaccio/types": "9.0.0",
     "autosuggest-highlight": "3.1.1",
     "babel-loader": "8.0.6",
     "bundlesize": "0.18.0",
-    "codeceptjs": "2.3.6",
+    "codeceptjs": "2.4.0",
     "codecov": "3.6.1",
     "concurrently": "5.0.2",
     "cross-env": "6.0.3",
-    "css-loader": "3.4.0",
+    "css-loader": "3.4.2",
-    "dayjs": "1.8.18",
+    "dayjs": "1.8.19",
     "detect-secrets": "1.0.5",
-    "emotion": "10.0.23",
+    "emotion": "10.0.27",
-    "emotion-theming": "10.0.19",
+    "emotion-theming": "10.0.27",
-    "enzyme": "3.10.0",
+    "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.1",
+    "enzyme-adapter-react-16": "1.15.2",
     "enzyme-to-json": "3.4.3",
     "eslint": "6.7.2",
     "eslint-plugin-codeceptjs": "1.2.0",
@@ -74,18 +74,18 @@
     "identity-obj-proxy": "3.0.0",
     "in-publish": "2.0.0",
     "jest": "24.9.0",
-    "jest-emotion": "10.0.26",
+    "jest-emotion": "10.0.27",
     "jest-environment-jsdom": "24.9.0",
     "jest-environment-jsdom-global": "1.2.0",
     "jest-environment-node": "24.9.0",
-    "jest-fetch-mock": "2.1.2",
+    "jest-fetch-mock": "3.0.1",
     "js-base64": "2.5.1",
     "js-yaml": "3.13.1",
     "lint-staged": "9.5.0",
     "localstorage-memory": "1.0.3",
-    "lockfile-lint": "3.0.3",
+    "lockfile-lint": "3.0.5",
     "lodash": "^4.17.15",
-    "mini-css-extract-plugin": "0.8.2",
+    "mini-css-extract-plugin": "0.9.0",
     "mutationobserver-shim": "0.3.3",
     "node-mocks-http": "1.8.1",
     "normalize.css": "8.0.1",
@@ -105,7 +105,7 @@
     "rimraf": "3.0.0",
     "source-map-loader": "0.2.4",
     "standard-version": "7.0.1",
-    "style-loader": "1.0.2",
+    "style-loader": "1.1.2",
     "stylelint": "12.0.0",
     "stylelint-config-recommended": "3.0.0",
     "stylelint-config-styled-components": "0.1.1",
@@ -113,19 +113,19 @@
     "stylelint-webpack-plugin": "1.1.2",
     "supertest": "4.0.2",
     "typeface-roboto": "0.0.75",
-    "typescript": "3.7.3",
+    "typescript": "3.7.4",
     "uglifyjs-webpack-plugin": "2.2.0",
     "url-loader": "3.0.0",
     "validator": "12.1.0",
-    "verdaccio": "4.4.0",
+    "verdaccio": "4.4.2",
-    "verdaccio-auth-memory": "8.4.2",
+    "verdaccio-auth-memory": "9.0.0",
-    "verdaccio-memory": "8.4.2",
+    "verdaccio-memory": "9.0.0",
     "wait-on": "3.3.0",
-    "webpack": "4.41.4",
+    "webpack": "4.41.5",
     "webpack-bundle-analyzer": "3.6.0",
     "webpack-bundle-size-analyzer": "3.1.0",
     "webpack-cli": "3.3.10",
-    "webpack-dev-server": "3.9.0",
+    "webpack-dev-server": "3.10.1",
     "webpack-merge": "4.2.2",
     "whatwg-fetch": "3.0.0",
     "xss": "1.0.6"
@@ -171,6 +171,7 @@
     "test:acceptance:server": "concurrently --kill-others \"npm run verdaccio:server\" \"npm run test:acceptance\"",
     "test:e2e": "cross-env BABEL_ENV=test jest --config ./test/jest.config.e2e.js",
     "test": "cross-env NODE_ENV=test BABEL_ENV=test TZ=UTC jest --config ./jest/jest.config.js --maxWorkers 2 --passWithNoTests",
+    "test:update-snapshot": "npm run test -- -u",
     "test:size": "bundlesize",
     "lint": "npm run lint:js && npm run lint:css && npm run lint:lockfile",
     "lint:js": "npm run type-check && eslint . --ext .js,.ts,.tsx",

src/App/App.tsx

@@ -5,11 +5,9 @@ import { Router } from 'react-router-dom';
 
 import storage from '../utils/storage';
 import { isTokenExpire } from '../utils/login';
-import API from '../utils/api';
 import Header from '../components/Header';
 import Footer from '../components/Footer';
 import Box from '../muiComponents/Box';
-import Loading from '../components/Loading';
 import StyleBaseline from '../design-tokens/StyleBaseline';
 import { Theme } from '../design-tokens/theme';
 
@@ -33,11 +31,9 @@ const StyledBoxContent = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
 /* eslint-disable react-hooks/exhaustive-deps */
 const App: React.FC = () => {
   const [user, setUser] = useState();
-  const [packages, setPackages] = useState([]);
-  const [isLoading, setIsLoading] = useState(true);
 
   /**
-   * Logouts user
+   * Logout user
    * Required by: <Header />
    */
   const logout = () => {
@@ -59,46 +55,26 @@ const App: React.FC = () => {
     setUser({ username });
   };
 
-  const loadOnHandler = async () => {
-    try {
-      const packages = await API.request('packages', 'GET');
-      // FIXME add correct type for package
-      setPackages(packages as never[]);
-    } catch (error) {
-      // FIXME: add dialog
-      console.error({
-        title: 'Warning',
-        message: `Unable to load package list: ${error.message}`,
-      });
-    }
-
-    setIsLoading(false);
-  };
-
   useEffect(() => {
     checkUserAlreadyLoggedIn();
-    loadOnHandler();
   }, []);
 
   return (
     <>
       <StyleBaseline />
       <StyledBox display="flex" flexDirection="column" height="100%">
-        {isLoading ? (
+        <>
-          <Loading />
+          <Router history={history}>
-        ) : (
+            <AppContextProvider user={user}>
-          <>
+              <Header />
-            <Router history={history}>
+              <StyledBoxContent flexGrow={1}>
-              <AppContextProvider packages={packages} user={user}>
+                {/* eslint-disable-next-line react/jsx-max-depth */}
-                <Header />
+                <AppRoute />
-                <StyledBoxContent flexGrow={1}>
+              </StyledBoxContent>
-                  <AppRoute />
+            </AppContextProvider>
-                </StyledBoxContent>
+          </Router>
-              </AppContextProvider>
+          <Footer />
-            </Router>
+        </>
-            <Footer />
-          </>
-        )}
       </StyledBox>
     </>
   );

src/App/AppContext.ts

@@ -3,7 +3,6 @@ import { createContext } from 'react';
 export interface AppProps {
   user?: User;
   scope: string;
-  packages: any[];
 }
 
 export interface User {

src/App/AppContextProvider.tsx

@@ -3,15 +3,13 @@ import React, { useState, useEffect } from 'react';
 import AppContext, { AppProps, User } from './AppContext';
 
 interface Props {
-  packages: any[];
   user?: User;
 }
 
 /* eslint-disable react-hooks/exhaustive-deps */
-const AppContextProvider: React.FC<Props> = ({ children, packages, user }) => {
+const AppContextProvider: React.FC<Props> = ({ children, user }) => {
   const [state, setState] = useState<AppProps>({
     scope: window.VERDACCIO_SCOPE || '',
-    packages,
     user,
   });
 
@@ -22,13 +20,6 @@ const AppContextProvider: React.FC<Props> = ({ children, packages, user }) => {
     });
   }, [user]);
 
-  useEffect(() => {
-    setState({
-      ...state,
-      packages,
-    });
-  }, [packages]);
-
   const setUser = (user?: User) => {
     setState({
       ...state,

src/App/AppRoute.tsx

@@ -30,7 +30,7 @@ const AppRoute: React.FC = () => {
     throw Error('The app Context was not correct used');
   }
 
-  const { user, packages } = appContext;
+  const { user } = appContext;
 
   const isUserLoggedIn = user && user.username;
 
@@ -39,7 +39,7 @@ const AppRoute: React.FC = () => {
       <Suspense fallback={<Loading />}>
         <Switch>
           <ReactRouterDomRoute exact={true} path={Route.ROOT}>
-            <HomePage isUserLoggedIn={!!isUserLoggedIn} packages={packages || []} />
+            <HomePage isUserLoggedIn={!!isUserLoggedIn} />
           </ReactRouterDomRoute>
           <ReactRouterDomRoute exact={true} path={Route.PACKAGE}>
             <VersionContextProvider>

src/App/styles.ts

@@ -1,18 +0,0 @@
-import { css } from '@emotion/core';
-
-import { theme } from '../design-tokens/theme';
-
-export const alertError = css({
-  backgroundColor: `${theme.palette.red} !important`,
-  minWidth: 'inherit !important',
-});
-
-export const alertErrorMsg = css({
-  display: 'flex',
-  alignItems: 'center',
-});
-
-export const alertIcon = css({
-  opacity: 0.9,
-  marginRight: '8px',
-});

src/components/DetailSidebar/DetailSidebar.tsx

@@ -38,7 +38,7 @@ const DetailSidebar: React.FC = () => {
       />
       <ActionBar />
       <Install />
-      {packageMeta?.latest?.funding && <DetailSidebarFundButton to={packageMeta.latest.funding.url} />}
+      <DetailSidebarFundButton />
       <Repository />
       <Engines />
       <Dist />

src/components/DetailSidebar/DetailSidebarFundButton.test.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import _ from 'lodash';
+
+import { render } from '../../utils/test-react-testing-library';
+import { DetailContext, DetailContextProps } from '../../pages/Version';
+
+import DetailSidebarFundButton from './DetailSidebarFundButton';
+
+const ComponentToBeRendered: React.FC<{ contextValue: DetailContextProps }> = ({ contextValue }) => (
+  <DetailContext.Provider value={contextValue}>
+    <DetailSidebarFundButton />
+  </DetailContext.Provider>
+);
+
+const detailContextValue: DetailContextProps = {
+  packageName: 'foo',
+  readMe: 'test',
+  enableLoading: () => {},
+  isLoading: false,
+  hasNotBeenFound: false,
+  packageMeta: {
+    _uplinks: {},
+    latest: {
+      name: '@verdaccio/local-storage',
+      version: '8.0.1-next.1',
+      dist: { fileCount: 0, unpackedSize: 0, tarball: 'http://localhost:8080/bootstrap/-/bootstrap-4.3.1.tgz' },
+      homepage: 'https://verdaccio.org',
+      bugs: {
+        url: 'https://github.com/verdaccio/monorepo/issues',
+      },
+    },
+  },
+};
+
+describe('test DetailSidebarFundButton', () => {
+  test('should not display the button if fund is missing', () => {
+    const wrapper = render(<ComponentToBeRendered contextValue={detailContextValue} />);
+
+    expect(wrapper.queryByText('Fund')).toBeNull();
+  });
+
+  test('should not display the button if url is missing', () => {
+    const value = _.merge(detailContextValue, {
+      packageMeta: {
+        latest: {
+          funding: {},
+        },
+      },
+    });
+
+    const wrapper = render(<ComponentToBeRendered contextValue={value} />);
+
+    expect(wrapper.queryByText('Fund')).toBeNull();
+  });
+
+  test('should not display the button if url is not a string', () => {
+    const value = _.merge(detailContextValue, {
+      packageMeta: {
+        latest: {
+          funding: {
+            url: null,
+          },
+        },
+      },
+    });
+
+    const wrapper = render(<ComponentToBeRendered contextValue={value} />);
+
+    expect(wrapper.queryByText('Fund')).toBeNull();
+  });
+
+  test('should not display the button if url is not an url', () => {
+    const value = _.merge(detailContextValue, {
+      packageMeta: {
+        latest: {
+          funding: {
+            url: 'somethign different as url',
+          },
+        },
+      },
+    });
+
+    const wrapper = render(<ComponentToBeRendered contextValue={value} />);
+
+    expect(wrapper.queryByText('Fund')).toBeNull();
+  });
+
+  test('should display the button if url is a valid url', () => {
+    const value = _.merge(detailContextValue, {
+      packageMeta: {
+        latest: {
+          funding: {
+            url: 'https://opencollective.com/verdaccio',
+          },
+        },
+      },
+    });
+
+    const wrapper = render(<ComponentToBeRendered contextValue={value} />);
+
+    expect(wrapper.getByText('Fund')).toBeTruthy();
+  });
+});

src/components/DetailSidebar/DetailSidebarFundButton.tsx

@@ -1,10 +1,12 @@
-import React, { MouseEvent } from 'react';
+import React, { useContext } from 'react';
 import styled from '@emotion/styled';
 import Favorite from '@material-ui/icons/Favorite';
 
 import Button from '../../muiComponents/Button';
 import Link from '../Link';
+import { isURL } from '../../utils/url';
 import { Theme } from '../../design-tokens/theme';
+import { DetailContext } from '../../pages/Version';
 
 const StyledLink = styled(Link)<{ theme?: Theme }>(({ theme }) => ({
   marginTop: theme && theme.spacing(1),
@@ -21,21 +23,21 @@ const StyledFundStrong = styled('strong')({
   marginRight: 3,
 });
 
-interface Props {
-  to: string;
-}
-
 /* eslint-disable react/jsx-no-bind */
-const DetailSidebarFundButton: React.FC<Props> = ({ to }) => {
+const DetailSidebarFundButton: React.FC = () => {
-  const preventDefault = (event: MouseEvent<HTMLButtonElement>) => event.preventDefault();
+  const detailContext = useContext(DetailContext);
+
+  const { packageMeta } = detailContext;
+
+  const fundingUrl = packageMeta?.latest?.funding?.url as string;
+
+  if (!isURL(fundingUrl)) {
+    return null;
+  }
+
   return (
-    <StyledLink external={true} to={to}>
+    <StyledLink external={true} to={fundingUrl}>
-      <Button
+      <Button color="primary" fullWidth={true} startIcon={<StyledFavoriteIcon />} variant="outlined">
-        color="primary"
-        fullWidth={true}
-        onClick={preventDefault}
-        startIcon={<StyledFavoriteIcon />}
-        variant="outlined">
         <StyledFundStrong>{'Fund'}</StyledFundStrong>
         {'this package'}
       </Button>

src/components/DetailSidebar/DetailSidebarTitle.tsx

@@ -15,7 +15,6 @@ interface Props {
 const StyledHeading = styled(Heading)({
   fontSize: '1rem',
   fontWeight: 700,
-  textTransform: 'capitalize',
 });
 
 const StyledBoxVersion = styled(Box)<{ theme?: Theme }>(({ theme }) => ({

src/components/Header/Header.test.tsx

@@ -18,7 +18,7 @@ describe('<Header /> component with logged in state', () => {
   test('should load the component in logged out state', () => {
     const { container, queryByTestId, getByText } = render(
       <Router>
-        <AppContextProvider packages={props.packages}>
+        <AppContextProvider>
           <Header />
         </AppContextProvider>
       </Router>
@@ -32,7 +32,7 @@ describe('<Header /> component with logged in state', () => {
   test('should load the component in logged in state', () => {
     const { container, getByTestId, queryByText } = render(
       <Router>
-        <AppContextProvider packages={props.packages} user={props.user}>
+        <AppContextProvider user={props.user}>
           <Header />
         </AppContextProvider>
       </Router>
@@ -46,7 +46,7 @@ describe('<Header /> component with logged in state', () => {
   test('should open login dialog', async () => {
     const { getByText } = render(
       <Router>
-        <AppContextProvider packages={props.packages}>
+        <AppContextProvider>
           <Header />
         </AppContextProvider>
       </Router>
@@ -61,7 +61,7 @@ describe('<Header /> component with logged in state', () => {
   test('should logout the user', async () => {
     const { getByText, getByTestId } = render(
       <Router>
-        <AppContextProvider packages={props.packages} user={props.user}>
+        <AppContextProvider user={props.user}>
           <Header />
         </AppContextProvider>
       </Router>
@@ -79,7 +79,7 @@ describe('<Header /> component with logged in state', () => {
   test("The question icon should open a new tab of verdaccio's website - installation doc", () => {
     const { getByTestId } = render(
       <Router>
-        <AppContextProvider packages={props.packages} user={props.user}>
+        <AppContextProvider user={props.user}>
           <Header />
         </AppContextProvider>
       </Router>
@@ -92,7 +92,7 @@ describe('<Header /> component with logged in state', () => {
   test('should open the registrationInfo modal when clicking on the info icon', async () => {
     const { getByTestId } = render(
       <Router>
-        <AppContextProvider packages={props.packages} user={props.user}>
+        <AppContextProvider user={props.user}>
           <Header />
         </AppContextProvider>
       </Router>
@@ -109,7 +109,7 @@ describe('<Header /> component with logged in state', () => {
   test('should close the registrationInfo modal when clicking on the button close', async () => {
     const { getByTestId, getByText, queryByTestId } = render(
       <Router>
-        <AppContextProvider packages={props.packages} user={props.user}>
+        <AppContextProvider user={props.user}>
           <Header />
         </AppContextProvider>
       </Router>

src/components/LoginDialog/LoginDialog.test.tsx

@@ -8,7 +8,6 @@ import LoginDialog from './LoginDialog';
 
 const appContextValue: AppContextProps = {
   scope: '',
-  packages: [],
   setUser: jest.fn(),
 };
 

src/muiComponents/Text/Text.tsx

@@ -1,13 +1,10 @@
 import React, { forwardRef } from 'react';
-import { default as MaterialUITypography, TypographyProps } from '@material-ui/core/Typography';
+import { default as MaterialUITypography } from '@material-ui/core/Typography';
+
+import { TextProps } from './TextConfig';
 
-type TextType = 'subtitle1' | 'subtitle2' | 'body1' | 'body2';
 type TextRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
 
-export interface TextProps extends Omit<TypographyProps, 'variant'> {
-  variant?: TextType;
-}
-
 // The reference is already from type of the Component, so the any below is not a problem
 const Text = forwardRef<TextRef, TextProps>(function Text(props, ref) {
   return <MaterialUITypography {...props} ref={ref} />;

src/muiComponents/Text/TextConfig.ts

@@ -0,0 +1,7 @@
+import { TypographyProps } from '@material-ui/core/Typography';
+
+type TextType = 'subtitle1' | 'subtitle2' | 'body1' | 'body2';
+
+export interface TextProps extends Omit<TypographyProps, 'variant'> {
+  variant?: TextType;
+}

src/muiComponents/Text/index.ts

@@ -1 +1,2 @@
-export { default, TextProps } from './Text';
+export { default } from './Text';
+export { TextProps } from './TextConfig';

src/pages/Version/context.ts

@@ -1,24 +1,6 @@
 import { createContext, Consumer, Provider } from 'react';
 
-import { PackageMetaInterface } from '../../../types/packageMeta';
+import { DetailContextProps, VersionPageConsumerProps } from './version-config';
-export interface DetailContextProps {
-  packageMeta: PackageMetaInterface;
-  packageVersion?: string;
-  readMe: string;
-  packageName: string;
-  enableLoading: () => void;
-  isLoading: boolean;
-  hasNotBeenFound: boolean;
-}
-
-export interface VersionPageConsumerProps {
-  packageMeta: PackageMetaInterface;
-  readMe: string;
-  packageName: string;
-  packageVersion?: string;
-  // FIXME: looking for the appropiated type here
-  enableLoading: any;
-}
 
 export const DetailContext = createContext<Partial<DetailContextProps>>({});
 

src/pages/Version/index.ts

@@ -1,8 +1,4 @@
-export {
+export { DetailContext, DetailContextConsumer, DetailContextProvider } from './context';
-  DetailContext,
+export { VersionPageConsumerProps, DetailContextProps } from './version-config';
-  DetailContextConsumer,
+
-  DetailContextProvider,
-  DetailContextProps,
-  VersionPageConsumerProps,
-} from './context';
 export { default } from './Version';

src/pages/Version/version-config.ts

@@ -0,0 +1,19 @@
+import { PackageMetaInterface } from '../../../types/packageMeta';
+
+export interface DetailContextProps {
+  enableLoading: () => void;
+  hasNotBeenFound: boolean;
+  isLoading: boolean;
+  packageMeta: PackageMetaInterface;
+  packageName: string;
+  packageVersion?: string;
+  readMe: string;
+}
+
+export interface VersionPageConsumerProps {
+  enableLoading: () => void;
+  packageMeta: PackageMetaInterface;
+  packageName: string;
+  packageVersion?: string;
+  readMe: string;
+}

src/pages/home/Home.tsx

@@ -1,17 +1,35 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { PackageList } from '../../components/PackageList';
-import { PackageInterface } from '../../components/Package/Package';
+import API from '../../utils/api';
+import Loading from '../../components/Loading';
 
 interface Props {
   isUserLoggedIn: boolean;
-  packages: PackageInterface[];
 }
 
-const Home: React.FC<Props> = ({ packages }) => (
+const Home: React.FC<Props> = ({ isUserLoggedIn }) => {
-  <div className="container content">
+  const [packages, setPackages] = useState([]);
-    <PackageList packages={packages} />
+  const [isLoading, setIsLoading] = useState(true);
-  </div>
+  const loadPackages = async () => {
-);
+    try {
+      const packages = await API.request('packages', 'GET');
+      // FIXME add correct type for package
+      setPackages(packages as never[]);
+    } catch (error) {
+      // FIXME: add dialog
+      console.error({
+        title: 'Warning',
+        message: `Unable to load package list: ${error.message}`,
+      });
+    }
+    setIsLoading(false);
+  };
+  useEffect(() => {
+    loadPackages().then();
+  }, [isUserLoggedIn]);
+
+  return <div className="container content">{isLoading ? <Loading /> : <PackageList packages={packages} />}</div>;
+};
 
 export default Home;

src/utils/api.ts

@@ -20,7 +20,7 @@ export function handleResponseType(response: Response): Promise<[boolean, Blob |
       return Promise.all([response.ok, response.text()]);
     }
 
-    // unfortunatelly on download files there is no header available
+    // unfortunately on download files there is no header available
     if (response.url && response.url.endsWith('.tgz') === true) {
       return Promise.all([response.ok, response.blob()]);
     }

src/utils/url.test.ts

@@ -17,14 +17,18 @@ describe('utils', () => {
       expect(isEmail('')).toBeFalsy();
     });
 
-    test('getRegistryURL() - should keep slash if location is a sub directory', () => {
+    test('getRegistryURL() - should not change when location change', () => {
+      expect(getRegistryURL()).toBe('http://localhost');
       history.pushState({}, 'page title', '/-/web/detail');
-      expect(getRegistryURL()).toBe('http://localhost/-/web/detail');
+      expect(getRegistryURL()).toBe('http://localhost');
       history.pushState({}, 'page title', '/');
     });
 
-    test('getRegistryURL() - should not add slash if location is not a sub directory', () => {
+    test('getRegistryURL() - should change when UI options change', () => {
       expect(getRegistryURL()).toBe('http://localhost');
+      window.__VERDACCIO_BASENAME_UI_OPTIONS.base = 'http://localhost/test';
+      expect(getRegistryURL()).toBe('http://localhost/test');
+      window.__VERDACCIO_BASENAME_UI_OPTIONS.base = 'http://localhost';
     });
   });
 

src/utils/url.ts

@@ -15,8 +15,7 @@ export function isEmail(email: string): boolean {
 }
 
 export function getRegistryURL(): string {
-  // Don't add slash if it's not a sub directory
+  return window.__VERDACCIO_BASENAME_UI_OPTIONS.base;
-  return `${location.origin}${location.pathname === '/' ? '' : location.pathname}`;
 }
 
 export function extractFileName(url: string): string {

tools/_verdaccio.config.yaml

@@ -10,10 +10,10 @@ auth:
     users:
       foo:
         name: test
-        password: test
+        password: test #pragma: allowlist secret
       bar:
         name: bar
-        password: test
+        password: test #pragma: allowlist secret
 security:
   api:
     jwt:
@@ -23,7 +23,7 @@ security:
   web:
     sign:
       expiresIn: 100d
-      notBefore: 1
+      notBefore: 0
 
 uplinks:
   npmjs:

tools/webpack.dev.config.babel.js

@@ -37,7 +37,7 @@ export default {
     }),
     new HTMLWebpackPlugin({
       __UI_OPTIONS: JSON.stringify({
-        base: '/',
+        base: new URL('/', 'https://localhost:4872'),
       }),
       title: 'Verdaccio Dev UI',
       scope: '',