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

package/src/components/LoginDialog/LoginDialog.test.tsx

@@ -87,7 +87,7 @@ describe('<LoginDialog /> component', () => {
     fireEvent.change(userNameInput, { target: { value: 'xyz' } });
 
     const passwordInput = screen.getByPlaceholderText('form-placeholder.password');
-    expect(userNameInput).toBeInTheDocument();
+    expect(passwordInput).toBeInTheDocument();
     fireEvent.focus(passwordInput);
 
     await act(async () => {

package/src/components/LoginDialog/LoginDialog.tsx

@@ -21,7 +21,7 @@ const LoginDialog: React.FC<Props> = ({ onClose, open = false }) => {
   const makeLogin = useCallback(
     async (username?: string, password?: string): Promise<LoginBody | void> => {
       // checks isEmpty
-      if (isEmpty(username) || isEmpty(password)) {
+      if (!username || !password || isEmpty(username) || isEmpty(password)) {
         dispatch.login.addError({
           type: 'error',
           description: i18next.t('form-validation.username-or-password-cant-be-empty'),
@@ -29,6 +29,15 @@ const LoginDialog: React.FC<Props> = ({ onClose, open = false }) => {
         return;
       }
 
+      // checks min username and password length
+      if (username.length < 2 || password.length < 2) {
+        dispatch.login.addError({
+          type: 'error',
+          description: i18next.t('form-validation.required-min-length', { length: 2 }),
+        });
+        return;
+      }
+
       try {
         dispatch.login.getUser({ username, password });
         // const response: LoginBody = await doLogin(username as string, password as string);

package/src/components/LoginDialog/LoginDialogCloseButton.tsx

@@ -12,6 +12,7 @@ const StyledIconButton = styled(IconButton)<{ theme?: Theme }>(({ theme }) => ({
   right: theme.spacing() / 2,
   top: theme.spacing() / 2,
   color: theme.palette.grey[500],
+  zIndex: 99,
 }));
 
 interface Props {

package/src/components/LoginDialog/LoginDialogForm.tsx

@@ -48,7 +48,6 @@ const LoginDialogForm = memo(({ onSubmit, error }: Props) => {
         id="login--dialog-username"
         {...register('username', {
           required: { value: true, message: t('form-validation.required-field') },
-          minLength: { value: 2, message: t('form-validation.required-min-length', { length: 2 }) },
         })}
         label={t('form.username')}
         margin="normal"
@@ -65,7 +64,6 @@ const LoginDialogForm = memo(({ onSubmit, error }: Props) => {
         id="login--dialog-password"
         {...register('password', {
           required: { value: true, message: t('form-validation.required-field') },
-          minLength: { value: 2, message: t('form-validation.required-min-length', { length: 2 }) },
         })}
         data-testid="password"
         label={t('form.password')}

package/src/components/LoginDialog/LoginDialogFormError.tsx

@@ -30,7 +30,7 @@ const LoginDialogFormError = memo(({ error }: Props) => {
   return (
     <StyledSnackbarContent
       message={
-        <Box alignItems="center" display="flex">
+        <Box alignItems="center" data-testid="error" display="flex">
           <StyledErrorIcon />
           {error.description}
         </Box>

package/src/components/Logo/Logo.stories.tsx

@@ -0,0 +1,16 @@
+import Box from '@mui/material/Box';
+import React from 'react';
+
+import Logo from './Logo';
+
+export default {
+  title: 'Components/Logo',
+};
+
+export const Icons: any = () => (
+  <Box sx={{ width: '100%' }}>
+    <Logo size="x-small" />
+    <Logo size="small" />
+    <Logo size="big" />
+  </Box>
+);

package/src/components/Logo/Logo.test.tsx

@@ -1,11 +1,18 @@
 import React from 'react';
 
-import { render } from '../../test/test-react-testing-library';
+import { render, screen } from '../../test/test-react-testing-library';
 import Logo from './Logo';
 
 describe('<Logo /> component', () => {
   test('should render the component in default state', () => {
     const { container } = render(<Logo />);
     expect(container.firstChild).toMatchSnapshot();
+    expect(screen.getByTestId('default-logo')).toBeTruthy();
+  });
+
+  test('should render custom logo', () => {
+    window.__VERDACCIO_BASENAME_UI_OPTIONS.logo = 'custom.png';
+    render(<Logo />);
+    expect(screen.getByTestId('custom-logo')).toBeTruthy();
   });
 });

package/src/components/Logo/Logo.tsx

@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+import { useTheme } from '@mui/styles';
 import React from 'react';
 
 import { Theme, useConfig } from '../../';
@@ -22,18 +23,33 @@ interface Props {
   onClick?: () => void;
   className?: string;
   isDefault?: boolean;
+  title?: string;
 }
 
-const Logo: React.FC<Props> = ({ size, onClick, className, isDefault = false }) => {
+const Logo: React.FC<Props> = ({ size, onClick, className, isDefault = false, title = '' }) => {
   const { configOptions } = useConfig();
+  const theme = useTheme();
   if (!isDefault && configOptions?.logo) {
+    const logoSrc =
+      theme?.palette.mode === 'dark' && configOptions.logoDark
+        ? configOptions.logoDark
+        : configOptions.logo;
     return (
       <ImageLogo className={className} onClick={onClick}>
-        <img alt="logo" height="40px" src={configOptions.logo} />
+        <img alt={title} data-testid={'custom-logo'} height="40px" src={logoSrc} />
       </ImageLogo>
     );
   }
-  return <StyledLogo className={className} onClick={onClick} size={size} />;
+
+  return (
+    <StyledLogo
+      className={className}
+      data-testid={'default-logo'}
+      onClick={onClick}
+      size={size}
+      title={title}
+    />
+  );
 };
 
 export default Logo;

package/src/components/NotFound/NotFound.tsx

@@ -1,4 +1,6 @@
+/* eslint-disable verdaccio/jsx-no-style */
 import styled from '@emotion/styled';
+import FolderOffIcon from '@mui/icons-material/FolderOff';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import React, { useCallback } from 'react';
@@ -7,8 +9,6 @@ import { useHistory } from 'react-router-dom';
 
 import { Theme } from '../../';
 import Heading from '../Heading';
-// @ts-ignore
-import PackageImg from './img/package.svg';
 
 const NotFound: React.FC = () => {
   const history = useHistory();
@@ -28,7 +28,9 @@ const NotFound: React.FC = () => {
       justifyContent="center"
       p={2}
     >
-      <EmptyPackage alt={t('error.404.page-not-found')} src={PackageImg} />
+      <Container>
+        <FolderOffIcon color="primary" style={{ fontSize: 236 }} />
+      </Container>
       <StyledHeading className="not-found-text" variant="h4">
         {t('error.404.sorry-we-could-not-find-it')}
       </StyledHeading>
@@ -41,8 +43,7 @@ const NotFound: React.FC = () => {
 
 export default NotFound;
 
-const EmptyPackage = styled('img')({
-  width: '150px',
+const Container = styled('div')({
   margin: '0 auto',
 });
 

package/src/components/NotFound/Notfound.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { MemoryRouter } from 'react-router';
 
-import { fireEvent, render } from '../../test/test-react-testing-library';
+import { fireEvent, render, screen } from '../../test/test-react-testing-library';
 import NotFound from './NotFound';
 
 const mockHistory = jest.fn();
@@ -14,12 +14,15 @@ jest.mock('react-router-dom', () => ({
 
 describe('<NotFound /> component', () => {
   test('should load the component in default state', () => {
-    const { container } = render(
+    render(
       <MemoryRouter>
         <NotFound />
       </MemoryRouter>
     );
-    expect(container.firstChild).toMatchSnapshot();
+
+    expect(screen.getByTestId('FolderOffIcon')).toBeInTheDocument();
+    expect(screen.getByText('button.go-to-the-home-page')).toBeInTheDocument();
+    expect(screen.getByText('error.404.sorry-we-could-not-find-it')).toBeInTheDocument();
   });
 
   test('go to Home Page button click', async () => {

package/src/components/Package/Package.test.tsx

@@ -2,7 +2,13 @@ import React from 'react';
 import { MemoryRouter } from 'react-router';
 
 import { store } from '../../';
-import { cleanup, renderWithStore } from '../../test/test-react-testing-library';
+import {
+  cleanup,
+  fireEvent,
+  renderWithStore,
+  screen,
+  waitFor,
+} from '../../test/test-react-testing-library';
 import Package from './Package';
 
 /**
@@ -11,29 +17,36 @@ import Package from './Package';
  */
 const dateOneMonthAgo = (): Date => new Date(1544377770747);
 
+const props = {
+  name: 'verdaccio',
+  version: '1.0.0',
+  time: String(dateOneMonthAgo()),
+  license: 'MIT',
+  description: 'Private NPM repository',
+  author: {
+    name: 'Sam',
+  },
+  dist: {
+    fileCount: 1,
+    unpackedSize: 171,
+    tarball: 'http://localhost:9000/verdaccio/-/verdaccio-1.0.0.tgz',
+  },
+  keywords: ['verdaccio-core'],
+};
+
 describe('<Package /> component', () => {
   afterEach(() => {
     cleanup();
   });
 
   test('should load the component', () => {
-    const props = {
-      name: 'verdaccio',
-      version: '1.0.0',
-      time: String(dateOneMonthAgo()),
-      license: 'MIT',
-      description: 'Private NPM repository',
-      author: {
-        name: 'Sam',
-      },
-      keywords: ['verdaccio'],
-    };
-
     const wrapper = renderWithStore(
       <MemoryRouter>
         <Package
           author={props.author}
           description={props.description}
+          dist={props.dist}
+          keywords={props.keywords}
           license={props.license}
           name={props.name}
           time={props.time}
@@ -50,5 +63,25 @@ describe('<Package /> component', () => {
     expect(wrapper.getByText('MIT')).toBeInTheDocument();
   });
 
-  test.todo('should load the component without author');
+  // test if click on download button will trigger the download action
+  test('should download the package', async () => {
+    renderWithStore(
+      <MemoryRouter>
+        <Package
+          author={props.author}
+          description={props.description}
+          dist={props.dist}
+          keywords={props.keywords}
+          license={props.license}
+          name={props.name}
+          time={props.time}
+          version={props.version}
+        />
+      </MemoryRouter>,
+      store
+    );
+
+    fireEvent.click(screen.getByTestId('download-tarball'));
+    await waitFor(() => expect(store.getState().loading.models.download).toBe(true));
+  });
 });

package/src/components/Package/Package.tsx

@@ -3,19 +3,20 @@ import styled from '@emotion/styled';
 import BugReport from '@mui/icons-material/BugReport';
 import DownloadIcon from '@mui/icons-material/CloudDownload';
 import HomeIcon from '@mui/icons-material/Home';
-import { useTheme } from '@mui/material';
+import CircularProgress from '@mui/material/CircularProgress';
 import Grid from '@mui/material/Grid';
+import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import Tooltip from '@mui/material/Tooltip';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { Dispatch, Link, RootState, Theme } from '../../';
+import { Dispatch, Link, LinkExternal, RootState, Theme } from '../../';
 import { FileBinary, Law, Time, Version } from '../../components/Icons';
 import { Author as PackageAuthor, PackageMetaInterface } from '../../types/packageMeta';
-import { url, utils } from '../../utils';
-import Tag from './Tag';
+import { Route, url, utils } from '../../utils';
+import KeywordListItems from '../Keywords/KeywordListItems';
 import {
   Author,
   Avatar,
@@ -27,7 +28,6 @@ import {
   PackageListItemText,
   PackageTitle,
   Published,
-  TagContainer,
   Wrapper,
   WrapperLink,
 } from './styles';
@@ -46,7 +46,7 @@ export interface PackageInterface {
   time?: number | string;
   author: PackageAuthor;
   description?: string;
-  keywords?: string[];
+  keywords?: PackageMetaInterface['latest']['keywords'];
   license?: PackageMetaInterface['latest']['license'];
   homepage?: string;
   bugs?: Bugs;
@@ -60,7 +60,7 @@ const Package: React.FC<PackageInterface> = ({
   description,
   dist,
   homepage,
-  keywords = [],
+  keywords,
   license,
   name: packageName,
   time,
@@ -70,7 +70,7 @@ const Package: React.FC<PackageInterface> = ({
   const config = useSelector((state: RootState) => state.configuration.config);
   const dispatch = useDispatch<Dispatch>();
   const { t } = useTranslation();
-  const theme = useTheme();
+  const isLoading = useSelector((state: RootState) => state?.loading?.models.download);
 
   const handleDownload = useCallback(
     async (tarballDist: string) => {
@@ -92,21 +92,12 @@ const Package: React.FC<PackageInterface> = ({
   const renderAuthorInfo = (): React.ReactNode => {
     const name = utils.getAuthorName(authorName);
     return (
-      <Author>
-        <Avatar alt={name} src={authorAvatar} />
-        <Details>
-          <div
-            style={{
-              fontSize: '12px',
-              fontWeight: theme?.fontWeight.semiBold,
-              color:
-                theme?.palette.mode === 'light' ? theme?.palette.greyLight2 : theme?.palette.white,
-            }}
-          >
-            {name}
-          </div>
-        </Details>
-      </Author>
+      <OverviewItem>
+        <Author>
+          <Avatar alt={name} src={authorAvatar} />
+          <Details>{name}</Details>
+        </Author>
+      </OverviewItem>
     );
   };
 
@@ -130,33 +121,34 @@ const Package: React.FC<PackageInterface> = ({
     time && (
       <OverviewItem>
         <StyledTime />
-        <Published>{t('package.published-on', { time: utils.formatDate(time) })}</Published>
-        {utils.formatDateDistance(time)}
+        <Published title={utils.formatDate(time)}>
+          {t('package.published-on', { time: utils.formatDateDistance(time) })}
+        </Published>
       </OverviewItem>
     );
 
   const renderHomePageLink = (): React.ReactNode =>
     homepage &&
     url.isURL(homepage) && (
-      <Link external={true} to={homepage}>
+      <LinkExternal to={homepage}>
         <Tooltip aria-label={t('package.homepage')} title={t('package.visit-home-page')}>
           <IconButton aria-label={t('package.homepage')} size="large">
             <HomeIcon />
           </IconButton>
         </Tooltip>
-      </Link>
+      </LinkExternal>
     );
 
   const renderBugsLink = (): React.ReactNode =>
     bugs?.url &&
     url.isURL(bugs.url) && (
-      <Link external={true} to={bugs.url}>
+      <LinkExternal to={bugs.url}>
         <Tooltip aria-label={t('package.bugs')} title={t('package.open-an-issue')}>
           <IconButton aria-label={t('package.bugs')} size="large">
             <BugReport />
           </IconButton>
         </Tooltip>
-      </Link>
+      </LinkExternal>
     );
 
   const renderDownloadLink = (): React.ReactNode =>
@@ -172,8 +164,18 @@ const Package: React.FC<PackageInterface> = ({
           aria-label={t('package.download', { what: t('package.the-tar-file') })}
           title={t('package.tarball')}
         >
-          <IconButton aria-label={t('package.download')} size="large">
-            <DownloadIcon />
+          <IconButton
+            aria-label={t('package.download')}
+            data-testid="download-tarball"
+            size="large"
+          >
+            {isLoading ? (
+              <CircularProgress size={13}>
+                <DownloadIcon />
+              </CircularProgress>
+            ) : (
+              <DownloadIcon />
+            )}
           </IconButton>
         </Tooltip>
       </Link>
@@ -183,7 +185,7 @@ const Package: React.FC<PackageInterface> = ({
     return (
       <Grid container={true} item={true} xs={12}>
         <Grid item={true} xs={11}>
-          <WrapperLink to={`/-/web/detail/${packageName}`}>
+          <WrapperLink to={`${Route.DETAIL}${packageName}`}>
             <PackageTitle className="package-title" data-testid="package-title">
               {packageName}
             </PackageTitle>
@@ -194,6 +196,7 @@ const Package: React.FC<PackageInterface> = ({
           container={true}
           item={true}
           justify="flex-end"
+          spacing={3}
           xs={true}
         >
           {renderHomePageLink()}
@@ -204,15 +207,7 @@ const Package: React.FC<PackageInterface> = ({
     );
   };
 
-  const renderSecondaryComponent = (): React.ReactNode => {
-    const tags = keywords.sort().map((keyword, index) => <Tag key={index}>{keyword}</Tag>);
-    return (
-      <>
-        <Description>{description}</Description>
-        {tags.length > 0 && <TagContainer>{tags}</TagContainer>}
-      </>
-    );
-  };
+  const renderSecondaryComponent = (): React.ReactNode => <Description>{description}</Description>;
 
   const renderPackageListItemText = (): React.ReactNode => (
     <PackageListItemText
@@ -222,10 +217,21 @@ const Package: React.FC<PackageInterface> = ({
     />
   );
 
+  const renderKeywords = (): React.ReactNode => (
+    <ListItem alignItems={'flex-start'} sx={{ py: 0, my: 0 }}>
+      <List sx={{ p: 0, my: 0 }}>
+        <KeywordListItems keywords={keywords} />
+      </List>
+    </ListItem>
+  );
+
   return (
     <Wrapper className={'package'} data-testid="package-item-list">
-      <ListItem alignItems={'flex-start'}>{renderPackageListItemText()}</ListItem>
-      <ListItem alignItems={'flex-start'}>
+      <ListItem alignItems={'flex-start'} sx={{ mb: 0 }}>
+        {renderPackageListItemText()}
+      </ListItem>
+      {keywords && keywords?.length > 0 ? renderKeywords() : null}
+      <ListItem alignItems={'flex-start'} sx={{ mt: 0 }}>
         {renderAuthorInfo()}
         {renderVersionInfo()}
         {renderPublishedInfo()}
@@ -239,8 +245,8 @@ const Package: React.FC<PackageInterface> = ({
 export default Package;
 
 const iconStyle = ({ theme }: { theme: Theme }) => css`
-  margin: 2px 10px 0 0;
-  fill: ${theme?.palette.mode === 'light' ? theme?.palette.greyLight2 : theme?.palette.white};
+  margin: 0 10px 0 0;
+  fill: ${theme?.palette.mode === 'light' ? theme?.palette.greyDark : theme?.palette.white};
 `;
 
 const StyledVersion = styled(Version)`

package/src/components/Package/styles.ts

@@ -11,8 +11,8 @@ import { Theme } from '../../';
 export const OverviewItem = styled('span')<{ theme?: Theme }>(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
-  margin: '0 0 0 16px',
-  color: theme?.palette.mode === 'light' ? theme?.palette.greyLight2 : theme?.palette.white,
+  margin: '0 20px 0 0',
+  color: theme?.palette.mode === 'light' ? theme?.palette.greyDark2 : theme?.palette.white,
   fontSize: 12,
   [`@media (max-width: ${theme?.breakPoints.medium}px)`]: {
     ':nth-of-type(3)': {
@@ -26,10 +26,9 @@ export const OverviewItem = styled('span')<{ theme?: Theme }>(({ theme }) => ({
   },
 }));
 
-export const Published = styled('span')<{ theme?: Theme }>(({ theme }) => ({
-  color: theme?.palette.mode === 'light' ? theme?.palette.greyLight2 : theme?.palette.white,
+export const Published = styled('span')({
   margin: '0 5px 0 0',
-}));
+});
 
 export const Details = styled('span')({
   marginLeft: '5px',
@@ -59,6 +58,7 @@ export const PackageTitle = styled('span')<{ theme?: Theme }>(({ theme }) => ({
   marginBottom: 12,
   color: theme?.palette.mode == 'dark' ? theme?.palette.dodgerBlue : theme?.palette.eclipse,
   cursor: 'pointer',
+  textDecoration: 'none',
   [`@media (max-width: ${theme?.breakPoints.small}px)`]: {
     fontSize: 14,
     marginBottom: 8,
@@ -70,9 +70,9 @@ export const GridRightAligned = styled(Grid)({
 });
 
 export const Wrapper = styled(List)<{ theme?: Theme }>(({ theme }) => ({
-  ':hover': {
+  '&:hover': {
     backgroundColor:
-      theme?.palette?.type == 'dark' ? theme?.palette?.secondary.main : theme?.palette?.greyLight3,
+      theme?.palette?.type == 'dark' ? theme?.palette?.secondary.main : theme?.palette?.greyLight2,
   },
 }));
 
@@ -83,16 +83,6 @@ export const IconButton = styled(MuiIconButton)({
   },
 });
 
-export const TagContainer = styled('span')<{ theme?: Theme }>(({ theme }) => ({
-  marginTop: 8,
-  marginBottom: 12,
-  display: 'flex',
-  flexWrap: 'wrap',
-  [`@media (max-width: ${theme?.breakPoints.medium}px)`]: {
-    display: 'none',
-  },
-}));
-
 export const PackageListItemText = styled(ListItemText)({
   paddingRight: 0,
 });

package/src/components/PackageList/Packagelist.test.tsx

@@ -40,6 +40,7 @@ describe('<PackageList /> component', () => {
           name: 'xyz',
           version: '1.1.0',
           description: 'xyz description',
+          keywords: ['hello', 'mars'],
           author: { name: 'Martin', avatar: 'test avatar' },
         },
       ],

package/src/components/Person/Person.test.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+import { fireEvent, render, screen } from '../../test/test-react-testing-library';
+import { Developer } from '../../types/packageMeta';
+import Person from './Person';
+
+const mockPerson: Developer = {
+  name: 'John Doe',
+  email: 'john.doe@example.com',
+  avatar: 'https://example.com/avatar.jpg',
+  url: 'https://example.com/~johndoe',
+};
+
+const mockPackageName = 'test-package';
+const mockVersion = '1.0.0';
+
+const ComponentToBeRendered: React.FC<{ withText?: boolean }> = ({ withText = false }) => {
+  return (
+    <Person
+      packageName={mockPackageName}
+      person={mockPerson}
+      version={mockVersion}
+      withText={withText}
+    />
+  );
+};
+
+describe('Person component', () => {
+  test('should render avatar', () => {
+    render(<ComponentToBeRendered />);
+    const avatar = screen.getByAltText(mockPerson.name);
+    expect(avatar).toBeInTheDocument();
+    // but not include text
+    expect(screen.queryByText(mockPerson.name)).not.toBeInTheDocument();
+  });
+
+  test('should render name when withText is true', () => {
+    render(<ComponentToBeRendered withText={true} />);
+    const name = screen.getByText(mockPerson.name);
+    expect(name).toBeInTheDocument();
+  });
+
+  test('should not render name when withText is false', async () => {
+    render(<ComponentToBeRendered />);
+    // hover over the avatar
+    fireEvent.mouseEnter(screen.getByTestId(mockPerson.name));
+    // wait for the tooltip to appear
+    await screen.findByTestId(mockPerson.name + '-tooltip');
+  });
+});