@verdaccio/ui-components 2.0.0-6-next.3 → 2.0.0-6-next.5

package/src/sections/SideBar/Sidebar.test.tsx

@@ -0,0 +1,107 @@
+import { rest } from 'msw';
+import React from 'react';
+import { MemoryRouter } from 'react-router';
+
+import { server } from '../../../jest/server';
+import { VersionProvider } from '../../providers';
+import { store } from '../../store';
+import { renderWithStore, waitFor } from '../../test/test-react-testing-library';
+import DetailSidebar from './Sidebar';
+
+const ComponentToBeRendered: React.FC = () => (
+  <MemoryRouter>
+    <VersionProvider>
+      <DetailSidebar />
+    </VersionProvider>
+  </MemoryRouter>
+);
+
+// https://stackoverflow.com/a/54010619/308341
+jest.mock('react', () => {
+  const React = jest.requireActual('react');
+  React.Suspense = ({ children }) => children;
+  return React;
+});
+
+const packageMeta = {
+  _uplinks: {},
+  latest: {
+    name: 'verdaccio-ui/local-storage',
+    version: '8.0.1-next.1',
+    dist: {
+      fileCount: 0,
+      unpackedSize: 0,
+      tarball: 'http://localhost:8080/bootstrap/-/bootstrap-4.3.1.tgz',
+    },
+    homepage: 'https://verdaccio.org',
+    bugs: {
+      url: 'https://github.com/verdaccio/monorepo/issues',
+    },
+  },
+};
+
+// const detailContextValue = {
+//   packageName: 'foo',
+//   readMe: 'test',
+//   enableLoading: () => {},
+//   isLoading: false,
+//   hasNotBeenFound: false,
+//   packageMeta: ,
+// };
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'), // use actual for all non-hook parts
+  useParams: () => ({
+    package: 'jquery',
+  }),
+}));
+
+server.use(
+  ...[
+    rest.get('http://localhost:9000/-/verdaccio/data/sidebar/jquery', (req, res, ctx) => {
+      return res(ctx.json(packageMeta));
+    }),
+    rest.get('http://localhost:9000/-/verdaccio/data/package/readme/jquery', (req, res, ctx) => {
+      return res(ctx.text('foo readme'));
+    }),
+  ]
+);
+// describe('DetailSidebar', () => {
+test('should render commonjs module icon', async () => {
+  const { getByText } = renderWithStore(<ComponentToBeRendered />, store);
+
+  await waitFor(() => expect(getByText('jquery')).toBeInTheDocument());
+});
+
+//   test('should render ts module icon', () => {
+//     renderWithStore(
+//       <ComponentToBeRendered
+//         contextValue={_.merge(detailContextValue, {
+//           packageMeta: {
+//             latest: {
+//               types: './src/index.d.ts',
+//             },
+//           },
+//         })}
+//       />,
+//       store
+//     );
+//     expect(screen.getByAltText('typescript')).toBeInTheDocument();
+//   });
+
+//   test('should render es6 module icon', () => {
+//     renderWithStore(
+//       <ComponentToBeRendered
+//         contextValue={_.merge(detailContextValue, {
+//           packageMeta: {
+//             latest: {
+//               type: 'module',
+//             },
+//           },
+//         })}
+//       />,
+//       store
+//     );
+//     expect(screen.getByAltText('es6 modules')).toBeInTheDocument();
+//   });
+// });

package/src/sections/SideBar/Sidebar.tsx

@@ -0,0 +1,80 @@
+import styled from '@emotion/styled';
+import Paper from '@mui/material/Paper';
+import React from 'react';
+
+import { Theme } from '../../Theme';
+import ActionBar from '../../components/ActionBar';
+import Author from '../../components/Author';
+import Developers, { DeveloperType } from '../../components/Developers';
+import FundButton from '../../components/FundButton';
+import SideBarTittle from '../../components/SideBarTittle';
+import { useConfig } from '../../providers';
+import { useVersion } from '../../providers';
+import { PackageMetaInterface } from '../../types/packageMeta';
+import loadable from '../../utils/loadable';
+
+const Engines = loadable(
+  () => import(/* webpackChunkName: "Engines" */ '../../components/Engines')
+);
+const Dist = loadable(
+  () => import(/* webpackChunkName: "Distribution" */ '../../components/Distribution')
+);
+const Install = loadable(
+  () => import(/* webpackChunkName: "Install" */ '../../components/Install')
+);
+const Repository = loadable(
+  () => import(/* webpackChunkName: "Repository" */ '../../components/Repository')
+);
+
+const getModuleType = (manifest: PackageMetaInterface) => {
+  if (manifest.latest.main) {
+    return 'commonjs';
+  } else if (manifest.latest.type) {
+    return manifest.latest.type;
+  }
+  return;
+};
+
+const DetailSidebar: React.FC = () => {
+  const { packageMeta, packageName, packageVersion } = useVersion();
+  const { configOptions } = useConfig();
+  const version = packageVersion || packageMeta?.latest.version || '';
+  const time = packageMeta?.time ? packageMeta.time[version] : '';
+
+  if (!packageMeta || !packageName) {
+    return null;
+  }
+
+  return (
+    <StyledPaper sx={{ position: 'sticky', top: 0 }}>
+      <SideBarTittle
+        description={packageMeta.latest?.description}
+        hasTypes={typeof packageMeta.latest?.types === 'string'}
+        isLatest={typeof packageVersion === 'undefined'}
+        moduleType={getModuleType(packageMeta)}
+        packageName={packageName}
+        time={time}
+        version={version}
+      />
+      <ActionBar
+        packageMeta={packageMeta}
+        showDownloadTarball={configOptions.showDownloadTarball}
+        showRaw={configOptions.showRaw}
+      />
+      <Install configOptions={configOptions} packageMeta={packageMeta} packageName={packageName} />
+      <FundButton packageMeta={packageMeta} />
+      <Repository packageMeta={packageMeta} />
+      <Engines packageMeta={packageMeta} />
+      <Dist packageMeta={packageMeta} />
+      <Author packageMeta={packageMeta} />
+      <Developers packageMeta={packageMeta} type={DeveloperType.MAINTAINERS} />
+      <Developers packageMeta={packageMeta} type={DeveloperType.CONTRIBUTORS} />
+    </StyledPaper>
+  );
+};
+
+export default DetailSidebar;
+
+const StyledPaper = styled(Paper)<{ theme?: Theme }>(({ theme }) => ({
+  padding: theme?.spacing(3, 2),
+}));

package/src/sections/SideBar/index.ts

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

package/src/sections/index.ts

@@ -0,0 +1,2 @@
+export { default as SideBar } from './SideBar';
+export { default as Detail } from './Detail';

package/src/store/api.test.ts

@@ -0,0 +1,136 @@
+import api, { handleResponseType } from './api';
+
+describe('api', () => {
+  describe('handleResponseType', () => {
+    test('should handle missing Content-Type', async () => {
+      const responseText = `responseText`;
+      const ok = false;
+      const response: Response = {
+        url: 'http://localhost:8080/-/packages',
+        ok,
+        headers: new Headers(),
+        text: async () => responseText,
+      } as Response;
+
+      const handled = await handleResponseType(response);
+
+      expect(handled).toEqual([ok, responseText]);
+    });
+
+    test('should test tgz scenario', async () => {
+      const blob = new Blob(['foo']);
+      const blobPromise = Promise.resolve<Blob>(blob);
+      const response: Response = {
+        url: 'http://localhost:8080/bootstrap/-/bootstrap-4.3.1.tgz',
+        blob: () => blobPromise,
+        ok: true,
+        headers: new Headers(),
+      } as Response;
+      const handled = await handleResponseType(response);
+
+      expect(handled).toEqual([true, blob]);
+    });
+  });
+
+  describe('api client', () => {
+    let fetchSpy: jest.SpyInstance;
+
+    beforeEach(() => {
+      fetchSpy = jest.spyOn(window, 'fetch');
+    });
+
+    afterEach(() => {
+      fetchSpy.mockRestore();
+    });
+
+    test('when url is a resource url', async () => {
+      fetchSpy.mockImplementation(() =>
+        Promise.resolve({
+          headers: new Headers({
+            'Content-Type': 'application/json',
+          }),
+          ok: true,
+          json: () => ({ a: 1 }),
+        })
+      );
+
+      const response = await api.request('https://verdaccio.tld/resource');
+
+      expect(fetchSpy).toHaveBeenCalledWith('https://verdaccio.tld/resource', {
+        credentials: 'same-origin',
+        headers: {},
+        method: 'GET',
+      });
+      expect(response).toEqual({ a: 1 });
+    });
+
+    test('when there is token from storage', async () => {
+      jest.resetModules();
+      jest.doMock('./storage', () => ({ getItem: () => 'token-xx-xx-xx' }));
+
+      fetchSpy.mockImplementation(() =>
+        Promise.resolve({
+          headers: new Headers({
+            'Content-Type': 'application/json',
+          }),
+          ok: true,
+          json: () => ({ c: 3 }),
+        })
+      );
+
+      const api = require('./api').default;
+      const response = await api.request('https://verdaccio.tld/resource', 'GET');
+
+      expect(fetchSpy).toHaveBeenCalledWith('https://verdaccio.tld/resource', {
+        credentials: 'same-origin',
+        headers: new Headers({
+          Authorization: 'Bearer token-xx-xx-xx',
+          'x-client': 'verdaccio-ui',
+        }),
+        method: 'GET',
+      });
+      expect(response).toEqual({ c: 3 });
+    });
+
+    test('when url is a cross origin url', async () => {
+      fetchSpy.mockImplementation(() =>
+        Promise.resolve({
+          headers: new Headers({
+            'Content-Type': 'application/json',
+          }),
+          ok: true,
+          json: () => ({ b: 2 }),
+        })
+      );
+
+      const response = await api.request('https://verdaccio.xyz/resource');
+      expect(fetchSpy).toHaveBeenCalledWith('https://verdaccio.xyz/resource', {
+        credentials: 'same-origin',
+        headers: {},
+        method: 'GET',
+      });
+      expect(response).toEqual({ b: 2 });
+    });
+
+    test('when api returns an error 3.x.x - 4.x.x', async () => {
+      fetchSpy.mockImplementation(() =>
+        Promise.resolve({
+          headers: new Headers({
+            'Content-Type': 'application/json',
+          }),
+          ok: false,
+          json: () => {},
+        })
+      );
+
+      await expect(api.request('/resource')).rejects.toThrow(new Error('something went wrong'));
+    });
+
+    test('when api returns an error 5.x.x', async () => {
+      const errorMessage = 'Internal server error';
+      fetchSpy.mockImplementation(() => Promise.reject(new Error(errorMessage)));
+
+      await expect(api.request('/resource')).rejects.toThrow(new Error(errorMessage));
+    });
+  });
+});

package/src/store/api.ts

@@ -0,0 +1,73 @@
+import storage from './storage';
+
+/**
+ * Handles response according to content type
+ * @param {object} response
+ * @returns {promise}
+ */
+export function handleResponseType(response: Response): Promise<[boolean, any]> {
+  if (response.headers) {
+    const contentType = response.headers.get('Content-Type');
+    if (contentType?.includes('application/pdf')) {
+      return Promise.all([response.ok, response.blob()]);
+    }
+    if (contentType?.includes('application/json')) {
+      return Promise.all([response.ok, response.json()]);
+    }
+    // it includes all text types
+    if (contentType?.includes('text/')) {
+      return Promise.all([response.ok, response.text()]);
+    }
+
+    // unfortunately on download files there is no header available
+    if (response.url && response.url.endsWith('.tgz') === true) {
+      return Promise.all([response.ok, response.blob()]);
+    }
+  }
+
+  return Promise.all([response.ok, response.text()]);
+}
+
+const AuthHeader = 'Authorization';
+
+class API {
+  public request<T>(
+    url: string,
+    method = 'GET',
+    options: RequestInit = { headers: {} }
+  ): Promise<T> {
+    const token = storage.getItem('token');
+    const headers = new Headers(options.headers);
+
+    if (token && headers.has(AuthHeader) === false) {
+      headers.set(AuthHeader, `Bearer ${token}`);
+      options.headers = headers;
+    }
+
+    headers.set('x-client', 'verdaccio-ui');
+
+    return new Promise((resolve, reject) => {
+      fetch(url, {
+        method,
+        credentials: 'same-origin',
+        signal: options.signal,
+        ...options,
+      })
+        .then(handleResponseType)
+        .then((response) => {
+          if (response[0]) {
+            resolve(response[1]);
+          } else {
+            // eslint-disable-next-line no-console
+            console.error(response);
+            reject(new Error('something went wrong'));
+          }
+        })
+        .catch((error) => {
+          reject(error);
+        });
+    });
+  }
+}
+
+export default new API();

package/src/store/index.ts

@@ -0,0 +1,3 @@
+export { store, RootState, Dispatch } from './store';
+export { LoginError, LoginBody, LoginResponse } from './models/login';
+export { default as api } from './api';

package/src/store/models/configuration.ts

@@ -0,0 +1,46 @@
+import { createModel } from '@rematch/core';
+import isEmpty from 'lodash/isEmpty';
+import isNil from 'lodash/isNil';
+
+import { Manifest, TemplateUIOptions } from '@verdaccio/types';
+
+import type { RootModel } from '.';
+import { colors } from '../../Theme';
+import API from '../api';
+
+const defaultValues: TemplateUIOptions = {
+  primaryColor: colors.PRIMARY_COLOR,
+  darkMode: false,
+  pkgManagers: ['yarn', 'pnpm', 'npm'],
+  scope: '',
+  base: '',
+  login: true,
+  flags: {},
+  url_prefix: '',
+  title: 'Verdaccio',
+};
+
+function getConfiguration() {
+  const uiConfiguration = window?.__VERDACCIO_BASENAME_UI_OPTIONS ?? defaultValues;
+  if (isNil(uiConfiguration.primaryColor) || isEmpty(uiConfiguration.primaryColor)) {
+    uiConfiguration.primaryColor = colors.PRIMARY_COLOR;
+  }
+
+  return uiConfiguration;
+}
+
+/**
+ *
+ * @category Model
+ */
+export const configuration = createModel<RootModel>()({
+  state: {
+    config: getConfiguration(),
+  },
+  effects: (dispatch) => ({
+    async getPackages() {
+      const payload: Manifest[] = await API.request(`/-/verdaccio/packages`, 'GET');
+      dispatch.packages.savePackages(payload);
+    },
+  }),
+});

package/src/store/models/download.ts

@@ -0,0 +1,34 @@
+import { createModel } from '@rematch/core';
+
+import type { RootModel } from '.';
+import { downloadFile, extractFileName } from '../../utils/url';
+import API from '../api';
+
+/**
+ *
+ * @category Model
+ */
+export const download = createModel<RootModel>()({
+  state: {},
+  reducers: {},
+  effects: () => ({
+    async getTarball({ link }) {
+      // const basePath = state.configuration.config.base;
+      try {
+        const fileStream: Blob = await API.request(link, 'GET', {
+          headers: {
+            ['accept']:
+              'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3',
+          },
+          credentials: 'include',
+        });
+        const fileName = extractFileName(link);
+        downloadFile(fileStream, fileName);
+      } catch (error: any) {
+        // TODO: handle better error
+        // eslint-disable-next-line no-console
+        console.error('error on download', error);
+      }
+    },
+  }),
+});

package/src/store/models/index.ts

@@ -0,0 +1,18 @@
+import { Models } from '@rematch/core';
+
+import { configuration } from './configuration';
+import { download } from './download';
+import { login } from './login';
+import { manifest } from './manifest';
+import { packages } from './packages';
+import { search } from './search';
+
+export interface RootModel extends Models<RootModel> {
+  packages: typeof packages;
+  manifest: typeof manifest;
+  configuration: typeof configuration;
+  download: typeof download;
+  login: typeof login;
+  search: typeof search;
+}
+export const models: RootModel = { packages, configuration, search, download, login, manifest };

package/src/store/models/login.ts

@@ -0,0 +1,100 @@
+import { createModel } from '@rematch/core';
+import i18next from 'i18next';
+
+import type { RootModel } from '.';
+import API from '../api';
+import storage from '../storage';
+
+export const HEADERS = {
+  JSON: 'application/json',
+};
+
+export type LoginError = {
+  type: string;
+  description: string;
+};
+
+export type LoginResponse = {
+  username: string | null;
+  token: string | null;
+};
+
+export type LoginBody = {
+  error?: LoginError;
+} & LoginResponse;
+
+const token = storage.getItem('token');
+const username = storage.getItem('username');
+const defaultUserState: LoginBody = {
+  token,
+  username,
+};
+
+/**
+ *
+ * @category Model
+ */
+export const login = createModel<RootModel>()({
+  state: {
+    username: defaultUserState.username,
+    token: defaultUserState.token,
+  },
+  reducers: {
+    logOutUser(state) {
+      storage.removeItem('username');
+      storage.removeItem('token');
+      return {
+        ...state,
+        username: null,
+        token: null,
+      };
+    },
+    addError(state, error: LoginError) {
+      return {
+        ...state,
+        error,
+      };
+    },
+    clearError(state) {
+      return {
+        ...state,
+        error: undefined,
+      };
+    },
+    logInUser(state, response: LoginResponse) {
+      // we might persist this in another way with
+      storage.setItem('username', response.username as string);
+      storage.setItem('token', response.token as string);
+      return {
+        ...state,
+        token: response.token as string,
+        username: response.username as string,
+      };
+    },
+  },
+  effects: (dispatch) => ({
+    async getUser({ username, password }, state) {
+      const basePath = state.configuration.config.base;
+      try {
+        const payload: LoginResponse = await API.request(
+          `${basePath}-/verdaccio/sec/login`,
+          'POST',
+          {
+            body: JSON.stringify({ username, password }),
+            headers: {
+              Accept: HEADERS.JSON,
+              'Content-Type': HEADERS.JSON,
+            },
+          }
+        );
+        dispatch.login.logInUser(payload);
+        dispatch.packages.getPackages(undefined);
+      } catch (error: any) {
+        dispatch.login.addError({
+          type: 'error',
+          description: i18next.t('form-validation.unable-to-sign-in'),
+        });
+      }
+    },
+  }),
+});