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

package/src/components/Install/Install.test.tsx

@@ -5,12 +5,14 @@ import { PackageManagers } from '@verdaccio/types';
 import { useConfig } from '../../providers';
 import { render, screen } from '../../test/test-react-testing-library';
 import Install from './Install';
-import { getGlobalInstall } from './InstallListItem';
+import InstallListItem, { DependencyManager, getGlobalInstall } from './InstallListItem';
 import data from './__partials__/data.json';
 
-const ComponentToBeRendered: React.FC<{ pkgManagers?: PackageManagers[] }> = () => {
+const ComponentToBeRendered: React.FC<{ name?: string; pkgManagers?: PackageManagers[] }> = ({
+  name = 'foo',
+}) => {
   const { configOptions } = useConfig();
-  return <Install configOptions={configOptions} packageMeta={data} packageName="foo" />;
+  return <Install configOptions={configOptions} packageMeta={data} packageName={name} />;
 };
 
 /* eslint-disable react/jsx-no-bind*/
@@ -22,6 +24,11 @@ describe('<Install />', () => {
     expect(screen.getByText('npm install foo@8.0.0')).toBeInTheDocument();
   });
 
+  test('should not render if name is missing', () => {
+    render(<ComponentToBeRendered name="" />);
+    expect(screen.queryByTestId('installList')).toBeNull();
+  });
+
   test('should have 3 children', () => {
     window.__VERDACCIO_BASENAME_UI_OPTIONS.pkgManagers = ['yarn', 'pnpm', 'npm'];
     const { getByTestId } = render(<ComponentToBeRendered />);
@@ -32,9 +39,7 @@ describe('<Install />', () => {
 
   test('should have the element NPM', () => {
     window.__VERDACCIO_BASENAME_UI_OPTIONS.pkgManagers = ['npm'];
-
     render(<ComponentToBeRendered />);
-
     expect(screen.getByText('sidebar.installation.title')).toBeTruthy();
     expect(screen.queryByText('pnpm')).not.toBeInTheDocument();
     expect(screen.queryByText('yarn')).not.toBeInTheDocument();
@@ -59,18 +64,54 @@ describe('<Install />', () => {
   });
 });
 
+describe('<InstallListItem />', () => {
+  test('renders correctly', () => {
+    render(
+      <InstallListItem
+        dependencyManager={DependencyManager.NPM}
+        packageName={'foo'}
+        packageVersion={'8.0.0'}
+      />
+    );
+    expect(screen.queryByTestId('installListItem-npm')).toBeInTheDocument();
+  });
+
+  test('should not render if name is missing', () => {
+    render(
+      // @ts-ignore - testing invalid value
+      <InstallListItem dependencyManager={'other'} packageName={'foo'} packageVersion={'8.0.0'} />
+    );
+    // expect nothing to be rendered
+    expect(screen.queryByTestId('installListItem-npm')).toBeNull();
+  });
+});
+
 describe('getGlobalInstall', () => {
-  test('no global', () => {
-    expect(getGlobalInstall(false, 'foo', '1.0.0')).toEqual('1.0.0@foo');
+  test('version', () => {
+    expect(getGlobalInstall(false, false, '1.0.0', 'foo')).toEqual('foo@1.0.0');
+  });
+  test('latest', () => {
+    expect(getGlobalInstall(true, false, '1.0.0', 'foo')).toEqual('foo');
+  });
+
+  test('version global', () => {
+    expect(getGlobalInstall(false, true, '1.0.0', 'foo')).toEqual('-g foo@1.0.0');
+  });
+  test('latest global', () => {
+    expect(getGlobalInstall(true, true, '1.0.0', 'foo')).toEqual('-g foo');
+  });
+
+  test('yarn version', () => {
+    expect(getGlobalInstall(false, false, '1.0.0', 'foo', true)).toEqual('foo@1.0.0');
   });
-  test('global', () => {
-    expect(getGlobalInstall(true, 'foo', '1.0.0')).toEqual('-g 1.0.0@foo');
+  test('yarn latest', () => {
+    expect(getGlobalInstall(true, false, '1.0.0', 'foo', true)).toEqual('foo');
   });
 
-  test('yarn no global', () => {
-    expect(getGlobalInstall(false, 'foo', '1.0.0', true)).toEqual('1.0.0@foo');
+  test('yarn version global', () => {
+    expect(getGlobalInstall(false, true, '1.0.0', 'foo', true)).toEqual('foo@1.0.0');
   });
-  test('yarn global', () => {
-    expect(getGlobalInstall(true, 'foo', '1.0.0', true)).toEqual('1.0.0@foo');
+  test('yarn latest global', () => {
+    expect(getGlobalInstall(true, true, '1.0.0', 'foo', true)).toEqual('foo');
   });
 });

package/src/components/Install/Install.tsx

@@ -1,8 +1,6 @@
 import styled from '@emotion/styled';
 import { Typography } from '@mui/material';
-import Grid from '@mui/material/Grid';
 import List from '@mui/material/List';
-import { useTheme } from '@mui/styles';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -18,6 +16,12 @@ const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({
   textTransform: 'capitalize',
 }));
 
+const Wrapper = styled('div')({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+});
+
 export type Props = {
   packageMeta: PackageMetaInterface;
   packageName: string;
@@ -26,7 +30,6 @@ export type Props = {
 
 const Install: React.FC<Props> = ({ packageMeta, packageName, configOptions }) => {
   const { t } = useTranslation();
-  const theme = useTheme();
   if (!packageMeta || !packageName) {
     return null;
   }
@@ -38,16 +41,14 @@ const Install: React.FC<Props> = ({ packageMeta, packageName, configOptions }) =
 
   return hasPkgManagers ? (
     <>
-      <Grid
-        container={true}
-        justifyContent="flex-end"
-        sx={{ marginRight: theme.spacing(10), alingText: 'right' }}
-      >
-        <SettingsMenu packageName={packageName} />
-      </Grid>
       <List
         data-testid={'installList'}
-        subheader={<StyledText variant={'subtitle1'}>{t('sidebar.installation.title')}</StyledText>}
+        subheader={
+          <Wrapper>
+            <StyledText variant={'subtitle1'}>{t('sidebar.installation.title')}</StyledText>
+            <SettingsMenu packageName={packageName} />
+          </Wrapper>
+        }
       >
         {hasNpm && (
           <InstallListItem

package/src/components/Install/InstallListItem.tsx

@@ -22,8 +22,9 @@ const InstallListItemText = styled(ListItemText)({
 });
 
 const PackageMangerAvatar = styled(Avatar)({
-  borderRadius: '0px',
+  backgroundColor: 'transparent',
   padding: 0,
+  marginLeft: 0,
 });
 
 export enum DependencyManager {
@@ -38,12 +39,12 @@ interface Interface {
   packageVersion?: string;
 }
 
-export function getGlobalInstall(isGlobal, packageVersion, packageName, isYarn = false) {
+export function getGlobalInstall(isLatest, isGlobal, packageVersion, packageName, isYarn = false) {
   const name = isGlobal
-    ? `${isYarn ? '' : '-g'} ${packageVersion ? `${packageName}@${packageVersion}` : packageName}`
-    : packageVersion
-    ? `${packageName}@${packageVersion}`
-    : packageName;
+    ? `${isYarn ? '' : '-g'} ${packageVersion && !isLatest ? `${packageName}@${packageVersion}` : packageName}`
+    : packageVersion && !isLatest
+      ? `${packageName}@${packageVersion}`
+      : packageName;
 
   return name.trim();
 }
@@ -55,6 +56,7 @@ const InstallListItem: React.FC<Interface> = ({
 }) => {
   const { localSettings } = useSettings();
   const theme = useTheme();
+  const isLatest = localSettings[packageName]?.latest ?? false;
   const isGlobal = localSettings[packageName]?.global ?? false;
   switch (dependencyManager) {
     case DependencyManager.NPM:
@@ -66,9 +68,9 @@ const InstallListItem: React.FC<Interface> = ({
           <InstallListItemText
             primary={
               <CopyToClipBoard
-                dataTestId="instalNpm"
-                text={`npm install ${getGlobalInstall(isGlobal, packageVersion, packageName)}`}
-                title={`npm install ${getGlobalInstall(isGlobal, packageVersion, packageName)}`}
+                dataTestId="installNpm"
+                text={`npm install ${getGlobalInstall(isLatest, isGlobal, packageVersion, packageName)}`}
+                title={`npm install ${getGlobalInstall(isLatest, isGlobal, packageVersion, packageName)}`}
               />
             }
           />
@@ -92,7 +94,7 @@ const InstallListItem: React.FC<Interface> = ({
                         packageName,
                         true
                       )}`
-                    : `yarn add ${getGlobalInstall(isGlobal, packageVersion, packageName, true)}`
+                    : `yarn add ${getGlobalInstall(isLatest, isGlobal, packageVersion, packageName, true)}`
                 }
                 title={
                   isGlobal
@@ -102,7 +104,7 @@ const InstallListItem: React.FC<Interface> = ({
                         packageName,
                         true
                       )}`
-                    : `yarn add ${getGlobalInstall(isGlobal, packageVersion, packageName, true)}`
+                    : `yarn add ${getGlobalInstall(isLatest, isGlobal, packageVersion, packageName, true)}`
                 }
               />
             }
@@ -119,8 +121,8 @@ const InstallListItem: React.FC<Interface> = ({
             primary={
               <CopyToClipBoard
                 dataTestId="installPnpm"
-                text={`pnpm install ${getGlobalInstall(isGlobal, packageVersion, packageName)}`}
-                title={`pnpm install ${getGlobalInstall(isGlobal, packageVersion, packageName)}`}
+                text={`pnpm install ${getGlobalInstall(isLatest, isGlobal, packageVersion, packageName)}`}
+                title={`pnpm install ${getGlobalInstall(isLatest, isGlobal, packageVersion, packageName)}`}
               />
             }
           />

package/src/components/Keywords/KeywordListItems.tsx

@@ -0,0 +1,22 @@
+import Chip from '@mui/material/Chip';
+import ListItem from '@mui/material/ListItem';
+import React from 'react';
+
+const KeywordListItems: React.FC<{ keywords: undefined | string | string[] }> = ({ keywords }) => {
+  const keywordList =
+    typeof keywords === 'string' ? keywords.replace(/,/g, ' ').split(' ') : keywords;
+
+  if (!keywordList) {
+    return null;
+  }
+
+  return (
+    <ListItem sx={{ px: 0, mt: 0, flexWrap: 'wrap' }}>
+      {keywordList.sort().map((keyword, index) => (
+        <Chip key={index} label={keyword} sx={{ mt: 1, mr: 1 }} />
+      ))}
+    </ListItem>
+  );
+};
+
+export default KeywordListItems;

package/src/components/Keywords/Keywords.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { default as Keywords } from '.';
+
+export default {
+  title: 'Components/Sidebar/Keywords',
+};
+
+export const AllProperties: any = () => (
+  <Keywords
+    packageMeta={{
+      latest: {
+        name: 'verdaccio1',
+        version: '4.0.0',
+        keywords: ['verdaccio', 'npm', 'yarn'],
+      },
+    }}
+  />
+);

package/src/components/Keywords/Keywords.test.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+
+import { render, screen } from '../../test/test-react-testing-library';
+import Keywords from './Keywords';
+
+describe('<Keywords /> component', () => {
+  test('should render the component in default state', () => {
+    const packageMeta = {
+      latest: {
+        name: 'verdaccio1',
+        version: '4.0.0',
+        keywords: ['verdaccio', 'npm', 'yarn'],
+      },
+    };
+
+    const container = render(<Keywords packageMeta={packageMeta} />);
+
+    expect(container.getByText('sidebar.keywords.title')).toBeInTheDocument();
+    expect(container.getByText('verdaccio')).toBeInTheDocument();
+    expect(container.getByText('npm')).toBeInTheDocument();
+    expect(container.getByText('yarn')).toBeInTheDocument();
+  });
+
+  test('should not render if data is missing', () => {
+    // @ts-ignore
+    render(<Keywords packageMeta={{}} />);
+    expect(screen.queryByTestId('keyword-list')).toBeNull();
+
+    const packageMeta = {
+      latest: {
+        name: 'verdaccio1',
+        version: '4.0.0',
+        keywords: '',
+      },
+    };
+
+    render(<Keywords packageMeta={packageMeta} />);
+    expect(screen.queryByTestId('keyword-list')).toBeNull();
+  });
+
+  test('should render keywords set in string', () => {
+    const packageMeta = {
+      latest: {
+        name: 'verdaccio1',
+        version: '4.0.0',
+        keywords: 'hello, world, verdaccio',
+      },
+    };
+
+    const container = render(<Keywords packageMeta={packageMeta} />);
+
+    expect(container.getByText('sidebar.keywords.title')).toBeInTheDocument();
+    expect(container.getByText('verdaccio')).toBeInTheDocument();
+    expect(container.getByText('hello')).toBeInTheDocument();
+    expect(container.getByText('world')).toBeInTheDocument();
+  });
+});

package/src/components/Keywords/Keywords.tsx

@@ -0,0 +1,35 @@
+import List from '@mui/material/List';
+import Typography from '@mui/material/Typography';
+import { useTheme } from '@mui/styles';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { PackageMetaInterface } from '../../types/packageMeta';
+import KeywordListItems from './KeywordListItems';
+
+const Keywords: React.FC<{ packageMeta: PackageMetaInterface }> = ({ packageMeta }) => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+
+  if (!packageMeta?.latest?.keywords) {
+    return null;
+  }
+
+  return (
+    <List
+      data-testid="keyword-list"
+      subheader={
+        <Typography
+          sx={{ fontWeight: theme.fontWeight.bold, textTransform: 'capitalize' }}
+          variant="subtitle1"
+        >
+          {t('sidebar.keywords.title')}
+        </Typography>
+      }
+    >
+      <KeywordListItems keywords={packageMeta?.latest?.keywords} />
+    </List>
+  );
+};
+
+export default Keywords;

package/src/components/Keywords/index.ts

@@ -0,0 +1 @@
+export { default } from './Keywords';

package/src/components/Link/Link.test.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { BrowserRouter as Router } from 'react-router-dom';
+
+import { render } from '../../test/test-react-testing-library';
+import Link from './Link';
+
+describe('<Link /> component', () => {
+  test('should render the component in default state', () => {
+    const { container } = render(
+      <Router>
+        <Link to={'/'} />
+      </Router>
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('should render the component with link', () => {
+    const { container } = render(
+      <Router>
+        <Link to={'/'}>{'Home'}</Link>
+      </Router>
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

package/src/components/Link/Link.tsx

@@ -3,9 +3,7 @@ import Typography from '@mui/material/Typography';
 import React from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 
-type LinkRef = HTMLAnchorElement;
-
-export const CustomRouterLink = styled(RouterLink)`
+const CustomRouterLink = styled(RouterLink)`
   text-decoration: none;
   &:hover,
   &:focus {
@@ -13,23 +11,11 @@ export const CustomRouterLink = styled(RouterLink)`
   }
 `;
 
-// TODO: improve any with custom types for a and RouterLink
-const Link = React.forwardRef<LinkRef, any>(function LinkFunction(
-  { external, to, children, variant, className, onClick },
+const Link = React.forwardRef<HTMLAnchorElement, any>(function LinkFunction(
+  { to, children, variant, className, onClick },
   ref
 ) {
-  return external ? (
-    <a
-      className={className}
-      href={to}
-      onClick={onClick}
-      ref={ref}
-      rel="noopener noreferrer"
-      target="_blank"
-    >
-      <Typography variant={variant ?? 'caption'}>{children}</Typography>
-    </a>
-  ) : (
+  return (
     <CustomRouterLink className={className} innerRef={ref} onClick={onClick} to={to}>
       <Typography variant={variant}>{children}</Typography>
     </CustomRouterLink>

package/src/components/Link/index.ts

@@ -1 +1 @@
-export { default as Link } from './Link';
+export { default } from './Link';

package/src/components/LinkExternal/LinkExternal.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { render } from '../../test/test-react-testing-library';
+import LinkExternal from './LinkExternal';
+
+describe('<LinkExternal /> component', () => {
+  test('should render the component in default state', () => {
+    const { container } = render(<LinkExternal to={'/'} />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('should render the component with external link', () => {
+    const { container } = render(
+      <LinkExternal to={'https://example.com'}>{'Example'}</LinkExternal>
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

package/src/components/LinkExternal/LinkExternal.tsx

@@ -0,0 +1,22 @@
+import Link from '@mui/material/Link';
+import React from 'react';
+
+const LinkExternal = React.forwardRef<HTMLAnchorElement, any>((props, ref) => {
+  const { to, children, variant, ...rest } = props;
+  return (
+    // eslint-disable-next-line verdaccio/jsx-spread
+    <Link
+      href={to}
+      ref={ref}
+      rel="noopener noreferrer"
+      target="_blank"
+      underline="hover"
+      variant={variant ?? 'caption'}
+      {...rest}
+    >
+      {children}
+    </Link>
+  );
+});
+
+export default LinkExternal;

package/src/components/LinkExternal/index.ts

@@ -0,0 +1 @@
+export { default } from './LinkExternal';

package/src/components/Loading/Loading.test.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
 
-import { render } from '../../test/test-react-testing-library';
+import { act, render, screen, waitFor } from '../../test/test-react-testing-library';
 import Loading from './Loading';
 
 describe('<Loading /> component', () => {
-  test('should render the component in default state', () => {
-    const { container } = render(<Loading />);
-    expect(container.firstChild).toMatchSnapshot();
+  test('should render the component in default state', async () => {
+    act(() => {
+      render(<Loading />);
+    });
+    await waitFor(() => {
+      expect(screen.getByTestId('loading')).toBeInTheDocument();
+    });
   });
 });

package/src/components/Loading/styles.ts

@@ -11,6 +11,7 @@ export const Wrapper = styled('div')({
 
 export const Badge = styled('div')<{ theme?: Theme }>(({ theme }) => ({
   margin: '0 0 30px 0',
+  padding: 5,
   borderRadius: 25,
   boxShadow: '0 10px 20px 0 rgba(69, 58, 100, 0.2)',
   background: theme?.palette.mode === 'dark' ? theme?.palette.black : '#f7f8f6',

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