@verdaccio/ui-components 3.0.0-next.2 → 4.0.0-next-8.0

package/src/sections/Header/HeaderLeft.tsx

@@ -1,29 +1,37 @@
-import styled from '@emotion/styled';
+import Toolbar from '@mui/material/Toolbar';
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link as RouterLink } from 'react-router-dom';
 
 import { Logo, Search } from '../../';
-import { LeftSide, SearchWrapper } from './styles';
+import { SearchWrapper } from './styles';
 
 interface Props {
   showSearch?: boolean;
 }
 
-const StyledLink = styled(Link)({
-  marginRight: '1em',
-});
-
 const HeaderLeft: React.FC<Props> = ({ showSearch }) => (
-  <LeftSide>
-    <StyledLink to={'/'}>
+  <Toolbar
+    sx={{
+      display: 'flex',
+      padding: 0,
+      marginLeft: 1,
+      flex: 1,
+      '@media (min-width: 600px)': {
+        padding: 0,
+        marginLeft: 1,
+        marginRight: '20px',
+      },
+    }}
+  >
+    <RouterLink to={'/'}>
       <Logo />
-    </StyledLink>
+    </RouterLink>
     {showSearch && (
       <SearchWrapper data-testid="search-container">
         <Search />
       </SearchWrapper>
     )}
-  </LeftSide>
+  </Toolbar>
 );
 
 export default HeaderLeft;

package/src/sections/Header/HeaderMenu.tsx

@@ -39,7 +39,7 @@ const HeaderMenu: React.FC<Props> = ({
       <Menu
         anchorEl={anchorEl}
         anchorOrigin={{
-          vertical: 'top',
+          vertical: 'bottom',
           horizontal: 'right',
         }}
         onClose={onLoggedInMenuClose}

package/src/sections/Header/HeaderRight.tsx

@@ -1,11 +1,11 @@
 import Button from '@mui/material/Button';
+import Toolbar from '@mui/material/Toolbar';
 import React, { MouseEvent, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useCustomTheme } from '../../';
 import HeaderMenu from './HeaderMenu';
 import HeaderToolTip from './HeaderToolTip';
-import { RightSide } from './styles';
 
 interface Props {
   showSearch?: boolean;
@@ -75,7 +75,18 @@ const HeaderRight: React.FC<Props> = ({
   };
 
   return (
-    <RightSide data-testid="header-right">
+    <Toolbar
+      data-testid="header-right"
+      sx={{
+        display: 'flex',
+        padding: 0,
+        marginRight: 0,
+        '@media (min-width: 600px)': {
+          padding: 0,
+          marginRight: 0,
+        },
+      }}
+    >
       {showSearch === true && (
         <HeaderToolTip
           onClick={onToggleMobileNav}
@@ -124,7 +135,7 @@ const HeaderRight: React.FC<Props> = ({
           )}
         </>
       )}
-    </RightSide>
+    </Toolbar>
   );
 };
 

package/src/sections/Header/HeaderSettingsDialog.tsx

@@ -7,12 +7,11 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import ReactMarkdown from 'react-markdown';
 import { useSelector } from 'react-redux';
-import remarkGfm from 'remark-gfm';
 
 import { RootState, Theme } from '../../';
+import RegistryInfoDialog from '../../components/RegistryInfoDialog';
 import LanguageSwitch from './LanguageSwitch';
 import RegistryInfoContent from './RegistryInfoContent';
-import RegistryInfoDialog from './RegistryInfoDialog';
 
 interface Props {
   isOpen: boolean;
@@ -71,7 +70,7 @@ const HeaderSettingsDialog: React.FC<Props> = ({ onCloseDialog, isOpen }) => {
         <TabPanel index={1} value={value}>
           <TextContent>{t('language.description')}</TextContent>
           <LanguageSwitch />
-          <ReactMarkdown remarkPlugins={[remarkGfm]}>{t('language.contribute')}</ReactMarkdown>
+          <ReactMarkdown>{t('language.contribute')}</ReactMarkdown>
         </TabPanel>
       </Box>
     </RegistryInfoDialog>

package/src/sections/Header/LanguageSwitch.tsx

@@ -41,13 +41,16 @@ const LanguageContent = ({ translation, icon }) => (
 
 const LanguageSwitch = () => {
   const { language, setLanguage, listLanguages } = useLanguage();
-  const listConverted = listLanguages.reduce((prev, item) => {
-    prev[item.lng] = {
-      translation: item.menuKey,
-      icon: item.icon,
-    };
-    return prev;
-  }, {} as Record<string, { translation: string; icon: any }>);
+  const listConverted = listLanguages.reduce(
+    (prev, item) => {
+      prev[item.lng] = {
+        translation: item.menuKey,
+        icon: item.icon,
+      };
+      return prev;
+    },
+    {} as Record<string, { translation: string; icon: any }>
+  );
 
   const [languages] = useState<string[]>(Object.keys(i18next.options?.resources || {}));
   const { t } = useTranslation();

package/src/sections/Header/RegistryInfoContent/RegistryInfoContent.test.tsx

@@ -13,7 +13,7 @@ describe('<RegistryInfoContent /> component', () => {
     expect(screen.getByText('packageManagers.description')).toBeInTheDocument();
   });
 
-  test('should load the appropiate tab content when the tab is clicked', () => {
+  test('should load the appropiate tab content when the tab is clicked', () => {
     const props = { registryUrl: 'http://localhost:4872', scope: '@' };
     render(<RegistryInfoContent registryUrl={props.registryUrl} scope={props.scope} />);
 

package/src/sections/Header/RegistryInfoContent/RegistryInfoContent.tsx

@@ -10,7 +10,6 @@ import makeStyles from '@mui/styles/makeStyles';
 import React, { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
 
 import {
   CopyClipboard,
@@ -150,17 +149,13 @@ const RegistryInfoContent: FC<Props> = ({ scope, registryUrl }) => {
           </AccordionSummary>
           <AccordionDetails>
             <Description>
-              <ReactMarkdown remarkPlugins={[remarkGfm]}>
-                {t('packageManagers.yarnclassicDetails')}
-              </ReactMarkdown>
+              <ReactMarkdown>{t('packageManagers.yarnclassicDetails')}</ReactMarkdown>
             </Description>
             <CommandContainer data-testid={'tab-content'}>
               {renderYarnTab(scope, registryUrl)}
             </CommandContainer>
             <Description>
-              <ReactMarkdown remarkPlugins={[remarkGfm]}>
-                {t('packageManagers.yarnBerryDetails')}
-              </ReactMarkdown>
+              <ReactMarkdown>{t('packageManagers.yarnBerryDetails')}</ReactMarkdown>
             </Description>
             <CommandContainer data-testid={'tab-content'}>
               {renderYarnBerryTab(scope, registryUrl)}

package/src/sections/Header/styles.ts

@@ -4,27 +4,18 @@ import AppBar from '@mui/material/AppBar';
 import IconButton from '@mui/material/IconButton';
 import Toolbar from '@mui/material/Toolbar';
 
-import { Link, Theme } from '../../';
+import { Theme } from '../../Theme';
 
 export const InnerNavBar = styled(Toolbar)({
   justifyContent: 'space-between',
   alignItems: 'center',
-  padding: '0 15px',
+  padding: 0,
 });
 
 export const Greetings = styled('span')({
   margin: '0 5px 0 0',
 });
 
-export const RightSide = styled(Toolbar)({
-  display: 'flex',
-  padding: 0,
-});
-
-export const LeftSide = styled(RightSide)({
-  flex: 1,
-});
-
 export const MobileNavBar = styled('div')<{ theme?: Theme }>((props) => ({
   alignItems: 'center',
   display: 'flex',
@@ -50,6 +41,7 @@ export const SettingsButtom = styled(IconButton)({});
 export const SearchWrapper = styled('div')({
   display: 'none',
   width: '100%',
+  marginLeft: 20,
 });
 
 export const NavBar = styled(AppBar)<{ theme?: Theme }>(({ theme }) => ({
@@ -83,7 +75,7 @@ export const NavBar = styled(AppBar)<{ theme?: Theme }>(({ theme }) => ({
   `,
   [`@media (min-width: ${theme?.breakPoints.large}px)`]: css`
     ${InnerNavBar} {
-      padding: 0 20px;
+      padding: 0 16px;
     }
   `,
   [`@media (min-width: ${theme?.breakPoints.xlarge}px)`]: css`
@@ -94,7 +86,3 @@ export const NavBar = styled(AppBar)<{ theme?: Theme }>(({ theme }) => ({
     }
   `,
 }));
-
-export const StyledLink = styled(Link)<{ theme?: Theme }>(({ theme }) => ({
-  color: theme?.palette.white,
-}));

package/src/sections/Home/Home.test.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router';
+
+import { store } from '../../store';
+import { act, renderWithStore, screen, waitFor } from '../../test/test-react-testing-library';
+import Home from './Home';
+
+// force the windows to expand to display items
+// https://github.com/bvaughn/react-virtualized/issues/493#issuecomment-640084107
+jest.spyOn(HTMLElement.prototype, 'offsetHeight', 'get').mockReturnValue(600);
+jest.spyOn(HTMLElement.prototype, 'offsetWidth', 'get').mockReturnValue(600);
+
+const ComponentHome: React.FC = () => (
+  <MemoryRouter>
+    <Home />
+  </MemoryRouter>
+);
+
+describe('Home', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('should render titles', async () => {
+    act(() => {
+      renderWithStore(<ComponentHome />, store);
+    });
+    await waitFor(() => expect(screen.getAllByTestId('package-item-list')).toHaveLength(5));
+  });
+
+  test('should render loading', async () => {
+    act(() => {
+      renderWithStore(<ComponentHome />, store);
+    });
+    await waitFor(() => expect(screen.getByTestId('loading')).toBeInTheDocument());
+  });
+});

package/src/sections/Home/Home.tsx

@@ -11,7 +11,6 @@ const Home: React.FC = () => {
     // @ts-ignore
     dispatch.packages.getPackages();
   }, [dispatch]);
-
   return (
     <div className="container content" data-testid="home-page-container">
       {isLoading ? <Loading /> : <PackageList packages={packages} />}

package/src/sections/SideBar/Sidebar.test.tsx

@@ -1,106 +1,74 @@
-import { rest } from 'msw';
 import React from 'react';
 import { MemoryRouter } from 'react-router';
 
-import { server } from '../../../jest/server';
 import { VersionProvider } from '../../providers';
 import { store } from '../../store';
-import { renderWithStore, waitFor } from '../../test/test-react-testing-library';
-import DetailSidebar from './Sidebar';
+import { act, renderWithStore, screen, waitFor } from '../../test/test-react-testing-library';
+import Sidebar from './Sidebar';
 
-const ComponentToBeRendered: React.FC = () => (
+jest.mock('marked');
+jest.mock('marked-highlight');
+
+const ComponentSideBar: React.FC = () => (
   <MemoryRouter>
     <VersionProvider>
-      <DetailSidebar />
+      <Sidebar />
     </VersionProvider>
   </MemoryRouter>
 );
 
-// https://stackoverflow.com/a/54010619/308341
-jest.mock('react', () => {
-  const React = jest.requireActual('react');
-  React.Suspense = ({ children }) => children;
-  return React;
-});
-
-const packageMeta = {
-  _uplinks: {},
-  latest: {
-    name: 'verdaccio-ui/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',
-    },
-  },
-};
-
-// const detailContextValue = {
-//   packageName: 'foo',
-//   readMe: 'test',
-//   isLoading: false,
-//   hasNotBeenFound: false,
-//   packageMeta: ,
-// };
+const mockPkgName = jest.fn().mockReturnValue('jquery');
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'), // use actual for all non-hook parts
   useParams: () => ({
-    package: 'jquery',
+    package: mockPkgName(),
   }),
 }));
 
-server.use(
-  ...[
-    rest.get('http://localhost:9000/-/verdaccio/data/sidebar/jquery', (req, res, ctx) => {
-      return res(ctx.json(packageMeta));
-    }),
-    rest.get('http://localhost:9000/-/verdaccio/data/package/readme/jquery', (req, res, ctx) => {
-      return res(ctx.text('foo readme'));
-    }),
-  ]
-);
-// describe('DetailSidebar', () => {
-test('should render commonjs module icon', async () => {
-  const { getByText } = renderWithStore(<ComponentToBeRendered />, store);
+describe('Sidebar', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+  test('should render titles', async () => {
+    act(() => {
+      renderWithStore(<ComponentSideBar />, store);
+    });
+    await waitFor(() => expect(screen.getAllByText('jquery')).toHaveLength(2));
 
-  await waitFor(() => expect(getByText('jquery')).toBeInTheDocument());
-});
+    expect(screen.getByText(`sidebar.detail.latest-version`, { exact: false })).toBeInTheDocument();
+    expect(
+      screen.getByText(/sidebar.detail.published .*years? ago/i, { exact: false })
+    ).toBeInTheDocument();
+    expect(screen.getByText(`sidebar.installation.title`, { exact: false })).toBeInTheDocument();
+  });
 
-//   test('should render ts module icon', () => {
-//     renderWithStore(
-//       <ComponentToBeRendered
-//         contextValue={_.merge(detailContextValue, {
-//           packageMeta: {
-//             latest: {
-//               types: './src/index.d.ts',
-//             },
-//           },
-//         })}
-//       />,
-//       store
-//     );
-//     expect(screen.getByAltText('typescript')).toBeInTheDocument();
-//   });
+  test('should render commonJS', async () => {
+    act(() => {
+      renderWithStore(<ComponentSideBar />, store);
+    });
+    // package name + keyword
+    await waitFor(() => expect(screen.getAllByText('jquery')).toHaveLength(2));
+    expect(screen.getByAltText('commonjs')).toBeInTheDocument();
+  });
 
-//   test('should render es6 module icon', () => {
-//     renderWithStore(
-//       <ComponentToBeRendered
-//         contextValue={_.merge(detailContextValue, {
-//           packageMeta: {
-//             latest: {
-//               type: 'module',
-//             },
-//           },
-//         })}
-//       />,
-//       store
-//     );
-//     expect(screen.getByAltText('es6 modules')).toBeInTheDocument();
-//   });
-// });
+  test('should render typescript', async () => {
+    mockPkgName.mockReturnValue('glob');
+    act(() => {
+      renderWithStore(<ComponentSideBar />, store);
+    });
+    // just package name
+    await waitFor(() => expect(screen.getByText('glob')).toBeInTheDocument());
+    expect(screen.getByAltText('typescript')).toBeInTheDocument();
+  });
+
+  test('should render es modules', async () => {
+    mockPkgName.mockReturnValue('got');
+    act(() => {
+      renderWithStore(<ComponentSideBar />, store);
+    });
+    // package name + keyword
+    await waitFor(() => expect(screen.getAllByText('got')).toHaveLength(2));
+    expect(screen.getByAltText('es6 modules')).toBeInTheDocument();
+  });
+});

package/src/sections/SideBar/Sidebar.tsx

@@ -1,30 +1,19 @@
-import styled from '@emotion/styled';
 import Paper from '@mui/material/Paper';
 import React from 'react';
 
-import { Theme } from '../../Theme';
 import ActionBar from '../../components/ActionBar';
 import Author from '../../components/Author';
 import Developers, { DeveloperType } from '../../components/Developers';
+import Dist from '../../components/Distribution';
+import Engines from '../../components/Engines';
 import FundButton from '../../components/FundButton';
-import SideBarTittle from '../../components/SideBarTittle';
+import Install from '../../components/Install';
+import Keywords from '../../components/Keywords';
+import Repository from '../../components/Repository';
+import SideBarTitle from '../../components/SideBarTitle';
 import { useConfig } from '../../providers';
 import { useVersion } from '../../providers';
 import { PackageMetaInterface } from '../../types/packageMeta';
-import loadable from '../../utils/loadable';
-
-const Engines = loadable(
-  () => import(/* webpackChunkName: "Engines" */ '../../components/Engines')
-);
-const Dist = loadable(
-  () => import(/* webpackChunkName: "Distribution" */ '../../components/Distribution')
-);
-const Install = loadable(
-  () => import(/* webpackChunkName: "Install" */ '../../components/Install')
-);
-const Repository = loadable(
-  () => import(/* webpackChunkName: "Repository" */ '../../components/Repository')
-);
 
 const getModuleType = (manifest: PackageMetaInterface) => {
   if (manifest.latest.main) {
@@ -40,14 +29,13 @@ const DetailSidebar: React.FC = () => {
   const { configOptions } = useConfig();
   const version = packageVersion || packageMeta?.latest.version || '';
   const time = packageMeta?.time ? packageMeta.time[version] : '';
-
   if (!packageMeta || !packageName) {
     return null;
   }
 
   return (
-    <StyledPaper sx={{ position: 'sticky', top: 0 }}>
-      <SideBarTittle
+    <Paper data-testid="sidebar" sx={{ position: 'sticky', top: 0, p: 2, ml: 2 }}>
+      <SideBarTitle
         description={packageMeta.latest?.description}
         hasTypes={typeof packageMeta.latest?.types === 'string'}
         isLatest={typeof packageVersion === 'undefined'}
@@ -61,20 +49,17 @@ const DetailSidebar: React.FC = () => {
         showDownloadTarball={configOptions.showDownloadTarball}
         showRaw={configOptions.showRaw}
       />
-      <Install configOptions={configOptions} packageMeta={packageMeta} packageName={packageName} />
       <FundButton packageMeta={packageMeta} />
+      <Install configOptions={configOptions} packageMeta={packageMeta} packageName={packageName} />
       <Repository packageMeta={packageMeta} />
       <Engines packageMeta={packageMeta} />
       <Dist packageMeta={packageMeta} />
+      <Keywords packageMeta={packageMeta} />
       <Author packageMeta={packageMeta} />
       <Developers packageMeta={packageMeta} type={DeveloperType.MAINTAINERS} />
       <Developers packageMeta={packageMeta} type={DeveloperType.CONTRIBUTORS} />
-    </StyledPaper>
+    </Paper>
   );
 };
 
 export default DetailSidebar;
-
-const StyledPaper = styled(Paper)<{ theme?: Theme }>(({ theme }) => ({
-  padding: theme?.spacing(3, 2),
-}));

package/src/store/api.test.ts

@@ -14,7 +14,8 @@ describe('api', () => {
 
       const handled = await handleResponseType(response);
 
-      expect(handled).toEqual([ok, responseText]);
+      expect(handled[0]).toBeFalsy();
+      expect(handled[1]).toBeDefined();
     });
 
     test('should test tgz scenario', async () => {
@@ -30,6 +31,22 @@ describe('api', () => {
 
       expect(handled).toEqual([true, blob]);
     });
+
+    test('should test pdf scenario', async () => {
+      const blob = new Blob(['foo']);
+      const blobPromise = Promise.resolve<Blob>(blob);
+      const response: Response = {
+        url: 'http://localhost:8080/test.pdf',
+        blob: () => blobPromise,
+        ok: true,
+        headers: new Headers({
+          'Content-Type': 'application/pdf',
+        }),
+      } as Response;
+      const handled = await handleResponseType(response);
+
+      expect(handled).toEqual([true, blob]);
+    });
   });
 
   describe('api client', () => {
@@ -123,7 +140,7 @@ describe('api', () => {
         })
       );
 
-      await expect(api.request('/resource')).rejects.toThrow(new Error('something went wrong'));
+      await expect(api.request('/resource')).rejects.toThrow(new Error('Unknown error'));
     });
 
     test('when api returns an error 5.x.x', async () => {

package/src/store/api.ts

@@ -1,5 +1,10 @@
 import storage from './storage';
 
+class CustomError extends Error {
+  // @ts-ignore
+  code: number;
+}
+
 /**
  * Handles response according to content type
  * @param {object} response
@@ -25,7 +30,8 @@ export function handleResponseType(response: Response): Promise<[boolean, any]>
     }
   }
 
-  return Promise.all([response.ok, response.text()]);
+  // error handling
+  return Promise.all([response.ok, response]);
 }
 
 const AuthHeader = 'Authorization';
@@ -55,12 +61,13 @@ class API {
       })
         .then(handleResponseType)
         .then((response) => {
-          if (response[0]) {
-            resolve(response[1]);
+          const [ok, data] = response;
+          if (ok === true) {
+            resolve(data);
           } else {
-            // eslint-disable-next-line no-console
-            console.error(response);
-            reject(new Error('something went wrong'));
+            const error = new CustomError(data?.statusText ?? 'Unknown error');
+            error.code = data?.status ?? 500;
+            reject(error);
           }
         })
         .catch((error) => {

package/src/store/models/configuration.ts

@@ -7,6 +7,7 @@ import { Manifest, TemplateUIOptions } from '@verdaccio/types';
 import type { RootModel } from '.';
 import { colors } from '../../Theme';
 import API from '../api';
+import { APIRoute } from './routes';
 
 const defaultValues: TemplateUIOptions = {
   primaryColor: colors.PRIMARY_COLOR,
@@ -39,7 +40,7 @@ export const configuration = createModel<RootModel>()({
   },
   effects: (dispatch) => ({
     async getPackages() {
-      const payload: Manifest[] = await API.request(`/-/verdaccio/packages`, 'GET');
+      const payload: Manifest[] = await API.request(APIRoute.CONFIG, 'GET');
       dispatch.packages.savePackages(payload);
     },
   }),

package/src/store/models/login.ts

@@ -5,6 +5,8 @@ import type { RootModel } from '.';
 import { isTokenExpire } from '../../utils';
 import API from '../api';
 import storage from '../storage';
+import { APIRoute } from './routes';
+import { stripTrailingSlash } from './utils';
 
 export const HEADERS = {
   JSON: 'application/json',
@@ -80,19 +82,15 @@ export const login = createModel<RootModel>()({
   },
   effects: (dispatch) => ({
     async getUser({ username, password }, state) {
-      const basePath = state.configuration.config.base;
+      const basePath = stripTrailingSlash(state.configuration.config.base);
       try {
-        const payload: LoginResponse = await API.request(
-          `${basePath}-/verdaccio/sec/login`,
-          'POST',
-          {
-            body: JSON.stringify({ username, password }),
-            headers: {
-              Accept: HEADERS.JSON,
-              'Content-Type': HEADERS.JSON,
-            },
-          }
-        );
+        const payload: LoginResponse = await API.request(`${basePath}${APIRoute.LOGIN}`, 'POST', {
+          body: JSON.stringify({ username, password }),
+          headers: {
+            Accept: HEADERS.JSON,
+            'Content-Type': HEADERS.JSON,
+          },
+        });
         dispatch.login.logInUser(payload);
         dispatch.packages.getPackages(undefined);
       } catch (error: any) {