@verdaccio/ui-components 3.0.0-next-7.3 → 3.0.0-next-7.5

package/build/store/api.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 exports.handleResponseType = handleResponseType;
 var _storage = _interopRequireDefault(require("./storage"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+class CustomError extends Error {}
+
 /**
  * Handles response according to content type
  * @param {object} response
@@ -31,7 +33,9 @@ function handleResponseType(response) {
       return Promise.all([response.ok, response.blob()]);
     }
   }
-  return Promise.all([response.ok, response.text()]);
+
+  // error handling
+  return Promise.all([response.ok, response]);
 }
 const AuthHeader = 'Authorization';
 class API {
@@ -52,12 +56,14 @@ class API {
         signal: options.signal,
         ...options
       }).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'));
+          var _data$statusText, _data$status;
+          const error = new CustomError((_data$statusText = data === null || data === void 0 ? void 0 : data.statusText) !== null && _data$statusText !== void 0 ? _data$statusText : 'Unknown error');
+          error.code = (_data$status = data === null || data === void 0 ? void 0 : data.status) !== null && _data$status !== void 0 ? _data$status : 500;
+          reject(error);
         }
       }).catch(error => {
         reject(error);

package/build/store/models/manifest.js

@@ -29,6 +29,18 @@ const manifest = exports.manifest = (0, _core.createModel)()({
       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,
@@ -46,6 +58,7 @@ const manifest = exports.manifest = (0, _core.createModel)()({
         ...state,
         isError: true,
         hasNotBeenFound: false,
+        forbidden: false,
         manifest: undefined,
         packageName: undefined,
         packageVersion: undefined,
@@ -64,7 +77,8 @@ const manifest = exports.manifest = (0, _core.createModel)()({
         packageName,
         packageVersion,
         readme,
-        hasNotBeenFound: false
+        hasNotBeenFound: false,
+        forbidden: false
       };
     }
   },
@@ -90,7 +104,11 @@ const manifest = exports.manifest = (0, _core.createModel)()({
           readme
         });
       } catch (error) {
-        dispatch.manifest.notFound();
+        if (error.code === 404) {
+          dispatch.manifest.notFound();
+        } else {
+          dispatch.manifest.forbidden();
+        }
       }
     }
   })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verdaccio/ui-components",
-  "version": "3.0.0-next-7.3",
+  "version": "3.0.0-next-7.5",
   "description": "theme ui component",
   "author": "Juan Picado <juanpicado19@gmail.com>",
   "license": "MIT",
@@ -42,7 +42,6 @@
     "react-router-dom": "5.3.4",
     "react-virtualized": "9.22.5",
     "redux": "4.2.1",
-    "remark-gfm": "3.0.1",
     "validator": "13.11.0"
   },
   "devDependencies": {

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.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/components/Dependencies/Dependencies.test.tsx

@@ -6,7 +6,6 @@ import Dependencies from './Dependencies';
 
 describe('<Dependencies /> component', () => {
   test('Renders a message when there are no dependencies', () => {
-    // Given
     const packageMeta = {
       latest: {
         name: 'verdaccio',
@@ -25,15 +24,12 @@ describe('<Dependencies /> component', () => {
       _uplinks: {},
     };
 
-    // When
     const { getByText } = render(<Dependencies packageMeta={packageMeta} />);
 
-    // Then
     expect(getByText('dependencies.has-no-dependencies')).toBeDefined();
   });
 
-  test('Renders a link to each dependency', () => {
-    // Given
+  test('renders a link to each dependency', () => {
     const packageMeta = {
       latest: {
         name: 'verdaccio',
@@ -59,18 +55,12 @@ describe('<Dependencies /> component', () => {
       _uplinks: {},
     };
 
-    // When
     const { getByText } = render(
       <HashRouter>
         <Dependencies packageMeta={packageMeta} />
       </HashRouter>
     );
 
-    // Then
-    // FIXME: currently MaterialUI chips do not support the children
-    // prop, therefore it is impossible to use proper links for
-    // dependencies. Those are for now clickable spans
-
     expect(getByText('dependencies (2)')).toBeDefined();
     expect(getByText('devDependencies (1)')).toBeDefined();
     expect(getByText('peerDependencies (1)')).toBeDefined();

package/src/components/Dependencies/Dependencies.tsx

@@ -1,63 +1,21 @@
-import Box from '@mui/material/Box';
+import styled from '@emotion/styled';
+import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
-import { useTheme } from '@mui/styles';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { useHistory } from 'react-router-dom';
 
-import { PackageDependencies } from '../../types/packageMeta';
+import { Theme } from '../../Theme';
 import NoItems from '../NoItems';
-import { CardWrap, StyledText, Tag, Tags } from './styles';
+import { DependencyBlock } from './DependencyBlock';
+import { hasKeys } from './utits';
 
-interface DependencyBlockProps {
-  title: string;
-  dependencies: PackageDependencies;
-}
-
-const DependencyBlock: React.FC<DependencyBlockProps> = ({ title, dependencies }) => {
-  const history = useHistory();
-  const { t } = useTranslation();
-  const theme = useTheme();
-
-  const deps = Object.entries(dependencies);
-
-  function handleClick(name: string): void {
-    history.push(`/-/web/detail/${name}`);
-  }
-
-  return (
-    <Box data-testid={title} sx={{ margin: theme.spacing(2) }}>
-      <StyledText sx={{ marginBottom: theme.spacing(1) }} variant="subtitle1">
-        {`${title} (${deps.length})`}
-      </StyledText>
-      <Tags>
-        {deps.map(([name, version]) => (
-          <Tag
-            className={'dep-tag'}
-            clickable={true}
-            data-testid={name}
-            key={name}
-            label={t('dependencies.dependency-block', { package: name, version })}
-            // eslint-disable-next-line
-            onClick={() => handleClick(name)}
-          />
-        ))}
-      </Tags>
-    </Box>
-  );
-};
-
-function hasKeys(object?: { [key: string]: any }): boolean {
-  return !!object && Object.keys(object).length > 0;
-}
+export const CardWrap = styled(Card)<{ theme?: Theme }>((props) => ({
+  marginBottom: props.theme.spacing(2),
+}));
 
 const Dependencies: React.FC<{ packageMeta: any }> = ({ packageMeta }) => {
   const { t } = useTranslation();
 
-  if (!packageMeta) {
-    throw new Error(t('error.package-meta-is-required-at-detail-context'));
-  }
-
   const { latest } = packageMeta;
   // FIXME: add dependencies to package meta type
   // @ts-ignore

package/src/components/Dependencies/DependencyBlock.test.tsx

@@ -0,0 +1,33 @@
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { MemoryRouter, Route } from 'react-router';
+
+import { render, screen } from '../../test/test-react-testing-library';
+import { DependencyBlock } from './DependencyBlock';
+
+describe('<DependencyBlock /> component', () => {
+  test('renders dependency block', () => {
+    render(<DependencyBlock dependencies={{ jquery: '1.0.0' }} title="foo" />);
+
+    expect(screen.getByText('foo (1)')).toBeInTheDocument();
+    expect(screen.getByText('dependencies.dependency-block')).toBeInTheDocument();
+
+    userEvent.click(screen.getByText('dependencies.dependency-block'));
+  });
+
+  test.todo('test the click event');
+  test.skip('handle change route handler', () => {
+    render(
+      <MemoryRouter
+        initialEntries={[`/-/web/detail/some-dep`, `/-/web/detail/jquery`]}
+        initialIndex={0}
+      >
+        <Route exact={true} path="/-/web/detail/:package">
+          <DependencyBlock dependencies={{ jquery: '1.0.0' }} title="foo" />
+        </Route>
+      </MemoryRouter>
+    );
+
+    userEvent.click(screen.getByTestId('jquery'));
+  });
+});

package/src/components/Dependencies/DependencyBlock.tsx

@@ -0,0 +1,69 @@
+import styled from '@emotion/styled';
+import Box from '@mui/material/Box';
+import Chip from '@mui/material/Chip';
+import Typography from '@mui/material/Typography';
+import { useTheme } from '@mui/styles';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useHistory } from 'react-router-dom';
+
+import { Theme } from '../../Theme';
+import { PackageDependencies } from '../../types/packageMeta';
+
+interface DependencyBlockProps {
+  title: string;
+  dependencies: PackageDependencies;
+}
+
+export const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({
+  fontWeight: props.theme && props.theme.fontWeight.bold,
+  textTransform: 'capitalize',
+}));
+
+export const Tags = styled('div')<{ theme?: Theme }>((props) => ({
+  display: 'flex',
+  justifyContent: 'start',
+  flexWrap: 'wrap',
+  // force title to be on the same line as the title
+  // could be better to avoid margin on the first element
+  // but it is a bit tricky to do with flexbox
+  marginLeft: props.theme.spacing(-0.6),
+}));
+
+export const Tag = styled(Chip)<{ theme?: Theme }>((props) => ({
+  margin: props.theme.spacing(0.6),
+}));
+
+export const DependencyBlock: React.FC<DependencyBlockProps> = ({ title, dependencies }) => {
+  const history = useHistory();
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const deps = Object.entries(dependencies);
+
+  function handleClick(name: string): void {
+    history.push(`/-/web/detail/${name}`);
+  }
+
+  return (
+    <Box data-testid={title} sx={{ margin: theme.spacing(2) }}>
+      <StyledText sx={{ marginBottom: theme.spacing(1) }} variant="subtitle1">
+        {`${title} (${deps.length})`}
+      </StyledText>
+      <Tags>
+        {deps.map(([name, version]) => (
+          <Tag
+            className={'dep-tag'}
+            clickable={true}
+            data-testid={name}
+            key={name}
+            label={t('dependencies.dependency-block', { package: name, version })}
+            // eslint-disable-next-line
+            onClick={() => {
+              handleClick(name);
+            }}
+          />
+        ))}
+      </Tags>
+    </Box>
+  );
+};

package/src/components/Dependencies/utits.ts

@@ -0,0 +1,3 @@
+export function hasKeys(object?: { [key: string]: any }): boolean {
+  return !!object && Object.keys(object).length > 0;
+}

package/src/components/Forbidden/Forbidden.test.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router';
+
+import { fireEvent, render, screen } from '../../test/test-react-testing-library';
+import Forbidden from './Forbidden';
+
+const mockHistory = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+  useHistory: () => ({
+    push: mockHistory,
+  }),
+}));
+
+describe('<Forbidden /> component', () => {
+  test('should load the component in default state', () => {
+    render(
+      <MemoryRouter>
+        <Forbidden />
+      </MemoryRouter>
+    );
+    expect(screen.getByTestId('LockIcon')).toBeInTheDocument();
+    expect(screen.getByText('error.401.sorry-no-access')).toBeInTheDocument();
+    expect(screen.getByText('button.go-to-the-home-page')).toBeInTheDocument();
+  });
+
+  test('go to Home Page button click', async () => {
+    const { getByTestId } = render(
+      <MemoryRouter>
+        <Forbidden />
+      </MemoryRouter>
+    );
+
+    const node = getByTestId('not-found-go-to-home-button');
+    fireEvent.click(node);
+    expect(mockHistory).toHaveBeenCalled();
+  });
+});

package/src/components/Forbidden/Forbidden.tsx

@@ -0,0 +1,56 @@
+/* eslint-disable react/forbid-component-props */
+
+/* eslint-disable verdaccio/jsx-no-style */
+import styled from '@emotion/styled';
+import LockIcon from '@mui/icons-material/Lock';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useHistory } from 'react-router-dom';
+
+import { Theme } from '../..';
+import Heading from '../Heading';
+
+const Foebidden: React.FC = () => {
+  const history = useHistory();
+
+  const { t } = useTranslation();
+
+  const handleGoHome = useCallback(() => {
+    history.push('/');
+  }, [history]);
+
+  return (
+    <Box
+      alignItems="center"
+      data-testid="404"
+      display="flex"
+      flexDirection="column"
+      flexGrow={1}
+      justifyContent="center"
+      p={2}
+    >
+      <Container>
+        <LockIcon color="primary" style={{ fontSize: 236 }} />
+      </Container>
+      <StyledHeading className="not-found-text" variant="h4">
+        {t('error.401.sorry-no-access')}
+      </StyledHeading>
+      <Button data-testid="not-found-go-to-home-button" onClick={handleGoHome} variant="contained">
+        {t('button.go-to-the-home-page')}
+      </Button>
+    </Box>
+  );
+};
+
+export default Foebidden;
+
+const Container = styled('div')({
+  margin: '0 auto',
+});
+
+const StyledHeading = styled(Heading)<{ theme?: Theme }>(({ theme }) => ({
+  color: theme?.palette.mode === 'light' ? theme?.palette.primary.main : theme?.palette.white,
+  marginBottom: 16,
+}));

package/src/components/Forbidden/index.ts

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

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

@@ -1,11 +1,12 @@
 import React from 'react';
 
-import { render } from '../../test/test-react-testing-library';
+import { render, screen } 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();
+    render(<Loading />);
+    screen.debug();
+    expect(screen.getByTestId('loading')).toBeInTheDocument();
   });
 });

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/SideBarTitle/index.ts

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

package/src/index.ts

@@ -14,7 +14,7 @@ export * as Icons from './components/Icons';
 export { default as Install } from './components/Install';
 export { default as RawViewer } from './components/RawViewer';
 export { default as Readme } from './components/Readme';
-export { default as SideBarTitle } from './components/SideBarTittle';
+export { default as SideBarTitle } from './components/SideBarTitle';
 export { default as UpLinks } from './components/UpLinks';
 export { default as Versions } from './components/Versions';
 export { default as TextField } from './components/TextField';
@@ -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>
+);