@verdaccio/ui-components 2.0.0-alpha.0 → 3.0.0-next.1

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.test.ts

@@ -0,0 +1,38 @@
+// eslint-disable-next-line jest/no-mocks-import
+import { generateTokenWithTimeRange } from '../../../jest/unit/components/__mocks__/token';
+
+describe('getDefaultUserState', (): void => {
+  const username = 'xyz';
+
+  beforeEach(() => {
+    jest.resetModules();
+  });
+
+  test('should return state with empty user', (): void => {
+    const token = 'token-xx-xx-xx';
+
+    jest.doMock('../storage', () => ({
+      getItem: (key: string) => (key === 'token' ? token : username),
+    }));
+    const { getDefaultUserState } = require('./login');
+    const result = {
+      token: null,
+      username: null,
+    };
+    expect(getDefaultUserState()).toEqual(result);
+  });
+
+  test('should return state with user from storage', (): void => {
+    const token = generateTokenWithTimeRange(24);
+
+    jest.doMock('../storage', () => ({
+      getItem: (key: string) => (key === 'token' ? token : username),
+    }));
+    const { getDefaultUserState } = require('./login');
+    const result = {
+      token,
+      username,
+    };
+    expect(getDefaultUserState()).toEqual(result);
+  });
+});

package/src/store/models/login.ts

@@ -0,0 +1,106 @@
+import { createModel } from '@rematch/core';
+import i18next from 'i18next';
+
+import type { RootModel } from '.';
+import { isTokenExpire } from '../../utils';
+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;
+
+export function getDefaultUserState(): LoginBody {
+  const token = storage.getItem('token');
+  const username = storage.getItem('username');
+  const defaultUserState = isTokenExpire(token)
+    ? { token: null, username: null }
+    : { token, username };
+
+  return defaultUserState;
+}
+
+const defaultUserState: LoginBody = getDefaultUserState();
+
+/**
+ *
+ * @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'),
+        });
+      }
+    },
+  }),
+});

package/src/store/models/manifest.ts

@@ -0,0 +1,98 @@
+import { createModel } from '@rematch/core';
+
+import { Manifest } from '@verdaccio/types';
+
+import type { RootModel } from '.';
+import { PackageMetaInterface } from '../../types/packageMeta';
+import API from '../api';
+
+function isPackageVersionValid(
+  packageMeta: Partial<PackageMetaInterface>,
+  packageVersion?: string
+): boolean {
+  if (!packageVersion || typeof packageVersion === 'undefined') {
+    // if is undefined, that means versions does not exist, we continue
+    return true;
+  }
+
+  if (packageMeta.versions) {
+    return Object.keys(packageMeta.versions).includes(packageVersion);
+  }
+
+  return false;
+}
+
+/**
+ *
+ * @category Model
+ */
+export const manifest = createModel<RootModel>()({
+  state: {},
+  reducers: {
+    notFound(state) {
+      return {
+        ...state,
+        hasNotBeenFound: true,
+        manifest: undefined,
+        packageName: undefined,
+        packageVersion: undefined,
+        readme: undefined,
+      };
+    },
+    clearError(state) {
+      return {
+        ...state,
+        isError: null,
+      };
+    },
+    isError(state) {
+      return {
+        ...state,
+        isError: true,
+        hasNotBeenFound: false,
+        manifest: undefined,
+        packageName: undefined,
+        packageVersion: undefined,
+        readme: undefined,
+      };
+    },
+    saveManifest(state, { packageName, packageVersion, manifest, readme }) {
+      return {
+        ...state,
+        manifest,
+        packageName,
+        packageVersion,
+        readme,
+        hasNotBeenFound: false,
+      };
+    },
+  },
+  effects: (dispatch) => ({
+    async getManifest({ packageName, packageVersion }, state) {
+      const basePath = state.configuration.config.base;
+      try {
+        const manifest: Manifest = await API.request(
+          `${basePath}-/verdaccio/data/sidebar/${packageName}${
+            packageVersion ? `?v=${packageVersion}` : ''
+          }`
+        );
+
+        // FIXME: update types accordingly
+        // @ts-ignore
+        if (!isPackageVersionValid(manifest, packageVersion)) {
+          throw new Error('not found');
+        }
+
+        const readme: string = await API.request<string>(
+          `${basePath}-/verdaccio/data/package/readme/${packageName}${
+            packageVersion ? `?v=${packageVersion}` : ''
+          }`,
+          'GET'
+        );
+        dispatch.manifest.saveManifest({ packageName, packageVersion, manifest, readme });
+      } catch (error: any) {
+        dispatch.manifest.notFound();
+      }
+    },
+  }),
+});

package/src/store/models/packages.ts

@@ -0,0 +1,43 @@
+import { createModel } from '@rematch/core';
+
+import { Manifest } from '@verdaccio/types';
+
+import type { RootModel } from '.';
+import API from '../api';
+
+/**
+ *
+ * @category Model
+ */
+export const packages = createModel<RootModel>()({
+  state: {
+    response: [] as Manifest[],
+  },
+  reducers: {
+    savePackages(state, response: Manifest[]) {
+      return {
+        ...state,
+        response,
+      };
+    },
+  },
+  effects: (dispatch) => ({
+    async getPackages(_payload, state) {
+      const basePath = state.configuration.config.base;
+      try {
+        const payload: Manifest[] = await API.request(
+          `${basePath}-/verdaccio/data/packages`,
+          'GET'
+        );
+        dispatch.packages.savePackages(payload);
+      } catch (error: any) {
+        // eslint-disable-next-line no-console
+        console.error({
+          title: 'Warning',
+          message: `Unable to load package list: ${error.message}`,
+        });
+        // TODO: handle error, display something retry or something
+      }
+    },
+  }),
+});

package/src/store/models/search.ts

@@ -0,0 +1,86 @@
+import { createModel } from '@rematch/core';
+import orderBy from 'lodash/orderBy';
+
+import { SearchResultWeb } from '@verdaccio/types';
+
+import type { RootModel } from '.';
+import API from '../api';
+
+const CONSTANTS = {
+  API_DELAY: 300,
+  ABORT_ERROR: 'AbortError',
+};
+
+type SearchState = {
+  suggestions: SearchResultWeb[];
+  controller: AbortController[];
+};
+
+export const search = createModel<RootModel>()({
+  state: {
+    suggestions: [],
+    controller: [],
+  } as SearchState,
+  reducers: {
+    clearRequestQueue(state) {
+      const controllers = state.controller;
+      controllers.forEach((request) => {
+        request?.abort();
+      });
+      return {
+        ...state,
+        controller: [],
+      };
+    },
+    addControllerToQueue(state, { controller }: { controller: AbortController }) {
+      const currentControllers = state.controller;
+      return {
+        ...state,
+        controller: [...currentControllers, controller],
+      };
+    },
+    setError(state) {
+      return {
+        ...state,
+        isError: true,
+      };
+    },
+    saveSearch(state, { suggestions }: { suggestions: SearchResultWeb[] }) {
+      return {
+        ...state,
+        suggestions,
+        isError: null,
+      };
+    },
+  },
+  effects: (dispatch) => ({
+    async getSuggestions({ value }, state) {
+      const basePath = state.configuration.config.base;
+      try {
+        const controller = new window.AbortController();
+        dispatch.search.addControllerToQueue({ controller });
+        const signal = controller.signal;
+        // https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API#Browser_compatibility
+        // FUTURE: signal is not well supported for IE and Samsung Browser
+        const suggestions: SearchResultWeb[] = await API.request(
+          `${basePath}-/verdaccio/data/search/${encodeURIComponent(value)}`,
+          'GET',
+          {
+            signal,
+            headers: {},
+          }
+        );
+        const orderedSuggestions = orderBy(suggestions, ['verdaccioPrivate'], ['desc']);
+        dispatch.search.saveSearch({
+          suggestions: orderedSuggestions,
+        });
+      } catch (error: any) {
+        if (error.name === CONSTANTS.ABORT_ERROR) {
+          dispatch.search.saveSearch({ suggestions: [] });
+        } else {
+          dispatch.search.setError();
+        }
+      }
+    },
+  }),
+});

package/src/store/storage.ts

@@ -0,0 +1,12 @@
+import memoryStorage from 'localstorage-memory';
+
+let storage: Storage;
+try {
+  localStorage.setItem('__TEST__', '');
+  localStorage.removeItem('__TEST__');
+  storage = localStorage;
+} catch (err: any) {
+  storage = memoryStorage;
+}
+
+export default storage;