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

package/src/AppTest/App.stories.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router';
+
+import AppRoute from './AppRoute';
+
+export default {
+  title: 'App/Main',
+};
+
+export const ApplicationStoryBook: any = () => (
+  <MemoryRouter initialEntries={[`/-/web/detail/storybook`]}>
+    <AppRoute />
+  </MemoryRouter>
+);
+
+export const ApplicationjQuery: any = () => (
+  <MemoryRouter initialEntries={[`/-/web/detail/jquery`]}>
+    <AppRoute />
+  </MemoryRouter>
+);
+
+export const ApplicationForbidden: any = () => (
+  <MemoryRouter initialEntries={[`/-/web/detail/JSONStream`]}>
+    <AppRoute />
+  </MemoryRouter>
+);
+
+export const ApplicationNotFound: any = () => (
+  <MemoryRouter initialEntries={[`/-/web/detail/kleur`]}>
+    <AppRoute />
+  </MemoryRouter>
+);

package/src/AppTest/AppRoute.test.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router';
+
+import { store } from '../';
+import { act, renderWithStore, screen, waitFor } from '../test/test-react-testing-library';
+import AppRoute from './AppRoute';
+
+// 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);
+
+function appTest(path: string) {
+  renderWithStore(
+    <MemoryRouter initialEntries={[path]}>
+      <AppRoute />
+    </MemoryRouter>,
+    store
+  );
+}
+
+// See jest/server-handlers.ts for test routes
+describe('AppRoute', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('renders Front component for ROOT path', async () => {
+    act(() => appTest('/'));
+    await waitFor(() => expect(screen.getByTestId('loading')).toBeInTheDocument());
+    await waitFor(() => expect(screen.getAllByTestId('package-item-list')).toHaveLength(5));
+  });
+
+  test('renders VersionPage component for PACKAGE path', async () => {
+    act(() => appTest('/-/web/detail/jquery'));
+    await waitFor(() => screen.getByTestId('readme-tab'));
+    expect(screen.getByTestId('sidebar')).toBeInTheDocument();
+  });
+
+  test('renders VersionPage component for PACKAGE VERSION path', async () => {
+    act(() => appTest('/-/web/detail/jquery/v/3.6.3'));
+    await waitFor(() => screen.getByTestId('readme-tab'));
+    expect(screen.getByTestId('sidebar')).toBeInTheDocument();
+  });
+
+  test('renders Forbidden component for not allowed PACKAGE', async () => {
+    act(() => appTest('/-/web/detail/JSONstream'));
+    await waitFor(() => screen.getByTestId('not-found-go-to-home-button'));
+  });
+
+  test('renders NotFound component for missing PACKAGE', async () => {
+    act(() => appTest('/-/web/detail/kleur'));
+    await waitFor(() => screen.getByTestId('not-found-go-to-home-button'));
+  });
+
+  test('renders NotFound component for non-existing PACKAGE VERSION', async () => {
+    act(() => appTest('/-/web/detail/jquery/v/0.9.9'));
+    await waitFor(() => screen.getByTestId('not-found-go-to-home-button'));
+  });
+
+  test('renders NotFound component for non-matching path', async () => {
+    act(() => appTest('/oiccadrev'));
+    await waitFor(() => screen.getByTestId('not-found-go-to-home-button'));
+  });
+});

package/src/AppTest/AppRoute.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Route as ReactRouterDomRoute, Switch } from 'react-router-dom';
+
+import { NotFound, Route, VersionProvider, loadable } from '../index';
+
+const VersionPage = loadable(() => import(/* webpackChunkName: "Version" */ './pages/Version'));
+const Front = loadable(() => import(/* webpackChunkName: "Home" */ './pages/Front'));
+
+const AppRoute: React.FC = () => {
+  return (
+    <Switch>
+      <ReactRouterDomRoute exact={true} path={Route.ROOT}>
+        <Front />
+      </ReactRouterDomRoute>
+      <ReactRouterDomRoute exact={true} path={Route.PACKAGE}>
+        <VersionProvider>
+          <VersionPage />
+        </VersionProvider>
+      </ReactRouterDomRoute>
+      <ReactRouterDomRoute exact={true} path={Route.PACKAGE_VERSION}>
+        <VersionProvider>
+          <VersionPage />
+        </VersionProvider>
+      </ReactRouterDomRoute>
+      <ReactRouterDomRoute exact={true} path={Route.SCOPE_PACKAGE_VERSION}>
+        <VersionProvider>
+          <VersionPage />
+        </VersionProvider>
+      </ReactRouterDomRoute>
+      <ReactRouterDomRoute exact={true} path={Route.SCOPE_PACKAGE}>
+        <VersionProvider>
+          <VersionPage />
+        </VersionProvider>
+      </ReactRouterDomRoute>
+      <ReactRouterDomRoute>
+        <NotFound />
+      </ReactRouterDomRoute>
+    </Switch>
+  );
+};
+
+export default AppRoute;

package/src/AppTest/pages/Front/Home.ts

@@ -0,0 +1,3 @@
+import { Home } from '../../../index';
+
+export default Home;

package/src/AppTest/pages/Front/index.ts

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

package/src/AppTest/pages/Version/Version.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+
+import Forbidden from '../../../components/Forbidden';
+import { Loading, NotFound, RootState, VersionLayout } from '../../../index';
+
+const Version: React.FC = () => {
+  const manifestStore = useSelector((state: RootState) => state.manifest);
+  const isLoading = useSelector((state: RootState) => state?.loading?.models.manifest);
+
+  if (isLoading) {
+    return <Loading />;
+  }
+
+  // @ts-expect-error
+  if (manifestStore.forbidden) {
+    return <Forbidden />;
+  }
+
+  // @ts-expect-error
+  if (manifestStore.hasNotBeenFound) {
+    return <NotFound />;
+  }
+
+  return <VersionLayout />;
+};
+
+export default Version;

package/src/AppTest/pages/Version/index.ts

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

package/src/Theme/ThemeProvider.test.tsx

@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import {
+  AppConfigurationProvider,
+  PersistenceSettingProvider,
+  StyleBaseline,
+  ThemeProvider,
+} from '../';
+
+const AppContainer = () => (
+  <AppConfigurationProvider>
+    <ThemeProvider>
+      <StyleBaseline />
+      <PersistenceSettingProvider>
+        <div>{'Theme'}</div>
+      </PersistenceSettingProvider>
+    </ThemeProvider>
+  </AppConfigurationProvider>
+);
+
+describe('ThemeProvider', () => {
+  test('should render with theme', async () => {
+    render(<AppContainer />);
+    await screen.findByText('Theme');
+  });
+});

package/src/Theme/theme.ts

@@ -6,11 +6,11 @@ const colors = {
   black: '#000',
   white: '#fff',
   red: '#d32f2f',
-  orange: '#CD4000',
+  orange: '#cd4000',
   greySuperLight: '#f5f5f5',
   greyLight: '#d3d3d3',
   greyLight2: '#908ba1',
-  greyLight3: '#f3f4f240',
+  greyLight3: '#f3f4f2',
   greyDark: '#a9a9a9',
   greyDark2: '#586069',
   greyChateau: '#95989a',
@@ -25,7 +25,7 @@ const colors = {
   nobel02: '#9f9f9f',
   primary: PRIMARY_COLOR,
   secondary: '#20232a',
-  background: '#fff',
+  background: '#f4f4f4',
   dodgerBlue: '#1ba1f2',
   cyanBlue: '#253341',
 };
@@ -36,9 +36,9 @@ const themeModes = {
   },
   dark: {
     ...colors,
-    primary: '#24394e',
+    primary: '#ffffff',
     secondary: '#424242',
-    background: '#1A202C',
+    background: '#1a202c',
   },
 };
 
@@ -114,6 +114,13 @@ export const getTheme = (themeMode: ThemeMode, primaryColor: string) => {
         default: palette.background,
       },
     },
+    // Looks better in darkmode without background opacity
+    // https://mui.com/material-ui/migration/v5-component-changes/#change-dark-mode-background-opacity
+    components: {
+      MuiPaper: {
+        styleOverrides: { root: { backgroundImage: 'unset' } },
+      },
+    },
     ...customizedTheme,
   });
 };

package/src/components/ActionBar/ActionBar.stories.tsx

@@ -20,7 +20,7 @@ const packageMeta = {
     dist: {
       fileCount: 0,
       unpackedSize: 0,
-      tarball: 'https://registry.verdaccio.org/storybook/-/storybook-0.2.0.tgz',
+      tarball: 'https://registry.npmjs.org/verdaccio/-/verdaccio-5.26.0.tgz',
     },
     homepage: 'https://verdaccio.org',
     bugs: {

package/src/components/ActionBar/ActionBar.test.tsx

@@ -7,16 +7,16 @@ import ActionBar from './ActionBar';
 const defaultPackageMeta = {
   _uplinks: {},
   latest: {
-    name: 'verdaccio-ui/local-storage',
-    version: '8.0.1-next.1',
+    name: 'verdaccio',
+    version: '1.0.0',
     dist: {
-      fileCount: 0,
-      unpackedSize: 0,
-      tarball: 'http://localhost:8080/bootstrap/-/bootstrap-4.3.1.tgz',
+      fileCount: 1,
+      unpackedSize: 171,
+      tarball: 'http://localhost:9000/verdaccio/-/verdaccio-1.0.0.tgz',
     },
     homepage: 'https://verdaccio.org',
     bugs: {
-      url: 'https://github.com/verdaccio/monorepo/issues',
+      url: 'https://github.com/verdaccio/verdaccio/issues',
     },
   },
 };
@@ -27,8 +27,16 @@ describe('<ActionBar /> component', () => {
   });
 
   test('should render the component in default state', () => {
-    const { container } = renderWithStore(<ActionBar packageMeta={defaultPackageMeta} />, store);
-    expect(container.firstChild).toMatchSnapshot();
+    renderWithStore(<ActionBar packageMeta={defaultPackageMeta} />, store);
+    expect(screen.getByTestId('download-tarball-btn')).toBeInTheDocument();
+    expect(screen.getByTestId('BugReportIcon')).toBeInTheDocument();
+    expect(screen.getByTestId('HomeIcon')).toBeInTheDocument();
+  });
+
+  test('should not render if data is missing', () => {
+    // @ts-ignore - testing with missing data
+    renderWithStore(<ActionBar packageMeta={undefined} />, store);
+    expect(screen.queryByTestId('HomeIcon')).toBeNull();
   });
 
   test('when there is no action bar data', () => {
@@ -45,8 +53,10 @@ describe('<ActionBar /> component', () => {
       },
     };
 
-    const { container } = renderWithStore(<ActionBar packageMeta={packageMeta} />, store);
-    expect(container.firstChild).toMatchSnapshot();
+    renderWithStore(<ActionBar packageMeta={packageMeta} />, store);
+    expect(screen.queryByTestId('download-tarball-btn')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('BugReportIcon')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('HomeIcon')).not.toBeInTheDocument();
   });
 
   test('when there is a button to download a tarball', () => {
@@ -54,23 +64,43 @@ describe('<ActionBar /> component', () => {
     expect(screen.getByLabelText('action-bar-action.download-tarball')).toBeTruthy();
   });
 
+  test('when button to download is disabled', () => {
+    renderWithStore(
+      <ActionBar packageMeta={defaultPackageMeta} showDownloadTarball={false} />,
+      store
+    );
+    expect(screen.queryByTestId('download-tarball-btn')).not.toBeInTheDocument();
+  });
+
   test('when there is a button to raw manifest', () => {
     renderWithStore(<ActionBar packageMeta={defaultPackageMeta} showRaw={true} />, store);
     expect(screen.getByLabelText('action-bar-action.raw')).toBeTruthy();
   });
 
-  test('when click button to raw manifest open a dialog with viewver', () => {
+  test('when click button to raw manifest open a dialog with viewer', async () => {
     renderWithStore(<ActionBar packageMeta={defaultPackageMeta} showRaw={true} />, store);
+    expect(screen.queryByTestId('rawViewer--dialog')).toBeFalsy();
+
     fireEvent.click(screen.getByLabelText('action-bar-action.raw'));
-    // TODO: fix this part
-    // expect(screen.getByTestId('raw-viewver-dialog')).toBeInTheDocument();
+    await screen.findByTestId('rawViewer--dialog');
+
+    fireEvent.click(screen.getByTestId('close-raw-viewer'));
+    await screen.getByLabelText('action-bar-action.raw');
+
+    expect(screen.queryByTestId('rawViewer--dialog')).toBeFalsy();
   });
 
   test('should not display download tarball button', () => {
-    renderWithStore(<ActionBar packageMeta={defaultPackageMeta} showRaw={true} />, store);
+    renderWithStore(<ActionBar packageMeta={defaultPackageMeta} showRaw={false} />, store);
     expect(screen.queryByLabelText('Download tarball')).toBeFalsy();
   });
 
+  test('when click button to download ', async () => {
+    renderWithStore(<ActionBar packageMeta={defaultPackageMeta} showRaw={false} />, store);
+    fireEvent.click(screen.getByTestId('download-tarball-btn'));
+    await store.getState().loading.models.download;
+  });
+
   test('should not display show raw button', () => {
     renderWithStore(<ActionBar packageMeta={defaultPackageMeta} showRaw={false} />, store);
     expect(screen.queryByLabelText('action-bar-action.raw')).toBeFalsy();
@@ -78,8 +108,6 @@ describe('<ActionBar /> component', () => {
 
   test('when there is a button to open an issue', () => {
     renderWithStore(<ActionBar packageMeta={defaultPackageMeta} />, store);
-    // TODO: should be visible by text
-    // expect(screen.getByLabelText('action-bar-action.open-an-issue')).toBeTruthy();
     expect(screen.getByTestId('BugReportIcon')).toBeInTheDocument();
   });
 });

package/src/components/ActionBar/ActionBar.tsx

@@ -1,4 +1,6 @@
+/* eslint-disable verdaccio/jsx-spread */
 import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import React, { useState } from 'react';
 
 import { url } from '../../utils';
@@ -39,19 +41,21 @@ const ActionBar: React.FC<Props> = ({ showRaw, showDownloadTarball = true, packa
   }
 
   return (
-    <Box alignItems="center" display="flex" marginBottom="14px">
-      {actions.map((action) => (
-        <ActionBarAction key={action.type} {...action} />
-      ))}
-      {isRawViewerOpen && (
-        <RawViewer
-          isOpen={isRawViewerOpen}
-          onClose={() => {
-            setIsRawViewerOpen(false);
-          }}
-          packageMeta={packageMeta}
-        />
-      )}
+    <Box alignItems="center" display="flex" sx={{ my: 2 }}>
+      <Stack direction="row" spacing={1}>
+        {actions.map((action) => (
+          <ActionBarAction key={action.type} {...action} />
+        ))}
+        {isRawViewerOpen && (
+          <RawViewer
+            isOpen={isRawViewerOpen}
+            onClose={() => {
+              setIsRawViewerOpen(false);
+            }}
+            packageMeta={packageMeta}
+          />
+        )}
+      </Stack>
     </Box>
   );
 };

package/src/components/ActionBar/ActionBarAction.tsx

@@ -3,25 +3,24 @@ import BugReportIcon from '@mui/icons-material/BugReport';
 import DownloadIcon from '@mui/icons-material/CloudDownload';
 import HomeIcon from '@mui/icons-material/Home';
 import RawOnIcon from '@mui/icons-material/RawOn';
+import CircularProgress from '@mui/material/CircularProgress';
 import FabMUI from '@mui/material/Fab';
 import Tooltip from '@mui/material/Tooltip';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
 import { Theme } from '../../Theme';
-import { Dispatch } from '../../store/store';
-import { Link } from '../Link';
+import { Dispatch, RootState } from '../../store/store';
+import LinkExternal from '../LinkExternal';
 
 export const Fab = styled(FabMUI)<{ theme?: Theme }>(({ theme }) => ({
   backgroundColor:
     theme?.palette.mode === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
-  color: theme?.palette.white,
-  marginRight: 10,
-  ':hover': {
+  '&:hover': {
     color: theme?.palette.mode === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
-    background: theme?.palette.white,
   },
+  color: theme?.palette.white,
 }));
 
 type ActionType = 'VISIT_HOMEPAGE' | 'OPEN_AN_ISSUE' | 'DOWNLOAD_TARBALL' | 'RAW_DATA';
@@ -36,6 +35,7 @@ export interface ActionBarActionProps {
 const ActionBarAction: React.FC<ActionBarActionProps> = ({ type, link, action }) => {
   const { t } = useTranslation();
   const dispatch = useDispatch<Dispatch>();
+  const isLoading = useSelector((state: RootState) => state?.loading?.models.download);
 
   const handleDownload = useCallback(async () => {
     dispatch.download.getTarball({ link });
@@ -45,29 +45,37 @@ const ActionBarAction: React.FC<ActionBarActionProps> = ({ type, link, action })
     case 'VISIT_HOMEPAGE':
       return (
         <Tooltip title={t('action-bar-action.visit-home-page') as string}>
-          <Link external={true} to={link} variant="button">
+          <LinkExternal to={link} variant="button">
             <Fab size="small">
               <HomeIcon />
             </Fab>
-          </Link>
+          </LinkExternal>
         </Tooltip>
       );
     case 'OPEN_AN_ISSUE':
       return (
         <Tooltip title={t('action-bar-action.open-an-issue') as string}>
-          <Link external={true} to={link} variant="button">
+          <LinkExternal to={link} variant="button">
             <Fab size="small">
               <BugReportIcon />
             </Fab>
-          </Link>
+          </LinkExternal>
         </Tooltip>
       );
     case 'DOWNLOAD_TARBALL':
       return (
         <Tooltip title={t('action-bar-action.download-tarball') as string}>
-          <Fab data-testid="download-tarball-btn" onClick={handleDownload} size="small">
-            <DownloadIcon />
-          </Fab>
+          {isLoading ? (
+            <CircularProgress sx={{ marginX: 0 }}>
+              <Fab data-testid="download-tarball-btn" onClick={handleDownload} size="small">
+                <DownloadIcon />
+              </Fab>
+            </CircularProgress>
+          ) : (
+            <Fab data-testid="download-tarball-btn" onClick={handleDownload} size="small">
+              <DownloadIcon />
+            </Fab>
+          )}
         </Tooltip>
       );
     case 'RAW_DATA':

package/src/components/Author/Author.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { cleanup, render } from '../../test/test-react-testing-library';
+import { cleanup, render, screen } from '../../test/test-react-testing-library';
 import { PackageMetaInterface } from '../../types/packageMeta';
 import Authors from './Author';
 
@@ -66,4 +66,10 @@ describe('<Author /> component', () => {
     const wrapper = render(withAuthorComponent(packageMeta));
     expect(wrapper).toMatchSnapshot();
   });
+
+  test('should not render if data is missing', () => {
+    // @ts-ignore - testing with missing data
+    render(withAuthorComponent(undefined));
+    expect(screen.queryByText('sidebar.author.title')).toBeNull();
+  });
 });

package/src/components/Author/Author.tsx

@@ -1,28 +1,10 @@
-import Avatar from '@mui/material/Avatar';
 import List from '@mui/material/List';
-import i18next from 'i18next';
 import React, { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { url } from '../../utils';
-import { AuthorListItem, AuthorListItemText, StyledText } from './styles';
+import Person from '../Person';
+import { AuthorListItem, StyledText } from './styles';
 
-export function getAuthorName(authorName?: string): string {
-  if (!authorName) {
-    return i18next.t('author-unknown');
-  }
-
-  if (authorName.toLowerCase() === 'anonymous') {
-    return i18next.t('author-anonymous');
-  }
-
-  return authorName;
-}
-
-/**
- * @param param0
- * @returns
- */
 const Author: FC<{ packageMeta }> = ({ packageMeta }) => {
   const { t } = useTranslation();
 
@@ -36,21 +18,10 @@ const Author: FC<{ packageMeta }> = ({ packageMeta }) => {
     return null;
   }
 
-  const { email, name } = author;
-
-  const avatarComponent = <Avatar alt={author.name} src={author.avatar} />;
-
   return (
     <List subheader={<StyledText variant={'subtitle1'}>{t('sidebar.author.title')}</StyledText>}>
-      <AuthorListItem>
-        {!email || !url.isEmail(email) ? (
-          avatarComponent
-        ) : (
-          <a href={`mailto:${email}?subject=${packageName}@${version}`} target={'_top'}>
-            {avatarComponent}
-          </a>
-        )}
-        {name && <AuthorListItemText primary={getAuthorName(name)} />}
+      <AuthorListItem sx={{ my: 1 }}>
+        <Person packageName={packageName} person={author} version={version} withText={true} />
       </AuthorListItem>
     </List>
   );

package/src/components/Author/styles.ts

@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
 import { Typography } from '@mui/material';
 import ListItem from '@mui/material/ListItem';
-import ListItemText from '@mui/material/ListItemText';
 
 import { Theme } from '../../Theme';
 
@@ -15,8 +14,3 @@ export const AuthorListItem = styled(ListItem)({
     backgroundColor: 'transparent',
   },
 });
-
-export const AuthorListItemText = styled(ListItemText)({
-  padding: '0 10px',
-  margin: 0,
-});

package/src/components/CopyClipboard/CopyToClipBoard.test.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { fireEvent, render, screen } from '../../test/test-react-testing-library';
+import CopyToClipBoard from './CopyToClipBoard';
+
+Object.assign(navigator, {
+  clipboard: { writeText: jest.fn().mockImplementation(() => Promise.resolve()) },
+});
+
+describe('CopyToClipBoard component', () => {
+  test('should copy text to clipboard', async () => {
+    const copyThis = 'copy this';
+    render(
+      <CopyToClipBoard dataTestId={'copy-component'} text={copyThis} title={`npm i verdaccio`} />
+    );
+    expect(screen.getByTestId('copy-component')).toBeInTheDocument();
+
+    const copyComponent = await screen.findByTestId('copy-component');
+    await fireEvent.click(copyComponent);
+
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith(copyThis);
+  });
+});

package/src/components/CopyClipboard/CopyToClipBoard.tsx

@@ -4,6 +4,7 @@ import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import React from 'react';
 
+import { Theme } from '../../Theme';
 import { copyToClipBoardUtility } from './utils';
 
 interface Props {
@@ -19,14 +20,14 @@ const Wrapper = styled('div')({
   justifyContent: 'space-between',
 });
 
-const Content = styled('span')({
+const Content = styled('span')<{ theme?: Theme }>(({ theme }) => ({
   display: 'inline-block',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   height: 'auto',
   whiteSpace: 'break-spaces',
-  fontSize: '1rem',
-});
+  fontSize: theme?.fontSize.sm,
+}));
 
 function CopyToClipBoard({ text, children, dataTestId, title, ...props }: Props) {
   return (