@verdaccio/ui-components 3.0.0-next-7.4 → 3.0.0-next-7.6

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/Repository/Repository.tsx

@@ -40,9 +40,7 @@ const RepositoryListItemText = styled(ListItemText)({
 const RepositoryAvatar = styled(Avatar)({
   borderRadius: '0px',
   padding: '0',
-  img: {
-    backgroundColor: 'transparent',
-  },
+  backgroundColor: 'transparent',
 });
 
 const Repository: React.FC<{ packageMeta: any }> = ({ packageMeta }) => {

package/src/components/Versions/HistoryList.tsx

@@ -44,7 +44,7 @@ const VersionsHistoryList: React.FC<Props> = ({ versions, packageName, time }) =
             <Link to={`/-/web/detail/${packageName}/v/${version}`} variant="caption">
               <ListItemText disableTypography={false} primary={version}></ListItemText>
             </Link>
-            {typeof versions[version].deprecated === 'string' ? (
+            {typeof versions[version]?.deprecated === 'string' ? (
               <Chip
                 color="warning"
                 data-testid="deprecated-badge"
@@ -55,7 +55,7 @@ const VersionsHistoryList: React.FC<Props> = ({ versions, packageName, time }) =
               />
             ) : null}
             <Spacer />
-            <ListItemText title={utils.formatDate(time[version])}>
+            <ListItemText data-testid={`version-list-text`} title={utils.formatDate(time[version])}>
               {time[version]
                 ? utils.formatDateDistance(time[version])
                 : t('versions.not-available')}

package/src/components/Versions/Versions.test.tsx

@@ -2,24 +2,31 @@
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 
-import { cleanup, render, screen } from '../../test/test-react-testing-library';
+import { fireEvent, render, screen } from '../../test/test-react-testing-library';
 import Versions, { Props } from './Versions';
 import data from './__partials__/data.json';
 import dataDeprecated from './__partials__/deprecated-versions.json';
 
-const ComponentToBeRendered: React.FC<Props> = (props) => (
+const VersionsComponent: React.FC<Props> = (props) => (
   <MemoryRouter>
     <Versions {...props} />
   </MemoryRouter>
 );
 
+jest.mock('lodash/debounce', () =>
+  jest.fn((fn) => {
+    fn.cancel = jest.fn();
+    return fn;
+  })
+);
+
 describe('<Version /> component', () => {
   afterEach(() => {
-    cleanup();
+    jest.clearAllMocks();
   });
 
   test('should render versions', () => {
-    const { getByText } = render(<ComponentToBeRendered packageMeta={data} packageName={'foo'} />);
+    const { getByText } = render(<VersionsComponent packageMeta={data} packageName={'foo'} />);
 
     expect(getByText('versions.version-history')).toBeTruthy();
     expect(getByText('versions.current-tags')).toBeTruthy();
@@ -31,17 +38,26 @@ describe('<Version /> component', () => {
     expect(screen.queryByTestId('deprecated-badge')).toBeInTheDocument();
   });
 
+  test('should filter by version', () => {
+    render(<VersionsComponent packageMeta={data} packageName={'foo'} />);
+    expect(screen.getByText('versions.version-history')).toBeTruthy();
+    expect(screen.getByText('versions.current-tags')).toBeTruthy();
+    expect(screen.queryAllByTestId('version-list-text')).toHaveLength(65);
+    fireEvent.change(screen.getByRole('textbox'), { target: { value: '2.3.0' } });
+    expect(screen.queryAllByTestId('version-list-text')).toHaveLength(1);
+  });
+
   test('should not render versions', () => {
-    const { queryByText } = render(<ComponentToBeRendered packageMeta={{}} packageName={'foo'} />);
+    render(<VersionsComponent packageMeta={{}} packageName={'foo'} />);
 
-    expect(queryByText('versions.version-history')).toBeFalsy();
-    expect(queryByText('versions.current-tags')).toBeFalsy();
+    expect(screen.queryByText('versions.version-history')).toBeFalsy();
+    expect(screen.queryByText('versions.current-tags')).toBeFalsy();
   });
 
   test('should render versions deprecated settings', () => {
     window.__VERDACCIO_BASENAME_UI_OPTIONS.hideDeprecatedVersions = true;
     const { getByText } = render(
-      <ComponentToBeRendered packageMeta={dataDeprecated} packageName={'foo'} />
+      <VersionsComponent packageMeta={dataDeprecated} packageName={'foo'} />
     );
     expect(getByText('versions.hide-deprecated')).toBeTruthy();
 

package/src/components/Versions/Versions.tsx

@@ -1,8 +1,11 @@
 import Alert from '@mui/material/Alert';
+import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
 import { useTheme } from '@mui/styles';
-import React from 'react';
+import debounce from 'lodash/debounce';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import semver from 'semver';
 
 import { useConfig } from '../../providers';
 import VersionsHistoryList from './HistoryList';
@@ -14,16 +17,33 @@ const Versions: React.FC<Props> = ({ packageMeta, packageName }) => {
   const { t } = useTranslation();
   const { configOptions } = useConfig();
   const theme = useTheme();
+  const { versions = {}, time = {}, ['dist-tags']: distTags = {} } = packageMeta;
 
-  if (!packageMeta) {
+  const [packageVersions, setPackageVersions] = useState(versions);
+  if (!packageMeta || Object.keys(packageMeta).length === 0) {
     return null;
   }
+  const hideDeprecatedVersions = configOptions.hideDeprecatedVersions;
+  const hasDistTags = distTags && Object.keys(distTags).length > 0 && packageName;
+  const hasVersionHistory =
+    packageVersions && Object.keys(packageVersions).length > 0 && packageName;
 
-  const { versions = {}, time = {}, ['dist-tags']: distTags = {} } = packageMeta;
+  const filterVersions = (textSearch) => {
+    const filteredVersions = Object.keys(versions).reduce((acc, version) => {
+      if (textSearch !== '') {
+        if (typeof versions[version] !== 'undefined') {
+          if (semver.satisfies(version, textSearch, { includePrerelease: true, loose: true })) {
+            acc[version] = versions[version];
+          }
+        }
+      } else {
+        acc[version] = versions[version];
+      }
+      return acc;
+    }, {});
 
-  const hasDistTags = distTags && Object.keys(distTags).length > 0 && packageName;
-  const hasVersionHistory = versions && Object.keys(versions).length > 0 && packageName;
-  const hideDeprecatedVersions = configOptions.hideDeprecatedVersions;
+    setPackageVersions(filteredVersions);
+  };
 
   return (
     <>
@@ -33,20 +53,28 @@ const Versions: React.FC<Props> = ({ packageMeta, packageName }) => {
           <VersionsTagList packageName={packageName} tags={distTags} time={time} />
         </>
       ) : null}
+      <>
+        <Typography variant="subtitle1">{t('versions.version-history')}</Typography>
+        <TextField
+          helperText={t('versions.search.placeholder')}
+          onChange={debounce((e) => {
+            filterVersions(e.target.value);
+          }, 200)}
+          size="small"
+          variant="standard"
+        />
+      </>
       {hasVersionHistory ? (
         <>
-          <Typography variant="subtitle1">{t('versions.version-history')}</Typography>
-          <>
-            {hideDeprecatedVersions && (
-              <Alert
-                severity="info"
-                sx={{ marginTop: theme.spacing(1), marginBottom: theme.spacing(1) }}
-              >
-                {t('versions.hide-deprecated')}
-              </Alert>
-            )}
-            <VersionsHistoryList packageName={packageName} time={time} versions={versions} />
-          </>
+          {hideDeprecatedVersions === true && (
+            <Alert
+              severity="info"
+              sx={{ marginTop: theme.spacing(1), marginBottom: theme.spacing(1) }}
+            >
+              {t('versions.hide-deprecated')}
+            </Alert>
+          )}
+          <VersionsHistoryList packageName={packageName} time={time} versions={packageVersions} />
         </>
       ) : null}
     </>

package/src/index.ts

@@ -22,6 +22,7 @@ export { default as Label } from './components/Label';
 export { default as Logo } from './components/Logo';
 export { default as MenuItem } from './components/MenuItem';
 export { default as NotFound } from './components/NotFound';
+export { default as Forbidden } from './components/Forbidden';
 export { default as LoginDialog } from './components/LoginDialog';
 export { default as Search } from './components/Search';
 export { default as HeaderInfoDialog } from './components/HeaderInfoDialog';

package/src/sections/Detail/Detail.stories.tsx

@@ -27,3 +27,13 @@ export const DetailJquery: any = () => (
     </Route>
   </MemoryRouter>
 );
+
+export const DetailForbidden: any = () => (
+  <MemoryRouter initialEntries={[`/-/web/detail/JSONStream`]}>
+    <Route exact={true} path="/-/web/detail/:package">
+      <VersionProvider>
+        <Detail />
+      </VersionProvider>
+    </Route>
+  </MemoryRouter>
+);

package/src/sections/Detail/Tabs.tsx

@@ -14,13 +14,7 @@ interface Props {
 const DetailContainerTabs: React.FC<Props> = ({ tabPosition, onChange }) => {
   const { t } = useTranslation();
   return (
-    <Tabs
-      color={'primary'}
-      indicatorColor={'primary'}
-      onChange={onChange}
-      value={tabPosition}
-      variant={'fullWidth'}
-    >
+    <Tabs onChange={onChange} value={tabPosition} variant={'fullWidth'}>
       <Tab data-testid={'readme-tab'} id={'readme-tab'} label={t('tab.readme')} />
       <Tab data-testid={'dependencies-tab'} id={'dependencies-tab'} label={t('tab.dependencies')} />
       <Tab data-testid={'versions-tab'} id={'versions-tab'} label={t('tab.versions')} />

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 () => {
@@ -123,7 +124,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/manifest.ts

@@ -33,6 +33,18 @@ export const manifest = createModel<RootModel>()({
       return {
         ...state,
         hasNotBeenFound: true,
+        forbidden: false,
+        manifest: undefined,
+        packageName: undefined,
+        packageVersion: undefined,
+        readme: undefined,
+      };
+    },
+    forbidden(state) {
+      return {
+        ...state,
+        forbidden: true,
+        hasNotBeenFound: false,
         manifest: undefined,
         packageName: undefined,
         packageVersion: undefined,
@@ -50,6 +62,7 @@ export const manifest = createModel<RootModel>()({
         ...state,
         isError: true,
         hasNotBeenFound: false,
+        forbidden: false,
         manifest: undefined,
         packageName: undefined,
         packageVersion: undefined,
@@ -64,6 +77,7 @@ export const manifest = createModel<RootModel>()({
         packageVersion,
         readme,
         hasNotBeenFound: false,
+        forbidden: false,
       };
     },
   },
@@ -91,7 +105,11 @@ export const manifest = createModel<RootModel>()({
         );
         dispatch.manifest.saveManifest({ packageName, packageVersion, manifest, readme });
       } catch (error: any) {
-        dispatch.manifest.notFound();
+        if (error.code === 404) {
+          dispatch.manifest.notFound();
+        } else {
+          dispatch.manifest.forbidden();
+        }
       }
     },
   }),